Snippet Zone

Freeth’s Nephroid Animated

```
const FOUR_PI = 4 * Math.PI;
```
```
const { cos, sin } = Math;
```
```
 
```

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
 
```
```
function resize() {
```
```
  canvas.width = window.innerWidth;
```
```
  canvas.height = window.innerHeight;
```
```
}
```
```
 
```
```
let inc = 0;
```
```
function draw() {
```

  c.clearRect(0, 0, canvas.width, canvas.height);

```
  c.fillStyle = 'blue';
```
```
 
```

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

```
  let theta = 0,
```

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

```
    x,
```
```
    y;
```
```
 
```
```
  c.save();
```
```
  c.translate(halfWidth, halfHeight)
```
```
 
```
```
  // Freeth's Nephroid
```

  // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/

```
  // r = a(1 + 2sin(θ / 2))
```
```
  let b = 2 * cos(inc);
```
```
  inc += .01;
```
```
 
```

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 2 * sin(theta / 2))

```
    x = rad * cos(theta);
```
```
    y = rad * sin(theta);
```
```
    c.fillRect(x, y, 2, 2);
```
```
    theta += 0.05;
```
```
  }
```
```
  c.restore();
```
```
 
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
 
```
```
resize();
```

window.addEventListener('resize', resize);

```
 
```
```
draw()
```

It’s always fun to play with curves from here Famous Curves Index

January 11, 2022

// animation // canvas // javascript // math

Draw an Egg on Canvas Javascript

```
const TWO_PI = Math.PI * 2;
```
```
const THREE_PI = 3 * Math.PI;
```

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
 
```
```
const c = canvas.getContext('2d');
```

const halfWidth = (canvas.width = 250) / 2;

const halfHeight = (canvas.height = 250) / 2;

```
 
```
```
const scale = 10;
```
```
 
```
```
c.fillStyle = '#f0e195';
```
```
c.strokeStyle = '#c2a272';
```
```
c.beginPath();
```
```
 
```

for (let theta = 0; theta <= TWO_PI; theta += 0.02) {

  const x = (TWO_PI - Math.sin(theta)) * Math.cos(theta);

```
  const y = THREE_PI * Math.sin(theta);
```

  c.lineTo(halfWidth + x * scale, halfHeight - y * scale);

```
}
```
```
 
```
```
c.fill();
```
```
c.stroke();
```

Draw a parametric egg curve…

January 10, 2022

// canvas // javascript // math

Hermit Crab Curves

// six white geometric figures (outlines) superimposed on a black wall.

```
d = document
```
```
b = d.body
```
```
S = 600
```
```
hs = S / 2
```
```
with(Math) {
```
```
with(
```
```
  b.appendChild(Object.assign(
```

  d.createElement`canvas`, { width: S, height: S })

```
  ).getContext`2d`) {
```
```
 
```
```
    fillRect(0, 0, S, S)
```
```
    strokeStyle = '#fff'
```
```
 
```

    canvas.style.transformOrigin = '0 0'

    canvas.style.transform = 'scale(.5)'

```
 
```
```
    lineWidth = 8
```
```
 
```
```
    H = (
```
```
      s = S * .5,
```
```
      yp = hs, xp = hs,
```
```
      a = 1.234,
```
```
      d = 0.1678,
```
```
      o = 3.9
```
```
      ) => {
```
```
        beginPath()
```
```
        for (t = 0; t < 6.28; t+=.2) {
```

          r = sqrt(a ** PI % sin(d * (t ** 2 * a) + o)) * s

```
          x = xp + r * sin(t);
```
```
          y = yp + r * cos(t);
```

          t === 0 ? moveTo(x, y) : lineTo(x, y)

