Snippet Zone

GLSL Sierpiński Glitch Texture #3

```
const vert = `#version 300 es
```
```
layout(location = 0) in vec3 position;
```
```
out vec2 uv;
```
```
void main(void) {
```
```
  uv = position.xy * 0.5 + 0.5;
```
```
  gl_Position = vec4(position, 1.0);
```
```
}
```
```
`;
```
```
 
```
```
const frag1 = `#version 300 es
```
```
precision highp float;
```
```
uniform float time;
```
```
uniform float dx;
```
```
uniform float dy;
```
```
 
```

float w2 = 1.0 / float(${innerWidth * 2});

float w10 = 1.0 / (float(${innerWidth * 2}) * 100.);

```
float convert = 3.141592653589 / 180.;
```
```
 
```
```
float sn;
```
```
float cs;
```
```
 
```
```
out vec4 fragColor;
```
```
 
```
```
void main(void) {
```

  vec2 uv = gl_FragCoord.xy / vec2(float(${innerWidth * 2}), float(${innerHeight * 2}));

```
 
```

  float xp = uv.x * float(${innerWidth * 2});

  float yp = (1. - uv.y) * float(${innerHeight * 2});

```
  int x = 10 | 2;
```
```
  int xp2 = int(xp) << 1; 
```

  float t = mod(float(int(yp) | int(xp + yp * .1) ) * (xp + dx) * (w10), 6.283185307179586);

```
 
```
```
  if (t < 0.) {
```

    sn = 1.27323954 * t + .405284735 * t * t;

```
  } else {
```

    sn = 1.27323954 * t - 0.405284735 * t * t;

```
  }
```
```
 
```

  t = mod(float( (xp2 | int(yp + xp * .1 + dy) )) * convert, 6.283185307179586);

```
 
```
```
  t += 1.57079632;
```
```
  if (t > 3.14159265) {
```
```
    t -= 6.28318531;
```
```
  }
```
```
  if (t < 0.) {
```

    cs = 1.27323954 * t + 0.405284735 * t * t;

```
  } else {
```

    cs = 1.27323954 * t - 0.405284735 * t * t;

```
  }
```
```
 
```
```
  float c1 = 30. * (sn - cs);
```
```
 
```
```
  if (c1 < 0.) c1 = 255. - c1;
```

  c1 = float((int(c1) << 4 | int(c1)) & 255) / 255.;

```
 
```
```
  fragColor = vec4(c1, c1, c1, 1.0);
```
```
} 
```
```
`;
```
```
 
```
```
const frag2 = `#version 300 es
```
```
precision highp float;
```
```
in vec2 uv;
```
```
 
```

  // The max kernel size (impacts performance)

```
#define maxKernel 1.0
```
```
 
```

// The max offset (doesn't impact performance)

```
#define maxOffset 34.0
```
```
uniform sampler2D uTexture; 
```
```
 
```
```
 
```

// https://www.shadertoy.com/view/mdGcRh

vec3 fastBlur(vec2 uv, vec2 texel, vec2 kd)

```
{
```
```
float r = kd.x * kd.y;
```
```
float rr = 1.0/r;
```
```
vec3 col = vec3(0.0);
```
```
float a = 1.0;
```
```
 
```

for (float x = -r; x <= r; x += kd.y) {

for (float y = -r; y <= r; y += kd.y)  {

```
a++;
```
```
vec2 c = uv + vec2(x,y) * texel;
```

col += texture(uTexture, c + fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453) * texel * kd.y * 2.0 - kd.yy * texel).rgb * (2.0 - distance(vec2(x,y) * rr, vec2(0.0)));

```
}
```
```
}
```
```
 
```
```
return col / a;
```
```
}
```
```
 
```
```
 
```
```
out vec4 fragColor;
```
```
void main(void) {
```
```
  vec4 color = texture(uTexture, uv);
```

  vec4 colorB = texture(uTexture, vec2(uv.x, 1. - uv.y));

  vec3 result = (color.rgb - colorB.rgb) * 1.2;

```
 
```
```
    float amt = .4;
```

    vec2 texel = vec2(1.0)/ vec2(float(${innerWidth * 2}), float(${innerHeight * 2}));

```
 
```

    vec2 kd = round(vec2(amt * maxKernel + 1.0, amt * maxOffset + 1.0));

```
 
```

    vec3 blur = fastBlur(uv, texel, kd);

```
 
```
```
  fragColor = vec4(result, color.a);
```
```
}
```
```
`;
```
```
 
```
```
  const frag3 = `#version 300 es
