Snippet Zone

Base36 Alphabet Animated

const canvas = document.createElement('canvas')

```
canvas.width = innerWidth * .5
```
```
canvas.height = innerHeight * .5
```
```
canvas.style.transformOrigin = '0 0'
```
```
canvas.style.transform = 'scale(2, 2)'
```

canvas.style.imageRendering = 'pixelated'

```
 
```
```
document.body.append(canvas)
```
```
const c = canvas.getContext('2d')
```
```
 
```
```
// letters defined in base36
```

const alphabet = ['', '67erkgi', 'e3j6dss', '75rue4u', 'c5ltok8', '75s2tji',

  '75s2tjk', '75rugj2', '95yfnf6', '21blls4', '10nt5xo', '973it1u',

  '85aef4u', '59lu6nl', 'cnz0hbn', '67ej51o', '67eq49c', '67ej53e',

  '67eq7gy', '66978m4', '6ywdqpw', '95y780c', '53b00as', '8nmdpyi',

```
  '5374thm', '53avnus', '6xsfdam'
```
```
]
```
```
 
```
```
function drawBase36(num, xp, yp) {
```
```
  num = alphabet[num]
```
```
 
```

  let binaryString = parseInt(num, 36).toString(2).padStart(35, '0');

```
 
```
```
  for (let i = 0; i < 35; i++) {
```

    if (binaryString.charAt(i) === '1') {

```
      const x = (i % 5) + xp;
```
```
      const y = Math.floor(i / 5) + yp;
```
```
      c.fillRect(x, y, 1, 1); 
```
```
    }
```
```
  }
```
```
}
```
```
 
```

function letter(char, col, x, y, scale = 1, rotation = 0) {

```
  c.fillStyle = col
```
```
  c.translate(x, y)
```
```
  c.scale(scale, scale)
```
```
  c.rotate(rotation)
```
```
 
```
```
  drawBase36(char, 0, 0);
```
```
  c.setTransform(1, 0, 0, 1, 0, 0)
```
```
}
```
```
 
```
```
let NUM = 100
```
```
let ps = []
```
```
for (let i = 0; i < NUM; i++) {
```

  let hr = 180 + Math.random() * 50 - 25;

```
  let ss = 100
```
```
  let bb = 50
```
```
  if (Math.random() < .5) {
```
```
    hr = 30 + Math.random() * 50 - 25;
```
```
    ss = 100
```
```
    bb = 40
```
```
  }
```

  const col = `hsl(${hr}, ${ss}%, ${bb}%)`;

```
  const p = [
```

    1 + ~~(Math.random() * alphabet.length),

```
    col,
```
```
    Math.random() * canvas.height, 
```

    Math.random() * (canvas.width + 200),

    1 + Math.random() * Math.random() * 10, Math.random() * 7

```
  ]
```
```
  p.props = { 
```
```
    vx: Math.random() * 1 - .5,
```
```
    r: .01 * Math.random() - 0.005
```
```
  }
```
```
  letter(...p)
```
```
  ps.push(p)
```
```
}
```
```
 
```
```
function draw() {
```
```
  c.fillStyle = 'rgba(91, 34, 0, .05)'
```

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

```
 
```
```
  for (let i = 0; i < NUM; i++) {
```
```
    const p = ps[i]
```
```
    p[2] += p.props.vx;
```
```
    p[5] += p.props.r
```
```
    letter(...p)
```
```
  } 
```
```
 
```
```
  c.fillStyle = 'rgba(0, 255, 255, 1)'
```
```
  c.scale(1, 1)
```
```
 
```

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

```
    drawBase36(i, i * 10, 10);
```
```
  }
```
```
  c.setTransform(1, 0, 0, 1, 0, 0)
```
```
 
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
draw()
```

This alphabet is something I drew manually in the 2000s – then at some point wrote this snippet on actionsnippet. Basically each letter is a 5×7 binary number and I store these in base36 for no particular reason 😀

August 9, 2025

// animation // canvas // drawing // graphics // hacks // javascript // math // random // tricks

Flun Draw

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth * 2
```
```
canvas.height = innerHeight * 2
```
```
document.body.append(canvas)
```
```
canvas.style.width = innerWidth + 'px'
```

canvas.style.height = innerHeight + 'px'

```
c.fillStyle = 'white'
```

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

```
 
```
```
const flun = (
```
```
  ax = innerWidth,
```
```
  ay = innerHeight,
```
```
  r = 0,
```
```
  x = 0, y = 0,
```
```
  t = 0,
```
```
  dt = 0,
```
```
  spin = 0,
```
```
  spinc = .1,
```
```
  rinc = 0,
```
```
  col = 'black',
```
```
  hist = []
```
```
) => {
```
```
 
```
```
  const init = () => {
```
```
    dt = Math.random() * Math.PI * 2
```
```
    r = 0
```
```
    rinc = Math.random() * 1
```
```
    spinc = Math.random() * .01 - .005
```

    col = ['black', 'white', 'rgba(0, 0, 0, 0.2)']

```
      [~~(Math.random() * 3)]
```
```
  }
```
```
  init()
```
```
 
```
```
  return () => {
```
```
 
```
```
    spin += spinc
```
```
    if (Math.random() < .005) {
```
```
      init()
```
```
    } else {
```
```
      r += rinc
```
```
    }
```
```
 
```
```
    if (Math.random() < .01) {
```
```
      ax = x
```
```
      ay = y
```
```
      const inside = ax > 0 &&
```
```
        ax < canvas.width &&
```
```
        ay > 0 &&
```
```
        ay < canvas.height
```
```
      if (!inside) {
```

        const p = hist[~~(Math.random() * hist.length)]

```
        ax = p[0]
```
```
        ay = p[1]
```
```
      }
```
```
      init()
```
```
    } 
```
```
 
```
```
    t += (dt - t) / 22
```
```
 
```
```
    x = ax + Math.cos(t + spin) * r
```
```
    y = ay + Math.sin(t + spin) * r
```
```
 
```
```
    if (x > 0 && x < canvas.width &&
```
```
      y > 0 && y < canvas.height) {
```
```
      hist.push([x, y])
```
```
    }
```
```
 
```
```
    c.fillStyle = col
```
```
    c.fillRect(x, y, 4, 4)
```
```
  }
```
```
}
```
```
 
```
```
const f = flun()
```
```
 
```
```
setInterval(() => {
```
```
  for (let i = 0; i < 20; i++) f()
```
```
}, 16)
```

Just randomly coded this one morning for a short – simple – but never did this exact motion before. It looks surprisingly organic and occasionally draws things that look like faces and other objects

August 7, 2025

// animation // canvas // drawing // golfed // graphics // javascript // math // random

Diagrams 2

const canvas = document.createElement('canvas')

```
canvas.width = 400
```
```
canvas.height = 400
```
```
document.body.append(canvas)
```

document.body.style.background = 'black'

```
Object.assign(document.body.style, {
```
```
  position: 'absolute',
```
```
  left: '50%', 
```
```
  top: '50%',
```
```
  transform: 'translate(-50%, -50%)'
```
```
})
```
```
 
```
```
const ctx = canvas.getContext('2d')
```
```
const width = canvas.width;
```
```
const height = canvas.height;
```
```
 
```
```
// --- Global Variables ---
```
```
const num = 4;
```
```
const smp = new Array(num);
```
```
let isMousePressed = false;
```
```
let drag = false;
```
```
let mouseX = 0;
```
```
let mouseY = 0;
```
```
 
```
```
let theSize, t;
```
```
let col = 0;
```
```
const alpha = 255;
```
```
let curveRes = 0.01;
```
```
 
```
```
let pan;
```

const blank = new Int32Array(300 * 400);

```
 
```
```
 
```

// ===================================================================

```
//  CLASS AND FUNCTION DEFINITIONS
```

//  All classes and functions are defined here, before they are called.

// ===================================================================

```
 
```
```
// --- PModel Class (Shape logic) ---
```
```
class PModel {
```
```
  constructor(p_col) {
```
```
    this.pNum = 9;
```
```
    this.theColor = p_col;
```

    this.pLocX = new Float32Array(this.pNum);

    this.pLocY = new Float32Array(this.pNum);

    this.bLocX = new Float32Array(this.pNum);

    this.bLocY = new Float32Array(this.pNum);

    this.bx = new Float32Array(this.pNum);

    this.by = new Float32Array(this.pNum);

    this.down = new Array(this.pNum).fill(false);

    this.outlineColor = convertPColor(0xff0000);

```
 
```

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

      this.pLocX[i] = this.bLocX[i] = this.bx[i] = Math.random() *

```
      300; // Start in main area
```

      this.pLocY[i] = this.bLocY[i] = this.by[i] = Math.random() * 400;

```
    }
```
```
  }
```
```
 
```
```
  action(pixels) {
```
```
    this.outlineColor = this.theColor;
```

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

      if (Math.floor(Math.random() * 300) === 1) {

```
        if (this.bLocX[i] < 250) {
```

          drawText(`E-${Math.floor(Math.random() * 11100)}`, this.bLocX[

```
            i], this.bLocY[i]);
```
```
        }
```
```
      }
```

      if (dist(this.bLocX[i], this.bLocY[i], mouseX, mouseY) < 10 && !

```
        drag) {
```

        this.outlineColor = convertPColor(0xff0000);

```
        if (isMousePressed) {
```
```
          this.down[i] = true;
```
```
          drag = true;
```
```
        }
```
```
      } else {
```
```
        if (!drag) {
```
```
          this.down[i] = false;
```
```
        }
```
```
      }
