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

zxlp Hidden Sierpiński

```
// https://actionsnippet.com/?p=349
```
```
// zxlp : Hidden Sierpiński
```

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
let s = .5
```
```
canvas.width = innerWidth * s
```
```
canvas.height = innerHeight * s
```
```
canvas.style.transformOrigin = '0 0'
```
```
canvas.style.scale = 1 / s
```

canvas.style.imageRendering = 'pixelated'

```
document.body.append(canvas)
```
```
 
```

const frame = document.createElement('canvas')

```
const fc = frame.getContext('2d')
```
```
frame.width = canvas.width
```
```
frame.height = canvas.height
```
```
 
```

const copy = document.createElement('canvas')

```
const cc = copy.getContext('2d')
```
```
copy.width = canvas.width
```
```
copy.height = canvas.height
```
```
 
```
```
frame.style.left = '100px' 
```
```
frame.style.top = '100px'
```
```
 
```
```
fc.fillStyle = 'red'
```
```
fc.fillRect(0, 0, 100, 100)
```
```
 
```

const _ = c.getImageData(0, 0, canvas.width, canvas.height)

```
 
```

const size = canvas.width * canvas.height * 4

```
 
```
```
let mx = 0
```
```
let mouseX = 0
```
```
 
```
```
onpointermove = e => {
```
```
  mx = e.clientX
```
```
}
```
```
 