```
```
precision highp float;
```
```
in vec2 uv;
```
```
 
```

  // The max kernel size (impacts performance)

```
#define maxKernel 4.0
```
```
 
```

// The max offset (doesn't impact performance)

```
#define maxOffset 34.0
```
```
uniform sampler2D uTexture; 
```
```
 
```
```
 
```

// https://www.shadertoy.com/view/mdGcRh

vec3 fastBlur(vec2 uv, vec2 texel, vec2 kd)

```
{
```
```
float r = kd.x * kd.y;
```
```
float rr = 1.0/r;
```
```
vec3 col = vec3(0.0);
```
```
float a = 1.0;
```
```
 
```

for (float x = -r; x <= r; x += kd.y) {

for (float y = -r; y <= r; y += kd.y)  {

```
a++;
```
```
      vec2 c = uv + vec2(x,y) * texel;
```
```
 
```
```
      col += texture(
```
```
 
```
```
      uTexture, 
```
```
 
```
```
      c 
```

      + fract(sin(dot(c, vec2(2.9898, 78.233))) * 13758.5453) * texel * kd.y * 2.4

```
      - kd.yy * texel
```
```
 
```

      ).rgb * (2.0 - distance(vec2(x,y) * rr, vec2(0.0)));

```
}
```
```
}
```
```
 
```
```
return col / a;
```
```
}
```
```
 
```
```
 
```
```
out vec4 fragColor;
```
```
void main(void) {
```
```
  vec4 color = texture(uTexture, uv);
```
```
 
```
```
    float amt = .4;
```

    vec2 texel = vec2(1.0)/ vec2(float(${innerWidth * 2}), float(${innerHeight * 2}));

```
 
```

    vec2 kd = round(vec2(amt * maxKernel + 1.0, amt * maxOffset + 1.0));

```
 
```

  vec4 blur = vec4(fastBlur(uv, texel, kd), 1.);

```
    //1-(1-A)*(1-B)
```

  vec3 f = 1. - (1. - color.rgb) * (1. - blur.rgb);

```
 
```
```
 
```
```
  fragColor = vec4(f.rgb, 1.);
```
```
} 
```
```
`;
```
```
 
```
```
 
```
```
 
```

document.body.style.background = '#000';

```
const gl = document.body
```

  .appendChild(document.createElement('canvas'))

```
  .getContext('webgl2');
```
```
 
```
```
Object.assign(gl.canvas.style, {
```
```
  position: 'absolute',
```
```
  left: 0,
```
```
  top: 0
```
```
});
```
```
 
```
```
const s = 1;
```
```
const verts = new Float32Array([
```
```
  -s, -s, 0,
```
```
  s, -s, 0,
```
```
  -s, s, 0,
```
```
  s, s, 0,
```
```
]);
```
```
 
```
```
const buffer = gl.createBuffer();
```
```
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
```

gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);

```
 
```

function createShaderProgram(vertexSource, fragmentSource) {

  const vs = gl.createShader(gl.VERTEX_SHADER);

```
  gl.shaderSource(vs, vertexSource);
```
```
  gl.compileShader(vs);
```
```
 
```

  const fs = gl.createShader(gl.FRAGMENT_SHADER);

```
  gl.shaderSource(fs, fragmentSource);
```
```
  gl.compileShader(fs);
```
```
 
```
```
  const program = gl.createProgram();
```
```
  gl.attachShader(program, vs);
```
```
  gl.attachShader(program, fs);
```
```
  gl.linkProgram(program);
```
```
 
```

  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {

    console.error('Could not link program:', gl.getProgramInfoLog(program));

```
  }
```
```
 
```
```
  return program;
```
```
}
```
```
 
```

const program1 = createShaderProgram(vert, frag1);

const program2 = createShaderProgram(vert, frag2);

const program3 = createShaderProgram(vert, frag3);

```
 
```

const framebuffer1 = gl.createFramebuffer();

const framebuffer2 = gl.createFramebuffer();

```
const texture1 = gl.createTexture();
```
```
const texture2 = gl.createTexture();
```
```
 
```

gl.bindTexture(gl.TEXTURE_2D, texture1);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, innerWidth, innerHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

```
 
```

gl.bindTexture(gl.TEXTURE_2D, texture2);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, innerWidth, innerHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

```
 
```

gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer1);

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0);

