jgj

Tagging @tuanphan, sorry to bother you! You seem like the biggest expert on this forum. Would be super appreciative if you could help!!! Thank you

Example: it goes below the footer, instead of inside the code block My code so far is below <script id="vertexShader" type="x-shader/x-vertex"> #ifdef GL_ES precision mediump float; #endif attribute vec3 aPosition; void main() { gl_Position = vec4(aPosition, 1.0); } </script> <script id="fragmentShader" type="x-shader/x-fragment"> #define BLACK vec3(0.,0.,0.) #define WHITE vec3(1.,1.,1.) uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; const float patternSize = 60.; const float noiseScale1 = 85.5; const float noiseScale2 = 20.3; void main() { vec2 nbRepetitions = floor(u_resolution / patternSize); vec2 tileOrigin = (gl_FragCoord.xy - (u_resolution - patternSize * nbRepetitions) / 2.0) / patternSize; vec2 pos = fract(tileOrigin); float color = 0.0; const float threshold = 1.0; const float minthreshold = threshold + 0.1; color += fill(rectSDF( rotate(pos, snoise(vec3(u_time / noiseScale1, floor(tileOrigin) / noiseScale1)) * 4.0 * PI - 2.0), vec2(minthreshold + threshold * snoise(vec3(u_time / 4.0, floor(tileOrigin) / noiseScale2)) , 5.0) ), 0.5); // logo pos = gl_FragCoord.xy - vec2(u_resolution - 60.); float dist = dot(pos, pos); float radius = 100.; color = clamp( color, 0.0, 1.0 ); gl_FragColor = vec4(mix(BLACK, WHITE, color), 1.); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> <script> console.clear() const lib = ` /* */ precision highp float; #ifdef GL_ES precision mediump float; #endif // Maths #define QTR_PI 0.78539816339 #define HALF_PI 1.5707963267948966192313216916398 #define PI 3.1415926535897932384626433832795 #define TWO_PI 6.2831853071795864769252867665590 #define TAU 6.2831853071795864769252867665590 #define PHI 1.618033988749894848204586834 #define EPSILON 0.0000001 float round(float f) { return f < 0.5 ? 0.0 : 1.0; } float random(float x) { return fract(sin(x) * 1e4); } float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); } // Simplex noise 3D // https://github.com/ashima/webgl-noise/wiki vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } vec4 taylorInvSqrt(vec4 r){ return 1.79284291400159 - 0.85373472095314 * r; } float snoise(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); // x0 = x0 - 0.0 + 0.0 * C.xxx; // x1 = x0 - i1 + 1.0 * C.xxx; // x2 = x0 - i2 + 2.0 * C.xxx; // x3 = x0 - 1.0 + 3.0 * C.xxx; vec3 x1 = x0 - i1 + C.xxx; vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y // Permutations i = mod289(i); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 ) ) + i.y + vec4(0.0, i1.y, i2.y, 1.0 ) ) + i.x + vec4(0.0, i1.x, i2.x, 1.0 ) ); // Gradients: 7x7 points over a square, mapped onto an octahedron. // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294) float n_ = 0.142857142857; // 1.0/7.0 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ *ns.x + ns.yyyy; vec4 y = y_ *ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0; //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0; vec4 s0 = floor(b0)*2.0 + 1.0; vec4 s1 = floor(b1)*2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } // Style /*float aastep(float threshold, float value) { float afwidth = 0.7 * length(vec2(dFdx(value), dFdy(value))); return smoothstep(threshold-afwidth, threshold+afwidth, value); }*/ float aastep(float threshold, float value) { return smoothstep(threshold - 0.04, threshold + 0.04, value); } float smoothaastep(float threshold, float value, float smooth) { return smoothstep(threshold - smooth, threshold + smooth, value); } float fill(float x, float size) { return 1.-aastep(size, x); } float smoothfill(float x, float size, float smooth) { return 1.-smoothaastep(size, x, smooth); } float stroke(float x, float size, float w) { float d = aastep(size, x+w*.5) - aastep(size, x-w*.5); return clamp(d, 0., 1.); } float smoothstroke(float x, float size, float w, float smooth) { float d = smoothaastep(size, x+w*.5, smooth) - smoothaastep(size, x-w*.5, smooth); return clamp(d, 0., 1.); } vec3 bridge(vec3 c,float d,float s,float w) { c *= 1.-stroke(d,s,w*2.); return c + stroke(d,s,w); } float flip(float v, float pct) { return mix(v, 1.-v, pct); } // Transforms vec2 rotate(vec2 st, float a) { st = mat2(cos(a),-sin(a), sin(a),cos(a))*(st-.5); return st+.5; } vec2 scale(vec2 st, vec2 s) { return (st-.5)*s+.5; } // SDF float circleSDF(vec2 st) { return length(st-.5)*2.; } float rectSDF(vec2 st, vec2 s) { st = st*2.-1.; return max( abs(st.x/s.x), abs(st.y/s.y) ); } float crossSDF(vec2 st, float s) { vec2 size = vec2(.25, s); return min( rectSDF(st.xy,size.xy), rectSDF(st.xy,size.yx)); } float flowerSDF(vec2 st, int N) { st = st*2.-1.; float r = length(st)*2.; float a = atan(st.y,st.x); float v = float(N)*.5; return 1.-(abs(cos(a*v))*.5+.5)/r; } float heartSDF(vec2 st) { st -= vec2(.5,.8); float r = length(st)*5.; st = normalize(st); return r - ((st.y*pow(abs(st.x),0.67))/ (st.y+1.5)-(2.)*st.y+1.26); } float hexSDF(vec2 st) { st = abs(st*2.-1.); return max(abs(st.y), st.x * 0.866025 + st.y * 0.5); } float polySDF(vec2 st, int V) { st = st*2.-1.; float a = atan(st.x,st.y)+PI; float r = length(st); float v = TAU/float(V); return cos(floor(.5+a/v)*v-a)*r; } float raysSDF(vec2 st, int N) { st -= .5; return fract(atan(st.y,st.x)/TAU*float(N)); } float spiralSDF(vec2 st, float t) { st -= .5; float r = dot(st,st); float a = atan(st.y,st.x); return abs(sin(fract(log(r)*t+a*0.159))); } float starSDF(vec2 st, int V, float s) { st = st*4.-2.; float a = atan(st.y, st.x)/TAU; float seg = a * float(V); a = ((floor(seg) + 0.5)/float(V) + mix(s,-s,step(.5,fract(seg)))) * TAU; return abs(dot(vec2(cos(a),sin(a)), st)); } float triSDF(vec2 st) { st = (st*2.-1.)*2.; return max(abs(st.x) * 0.866025 + st.y * 0.5, -st.y * 0.5); } float rhombSDF(vec2 st) { return max(triSDF(st), triSDF(vec2(st.x,1.-st.y))); } float vesicaSDF(vec2 st, float w) { vec2 offset = vec2(w*.5,0.); return max( circleSDF(st-offset), circleSDF(st+offset)); } `; const vertexShader = document.getElementById('vertexShader').innerText; const fragmentShader = lib + document.getElementById('fragmentShader').innerText; let myShader; function setup() { pixelDensity(1); createCanvas(windowWidth, windowHeight*.6, WEBGL); noStroke(); // create and initialize the shader myShader = createShader(vertexShader, fragmentShader); shader(myShader); myShader.setUniform('u_resolution', [width, height]); } function draw() { myShader.setUniform('u_mouse', [mouseX, mouseY]); myShader.setUniform('u_time', millis()/1000.); quad(-1,-1, -1,1, 1,1, 1,-1); } function windowResized() { resizeCanvas(windowWidth, windowHeight*.6); myShader.setUniform('u_resolution', [width, height]); } </script> <style> #block-yui_3_17_2_1_1653608474127_6581 { overflow: hidden; padding: 0px 0px 17px; max-width: 100vw; width: 100vw; height: 100vh; max-height: 60vh; } </style>

Site URL: https://plantain-mustard-p42a.squarespace.com/ I'm trying to add something like this custom background found here https://codepen.io/MAKIO135/pen/BbqLgR to the first section of my home/landing page of my website. My steps that I've tried Add a blank section Create a code block Paste the HTML scripts Add my own <script></script> and paste the javascript code inside that This all works and it shows up on my page, it's just not in the specific section that i want it. It adds it to the bottom of the page (it goes below my Footer). Is there a way to contain the code to the specific section that I created? Any help is much appreciated. Thanks in advance!