```
        }
```
```
        closePath()
```
```
        stroke()
```
```
        fill()
```
```
    }
```
```
 
```
```
    tick = 0
```
```
    loop = _ => {
```
```
      fillStyle = 'rgba(0, 0, 0, 0.5)'
```
```
      fillRect(0, 0, S, S)
```
```
      save()
```
```
      translate(S/2, S/2)
```
```
      scale(.5, .5)
```
```
      rotate(tick * 20)
```
```
      translate(-S/2, -S/2)
```
```
      tick += .0001
```
```
      globalAlpha = .8;
```
```
      H(S, hs, hs, 1 + tick)
```
```
      H(S, hs, hs, 1.1 + tick)
```
```
      H(S, hs, hs, 1.2 + tick)
```
```
      globalAlpha = 1;
```
```
      H(S * .3, hs-S/4, hs, 1, tick)
```

      H(S * .2, hs+S/4, hs, 1.2, tick, 1.8)

      H(S * .2, hs, hs - S/4, cos(tick), -tick, 5)

```
      restore()
```
```
      requestAnimationFrame(loop)
```
```
    }
```
```
    loop()
```
```
  }
```
```
}
```

Another thing for #genuary2022… Sol LeWitt Wall Drawing

January 7, 2022

// animation // canvas // graphics // hacks // javascript // math

Dividing Squares

```
d = document
```
```
b = d.body
```
```
S = 300
```
```
with(
```
```
  b.appendChild(Object.assign(
```

  d.createElement`canvas`, { width: S, height: S })

```
  ).getContext`2d`) {
```
```
 
```
```
  seed = Math.random();
```
```
 
```
```
  rando = () => {
```
```
    seed = seed * 16807 % 0x7fffffff
```
```
    return (seed - 1) / 0x7ffffffe
```
```
  }
```
```
 
```
```
  squares = {}
```
```
  rot = (
```
```
    cx, cy, X, Y, ang,
```
```
    cos = Math.cos(-ang),
```
```
    sin = Math.sin(-ang),
```

    x = cos * (X - cx) + sin * (Y - cy) + cx,

    y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })

```
 
```
```
  inc = 0
```
```
  breaks = 0
```
```
  delay = 0
```
```
  ticks = 0
```
```
 
```
```
  square = (x = S / 2, y = S / 2,
```
```
    size = S * .7,
```
```
    r = 0,
```
```
    rad = .3,
```
```
    hSize = size / 2,
```
```
 
```
```
    t = rando() * 7,
```
```
    vx = rando() * rad * Math.cos(t),
```
```
    vy = rando() * rad * Math.sin(t),
```
```
 
```
```
    vr = rando() * .02 - .01,
```
```
    i, j,
```
```
    o = {
```
```
    id:inc++,
```
```
    sr(R) {
```
```
      r = R
```
```
    },
```
```
 
```
```
    divide(num = 2, cSize = size / num,
```
```
      chSize = cSize / 2,
```
```
      sx = x - hSize + chSize,
```
```
      sy = y - hSize + chSize) {
```
```
 
```
```
      save()
```
```
 
```
```
      translate(-size * .1, -size * .1)
```
```
      scale(1.1, 1.1)
```
```
 
```

      o.render('rgba(255, 255, 255, .7)')

```
      restore()
```
```
 
```
```
      for (i = 0; i < num; i++) {
```
```
        for (j = 0; j < num; j++) {
```

          l = rot(x, y, sx + i * cSize, sy + j * cSize, r)

          square(l.x, l.y, cSize, r, rad + 2)

```
        }
```
```
      }
```
```
    },
```
```
 
```
```
    render(fill = '#000') {
```
```
      save()
```
```
      translate(x, y)
```
```
      rotate(r)
```
```
      fillStyle = fill
```
```
      strokeStyle = '#fff'
```
```
      lineWidth = 2
```

      fillRect(-hSize,-hSize, size, size)

      strokeRect(-hSize,-hSize, size, size)