```
 
```

gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer2);

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture2, 0);

```
 
```
```
const onResize = () => {
```
```
  gl.canvas.width = innerWidth * 2;
```
```
  gl.canvas.height = innerHeight * 2;
```

  gl.canvas.style.width = innerWidth + 'px'

  gl.canvas.style.height = innerHeight + 'px'

  gl.viewport(0, 0, innerWidth * 2, innerHeight * 2);

  gl.bindTexture(gl.TEXTURE_2D, texture1);

  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, innerWidth * 2, innerHeight * 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

  gl.bindTexture(gl.TEXTURE_2D, texture2);

  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, innerWidth * 2, innerHeight * 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

```
};
```
```
 
```
```
window.onresize = onResize;
```
```
onResize();
```
```
 
```
```
gl.disable(gl.DEPTH_TEST);
```
```
 
```
```
let mx = 0;
```
```
let my = 0;
```
```
let dx = 0;
```
```
let dy = 0;
```
```
 
```
```
window.onpointermove = e => {
```
```
  mx = e.clientX;
```
```
  my = e.clientY;
```
```
};
```
```
 
```
```
const loop = () => {
```
```
 
```

  dx += (mx * 2 - (innerWidth) - dx) / 8;

```
  dy += (my * 2 - dy) / 8;
```
```
 
```
```
  // first pass
```

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer1);

```
  gl.useProgram(program1);
```
```
 
```

  const mxUniform = gl.getUniformLocation(program1, 'dx');

```
  gl.uniform1f(mxUniform, dx);
```
```
 
```

  const myUniform = gl.getUniformLocation(program1, 'dy');

```
  gl.uniform1f(myUniform, dy);
```
```
 
```

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  const pos1 = gl.getAttribLocation(program1, 'position');

```
  gl.enableVertexAttribArray(pos1);
```

  gl.vertexAttribPointer(pos1, 3, gl.FLOAT, false, 0, 0);

```
  gl.clearColor(0, 0, 0, 1);
```
```
  gl.clear(gl.COLOR_BUFFER_BIT);
```

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

```
 
```
```
  // second pass
```

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer2);

```
  gl.useProgram(program2);
```

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  const pos2 = gl.getAttribLocation(program2, 'position');

```
  gl.enableVertexAttribArray(pos2);
```

  gl.vertexAttribPointer(pos2, 3, gl.FLOAT, false, 0, 0);

  const uTexture = gl.getUniformLocation(program2, 'uTexture');

```
  gl.uniform1i(uTexture, 0);
```
```
  gl.activeTexture(gl.TEXTURE0);
```

  gl.bindTexture(gl.TEXTURE_2D, texture1);

```
  gl.clearColor(0, 0, 0, 1);
```
```
  gl.clear(gl.COLOR_BUFFER_BIT);
```

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

```
 
```
```
  // third pass
```

  gl.bindFramebuffer(gl.FRAMEBUFFER, null);

```
  gl.useProgram(program3);
```

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  const pos3 = gl.getAttribLocation(program3, 'position');

```
  gl.enableVertexAttribArray(pos3);
```

  gl.vertexAttribPointer(pos3, 3, gl.FLOAT, false, 0, 0);

  const u2Texture = gl.getUniformLocation(program3, 'uTexture');

```
  gl.uniform1i(u2Texture, 0);
```
```
  gl.activeTexture(gl.TEXTURE0);
```

  gl.bindTexture(gl.TEXTURE_2D, texture2);

```
  gl.clearColor(0, 0, 0, 1);
```
```
  gl.clear(gl.COLOR_BUFFER_BIT);
```

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

```
 
```
```
  requestAnimationFrame(loop);
```
```
};
```
```
loop();
```

this old thing was tricky to port to glsl, canvas port was easy (codepen here) – used gpt a bit for glsl version… got it eventually: take a look

February 16, 2025

// binary // color // filters // glsl // graphics // hacks // hex // javascript // math // webgl

WebGL Shader Example

```
(() => {
```
```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    void main(void) {
```
```
      gl_Position = vec4(vec, 1.);
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    #ifdef GL_ES
```
```
    precision highp float;
```
```
    #endif
```
```
    uniform float time;
```
```
    void main(void) {
```

      vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);

      float w = 1. + cos(uv.y * 60.) * cos(uv.x * 50. + time * 30.);

      gl_FragColor = vec4(uv.x, w * .5, w, 1.);

