Snippet Zone

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

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

Em3w parensordot

```
const vals = {
```
```
  E: 0, M: 90, '3': 180, W: 270
```
```
}
```
```
 
```
```
// const byDeg = {
```

//   0: 'E', 90: 'M', 180: '3', 270: 'W'

```
// }
```

const byDeg = Object.keys(vals).reduce((acc, key) => {

```
  acc[vals[key]] = key;
```
```
  return acc;
```
```
}, {});
```
```
 
```
```
 
```
```
const ops = {
```
```
  ')': 90, '(' : -90, '|': 180
```
```
}
```
```
 
```
```
function rotToSym(v) {
```
```
  if (v < 0) v += 360;
```
```
  const deg = Math.abs(v % 360);
```
```
  return byDeg[deg]
```
```
}
```
```
 
```
```
function op(char, op) {
```

  if (char === 'M' && op === '|') return 'M'

  if (char === 'W' && op === '|') return 'W'

```
  let v = vals[char]
```
```
  v += ops[op]
```
```
  return rotToSym(v)
```
```
}
```
```
 
```
```
 
```
```
function emw(prog) {
```
```
  prog = [...prog]
```
```
 
```
```
  let chars = []
```
```
  let res = []
```

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

```
    let char = prog[i]
```
```
    if (vals[char] != null) {
```
```
      chars.push(char)
```
```
    } else if (ops[char]) {
```

      chars = chars.map(v => op(v, char))

    } else if (char === '.' && chars.length > 0) {

      const num = chars.map(v => vals[v])

```
        .reduce((a, b) => a + b, 0);
```
```
      chars = [rotToSym(num)]
```
```
    }
```
```
  }
```
```
  return chars.join``
```
```
}
```
```
 
```
```
function expr(prog) {
```
```
  const orig = prog;
```
```
  prog = prog.split(/\s/)
```

  return orig + ' = ' + prog.map(emw).join` `

```
}
```
```
 
```
```
document.body.appendChild(
```
```
  Object.assign(
```
```
    document.createElement`pre`, {
```
```
      innerHTML: 
```
```
`
```
```
Em3w parensordot 
```
```
 
```
```
// rotate 90 clockwise
```
```
${expr('EEE)')}
```
```
 
```
```
// rotate -90 clockwise
```
```
${expr('W(')}
```
```
${expr('W((')}
```
```
 
```
```
// mirror
```
```
${expr('E|')}
```
```
 
```
```
// mirror
```
```
${expr('EM|')}
```
```
 
```
```
${expr('WW3) MM) EEEM).')}
```
```
 
```
```
// sum rotations
```
```
${expr('MMM.')}
```
```
 
```
```
${expr(
```
```
`E) E( E)) EEE))) E)))) MM33).`)}
```
```
`}
```
```
  )
```
```
)
```

Fun thing I wanted to make for awhile… definitely going to do some doodles of this in my sketchbook…

Code description from GPT4 because I’m too lazy to write one…

This code is implementing a form of symbolic computation using a transformational language. This language has four primary symbols: “E”, “M”, “3”, and “W”. Each of these symbols is associated with a specific angle: 0, 90, 180, and 270 degrees, respectively.

There are also special symbols, which act as operators that perform certain transformations on the primary symbols:

“)”: Represents a rotation 90 degrees clockwise.

“(“: Represents a rotation 90 degrees counter-clockwise.

“|”: Represents a mirror operation, which reverses the direction. However, “M” and “W” are unaffected by this operation.

“.”: This operator sums up all previous primary symbols (by their respective degree values), resulting in a new symbol. The degree value of the new symbol is the sum of the previous degrees modulo 360.

The function emw(prog) interprets a string prog as a sequence of symbols and operations. It reads each character in the string and based on whether it’s a primary symbol, operator, or a “.”, it either adds the symbol to an array or performs an operation on the existing symbols in the array.

The expr(prog) function splits the input string prog into space-separated substrings. It interprets each substring as a sequence in the transformational language, using the emw function. It then joins the results together with a space and prepends the original input and an equals sign to give a string representation of the transformations.

The final section of the code generates a series of examples of expressions in this language, evaluates them using the expr function, and adds the results to the HTML body of a webpage in a formatted manner. This gives the user a way to see the transformations in action.

July 24, 2023

// humor // javascript // obfuscation // speed-coded // speedcoding // strings

Older Posts