Snippet Zone

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

Golfed Codepen – 3D Spiral Thing

// sort of golfed version of https://www.instagram.com/p/C1uv6Kqv19T/

```
// by @mewtru
```
```
b = document.body
```
```
a = Object.assign
```

a(b.style, { background:'#000', color:'#fff'})

w = 'snippet.zone snippet.zone'.toUpperCase().split``

```
F = (n, O = 0, C, S, o, t) => { 
```

  b.innerHTML += `<div id=${n} style='position:absolute;left:50%;top:50%;translate:-50% -50%;width:100% text-align:center;white-space:nowrap'></div>`

  w.map(l => this[n].innerHTML += `<span style='display:inline-block;margin-right:5px;font-size:28px'>${l}</span>`)

```
  t = O
```
```
  setInterval(_ => {
```
```
    t += .005
```

    ;[...this[n].children].map((e, i) => {

```
      T = t + i / 2.7
```
```
      a(e.style, {
```

        translate: `0 ${Math.sin(T) * 100}px`,

```
        scale: Math.cos(T) * .5 + .5})
```
```
    }, 16)
```
```
  })
```
```
}
```
```
F('Z') 
```
```
F('X', 3)
```

“Very cool” pen by Lucas Fernando that comes from @mewtru
I decided to do a speed-coded semi-golfed version… can definitely be way more golfed 😀

January 10, 2024

// 3d // animation // codegolf // css // dom // golfed // hacks // javascript // math // speed-coded // speedcoding // strings

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

Little Trading Program

```
let id = 0;
```
```
function person(startValue = 100) {
```
```
  const props = {
```
```
    id: id++, 
```
```
    el: document.body.appendChild(
```
```
      Object.assign(
```
```
        document.createElement`b`, { 
```
```
          innerText: startValue,
```
```
          style: 'padding: 1em'
```
```
      })
```
```
    ),
```
```
    value: startValue,
```
```
    trade(other) {
```
```
      if (props.value <= 0) return;
```
```
      other.value += 1;
```
```
      props.value -= 1;
```
```
      other.el.innerText = other.value
```
```
      props.el.innerText = props.value
```
```
    }
```
```
  }
```
```
  return props
```
```
}
```
```
 
```
```
 
```
```
const NUM = 4
```

const people = Array.from({ length: NUM }, person)

```
 
```
```
setInterval(() => {
```

  const a = people[~~(Math.random() * people.length)]

  const b = people[~~(Math.random() * people.length)]

```
 
```
```
  if (a.id != b.id) a.trade(b)
```
```
}, 1)
```

4 “people” randomly trade…

I asked Chat GPT to describe this… funny response…

The trading program you provided is essentially an example of a random walk or “drunkard’s walk” problem. In such problems, each individual (in this case, the ‘people’) make random moves (in this case, trades), and we observe the resulting dynamics of the system as a whole. In this particular case, each trade involves one individual giving one unit of value to another individual. Since each trade is random, there’s a possibility that over time, all the value might get concentrated in one individual. This isn’t guaranteed, but given enough time, it’s likely. You could compare it to the idea that given enough time, a group of monkeys randomly typing on a keyboard would eventually type out the complete works of Shakespeare. It’s also worth noting that this concentration of value becomes more likely because the individuals with no value left cannot trade anymore, so they are essentially removed from the trading pool. This progressively reduces the number of individuals that can gain value and increases the probability of the remaining individuals gaining more value. This is a simple model of economic transactions and it illustrates how wealth can concentrate over time even if all the transactions are fair and random. Of course, it’s a very simplified model, and real-world economics are much more complex.

July 18, 2023

// arrays // humor // javascript // math // speed-coded // speedcoding

Other Gates from NAND

```
const nand = ([a, b]) => +!(a & b)
```
```
 
```
```
const not = ([a]) => nand([a, a])
```
```
 
```

const and = ([a, b]) => nand([nand([a, b]), nand([a, b])])

```
 
```

const or = ([a, b]) => nand([nand([a, a]), nand([b, b])])

```
 
```
```
const nor = ([a, b]) => 
```
```
  nand([ 
```

    nand([nand([a, a]), nand([b, b])]),

```
    nand([nand([a, a]), nand([b, b])])
```
```
  ])
```
```
 
```
```
const xor = ([a, b]) =>
```
```
  nand([
```
```
    nand([a, nand([a, b])]),
```
```
    nand([b, nand([a, b])])
```
```
  ])
```
```
 
```
```
const xnor = ([a, b]) => 
```
```
  nand([ 
```
```
    nand([nand([a, a]), nand([b, b])]),
```
```
    nand([a, b])
```
```
  ])
```
```
 
```
```
 
```
```
const inputs = [
```
```
  [0, 0],
```
```
  [0, 1],
```
```
  [1, 0],
```
```
  [1, 1]
```
```
]
```
```
 
```

const testGate = ({ gate, truth, result }) => console.log(

```
  gate + ' matches truth? ', 
```
```
  truth+'' === result+'' ? 
```

    'yes :D' : `nope :( ${truth} ${result}`

```
)
```
```
 
```
```
testGate({
```
```
  gate: 'NAND',
```
```
  truth: [1, 1, 1, 0],
```
```
  result: inputs.map(nand)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'NOT',
```
```
  truth: [0, 1],
```
```
  result: [[1], [0]].map(not)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'AND',
```
```
  truth: [0, 0, 0, 1],
```
```
  result: inputs.map(and)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'OR',
```
```
  truth: [0, 1, 1, 1],
```
```
  result: inputs.map(or)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'NOR',
```
```
  truth: [1, 0, 0, 0],
```
```
  result: inputs.map(nor)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'XOR',
```
```
  truth: [0, 1, 1, 0],
```
```
  result: inputs.map(xor)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'XNOR',
```
```
  truth: [1, 0, 0, 1],
```
```
  result: inputs.map(xnor)
```
```
})
```

Use NAND to create a bunch of other gates 😀 – I used this wikipedia article for reference

July 16, 2023

// arrays // golfed // humor // javascript // math

Older Posts

Newer Posts

Swrls

Golfed Codepen – 3D Spiral Thing

Faster than save/restore HTML5 canvas

Little Trading Program

Other Gates from NAND

Recent

Archive