```
    }
```
```
  `
```
```
 
```

  document.body.style.background = '#000'

```
  const gl = document.body
```

    .appendChild(document.createElement('canvas'))

```
    .getContext('webgl')
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: 0,
```
```
    top: 0
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const s = 1;
```
```
    const verts = [
```
```
      -s, -s, 0,
```
```
       s, -s, 0,
```
```
      -s,  s, 0,
```
```
       s,  s, 0,
```
```
    ]
```
```
 
```
```
    const leng = verts.length / 3
```

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

```
 
```

    const vs = createShader(VERTEX_SHADER)

```
    shaderSource(vs, vert)
```
```
    compileShader(vs)
```
```
 
```

    const fs = createShader(FRAGMENT_SHADER)

```
    const sp = createProgram()
```
```
 
```
```
    shaderSource(fs, frag)
```
```
    compileShader(fs)
```
```
    attachShader(sp, vs)
```
```
    attachShader(sp, fs)
```
```
    linkProgram(sp)
```
```
    useProgram(sp)
```
```
 
```

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

```
    enableVertexAttribArray(vec)
```
```
 
```
```
    onresize = () => {
```
```
      const { canvas } = gl 
```
```
      canvas.width = innerWidth
```
```
      canvas.height = innerHeight
```

      viewport(0, 0, innerWidth, innerHeight)

```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    disable(DEPTH_TEST)
```
```
    enable(BLEND)
```

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
    const startTime = Date.now();
```
```
 
```
```
    function loop() {
```

      const time = (Date.now() - startTime) / 1000

      const uniformTime = gl.getUniformLocation(sp, 'time');

```
      gl.uniform1f(uniformTime, time);
```
```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```

      drawArrays(TRIANGLE_STRIP, 0, leng)

```
      requestAnimationFrame(loop)
```
```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

A basic shader setup. This is realistic minus the use of a with statement…

March 13, 2022

// 3d // glsl // javascript // shaders // webgl

Non-perspective WebGL Texture

```
(() => {
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0
```
```
  ])
```
```
 
```

  const pointSize = Math.max(Math.min(10, ~~(innerWidth / 70)), 3);

```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.);

```
      gl_PointSize = ${pointSize}.;
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    #ifdef GL_ES
```
```
    precision highp float;
```
```
    #endif
```
```
    void main(void) {
```

      vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);

      gl_FragColor = vec4(uv.x, 0., cos(uv.y * 60.), .4);

```
    }
```
```
  `
```
```
 
```

  document.body.style.background = '#333'

```
  const gl = document.body
```

    .appendChild(document.createElement('canvas'))

```
    .getContext('webgl')
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: '50%',
```
```
    top: '50%',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    outline: '1px solid gray'
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const NUM = 3
```
```
    const s = .5;
```
```
    const verts = [
```
```
      -s, -s, 0,
```
```
       s, -s, 0,
```
```
      -s,  s, 0,
```
```
       s,  s, 0,
```
```
    ]
```
```
 
```
```
    //  1.0,  1.0,
```
```
    // -1.0,  1.0,
```
```
    //  1.0, -1.0,
```
```
    // -1.0, -1.0,
```
```
 
```
```
    // for (let i = 0; i < NUM; i++) {
```
```
    //   verts.push(
```
```
    //     Math.random() * 1 - 0.5,
```
```
    //     Math.random() * 1 - 0.5,
```
```
    //     Math.random() * 1 - 0.5
```
```
    //   )
```
```
    // }
```
```
 
```
```
    const leng = verts.length / 3
```

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

```
 
```

    const vs = createShader(VERTEX_SHADER)

```
    shaderSource(vs, vert)
```
```
    compileShader(vs)
```
```
 
```

    const fs = createShader(FRAGMENT_SHADER)

```
    const sp = createProgram()
```
```
 
```
```
    shaderSource(fs, frag)
```
```
    compileShader(fs)
```
```
    attachShader(sp, vs)
```
```
    attachShader(sp, fs)
```
```
    linkProgram(sp)
```
```
    useProgram(sp)
```
```
 
```

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

```
    enableVertexAttribArray(vec)
```
```
 
```

    const matLoc = getUniformLocation(sp, 'mat')

```
 