```
```
function loop() {
```
```
  mouseX += (mx - mouseX) / 50
```
```
 
```
```
  for (let i = 0; i < size; i += 4) {
```
```
    let ox = (~~(i / 4)) % canvas.width
```
```
    let oy = (~~(i / 4)) / canvas.width
```

    let col = ((ox | oy) * mouseX / 20) % 255

```
 
```
```
    _.data[i] = 0
```
```
    _.data[i + 1] = col
```
```
    _.data[i + 2] = col
```
```
    _.data[i + 3] = 255
```
```
  }
```
```
 
```
```
  c.putImageData(_, 0, 0)
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

port of an old actionsnippet (see here) – made a youtube short of it at some point here…

February 15, 2025

// binary // canvas // color // graphics // hacks // hex // javascript // math // oldschool // tricks

crystl

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
let w;
```
```
let h;
```
```
 
```
```
onresize = e => {
```
```
  w = innerWidth * 2
```
```
  h = innerHeight * 2
```
```
  canvas.width = w
```
```
  canvas.height = h
```
```
  canvas.style.width = (w / 2) + 'px'
```

  canvas.style.height = (h / 2) + 'px'

```
  c.fillStyle = '#000'
```
```
  c.fillRect(0, 0, w, h) 
```
```
}
```
```
onresize()
```
```
 
```
```
document.body.append(canvas)
```

canvas.style.filter = 'contrast(2) brightness(1.2)'

```
 
```
```
class Crystal {
```
```
  constructor() {
```
```
    this.init()
```
```
  }
```
```
  init() {
```
```
    this.x = w / 2
```
```
    this.y = h * .7
```
```
    this.rad = 250
```
```
 
```
```
    this.sides = 5
```
```
    // + ~~(Math.random() * 5)
```

    this.shrinkTime = 400 + Math.random() * 100

```
    this.t = Math.random() * 7
```
```
    this.st = this.t;
```

    this.step = (Math.PI * 2) / this.sides

```
    this.time = 0
```

    this.shrinkSpeed = 1.3 - Math.random() * .6

```
    this.a = 0
```
```
    this.ad = .05
```
```
  }
```
```
 
```
```
  draw() { 
```
```
 
```
```
    this.a += (this.ad - this.a) / 150
```
```
    c.lineWidth = 5
```

    c.strokeStyle = `rgba(255, 255, 255, ${this.a})`

    c.fillStyle = `rgba(0, 111, 122, ${this.a / 2})`

```
    c.beginPath()
```
```
 
```
```
    for (let j = 0; j < 2; j++) {
```
```
      this.time++
```

      if (this.time > this.shrinkTime) {

```
        this.rad -= this.shrinkSpeed
```
```
        if (this.rad < 0) {
```
```
          setTimeout(() => {
```

            c.fillStyle = 'rgba(0, 0, 0, .02)'

```
            c.fillRect(0, 0, w, h)
```
```
            this.init()
```
```
          }, 500)
```
```
          return;
```
```
        }
```
```
      }
```
```
      this.t = this.st
```

      for (let i = 0; i < this.sides; i++) {

```
        let p = {
```

          x: this.rad * Math.cos(this.t),

          y: this.rad * .6 * Math.sin(this.t)

```
        }
```
```
        this.t += this.step;
```
```
        if (i === 0) {
```

          c.moveTo(this.x + p.x, this.y + p.y)

```
        } else {
```

          c.lineTo(this.x + p.x, this.y + p.y)

```
        }
```
```
      }
```
```
      c.closePath()
```
```
      c.stroke() 
```
```
      c.fill()
```
```
 
```
```
 
```
```
      this.y -= 1
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
let cryst = new Crystal()
```
```
 
```
```
 
```
```
setInterval(() => {
```

  for (let i = 0; i < 3; i++) cryst.draw()

```
}, 16)
```

quick crystal for recent youtube short…

July 27, 2024

// 3d // canvas // gradients // graphics // hacks // isometric // javascript // math // random // speed-coded // speedcoding // tricks

Swrls

const canvas = document.createElement("canvas");

```
const c = canvas.getContext("2d");
```
```
 
```
```
canvas.width = innerWidth;
```
```
canvas.height = innerHeight;
```
```
document.body.append(canvas); 
```
```
 
```
```
const TWO_PI = 2 * Math.PI;
```
```
 
```
```
class Dot {
```

  constructor(id, x, y, theta, parent) {

```
    this.x = x;
```
```
    this.y = y;
```
```
    this.t = theta;
```

    this.vx = Math.cos(this.t) * Math.random() * 2;

    this.vy = Math.sin(this.t) * Math.random() * 2;

```
    this.life = 30;
```
```
    this.col = parent.col;
```
```
 
```

    if (Math.random() < 0.005) this.other = true;

```
    if (this.other) {
```
```
      this.life = 1000;
```
```
      this.t = Math.random() * 7;
```

      this.vx = Math.cos(this.t) * Math.random() * 2;

      this.vy = Math.sin(this.t) * Math.random() * 2;

```
      this.col = "black";
```
```
    }
```
```
    this.iter = 0;
```
```
    this.parent = parent;
```
```
    this.id = id;
```
```
    this.alpha = 0.25;
```
```
 
```

    if (Math.random() < 0.3) this.alpha = 0.25;

```
  }
```
```
 
```
```
  draw() {
```
```
    this.x += this.vx;
```
```
    this.y += this.vy;
```
```
    this.iter++;
```
```
    if (this.iter > this.life) {
```
```
      delete this.parent.dots[this.id];
```
```
    }
```
```
    c.fillStyle = this.col;
```
```
    c.globalAlpha = this.alpha;
```

    if (!this.no) this.alpha -= 0.00125;

    c.fillRect(this.x, this.y, this.parent.size, this.parent.size);

```
  }
```
```
}
```
```
 
```
```
class Stain {
```

  constructor(x = innerWidth, y = innerHeight) {

```
    this.x = x / 2;
```
```
    this.y = y / 2;
```
```
    this.num = 1;
```
```
    this.step = TWO_PI / this.num;
```
```
 
```

    this.size = 1 + Math.random() * Math.random() * 2;

```
    this.rad = Math.random() * 300;
```
```
    this.dots = {};
```
```
    this.dotId = 0;
```

    this.col = Math.random() < 0.8 ? "white" : "black";

```
    this.to = Math.random() * 7;
```
```
    this.S = 20 + Math.random() * 50;
```
```
    this.R = 100 + Math.random() * 300;
```
```
    this.rr = 50 + Math.random() * 300;
```

    this.dir = Math.random() < 0.6 ? 1 : Math.random() * 10 - 5;

```
    this.v = 1;
```
```
    this.tt = 0;
```

    if (Math.random() * 0.25) this.v = Math.random() * 5;

```
  }
```
```
 
```
```
  draw() { 
```
```
    const circ = this.rad * TWO_PI;
```
```
    this.rad -= this.v;
```
```
 
```
```
    this.step = TWO_PI / circ;
```
```
 
```
```
    if (this.rad > 0) {
```

      for (let i = 1; i <= this.R; i += this.S) {

        let t = (i * this.step + this.to) * this.dir;

        let x = this.x + this.rad * Math.cos(t);

        let y = this.y + this.rad * Math.sin(t);

        this.dots[this.dotId] = new Dot(this.dotId, x, y, t, this);

```
        this.dotId++;
```
```
      }
```
```
    }
```
```
    for (let i in this.dots) {
```

      if (this.dots[i]) this.dots[i].draw();

```
    }
```
```
  }