```
```
 
```
```
      if (this.down[i]) {
```
```
        if (this.bLocX[i] < 250) {
```

          drawText(`V-${Math.floor(Math.random() * 1100)}`, this.bLocX[i],

```
            this.bLocY[i]);
```
```
        }
```

        this.outlineColor = convertPColor(0xff0000);

```
        this.pLocX[i] = mouseX;
```
```
        this.pLocY[i] = mouseY;
```
```
      }
```
```
 
```
```
      this.bLocX[i] -= this.bx[i];
```

      this.bx[i] = ((this.bLocX[i] - this.pLocX[i]) / 17 + this.bx[i]) /

```
        1.5;
```
```
      this.bLocY[i] -= this.by[i];
```

      this.by[i] = ((this.bLocY[i] - this.pLocY[i]) / 17 + this.by[i]) /

```
        1.5;
```
```
    }
```
```
 
```
```
    this.ccc(0, 1, 40, 14);
```
```
    this.ccc(0, 2, 40, 14);
```
```
    this.ccc(0, 3, 40, 14);
```
```
    this.ccc(0, 4, 40, 14);
```
```
    this.ccc(0, 5, 40, 14);
```
```
    this.ccc(0, 6, 40, 14);
```
```
    this.ccc(0, 7, 40, 14);