```
```
    function rot(x, y, z) {
```

      // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e

```
 
```
```
      const sinA = Math.sin(x)
```
```
      const cosA = Math.cos(x)
```
```
      const sinB = Math.sin(y)
```
```
      const cosB = Math.cos(y)
```
```
      const sinY = Math.sin(z)
```
```
      const cosY = Math.cos(z)
```
```
 
```
```
      m[0] = cosA * cosB
```

      m[1] = cosA * sinB * sinY - sinA * cosY

      m[2] = cosA * sinB * cosY + sinA * sinY

```
      m[3] = 0
```
```
 
```
```
      m[4] = sinA * cosB
```

      m[5] = sinA * sinB * sinY + cosA * cosY

      m[6] = sinA * sinB * cosY - cosA * sinY

```
      m[7] = 0
```
```
 
```
```
      m[8] = -sinB
```
```
      m[9] = cosB * sinY
```
```
      m[10] = cosB * cosY
```
```
      m[11] = m[12] = m[13] = 0
```
```
      m[15] = 1
```
```
 
```

      uniformMatrix4fv(matLoc, false, m)

```
    }
```
```
 
```
```
    onresize = () => {
```
```
      const { canvas } = gl
```

      const size = Math.min(innerWidth, innerHeight) - 20

      canvas.width = canvas.height = size

```
      viewport(0, 0, size, size)
```
```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    let rx = 0, ry = 0
```
```
 
```
```
    disable(DEPTH_TEST)
```
```
    enable(BLEND)
```

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
    function loop() {
```
```
      rot(rx += .01, ry += .01, 0)
```
```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```

      drawArrays(TRIANGLE_STRIP, 0, leng)

      window.requestAnimationFrame(loop)

```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

Forked from a previous example – toying with the idea of doing some kind of complex low level webgl… not sure, might end up using THREE… Please excuse some of the dead code here…

February 23, 2022

// canvas // webgl

Many WebGL Constants

```
console.log(
```

  Object.getOwnPropertyNames(WebGLRenderingContext)

```
)
```

January 20, 2022

// tricks // webgl

Speed Coded Space

```
(() => {
```
```
  const TWO_PI = Math.PI * 2;
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0
```
```
  ])
```
```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.0);

```
      gl_PointSize = 2.0;
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    void main(void) {
```

      gl_FragColor = vec4(1., 1., 1., .25);

```
    }
```
```
  `
```
```
 
```

  document.body.style.background = '#232323'

```
  const gl = document.body
```

    .appendChild(document.createElement('canvas'))

```
    .getContext('webgl', {
```
```
      preserveDrawingBuffer: true,
```

      powerPreference: 'high-performance'

```
    })
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: '50%',
```
```
    top: '50%',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    outline: '1px solid gray'
```
```
  })
```
```
 
```
```
 
```
```
  with(gl) {
```
```
    const NUM = 50
```
```
    const radius = 0.7
```
```
    let verts = []
```
```
 
```
```
    // Superformula (equations from):
```

    // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333

    // http://en.wikipedia.org/wiki/Superformula

    function superShape(a, b, m, n1, n2, n3, scale, x = 0, y = 0, z = 0, rx=0, ry=0, rz=0) {

      const { random, pow, abs, cos, sin } = Math

      // with(Math) { // destrucuring vs the dreaded `with`

```
        let r = 0
```
```
        let p = 0
```
```
        let xp = 0
```
```
        let yp = 0
```
```
        let zp = 0
```
```
 
```
```
        let rotX = rx
```
```
        let rotY = ry  
```
```
        let rotZ = rz
```
```
 
```
```
        let cosX = cos(rotX)
```
```
        let cosY = cos(rotY)
```
```
        let sinX = sin(rotX)
```
```
        let sinY = sin(rotY)
```
```
 
```
```
        while (p <= TWO_PI) {
```
```
          let ang = (m * p) / 4
```
```
 
```

          r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1)

```
          xp = r * cos(p)
```
```
          yp = r * sin(p)
```
```
 
```
```
          p += 0.05
```
```
 
```
```
          zp = zp * cosX - xp * sinX
```
```
          xp = zp * sinX + xp * cosX
```
```
          yp = yp * cosY - zp * sinY
```
```
          zp = yp * sinY + zp * cosY
```
```
 
```
```
          verts[inc] = xp * scale + x
```

          verts[inc + 1] = yp * scale + y

          verts[inc + 2] = zp * scale + z

```
          inc += 3;
```
```
        }
```
```
      // }
```
```
    }
```
```
 
```
```
    let inc = 0; 
