Snippet Zone

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

squigs

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

```
const c = canvas.getContext("2d");
```
```
document.body.style.margin = 0;
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth * 2;
```
```
  canvas.height = innerHeight * 2;
```

  canvas.style.width = innerWidth + "px";

  canvas.style.height = innerHeight + "px";

```
}
```
```
addEventListener("resize", resize);
```
```
resize();
```
```
 
```
```
const PAD = 50;
```
```
const RAD = 2;
```
```
const SPEED = 40;
```
```
const TWO_PI = Math.PI * 2;
```
```
 
```
```
let mode = "draw";
```
```
 
```
```
let t = Math.random() * TWO_PI,
```
```
  x = innerWidth,
```
```
  y = innerHeight,
```
```
  vx = 0,
```
```
  vy = 0,
```
```
  ta = 0,
```
```
  w = 10,
```
```
  h = 1,
```
```
  hue = 20;
```
```
 
```
```
function loop() {
```
```
  c.globalAlpha = 1;
```
```
  if (Math.random() < 0.12) {
```
```
    let alpha = 0.02;
```

    if (Math.random() < 0.1) alpha = 0.1;

    c.fillStyle = `rgba(255, 255, 255, ${alpha})`;

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

```
  }
```
```
  for (var i = 0; i < SPEED; i++) {
```
```
    t = Math.sin(ta) * TWO_PI;
```
```
    vx = RAD * Math.cos(t);
```
```
    vy = RAD * Math.sin(t);
```
```
    ta += Math.random() * 0.1 - 0.05;
```
```
    x += vx;
```
```
    y += vy;
```
```
 
```
```
    if (Math.random() < 0.005) {
```
```
      mode = "no draw";
```

      hue = [200, 20, 10, 40][~~(Math.random() * 4)];

```
      if (Math.random() < 0.5) {
```
```
        w = Math.random() * 200;
```

        h = Math.random() * Math.random() * 10;

```
      } else {
```
```
        w = Math.random() * 20;
```

        h = Math.random() * Math.random() * 200;

```
      }
```
```
    } else if (Math.random() < 0.005) {
```
```
      mode = "draw";
```
```
    }
```
```
 
```
```
    if (mode === "draw") {
```

      c.shadowColor = "rgba(0, 205, 205, 0.2)";

```
      c.shadowBlur = 5;
```

      c.fillStyle = `hsl(${hue}, 100%, 50%)`;

```
      c.fillRect(x, y, w, h);
```
```
 
```
```
      c.shadowColor = null;
```
```
      c.shadowBlur = 0;
```
```
    }
```
```
 
```
```
    if (x < -PAD) {
```
```
      x = innerWidth + PAD;
```

    } else if (x > canvas.width + PAD) {

```
      x = -PAD;
```
```
    }
```
```
    if (y < -PAD) {
```
```
      y = innerHeight + PAD;
```

    } else if (y > canvas.height + PAD) {

```
      y = -PAD;
```
```
    }
```
```
  }
```
```
  c.globalAlpha = 0.9;
```

  c.drawImage(canvas, -2, -1, canvas.width + 3, canvas.height + 4);

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

More fun speed coding for some recent youtube shorts…

July 27, 2024

// canvas // curves // filters // hacks // hex // javascript // math // random // 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

zxlp Hidden Sierpiński

crystl

squigs

Swrls

Faster than save/restore HTML5 canvas

Recent

Archive