Snippet Zone

T Plant

```
const { PI } = Math
```

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 = 'black'
```

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

```
 
```
```
document.body.append(canvas)
```
```
let o = -PI / 2
```
```
 
```
```
const r = (n = 1) => Math.random() * n
```
```
 
```
```
function branch(x, y, ang = o, f) {
```
```
  let vx, vy
```
```
  let life = 0
```
```
  let dead
```
```
  let vv = 1 + r(2)
```
```
  let ll = r(200)
```
```
  let a = 1;
```
```
  if (f) a = 0
```
```
 
```
```
  return () => {
```
```
    if (dead) return
```
```
    if (life > 200 + ll) {
```
```
      dead = true;
```
```
      let n = 10 + r(20)
```
```
      for (let i = 0; i < n; i++) {
```
```
 
```
```
        let dest = {
```
```
          x,
```
```
          y: y + r(30) - 15
```
```
        }
```
```
        bs.push(leafPart(x, y, dest))
```
```
      }
```
```
    }
```
```
 
```
```
    life++
```

    if (life > 10 && a >= 1 && Math.random() < .02 && bs.length < 20) {

```
      if (r() < .3) {
```
```
        dead = true
```
```
        bs.push(
```

          branch(x, y, ang + r(PI / 4)))

```
        branch(x, y, ang + r(-PI / 4))
```
```
        return
```
```
      }
```
```
      bs.push(
```
```
        branch(x, y, o + r(2) - 1))
```
```
    }
```
```
    vx = Math.cos(ang)
```
```
    vy = Math.sin(ang) * vv
```
```
    ang += r(.1) - .05
```
```
 
```
```
    x += vx
```
```
    y += vy
```

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

```
    if (f) {
```
```
      a += .01
```
```
    }
```
```
 
```
```
    c.fillRect(x, y, 4, 4)
```
```
  }
```
```
}
```
```
 
```
```
function leafPart(x, y, dest) {
```
```
  let ang = r(7)
```
```
  let rr = r(1) + .5
```
```
  let vv = -r(3)
```
```
  let life = 0
```
```
  let maxLife = 40 + r(200)
```
```
  let vx
```
```
  let vy
```
```
  let CC = 190 + r(30)
```
```
 
```
```
  return () => {
```
```
    life++
```
```
    if (life < maxLife) {
```
```
      vx = Math.cos(ang) * rr
```
```
      vy = Math.sin(ang) * rr + vv
```
```
      x += vx
```
```
      y += vy
```
```
      ang += r(.4) - .2
```

      c.fillStyle = 'rgba(255, 255, 255, .1)'

```
    } else {
```

      c.fillStyle = `rgba(255, ${CC}, ${CC}, .25)`

```
      x += (dest.x - x) / 42
```
```
      y += (dest.y - y) / 12
```
```
    }
```
```
 
```
```
    c.fillRect(x, y, 4, 4)
```
```
  }
```
```
}
```
```
let bs = []
```
```
let lf = []
```
```
 
```
```
bs.push(
```

  branch(innerWidth, innerHeight * 1.9, o, true)

```
)
```
```
 