```
```
    for (let i = 0; i < NUM; i++) {
```
```
      let m =  Math.random() * 20
```
```
      let n1 = Math.random() * 30
```
```
      let n2 = Math.random() * 30
```
```
      let n3 = Math.random() * 30
```
```
      let scl = Math.random() * .2
```

      let x = Math.random() * Math.cos(i)

      let y = Math.random() * Math.sin(i);

```
      let z = Math.random() - .5
```
```
      let rx = Math.random() * TWO_PI,
```
```
          ry = Math.random() * TWO_PI,
```
```
          rz = Math.random() * TWO_PI;
```
```
 
```
```
      for (let j = 0; j < 10; j++) {
```
```
        superShape(1, 1, 1 + m,
```
```
          n1 / j,
```
```
          n2,
```
```
          n3, 
```
```
          scl- j / 100,
```
```
          x,
```
```
          y,
```
```
          z, rx, ry, rz)
```
```
        }
```
```
    }
```
```
 
```
```
    const overts = verts.concat()
```
```
    const leng = verts.length / 3
```
```
 
```

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

```
 
```

    const vs = createShader(VERTEX_SHADER)

```
    shaderSource(vs, vert)
```
```
    compileShader(vs)
```
```
 
```

    const fs = createShader(FRAGMENT_SHADER)

```
    const sp = createProgram()
```
```
 
```
```
    shaderSource(fs, frag)
```
```
    compileShader(fs)
```
```
    attachShader(sp, vs)
```
```
    attachShader(sp, fs)
```
```
    linkProgram(sp)
```
```
    useProgram(sp)
```
```
 
```

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

```
    enableVertexAttribArray(vec)
```
```
 
```

    const matLoc = getUniformLocation(sp, 'mat')

```
 
```
```
    function rot(x, y, z) {
```

      // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e

```
 
```
```
      const sinA = Math.sin(x)
```
```
      const cosA = Math.cos(x)
```
```
      const sinB = Math.sin(y)
```
```
      const cosB = Math.cos(y)
```
```
      const sinY = Math.sin(z)
```
```
      const cosY = Math.cos(z)
```
```
 
```
```
      m[0] = cosA * cosB
```

      m[1] = cosA * sinB * sinY - sinA * cosY

      m[2] = cosA * sinB * cosY + sinA * sinY

```
      m[3] = 0
```
```
 
```
```
      m[4] = sinA * cosB
```

      m[5] = sinA * sinB * sinY + cosA * cosY

      m[6] = sinA * sinB * cosY - cosA * sinY

```
      m[7] = 0
```
```
 
```
```
      m[8] = -sinB
```
```
      m[9] = cosB * sinY
```
```
      m[10] = cosB * cosY
```
```
      m[11] = m[12] = m[13] = 0
```
```
      m[15] = 1
```
```
 
```

      uniformMatrix4fv(matLoc, false, m)

```
    }
```
```
 
```
```
    onresize = () => {
```
```
      const {
```
```
        canvas
```
```
      } = gl
```

      const size = Math.min(innerWidth, innerHeight) - 20

      canvas.width = canvas.height = size

```
      viewport(0, 0, size, size)
```
```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    let rx = 0, ry = 0, rz = 0
```
```
    let t = 0;
```
```
    function loop() {
```
```
      // rx += 0.01
```
```
      // ry += 0.01
```
```
      rz += 0.01
```
```
      rot(rx, ry, rz)
```
```
 
```
```
      disable(DEPTH_TEST)
```
```
      enable(BLEND)
```

      blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```
```
 
```

      for (let i = 0; i < verts.length; i += 3) {

```
        let tof = t + i / 50000;  
```

        verts[i] = Math.sin(tof) * overts[i]

        verts[i + 1] = Math.sin(tof) * overts[i + 1]

        verts[i + 2] = Math.sin(tof) * overts[i + 2]

```
      }
```
```
 
```
```
      t += 0.01
```
```
 
```

      bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))

```
      drawArrays(POINTS, 0, leng)
```

      window.requestAnimationFrame(loop)

```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

Forked a recent snippet using supershapes for #genuary2022 – prompt was space…

January 3, 2022

// animation // canvas // javascript // speedcoding // webgl

Older Posts

GLSL Sierpiński Glitch Texture #3

WebGL Shader Example

Non-perspective WebGL Texture

Many WebGL Constants

Speed Coded Space

Recent

Archive