Jump to content

Recommended Posts

  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

image.thumb.png.fcb99e8c6ba4eeea5b8b17974b898dc5.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

<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

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 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.