Jump to content

Recommended Posts

  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

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

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

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
  • 3 weeks later...
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?

image.thumb.png.4de1bab0052d7b3d7dc776e753c7f621.png

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

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