```
```
function loop() {
```
```
  bs.forEach(b => b())
```
```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Been pretty consistently posting speed-coded youtube shorts. This is a recent one. Magic numbers, nonsense variable names, and strange noops 😀

See the short here…

August 2, 2025

// animation // canvas // codegolf // color // curves // graphics // hacks // javascript // random // speed-coded // speedcoding // tricks

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

Collatz Conjecture

```
collatz = n => 
```
```
  n % 2 == 0 ? n / 2 : 3 * n + 1
```
```
 
```
```
iter = (v, i = 10, o = 0) => {
```
```
  n = collatz(v)
```
```
  console.log(n)
```
```
  o < i && iter(n, i, ++o)
```
```
} 
```
```
 
```
```
iter(111, 100)
```

334, 167, 502, 251, 754, 377, 1132, 566, 283, 850, 425, 1276, 638, 319, 958, 479, 1438, 719, 2158, 1079, 3238, 1619, 4858, 2429, 7288, 3644, 1822, 911, 2734, 1367, 4102, 2051, 6154, 3077, 9232, 4616, 2308, 1154, 577, 1732, 866, 433, 1300, 650, 325, 976, 488, 244, 122, 61, 184, 92, 46, 23, 70, 35, 106, 53, 160, 80, 40, 20, 10, 5, 16, 8, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2

February 16, 2025

// codegolf // javascript // math

zxlp Hidden Sierpiński

```
// https://actionsnippet.com/?p=349
```
```
// zxlp : Hidden Sierpiński
```

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
let s = .5
```
```
canvas.width = innerWidth * s
```
```
canvas.height = innerHeight * s
```
```
canvas.style.transformOrigin = '0 0'
```
```
canvas.style.scale = 1 / s
```

canvas.style.imageRendering = 'pixelated'

```
document.body.append(canvas)
```
```
 
```

const frame = document.createElement('canvas')

```
const fc = frame.getContext('2d')
```
```
frame.width = canvas.width
```
```
frame.height = canvas.height
```
```
 
```

const copy = document.createElement('canvas')

```
const cc = copy.getContext('2d')
```
```
copy.width = canvas.width
```
```
copy.height = canvas.height
```
```
 
```
```
frame.style.left = '100px' 
```
```
frame.style.top = '100px'
```
```
 
```
```
fc.fillStyle = 'red'
```
```
fc.fillRect(0, 0, 100, 100)
```
```
 
```

const _ = c.getImageData(0, 0, canvas.width, canvas.height)

```
 
```

const size = canvas.width * canvas.height * 4

```
 
```
```
let mx = 0
```
```
let mouseX = 0
```
```
 
```
```
onpointermove = e => {
```
```
  mx = e.clientX
```
```
}
```
```
 
```
```
function loop() {
```
```
  mouseX += (mx - mouseX) / 50
```
```
 
```
```
  for (let i = 0; i < size; i += 4) {
```
```
    let ox = (~~(i / 4)) % canvas.width
```
```
    let oy = (~~(i / 4)) / canvas.width
```

    let col = ((ox | oy) * mouseX / 20) % 255

```
 
```
```
    _.data[i] = 0
```
```
    _.data[i + 1] = col
```
```
    _.data[i + 2] = col
```
```
    _.data[i + 3] = 255
```
```
  }
```
```
 
```
```
  c.putImageData(_, 0, 0)
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

port of an old actionsnippet (see here) – made a youtube short of it at some point here…

February 15, 2025

// binary // canvas // color // graphics // hacks // hex // javascript // math // oldschool // tricks

crystl

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
let w;
```
```
let h;
```
```
 
```
```
onresize = e => {
```
```
  w = innerWidth * 2
```
```
  h = innerHeight * 2
```
```
  canvas.width = w
```
```
  canvas.height = h
```
```
  canvas.style.width = (w / 2) + 'px'
```

  canvas.style.height = (h / 2) + 'px'

```
  c.fillStyle = '#000'
```
```
  c.fillRect(0, 0, w, h) 
```
```
}
```
```
onresize()
```
```
 
```
```
document.body.append(canvas)
```

canvas.style.filter = 'contrast(2) brightness(1.2)'

```
 
```
```
class Crystal {
```
```
  constructor() {
```
```
    this.init()
```
```
  }
```
```
  init() {
```
```
    this.x = w / 2
```
```
    this.y = h * .7
```
```
    this.rad = 250
```
```
 
```
```
    this.sides = 5
```
```
    // + ~~(Math.random() * 5)
```

    this.shrinkTime = 400 + Math.random() * 100

```
    this.t = Math.random() * 7
```
```
    this.st = this.t;
```

    this.step = (Math.PI * 2) / this.sides

```
    this.time = 0
```

    this.shrinkSpeed = 1.3 - Math.random() * .6

```
    this.a = 0
```
```
    this.ad = .05
```
```
  }
```
```
 
```
```
  draw() { 
```
```
 
```
```
    this.a += (this.ad - this.a) / 150
```
```
    c.lineWidth = 5
```

    c.strokeStyle = `rgba(255, 255, 255, ${this.a})`

    c.fillStyle = `rgba(0, 111, 122, ${this.a / 2})`

```
    c.beginPath()
```
```
 
```
```
    for (let j = 0; j < 2; j++) {
```
```
      this.time++
```

      if (this.time > this.shrinkTime) {

```
        this.rad -= this.shrinkSpeed
```
```
        if (this.rad < 0) {
```
```
          setTimeout(() => {
```

            c.fillStyle = 'rgba(0, 0, 0, .02)'

```
            c.fillRect(0, 0, w, h)
```
```
            this.init()
```
```
          }, 500)
```
```
          return;
```
```
        }
```
```
      }
```
```
      this.t = this.st
```

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

```
        let p = {
```

          x: this.rad * Math.cos(this.t),

          y: this.rad * .6 * Math.sin(this.t)

```
        }
```
```
        this.t += this.step;
```
```
        if (i === 0) {
```

          c.moveTo(this.x + p.x, this.y + p.y)

```
        } else {
```

          c.lineTo(this.x + p.x, this.y + p.y)

```
        }
```
```
      }
```
```
      c.closePath()
```
```
      c.stroke() 
```
```
      c.fill()
```
```
 
```
```
 
```
```
      this.y -= 1
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
let cryst = new Crystal()
```
```
 
```
```
 
```
```
setInterval(() => {
```

  for (let i = 0; i < 3; i++) cryst.draw()

```
}, 16)
```

quick crystal for recent youtube short…

July 27, 2024

// 3d // canvas // gradients // graphics // hacks // isometric // javascript // math // random // speed-coded // speedcoding // tricks

Older Posts

Newer Posts

T Plant

GLSL Sierpiński Glitch Texture #3

Collatz Conjecture

zxlp Hidden Sierpiński

crystl

Recent

Archive