```
```
}
```
```
 
```
```
onresize = e => {
```
```
  canvas.width = innerWidth;
```
```
  canvas.height = innerHeight;
```
```
  c.fillStyle = "black";
```

  c.fillRect(0, 0, innerWidth, innerHeight)

```
}
```
```
 
```
```
onresize()
```
```
 
```
```
let ss = [new Stain()];
```
```
 
```
```
function loop() {
```
```
  if (Math.random() < 0.05) {
```
```
    ss.push(
```

      new Stain(Math.random() * innerWidth * 2, Math.random() * innerHeight * 2)

```
    );
```
```
  }
```
```
  ss.forEach((s) => s.draw());
```
```
  c.globalAlpha = 0.05;
```

  c.drawImage(canvas, 0, 3, canvas.width + 0.2, canvas.height - 6);

```
  c.globalAlpha = 1;
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Speed coding for some recent youtube shorts…

July 7, 2024

// animation // canvas // color // curves // graphics // hacks // javascript // math // random // speed-coded // speedcoding // tricks

Faster than save/restore HTML5 canvas

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth
```
```
canvas.height = innerHeight
```
```
 
```
```
document.body.append(canvas)
```
```
 
```
```
c.fillStyle = 'black'
```

c.fillRect(0, 0, canvas.width, canvas.height)

```
 
```
```
class Shooter {
```
```
  constructor() {
```
```
    this.x = innerWidth / 2
```
```
    this.y = innerHeight / 2
```
```
    this.vx = Math.random() * 10 - 5
```
```
    this.vy = Math.random() * 10 - 5
```
```
    this.color = 'rgba(255, 0, 0, 0.5)'
```
```
    this.size = 10
```
```
    this.halfSize = this.size / 2
```
```
  }
```
```
  draw() {
```
```
    this.x += this.vx
```
```
    this.y += this.vy
```
```
 
```
```
    if (this.x < 0) {
```
```
      this.x = innerWidth
```
```
    } else if (this.x > innerWidth) {
```
```
      this.x = 0
```
```
    }
```
```
 
```
```
    if (this.y < 0) {
```
```
      this.y = innerHeight
```
```
    } else if (this.y > innerHeight) {
```
```
      this.y = 0
```
```
    }
```
```
 
```
```
    c.fillStyle = this.color
```
```
    c.translate(this.x, this.y)
```

    c.fillRect(-this.halfSize, -this.halfSize, this.size, this.size)

```
 
```
```
    c.setTransform(1, 0, 0, 1, 0, 0)
```
```
  }
```
```
}
```
```
 
```
```
const NUM = 1000
```
```
const shooters = []
```
```
for (let i = 0; i < NUM; i++) {
```
```
  shooters.push(new Shooter())
```
```
}
```
```
 
```
```
function loop() {
```
```
  c.fillStyle = 'rgba(0, 0, 0, 0.1)'
```

  c.fillRect(0, 0, innerWidth, innerHeight)

```
 
```
```
  for (let i = 0; i < NUM; i++) {
```
```
    shooters[i].draw()
```
```
  }
```
```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Using setTransform(1, 0, 0, 1, 0, 0) is faster than using save and restore. If you don’t need to save context info like fills, line styles etc… consider this method.

January 2, 2024

// canvas // graphics // javascript // math // matrix // tricks

Older Posts

GLSL Sierpiński Glitch Texture #3

zxlp Hidden Sierpiński

crystl

Swrls

Faster than save/restore HTML5 canvas

Recent

Archive