```
```
    this.ccc(0, 8, 40, 14);
```
```
    this.ccc(1, 2, 40, 14);
```
```
    this.ccc(2, 3, 40, 14);
```
```
    this.ccc(3, 4, 40, 14);
```
```
    this.ccc(4, 5, 40, 14);
```
```
    this.ccc(5, 6, 40, 14);
```
```
    this.ccc(6, 7, 40, 14);
```
```
    this.ccc(8, 7, 40, 14);
```
```
    this.ccc(8, 1, 40, 14);
```
```
    this.ccc(1, 3, 80, 0);
```
```
    this.ccc(3, 5, 80, 0);
```
```
    this.ccc(5, 7, 80, 0);
```
```
    this.ccc(7, 1, 80, 0);
```
```
 
```

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

      if (this.pLocX[i] < 0) this.pLocX[i] += 5;

      if (this.pLocX[i] > 300) this.pLocX[i] -= 5;

      if (this.pLocY[i] < 0) this.pLocY[i] += 5;

      if (this.pLocY[i] > 400) this.pLocY[i] -= 5;

```
    }
```
```
 
```
```
    col = this.outlineColor;
```

    apixel(pixels, this.bLocX[0], this.bLocY[0]);

```
 
```
```
    curveRes = 0.01;
```

    curvePoint(pixels, this.bLocX[1], this.bLocY[1], this.bLocX[2], this

      .bLocY[2], this.bLocX[3], this.bLocY[3], this.bLocX[2], this

```
      .bLocY[2]);
```

    curvePoint(pixels, this.bLocX[3], this.bLocY[3], this.bLocX[4], this

      .bLocY[4], this.bLocX[5], this.bLocY[5], this.bLocX[4], this

```
      .bLocY[4]);
```

    curvePoint(pixels, this.bLocX[5], this.bLocY[5], this.bLocX[6], this

      .bLocY[6], this.bLocX[7], this.bLocY[7], this.bLocX[6], this

```
      .bLocY[6]);
```

    curvePoint(pixels, this.bLocX[7], this.bLocY[7], this.bLocX[8], this

      .bLocY[8], this.bLocX[1], this.bLocY[1], this.bLocX[8], this

```
      .bLocY[8]);
```
```
 
```
```
    curveRes = 0.02;
```
```
    col = this.theColor;
```

    curvePoint(pixels, this.bLocX[1], this.bLocY[1], this.bLocX[0], this

      .bLocY[0], this.bLocX[3], this.bLocY[3], this.bLocX[0], this

```
      .bLocY[0]);
```

    curvePoint(pixels, this.bLocX[3], this.bLocY[3], this.bLocX[0], this

      .bLocY[0], this.bLocX[5], this.bLocY[5], this.bLocX[0], this

```
      .bLocY[0]);
```

    curvePoint(pixels, this.bLocX[5], this.bLocY[5], this.bLocX[0], this

      .bLocY[0], this.bLocX[7], this.bLocY[7], this.bLocX[0], this

```
      .bLocY[0]);
```

    curvePoint(pixels, this.bLocX[7], this.bLocY[7], this.bLocX[0], this

      .bLocY[0], this.bLocX[1], this.bLocY[1], this.bLocX[0], this

```
      .bLocY[0]);
```
```
  }
```
```
 
```
```
  ccc(indexA, indexB, clength, off) {
```

    if (dist(this.pLocX[indexA], this.pLocY[indexA], this.pLocX[indexB],

        this.pLocY[indexB]) > clength) {

      this.pLocX[indexA] += (this.pLocX[indexB] - this.pLocX[indexA]) / 6;

      this.pLocY[indexA] += (this.pLocY[indexB] - this.pLocY[indexA]) / 6;

      this.pLocX[indexB] += (this.pLocX[indexA] - this.pLocX[indexB]) / 6;

      this.pLocY[indexB] += (this.pLocY[indexA] - this.pLocY[indexB]) / 6;

```
    }
```

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

```
      if (i !== indexA) {
```

        if (dist(this.pLocX[indexA], this.pLocY[indexA], this.pLocX[i],

            this.pLocY[i]) < clength - off) {

          this.pLocX[indexA] -= (this.pLocX[i] - this.pLocX[indexA]) / 6;

          this.pLocY[indexA] -= (this.pLocY[i] - this.pLocY[indexA]) / 6;

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

// --- Panel Class (UI on the right) ---

```
class Panel {
```
```
  constructor() {
```
```
    this.h1 = 80;
```
```
    this.h2 = 80;
```
```
    this.h3 = 80;
```
```
    this.h4 = 80;
```
```
    this.dh1 = 80;
```
```
    this.dh2 = 80;
```
```
    this.dh3 = 80;
```
```
    this.dh4 = 80;
```
```
    this.numsA = 0;
```
```
  }
```
```
 
```

  // Static drawing for panel background (called once in setupPanel)

```
  drawStatic() {
```
```
    ctx.fillStyle = "rgb(115,115,115)";
```
```
    ctx.fillRect(300, 0, 100, 400);
```
```
    ctx.beginPath();
```
```
    ctx.moveTo(300, 300);
```
```
    ctx.lineTo(400, 400);
```

    ctx.strokeStyle = "rgb(155,145,105)";

```
    ctx.stroke();
```
```
    /* ctx.strokeStyle = "red";
```
```
      for (let i = 0; i < 40; i++) {
```

          ctx.beginPath(); ctx.moveTo(101, i * 10); ctx.lineTo(400, 20 + i * 20); ctx.stroke();

```
      }
```
```
      ctx.stroke()*/
```
```
 
```
```
    ctx.strokeStyle = "white";
```

    ctx.strokeStyle = "rgb(205,205,205)";

    ctx.strokeRect(309.5, 11.5, 82, 111);

    ctx.strokeRect(359.5, 130.5, 32, 21);

    ctx.strokeRect(359.5, 160.5, 32, 21);

    ctx.strokeRect(359.5, 190.5, 32, 21);

```
  }
```
```
 
```
```
  action() {
```

    ctx.strokeStyle = "rgb(135,125,85)";

```
    ctx.fillStyle = "rgb(165,165,165)";
```
```
    ctx.fillRect(310, 10, 80, 110);
```
```
    ctx.beginPath();
```
```
    ctx.moveTo(301.5, 0);
```
```
    ctx.lineTo(301.5, 400);
```
```
    ctx.stroke();
```
```
 
```
```
 
```

    if (Math.floor(Math.random() * 60) === 1) this.dh1 = Math.random() *

```
      75 + 5;
```

    if (Math.floor(Math.random() * 60) === 1) this.dh2 = Math.random() *

```
      75 + 5;
```

    if (Math.floor(Math.random() * 60) === 1) this.dh3 = Math.random() *

```
      75 + 5;
```

    if (Math.floor(Math.random() * 60) === 1) this.dh4 = Math.random() *

```
      75 + 5;
```
```
 
```

    this.h1 += (this.dh1 - this.h1) * 0.09;

    this.h2 += (this.dh2 - this.h2) * 0.09;

    this.h3 += (this.dh3 - this.h3) * 0.09;

    this.h4 += (this.dh4 - this.h4) * 0.09;

```
 
```
```
 
```
```
 
```

    ctx.fillRect(310, 130, 10, this.h1);

    ctx.fillRect(320, 130, 10, this.h2);

    ctx.fillRect(330, 130, 10, this.h3);

    ctx.fillRect(340, 130, 10, this.h4);

```
 
```
```
    ctx.fillRect(360, 130, 30, 20);
```
```
    ctx.fillRect(360, 160, 30, 20);
```
```
    ctx.fillRect(360, 190, 30, 20);
```
```
 
```

    ctx.strokeRect(310, 130, 10, this.h1);

    ctx.fillRect(320, 130, 10, this.h2);

    ctx.strokeRect(330, 130, 10, this.h3);

    ctx.fillRect(340, 130, 10, this.h4);

```
 
```
```
    ctx.strokeRect(360, 130, 30, 20);
```
```
    ctx.fillRect(360, 160, 30, 20);
```
```
    ctx.fillRect(360, 190, 30, 20);
```
```
 
```

    if (Math.floor(Math.random() * 10) === 1) this.numsA = Math.floor(Math

```
      .random() * 10000000);
```

    drawText(`E-${this.numsA}`, 315, 116, "white");

```
  }
```
```
}
```
```
 
```
```
// --- Main Setup and Loop ---
```
```
function setup() {
```
```
  ctx.fillStyle = 'black';
```
```
  ctx.fillRect(0, 0, width, height);
```
```
  theSize = width * height;
```
```
  t = 0;
```
```
 
```
```
  for (let i = 0; i < num; i++) {
```
```
    if (i < num / 2) {
```

      smp[i] = new PModel(convertPColor(0x330000));

```
    } else {
```

      smp[i] = new PModel(convertPColor(0xffffff));

```
    }
```
```
  }
```
```
  setupPanel();
```
```
  addEventListeners();
```
```
}
```
```
 
```
```
function loop() {
```

  const imageData = ctx.getImageData(0, 0, width, height);

  const pixels = new Uint32Array(imageData.data.buffer);

```
 
```
```
  if (isMousePressed) {
```

    for (let i = 0; i < 120000 - 300; i++) {

      pixels[blank[i]] = blendC(pixels[blank[i]] << 8, ~pixels[blank[i +

```
        300]], 40);
```
```
    }
```
```
  } else {
```

    for (let i = 0; i < 120000 - 300; i++) {

      pixels[blank[i]] = blendC(~pixels[blank[i]], pixels[blank[i + 300]] |

```
        0x111111, 150);
```
```
    }
```
```
  }
```
```
 
```
```
  if (t < 12) {
```
```
    if (t !== 11) {
```

      for (let i = 400; i < theSize; i++) {

        pixels[i] = blendC(~pixels[i] & 0xDDDDDD, pixels[i - 400], 20);

```
      }
```
```
    } else {
```

      for (let i = 400; i < theSize; i++) {

        pixels[i] = blendC(0x000000, pixels[i], 50);

```
      }
```
```
    }
```
```
    for (let i = 0; i < 120000; i++) {
```
```
      pixels[blank[i]] = 0xFFFFFFFF;
```
```
    }
```
```
  }
```
```
  t++;
```
```
 
```
```
  for (let i = 0; i < num; i++) {
```
```
    smp[i].action(pixels);
```
```
  }
```
```
 
```
```
  for (let a = 0; a < num; a++) {
```
```
    for (let b = 0; b < num; b++) {
```
```
      if (a === b) continue;
```
```
      repel(a, b, 0, 0, 120);
```

      if (Math.floor(Math.random() * 400) === 1) {

        col = convertPColor(0xFFFFFFFF);

        drawLine(pixels, smp[a].bLocX[0], smp[a].bLocY[0], smp[b].bLocX[0],

```
          smp[b].bLocY[0]);
```
```
      }
```
```
    }
```
```
  }
```
```
 
```
```
  ctx.putImageData(imageData, 0, 0);
```
```
  pan.action();
```
```
  ctx.strokeStyle = "white";
```
```
  ctx.strokeRect(0.5, 0.5, 399, 399);
```

  ctx.fillStyle = 'rgba(110, 50, 0, 0.04)'

```
  ctx.fillRect(300, 0, 100, 400);
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
 
```
```
 
```
```
// --- Utility & Drawing Functions ---
```

function repel(ind, ind2, indexA, indexB, clength) {

  if (dist(smp[ind].pLocX[indexA], smp[ind].pLocY[indexA], smp[ind2].pLocX[

      indexB], smp[ind2].pLocY[indexB]) < clength) {

    smp[ind].pLocX[indexA] -= (smp[ind2].pLocX[indexB] - smp[ind].pLocX[

```
      indexA]) / 2;
```

    smp[ind].pLocY[indexA] -= (smp[ind2].pLocY[indexB] - smp[ind].pLocY[

```
      indexA]) / 2;
```
```
  }
```
```
}
```
```
 
```

function curvePoint(pixels, x1, y1, x2, y2, x3, y3, x4, y4) {

  for (let a = 0; a < 1; a += curveRes) {

```
    const b = 1 - a;
```
```
    const pre1 = a * a * a;
```
```
    const pre2 = 3 * (a * a) * b;
```
```
    const pre3 = 3 * a * (b * b);
```
```
    const pre4 = b * b * b;
```

    const x = pre1 * x1 + pre2 * x2 + pre3 * x4 + pre4 * x3;

    const y = pre1 * y1 + pre2 * y2 + pre3 * y4 + pre4 * y3;

```
    apixel(pixels, x, y);
```
```
  }
```
```
}
```
```
 
```
```
function blendC(c1, c2, amount) {
```
```
  const r1 = c1 & 0xff;
```
```
  const g1 = (c1 >> 8) & 0xff;
```
```
  const b1 = (c1 >> 16) & 0xff;
```
```
  const r2 = c2 & 0xff;
```
```
  const g2 = (c2 >> 8) & 0xff;
```
```
  const b2 = (c2 >> 16) & 0xff;
```

  const r = (((amount * (r1 - r2)) >> 8) + r2);

  const g = (((amount * (g1 - g2)) >> 8) + g2);

  const b = (((amount * (b1 - b2)) >> 8) + b2);

  return (0xff000000 | (b << 16) | (g << 8) | r) >>> 0;

```
}
```
```
 
```
```
function apixel(pixels, ax, ay) {
```
```
  const x = Math.floor(ax);
```
```
  const y = Math.floor(ay);
```

  if (x <= 0 || x >= width - 2 || y <= 0 || y >= height - 2) return;

```
  const fx = ax - x;
```
```
  const fy = ay - y;
```
```
  const nfx = 1 - fx;
```
```
  const nfy = 1 - fy;
```
```
  const loc = x + y * width;
```
```
  const loc2 = loc + width;
```
```
  const loc3 = loc + 1;
```
```
  const loc4 = loc2 + 1;
```

  pixels[loc] = blendC(col, pixels[loc], Math.floor(nfx * nfy * alpha));

  pixels[loc3] = blendC(col, pixels[loc3], Math.floor(fx * nfy * alpha));

  pixels[loc2] = blendC(col, pixels[loc2], Math.floor(nfx * fy * alpha));

  pixels[loc4] = blendC(col, pixels[loc4], Math.floor(fx * fy * alpha));

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

function drawLine(pixels, x1, y1, x2, y2) {

```
  const dx = x2 - x1;
```
```
  const dy = y2 - y1;
```

  let n = Math.abs(dx) > Math.abs(dy) ? Math.abs(dx) : Math.abs(dy);

```
  if (n === 0) return;
```
```
  const dt = 1.0 / n;
```
```
  const dxdt = dx * dt;
```
```
  const dydt = dy * dt;
```
```
  let x = x1;
```
```
  let y = y1;
```
```
  while (n-- >= 0) {
```

    if (x > 1 && x < width - 1 && y > 1 && y < height - 1) {

```
      apixel(pixels, x, y);
```
```
    }
```
```
    x += dxdt;
```
```
    y += dydt;
```
```
  }
```
```
}
```
```
 
```
```
function setupPanel() {
```
```
  pan = new Panel();
```

  pan.drawStatic(); // Draw the static background of the panel once.

```
  ctx.font = "12px sans-serif";
```
```
  let index = 0;
```

  for (let j = 0; j < 160000; j += 400) {

```
    for (let i = 0; i < 300; i++) {
```
```
      blank[index++] = i + j;
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
function dist(x1, y1, x2, y2) {
```
```
  const dx = x1 - x2;
```
```
  const dy = y1 - y2;
```
```
  return Math.sqrt(dx * dx + dy * dy);
```
```
}
```
```
 
```
```
function convertPColor(pColor) {
```

  const alpha = (pColor & 0xFF000000) >>> 0;

  const red = (pColor & 0x00FF0000) >> 16;

```
  const green = (pColor & 0x0000FF00);
```

  const blue = (pColor & 0x000000FF) << 16;

  return (alpha | blue | green | red) >>> 0;

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

function drawText(txt, x, y, color = "white") {

```
  ctx.fillStyle = color;
```
```
  ctx.fillText(txt, x, y);
```
```
}
```
```
 
```
```
function addEventListeners() {
```

  canvas.addEventListener('mousedown', () => {

```
    isMousePressed = true;
```
```
  });
```

  canvas.addEventListener('mouseup', () => {

```
    isMousePressed = false;
```
```
    drag = false;
```
```
  });
```

  canvas.addEventListener('mouseout', () => {

```
    isMousePressed = false;
```
```
    drag = false;
```
```
  });
```

  canvas.addEventListener('mousemove', (e) => {

    const rect = canvas.getBoundingClientRect();

```
    mouseX = e.clientX - rect.left;
```
```
    mouseY = e.clientY - rect.top;
```
```
  });
```
```
}
```
```
 