```
      restore()
```
```
    },
```
```
 
```
```
    draw() {
```
```
      x += vx
```
```
      y += vy
```
```
      r += o.id === 0 ? .01 : vr
```
```
      o.render()
```

      if (rando() < .05 && breaks < 10 &&

```
          delay > 30 && ticks > 200) {
```
```
 
```
```
        o.divide(~~(rando() * 3) + 2)
```
```
        delete squares[o.id]
```
```
        breaks++
```
```
        delay = 0
```
```
      }
```
```
    }
```
```
  }) => (squares[o.id] = o)
```
```
 
```
```
  square()
```
```
 
```
```
  C = Object.assign(
```

    d.createElement`canvas`, { width: S, height: S }

```
  ).getContext`2d`
```
```
 
```
```
  fillStyle = 'rgba(82, 82, 82, 1)'
```
```
  fillRect(0, 0, S, S)
```
```
 
```
```
  loop = _ => {
```
```
    ticks++
```
```
    fillStyle = 'rgba(82, 82, 82, 0.1)'
```
```
    fillRect(0, 0, S, S)
```
```
 
```
```
    globalAlpha = .4
```
```
 
```

    drawImage(C.canvas, -1, 5, S + 1, S + 5)

```
    globalAlpha = 1
```
```
 
```
```
    save()
```
```
    translate(20, 50)
```
```
    scale(.9, .7)
```
```
 
```
```
    for (i in squares) {
```
```
      squares[i].draw()
```
```
    }
```
```
 
```
```
    restore()
```
```
    delay++
```
```
    C.drawImage(canvas, 0, 0)
```
```
    requestAnimationFrame(loop)
```
```
  }
```
```
  loop()
```
```
}
```

Another thing for #genuary2022… destroy a square

January 5, 2022

// animation // canvas // javascript // math // speedcoding

Gumowski / Mira Thing

```
D = document
```
```
B = D.body
```
```
S = 1200
```
```
with(
```
```
  B.appendChild(Object.assign(
```
```
    D.createElement`canvas`, {
```
```
      width: S,
```
```
      height: S
```
```
    })).getContext`2d`) {
```
```
 
```
```
  canvas.style.transformOrigin = '0 0'
```
```
  canvas.style.transform = 'scale(.5)'
```
```
 
```
```
  b = .9998
```
```
  xn1 = 5
```
```
  yn1 = 0
```
```
  xn = yn = 0
```
```
  scale = 20
```
```
  iterations = 1000
```
```
 
```
```
  f = x => {
```
```
    x2 = x * x
```

    return a * x + (2 * (1 - a) * x2) / (1 + x2)

```
  }
```
```
 
```
```
  mouseX = mouseY = 0
```
```
  onpointermove = e => {
```
```
    mouseX = e.clientX
```
```
    mouseY = e.clientY
```
```
  }
```
```
 
```
```
  dwn = 0
```
```
 
```
```
  fillStyle = '#000'
```
```
  fillRect(0, 0, S, S)
```
```
 
```
```
  loop = _ => {
```
```
 
```
```
    a = mouseY / 1000
```
```
    xn1 = mouseX / 30
```
```
    yn1 = 0
```
```
 
```
```
    dwn += 1
```
```
 
```

    for (var i = 0; i < iterations; i++) {

```
      xn = xn1;
```
```
      yn = yn1;
```
```
 
```

      fillStyle = `hsla(${i / 30}, ${dwn / 6}%, 50%, .2)`

```
 
```
```
      xn1 = b * yn + f(xn)
```
```
      yn1 = -xn + f(xn1)
```

      fillRect(S * .5 + xn1 * scale, yn1 * scale / 2 + dwn, 1, 1)

```
    }
```
```
 
```
```
    requestAnimationFrame(loop)
```
```
  }
```
```
  loop()
```
```
}
```

Move your around as the Gumowski / Mira shape moves down the screen…

January 4, 2022

// animation // canvas // graphics // math // speedcoding

Older Posts

Newer Posts

Freeth’s Nephroid Animated

Draw an Egg on Canvas Javascript

Hermit Crab Curves

Dividing Squares

Gumowski / Mira Thing

Recent

Archive