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

sTwister

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'
```
```
canvas.style.filter = 'contrast(1.1)'
```
```
document.body.append(canvas)
```
```
 
```
```
 
```

const canvas2 = document.createElement('canvas')

```
const c2 = canvas2.getContext('2d')
```
```
 
```
```
canvas2.width = innerWidth * 2
```
```
canvas2.height = innerHeight * 2
```
```
 
```
```
 
```
```
const r = (n = 1) => Math.random() * n
```
```
 
```
```
let anc = ~~r(360)
```
```
 
```
```
function plaint(x, y) {
```
```
  let vy = r(-20) - 1
```
```
  let vx = 0
```
```
  const cl = ~~r(50) + anc;
```
```
  let t = r(7)
```
```
  let rx = r(1) + .5
```
```
  let jag = r(.5)
```
```
  let bright = r(100)
```
```
  return () => {
```
```
    vx = rx * Math.cos(t)
```
```
    if (r() < jag) {
```
```
      t += r(3)
```
```
    }
```
```
    x += vx
```
```
    y += vy
```

    c.fillStyle = `hsla(${cl}, 20%, ${bright}%, .5)`

```
 
```
```
    c.fillRect(x, y, 4, 4)
```
```
    if (y < 0) {
```
```
      y = canvas.height
```
```
      vy = r(-20) - 1
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
function erase() {
```
```
  c.fillStyle = 'black'
```

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

```
 
```
```
}
```
```
erase()
```
```
 
```
```
const plntNum = 350
```
```
let xStep = canvas.width / plntNum
```
```
 
```
```
const plnt = []
```
```
for (let i = 0; i < plntNum; i++) {
```
```
  const x = i * xStep
```
```
  plnt.push(plaint(x, canvas.height))
```
```
}
```
```
 
```
```
let R = null 
```
```
 
```

function swister(C, x, y, fc, ss, n, slow) {

```
  const shadesNum = n || 100
```
```
  const shades = []
```
```
  const rad = R || 200   
```
```
 
```
```
  for (let i = 0; i < shadesNum; i++) {
```
```
    shades.push({
```
```
      x,
```
```
      y,
```
```
      xx: 0,
```
```
      yy: 0,
```
```
      r: r(rad) + 200,
```
```
      t: r(7),
```
```
      rinc: r(1) - .1,
```
```
      tinc: r(.1),
```
```
      cl: fc(),
```
```
      a: r(.02) + .01
```
```
    }) 
```
```
 
```
```
  }
```
```
 
```
```
  return () => {
```

    for (let i = 0; i < shadesNum; i++) {

```
      let s = shades[i]
```
```
      s.xx = s.x + s.r * Math.cos(s.t)
```
```
      s.yy = s.y + s.r * Math.sin(s.t)
```
```
      s.r -= s.rinc;
```
```
      if (s.r < 200) {
```
```
        s.r = r(rad) + 200
```
```
        s.tinc = r(.1)
```
```
        if (slow) s.tinc *= .1
```
```
        if (r() < .5) s.inc *= -1;
```
```
 
```
```
        s.rinc = r(.1)
```
```
      }
```
```
      s.t += s.tinc
```

      C.fillStyle = `rgba(${s.cl}, ${s.cl}, ${s.cl}, ${s.a})`

```
      C.fillRect(s.xx, s.yy, ss, ss)
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
R = r(canvas.width / 5) + 50
```

let s1x = (canvas.width - R) * r() + R / 2

let s1y = (canvas.height - R) * r() + R / 2

```
let s = swister(c, s1x, s1y,
```
```
  () => r(10), 24
```
```
)
```
```
let s2 = swister(c2,
```
```
  s1x - 50, s1y - 50,
```
```
  () => r(200) + 0, 4
```
```
)
```
```
 
```
```
let s3 = swister(c2,
```
```
  s1x - 50, s1y - 50,
```
```
  () => r(50) + 200, 8, 4, true
```
```
)
```
```
 
```
```
 
```
```
R = r(150) + 50
```

let s2x = (canvas.width - R) * r() + R / 2

let s2y = (canvas.height - R) * r() + R / 2

```
let sa = swister(c, s2x, s2y,   
```
```
  () => r(10), 24
```
```
)
```
```
let sb = swister(c2,
```
```
  s2x - 50, s2y - 50,
```
```
  () => r(200) + 0, 4
```
```
)
```
```
 
```
```
let sc = swister(c2,
```
```
  s2x - 50, s2y - 50,
```
```
  () => r(50) + 200, 8, 4, true
```
```
) 
```
```
 
```
```
function draw() {
```
```
 
```
```
  c.globalAlpha = 1;
```

  c.globalCompositeOperation = 'source-over'

```
  plnt.forEach(p => p())
```
```
 
```
```
  s()
```
```
  sa()
```
```
  c.globalAlpha = .05;
```

  c.drawImage(canvas, -10, -10, canvas.width + 10, canvas.height + 10)

  // c.globalCompositeOperation = 'source-atop'

```
  s2()
```
```
  sb()
```
```
  s3()
```
```
  sc()
```
```
  c.globalAlpha = 1
```

  c.globalCompositeOperation = 'hard-light'

```
  c.drawImage(canvas2, 0, 0);
```
```
  c.globalAlpha = .02; 
```
```
 
```

  c.drawImage(canvas, 0, 0, canvas.width, canvas.height + 10)

```
  requestAnimationFrame(draw)
```
```
}
```
```
draw()
```

Speed-coded this on the train the other day. Might port over to WebGL sometime soon…

August 2, 2025

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

Older Posts

Base36 Alphabet Animated

Flun Draw

Diagrams 2

iwrjgnb

sTwister

Recent

Archive