```

// ===================================================================

```
//  START THE SKETCH
```

//  This is the final step, ensuring everything above is defined.

// ===================================================================

```
setup();
```
```
requestAnimationFrame(loop);
```

This is a port of an old Processing experiment from the early 2000s that I ported to JS with Gemini 2.5 pro…

August 4, 2025

// canvas // graphics // javascript // math // processing // speed-coded // speedcoding

iwrjgnb

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth * 2
```
```
canvas.height = innerHeight * 2
```
```
canvas.style.scale = '.5 .5'
```
```
canvas.style.transformOrigin = '0 0' 
```
```
 
```
```
c.fillStyle = 'rgba(255, 236, 168, 1)'
```

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

```
document.body.append(canvas)
```
```
 
```
```
let width = 300
```
```
let height = 300
```
```
 
```
```
function cell(ox = 0, oy = 0) {
```
```
 
```
```
  let ax = ox + width / 2
```
```
  let ay = oy + height / 2
```
```
  let x, y
```
```
  let r = width * Math.random()
```
```
  let rx = r
```
```
  let ry = r
```

  if (Math.random() < .5) rx *= Math.random()

  if (Math.random() < .5) ry *= Math.random()

```
  let t = Math.random() * 7
```
```
 
```
```
  let ti = Math.random() * .1 - .05
```
```
  let te;
```
```
  let dr = 0
```
```
  if (ti > 0) {
```
```
    te = t + Math.random() * 7
```
```
    dr = 1
```
```
  } else {
```
```
    te = t - Math.random() * 7
```
```
  }
```
```
  let rm = 0
```

  if (Math.random() < .5) rm = Math.random() * 3

```
 
```
```
  return () => {
```
```
    x = ax + rx * Math.cos(t)
```
```
    y = ay + ry * Math.sin(t)
```
```
    if (rm !== 0) {
```
```
      rx -= rm;
```
```
      ry -= rm
```
```
    }
```
```
    t += ti
```

    if ((t > te && dr === 1) || (t < te && dr === 0)) {

```
      return
```
```
    }
```
```
    c.fillStyle = 'black'
```
```
    c.fillRect(x, y, 2, 2)
```
```
 
```
```
    if (Math.random() < .5) {
```
```
      cls.push(cl(x, y))
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
function cl(x, y) {
```
```
  let vy = .2 + Math.random() * 2 - 1
```
```
  let col = 'rgba(0, 0, 0, 0.08)'
```

  if (Math.random() < .1) col = 'rgba(0, 178, 227, .3)'

  if (Math.random() < .01) col = 'rgba(255, 0, 0, .3)'

```
  let vx = 0
```
```
  if (Math.random() < .03) {
```
```
    vx = 1
```
```
    vy = 0;
```
```
    col = 'rgba(255, 255, 255, .2)'
```
```
  }
```
```
  let dead = false;
```
```
  return () => {
```
```
    if (dead) return
```
```
    y += vy
```
```
    x += vx
```
```
    if (Math.random() < .01) {
```
```
      dead = true
```
```
    }
```
```
    c.fillStyle = col
```
```
    c.fillRect(x, y, 2, 2)
```
```
  }
```
```
}
```
```
 
```
```
let NUM = 5
```
```
let cs = []
```
```
let cls = []
```
```
for (let j = 0; j < NUM; j++) {
```
```
  let yy = Math.random() * innerHeight
```
```
  let xx = Math.random() * innerWidth
```

  let num = 5 + ~~(Math.random() * Math.random() * 10)

  if (Math.random() < .3) num = Math.random() * 50

```
  for (let i = 0; i < NUM; i++) {
```
```
    for (let k = 0; k < num; k++) {
```
```
      cs.push(cell(xx, yy))
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
function loop() {
```
```
  cs.forEach(f => f())
```
```
  cls.forEach(f => f())
```
```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Just posting more code from recent shorts… more here

August 3, 2025

// canvas // codegolf // curves // golfed // graphics // hacks // javascript // math // random // speed-coded // speedcoding

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

Older Posts

Base36 Alphabet Animated

Flun Draw

Diagrams 2

iwrjgnb

GLSL Sierpiński Glitch Texture #3

Recent

Archive