Cyperpunk-girl-333 Posted October 26, 2022 Share Posted October 26, 2022 Is it possible to make this a section with a code block https://codepen.io/latyr/pen/OOyjmG I'd like to add it as a big of a banner? any ideas on how i would achieve this? Link to comment
Ziggy Posted October 27, 2022 Share Posted October 27, 2022 You might be able to add it as a code block underneath any other content, have you tried adding it to your website? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 Edit page > Add a Code Block > Paste this Codepen code <canvas></canvas> <script id="vertexShader" type="shader"> attribute vec3 aPosition; uniform mat4 u_modelMatrix; uniform mat4 u_viewMatrix; uniform mat4 u_projectionMatrix; uniform float u_time; varying vec3 color; //Noise from https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);} 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 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); 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 // ( N*N points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z *ns.z); // mod(p,N*N) 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 = 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) ) ); } void main() { color = aPosition; float displacement = snoise(aPosition) * u_time; vec3 direction = aPosition - vec3(0.); vec3 position = aPosition + direction * displacement ; gl_Position = u_projectionMatrix * u_viewMatrix * u_modelMatrix * vec4(position, 1.0); gl_PointSize = 0.75; } </script> <script id="fragmentShader" type="shader"> precision mediump float; varying vec3 color; void main() { gl_FragColor = vec4(color.x, color.y, 1., 1.); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <script> class GL { constructor() { this.CANVAS_WIDTH = window.innerWidth; this.CANVAS_HEIGHT = window.innerHeight; this.cvs; this.gl; this.pointsLength = 300000; this.time = 0.; this.modelMatrix = mat4.create(); this.viewMatrix = mat4.create(); this.projectionMatrix = mat4.create(); this.fragment = document.getElementById('fragmentShader').innerHTML; this.vertex = document.getElementById('vertexShader').innerHTML; this.parameters = {}; this.initGL(); this.initShaders(); this.initGeometry(); this.initProgram(); this.initUniform(); let t = [0, 0, -2.5]; mat4.translate(this.modelMatrix, this.modelMatrix, t); this.render(); } initGL() { this.cvs = document.querySelector('canvas'); this.gl = this.cvs.getContext('webgl'); this.gl.enable(this.gl.DEPTH_TEST); this.cvs.style.width = this.CANVAS_WIDTH + 'px'; this.cvs.style.height = this.CANVAS_HEIGHT + 'px'; this.cvs.width = this.CANVAS_WIDTH; this.cvs.height = this.CANVAS_HEIGHT; } initShaders() { this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER); this.gl.shaderSource(this.vShader, this.vertex); this.gl.compileShader(this.vShader); this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER); this.gl.shaderSource(this.fShader, this.fragment); this.gl.compileShader(this.fShader); if (!this.gl.getShaderParameter(this.vShader, this.gl.COMPILE_STATUS)) { console.log(this.gl.getShaderInfoLog(this.vShader)); } if (!this.gl.getShaderParameter(this.fShader, this.gl.COMPILE_STATUS)) { console.log(this.gl.getShaderInfoLog(this.fShader)); } } initUniform() { this.u_time = this.gl.getUniformLocation(this.program, "u_time"); this.u_modelMatrix = this.gl.getUniformLocation(this.program, "u_modelMatrix"); this.u_viewMatrix = this.gl.getUniformLocation(this.program, "u_viewMatrix"); this.u_projectionMatrix = this.gl.getUniformLocation(this.program, "u_projectionMatrix"); } initGeometry() { let vertices = this.createSphere(this.pointsLength, 0.5); this.positionsBuffer = this.gl.createBuffer(); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionsBuffer); this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null); } initProgram() { this.program = this.gl.createProgram(); this.gl.attachShader(this.program, this.vShader); this.gl.attachShader(this.program, this.fShader); this.gl.linkProgram(this.program); this.gl.useProgram(this.program); this.positionAttribLoc = this.gl.getAttribLocation(this.program, 'aPosition'); if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) { console.log(this.gl.getProgramInfoLog(this.program)); } } createSphere(count, size) { var len = count * 3; var positions = new Float32Array(len); for (var i = 0; i < len; i += 3) { let v = {}; let phi = Math.random() * 2 * Math.PI; let costheta = Math.random() * 2 - 1; let u = Math.random(); let theta = Math.acos(costheta); let r = size * Math.cbrt(u); v.x = r * Math.sin(theta) * Math.cos(phi); v.y = r * Math.sin(theta) * Math.sin(phi); v.z = r * Math.cos(theta); positions[i] = v.x; positions[i + 1] = v.y; positions[i + 2] = v.z; } return positions; } render() { this.gl.clearColor(0., 0., 0., 1); this.gl.clear(this.gl.COLOR_BUFFER_BIT); this.gl.viewport(0, 0, this.CANVAS_WIDTH, this.CANVAS_HEIGHT); this.gl.useProgram(this.program); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionsBuffer); this.gl.enableVertexAttribArray(this.positionAttribLoc); this.gl.vertexAttribPointer(this.positionAttribLoc, 3, this.gl.FLOAT, false, 0, 0); this.time += 0.1; this.time = this.time % 40.; this.gl.uniform1f(this.u_time, this.time); let fov = 60; mat4.perspective(this.projectionMatrix, fov * (Math.PI / 180), this.CANVAS_WIDTH / this.CANVAS_HEIGHT, 0.1, 100.0); this.gl.uniformMatrix4fv(this.u_modelMatrix, false, this.modelMatrix); this.gl.uniformMatrix4fv(this.u_viewMatrix, false, this.viewMatrix); this.gl.uniformMatrix4fv(this.u_projectionMatrix, false, this.projectionMatrix); this.gl.drawArrays(this.gl.POINTS, 0, this.pointsLength / 3); }} let xp = new GL(); function raf() { requestAnimationFrame(raf); xp.render(); } raf(); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Cyperpunk-girl-333 Posted November 6, 2022 Author Share Posted November 6, 2022 Thank you so much @tuanphan I have applied it here https://spacept.squarespace.com/freebies I'm just wondering on mobile and desktop view its in a container that leaves a bit of negative black space below the section 1 and section 2. I have tried removing canvas to get rid of the black space but that didn't work. How would I get this code block to line up in the site section without that black space? Could you please see url Link to comment
tuanphan Posted November 10, 2022 Share Posted November 10, 2022 On 11/7/2022 at 6:39 AM, Cyperpunk-girl-333 said: Thank you so much @tuanphan I have applied it here https://spacept.squarespace.com/freebies I'm just wondering on mobile and desktop view its in a container that leaves a bit of negative black space below the section 1 and section 2. I have tried removing canvas to get rid of the black space but that didn't work. How would I get this code block to line up in the site section without that black space? Could you please see url You mean these space? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Cyperpunk-girl-333 Posted November 10, 2022 Author Share Posted November 10, 2022 Yes correct i mean that space, ideally i would like the code pen to be behind the navigation and buy me a coffee button and then also in the first section and the moment it's in a bit of a weird container also is there a way to resize the area where a subscriber would add the email ? ideally lining it up with the length of the title text Link to comment
Cyperpunk-girl-333 Posted November 10, 2022 Author Share Posted November 10, 2022 Are you able to help @tuanphan Link to comment
Cyperpunk-girl-333 Posted December 1, 2022 Author Share Posted December 1, 2022 On 11/10/2022 at 4:59 PM, tuanphan said: You mean these space? How would i remove that unwanted space @tuanphan Link to comment
Cyperpunk-girl-333 Posted December 5, 2022 Author Share Posted December 5, 2022 @tuanphan would you know how to remove that space that is correct Link to comment
tuanphan Posted December 10, 2022 Share Posted December 10, 2022 On 12/6/2022 at 6:32 AM, Cyperpunk-girl-333 said: @tuanphan would you know how to remove that space that is correct You mean this space? Have you tried resize section height in FE yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Cyperpunk-girl-333 Posted December 12, 2022 Author Share Posted December 12, 2022 No it's the space with the codepen you helped me apply on the freebies page (coming soon) i will attach the link here https://www.spacept.com.au/freebies-css-javascript-for-squarespace-websites/code-plugins-for-squarespace Link to comment
Ziggy Posted December 12, 2022 Share Posted December 12, 2022 Have you tried adding: position: fixed; top: 0; left: 0; to the canvas properties? You may need to adjust the z-index. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Cyperpunk-girl-333 Posted December 13, 2022 Author Share Posted December 13, 2022 <canvas></canvas> <script id="vertexShader" type="shader"> attribute vec3 aPosition; (((((I tired to add the new postion here)))))) it didn't work uniform mat4 u_modelMatrix; uniform mat4 u_viewMatrix; uniform mat4 u_projectionMatrix; uniform float u_time; varying vec3 color; //Noise from https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);} 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 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); 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 // ( N*N points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z *ns.z); // mod(p,N*N) 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 = 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) ) ); } void main() { color = aPosition; float displacement = snoise(aPosition) * u_time; vec3 direction = aPosition - vec3(0.); vec3 position = aPosition + direction * displacement ; gl_Position = u_projectionMatrix * u_viewMatrix * u_modelMatrix * vec4(position, 1.0); gl_PointSize = 0.75; } </script> <script id="fragmentShader" type="shader"> precision mediump float; varying vec3 color; void main() { gl_FragColor = vec4(color.x, color.y, 1., 1.); } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <script> class GL { constructor() { this.CANVAS_WIDTH = window.innerWidth; this.CANVAS_HEIGHT = window.innerHeight; this.cvs; this.gl; this.pointsLength = 300000; this.time = 0.; this.modelMatrix = mat4.create(); this.viewMatrix = mat4.create(); this.projectionMatrix = mat4.create(); this.fragment = document.getElementById('fragmentShader').innerHTML; this.vertex = document.getElementById('vertexShader').innerHTML; this.parameters = {}; this.initGL(); this.initShaders(); this.initGeometry(); this.initProgram(); this.initUniform(); let t = [0, 0, -2.5]; mat4.translate(this.modelMatrix, this.modelMatrix, t); this.render(); } initGL() { this.cvs = document.querySelector('canvas'); this.gl = this.cvs.getContext('webgl'); this.gl.enable(this.gl.DEPTH_TEST); this.cvs.style.width = this.CANVAS_WIDTH + 'px'; this.cvs.style.height = this.CANVAS_HEIGHT + 'px'; this.cvs.width = this.CANVAS_WIDTH; this.cvs.height = this.CANVAS_HEIGHT; } initShaders() { this.vShader = this.gl.createShader(this.gl.VERTEX_SHADER); this.gl.shaderSource(this.vShader, this.vertex); this.gl.compileShader(this.vShader); this.fShader = this.gl.createShader(this.gl.FRAGMENT_SHADER); this.gl.shaderSource(this.fShader, this.fragment); this.gl.compileShader(this.fShader); if (!this.gl.getShaderParameter(this.vShader, this.gl.COMPILE_STATUS)) { console.log(this.gl.getShaderInfoLog(this.vShader)); } if (!this.gl.getShaderParameter(this.fShader, this.gl.COMPILE_STATUS)) { console.log(this.gl.getShaderInfoLog(this.fShader)); } } initUniform() { this.u_time = this.gl.getUniformLocation(this.program, "u_time"); this.u_modelMatrix = this.gl.getUniformLocation(this.program, "u_modelMatrix"); this.u_viewMatrix = this.gl.getUniformLocation(this.program, "u_viewMatrix"); this.u_projectionMatrix = this.gl.getUniformLocation(this.program, "u_projectionMatrix"); } initGeometry() { let vertices = this.createSphere(this.pointsLength, 0.5); this.positionsBuffer = this.gl.createBuffer(); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionsBuffer); this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null); } initProgram() { this.program = this.gl.createProgram(); this.gl.attachShader(this.program, this.vShader); this.gl.attachShader(this.program, this.fShader); this.gl.linkProgram(this.program); this.gl.useProgram(this.program); this.positionAttribLoc = this.gl.getAttribLocation(this.program, 'aPosition'); if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) { console.log(this.gl.getProgramInfoLog(this.program)); } } createSphere(count, size) { var len = count * 3; var positions = new Float32Array(len); for (var i = 0; i < len; i += 3) { let v = {}; let phi = Math.random() * 2 * Math.PI; let costheta = Math.random() * 2 - 1; let u = Math.random(); let theta = Math.acos(costheta); let r = size * Math.cbrt(u); v.x = r * Math.sin(theta) * Math.cos(phi); v.y = r * Math.sin(theta) * Math.sin(phi); v.z = r * Math.cos(theta); positions[i] = v.x; positions[i + 1] = v.y; positions[i + 2] = v.z; } return positions; } render() { this.gl.clearColor(0., 0., 0., 1); this.gl.clear(this.gl.COLOR_BUFFER_BIT); this.gl.viewport(0, 0, this.CANVAS_WIDTH, this.CANVAS_HEIGHT); this.gl.useProgram(this.program); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionsBuffer); this.gl.enableVertexAttribArray(this.positionAttribLoc); this.gl.vertexAttribPointer(this.positionAttribLoc, 3, this.gl.FLOAT, false, 0, 0); this.time += 0.1; this.time = this.time % 40.; this.gl.uniform1f(this.u_time, this.time); let fov = 60; mat4.perspective(this.projectionMatrix, fov * (Math.PI / 180), this.CANVAS_WIDTH / this.CANVAS_HEIGHT, 0.1, 100.0); this.gl.uniformMatrix4fv(this.u_modelMatrix, false, this.modelMatrix); this.gl.uniformMatrix4fv(this.u_viewMatrix, false, this.viewMatrix); this.gl.uniformMatrix4fv(this.u_projectionMatrix, false, this.projectionMatrix); this.gl.drawArrays(this.gl.POINTS, 0, this.pointsLength / 3); }} let xp = new GL(); function raf() { requestAnimationFrame(raf); xp.render(); } raf(); </script> Link to comment
Ziggy Posted December 13, 2022 Share Posted December 13, 2022 I would try adding a class to the <canvas class="yourclasshere"></canvas> and then applying the position CSS to that class. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Cyperpunk-girl-333 Posted December 28, 2022 Author Share Posted December 28, 2022 What would I apply the class as? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment