codepen

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?  

 

You might be able to add it as a code block underneath any other content, have you tried adding it to your website?

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>

 

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

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?

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

Are you able to help @tuanphan

On 11/10/2022 at 4:59 PM, tuanphan said:

You mean these space?

How would i remove that unwanted space @tuanphan

 

@tuanphan would you know how to remove that space that is correct

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?

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

Have you tried adding:

    position: fixed;
    top: 0;
    left: 0;

to the canvas properties? You may need to adjust the z-index.

<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>

I would try adding a class to the <canvas class="yourclasshere"></canvas> and then applying the position CSS to that class.

What would I apply the class as?