)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Polar Forking Tweak

  1. const FOUR_PI = 6 * Math.PI;
  2. const { cos, sin } = Math;
  3.  
  4. const canvas = document.body.appendChild(
  5.   document.createElement('canvas')
  6. );
  7. const c = canvas.getContext('2d');
  8.  
  9. function resize() {
  10.   canvas.width = window.innerWidth;
  11.   canvas.height = window.innerHeight;
  12. }
  13.  
  14. let inc = 0;
  15. function draw() { 
  16.   c.fillStyle = 'rgba(0, 0, 0, .3)'
  17.   c.fillRect(0, 0, canvas.width, canvas.height)
  18.   c.fillStyle = 'white';
  19.  
  20.   const halfWidth = window.innerWidth / 2;
  21.   const halfHeight = window.innerHeight / 2;
  22.   let theta = 0,
  23.     a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,
  24.     x,
  25.     y;
  26.  
  27.   c.save();
  28.   c.translate(halfWidth, halfHeight)
  29.  
  30.   let b = 5 * cos(inc);
  31.   inc += .02;
  32.  
  33.   for (let i = 0; theta < FOUR_PI; i++) {
  34.     let rad = a * (b + 10 * sin(theta / 3));
  35.     // randomly speed-coded and tweaked... leaving as is :D
  36.     x = rad * cos(theta + b / 10) * cos(b / 10 +theta * 2) * cos(theta * 2);
  37.     y = rad * sin(theta * 2) * cos(theta + b / 3) * cos(theta * 2);
  38.     c.fillRect(x,y, 2, 2);
  39.     theta += 0.04;
  40.   }
  41.   c.restore();
  42.  
  43.   requestAnimationFrame(draw)
  44. }
  45.  
  46. resize();
  47. addEventListener('resize', resize);
  48.  
  49. draw();

Just randomly futzing with sin/cos…

// animation // canvas // curves // graphics // hacks // humor // math

Freeth’s Nephroid Animated

  1. const FOUR_PI = 4 * Math.PI;
  2. const { cos, sin } = Math;
  3.  
  4. const canvas = document.body.appendChild(
  5.   document.createElement('canvas')
  6. );
  7. const c = canvas.getContext('2d');
  8.  
  9. function resize() {
  10.   canvas.width = window.innerWidth;
  11.   canvas.height = window.innerHeight;
  12. }
  13.  
  14. let inc = 0;
  15. function draw() {
  16.   c.clearRect(0, 0, canvas.width, canvas.height);
  17.   c.fillStyle = 'blue';
  18.  
  19.   const halfWidth = window.innerWidth / 2;
  20.   const halfHeight = window.innerHeight / 2;
  21.   let theta = 0,
  22.     a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,
  23.     x,
  24.     y;
  25.  
  26.   c.save();
  27.   c.translate(halfWidth, halfHeight)
  28.  
  29.   // Freeth's Nephroid
  30.   // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/
  31.   // r = a(1 + 2sin(θ / 2))
  32.   let b = 2 * cos(inc);
  33.   inc += .01;
  34.  
  35.   for (let i = 0; theta < FOUR_PI; i++) {
  36.     let rad = a * (b + 2 * sin(theta / 2))
  37.     x = rad * cos(theta);
  38.     y = rad * sin(theta);
  39.     c.fillRect(x, y, 2, 2);
  40.     theta += 0.05;
  41.   }
  42.   c.restore();
  43.  
  44.   requestAnimationFrame(draw)
  45. }
  46.  
  47. resize();
  48. window.addEventListener('resize', resize);
  49.  
  50. draw()

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

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

Hermit Crab Curves

  1. // six white geometric figures (outlines) superimposed on a black wall.
  2. d = document
  3. b = d.body
  4. S = 600
  5. hs = S / 2
  6. with(Math) {
  7. with(
  8.   b.appendChild(Object.assign(
  9.   d.createElement`canvas`, { width: S, height: S })
  10.   ).getContext`2d`) {
  11.  
  12.     fillRect(0, 0, S, S)
  13.     strokeStyle = '#fff'
  14.  
  15.     canvas.style.transformOrigin = '0 0'
  16.     canvas.style.transform = 'scale(.5)'
  17.  
  18.     lineWidth = 8
  19.  
  20.     H = (
  21.       s = S * .5,
  22.       yp = hs, xp = hs,
  23.       a = 1.234,
  24.       d = 0.1678,
  25.       o = 3.9
  26.       ) => {
  27.         beginPath()
  28.         for (t = 0; t < 6.28; t+=.2) {
  29.           r = sqrt(a ** PI % sin(d * (t ** 2 * a) + o)) * s
  30.           x = xp + r * sin(t);
  31.           y = yp + r * cos(t);
  32.           t === 0 ? moveTo(x, y) : lineTo(x, y)
  33.         }
  34.         closePath()
  35.         stroke()
  36.         fill()
  37.     }
  38.  
  39.     tick = 0
  40.     loop = _ => {
  41.       fillStyle = 'rgba(0, 0, 0, 0.5)'
  42.       fillRect(0, 0, S, S)
  43.       save()
  44.       translate(S/2, S/2)
  45.       scale(.5, .5)
  46.       rotate(tick * 20)
  47.       translate(-S/2, -S/2)
  48.       tick += .0001
  49.       globalAlpha = .8;
  50.       H(S, hs, hs, 1 + tick)
  51.       H(S, hs, hs, 1.1 + tick)
  52.       H(S, hs, hs, 1.2 + tick)
  53.       globalAlpha = 1;
  54.       H(S * .3, hs-S/4, hs, 1, tick)
  55.       H(S * .2, hs+S/4, hs, 1.2, tick, 1.8)
  56.       H(S * .2, hs, hs - S/4, cos(tick), -tick, 5)
  57.       restore()
  58.       requestAnimationFrame(loop)
  59.     }
  60.     loop()
  61.   }
  62. }

Another thing for #genuary2022… Sol LeWitt Wall Drawing

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

Dividing Squares

  1. d = document
  2. b = d.body
  3. S = 300
  4. with(
  5.   b.appendChild(Object.assign(
  6.   d.createElement`canvas`, { width: S, height: S })
  7.   ).getContext`2d`) {
  8.  
  9.   seed = Math.random();
  10.  
  11.   rando = () => {
  12.     seed = seed * 16807 % 0x7fffffff
  13.     return (seed - 1) / 0x7ffffffe
  14.   }
  15.  
  16.   squares = {}
  17.   rot = (
  18.     cx, cy, X, Y, ang,
  19.     cos = Math.cos(-ang),
  20.     sin = Math.sin(-ang),
  21.     x = cos * (X - cx) + sin * (Y - cy) + cx,
  22.     y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })
  23.  
  24.   inc = 0
  25.   breaks = 0
  26.   delay = 0
  27.   ticks = 0
  28.  
  29.   square = (x = S / 2, y = S / 2,
  30.     size = S * .7,
  31.     r = 0,
  32.     rad = .3,
  33.     hSize = size / 2,
  34.  
  35.     t = rando() * 7,
  36.     vx = rando() * rad * Math.cos(t),
  37.     vy = rando() * rad * Math.sin(t),
  38.  
  39.     vr = rando() * .02 - .01,
  40.     i, j,
  41.     o = {
  42.     id:inc++,
  43.     sr(R) {
  44.       r = R
  45.     },
  46.  
  47.     divide(num = 2, cSize = size / num,
  48.       chSize = cSize / 2,
  49.       sx = x - hSize + chSize,
  50.       sy = y - hSize + chSize) {
  51.  
  52.       save()
  53.  
  54.       translate(-size * .1, -size * .1)
  55.       scale(1.1, 1.1)
  56.  
  57.       o.render('rgba(255, 255, 255, .7)')
  58.       restore()
  59.  
  60.       for (i = 0; i < num; i++) {
  61.         for (j = 0; j < num; j++) {
  62.           l = rot(x, y, sx + i * cSize, sy + j * cSize, r)
  63.           square(l.x, l.y, cSize, r, rad + 2)
  64.         }
  65.       }
  66.     },
  67.  
  68.     render(fill = '#000') {
  69.       save()
  70.       translate(x, y)
  71.       rotate(r)
  72.       fillStyle = fill
  73.       strokeStyle = '#fff'
  74.       lineWidth = 2
  75.       fillRect(-hSize,-hSize, size, size)
  76.       strokeRect(-hSize,-hSize, size, size)
  77.       restore()
  78.     },
  79.  
  80.     draw() {
  81.       x += vx
  82.       y += vy
  83.       r += o.id === 0 ? .01 : vr
  84.       o.render()
  85.       if (rando() < .05 && breaks < 10 && 
  86.           delay > 30 && ticks > 200) {
  87.  
  88.         o.divide(~~(rando() * 3) + 2)
  89.         delete squares[o.id]
  90.         breaks++
  91.         delay = 0
  92.       }
  93.     }
  94.   }) => (squares[o.id] = o)
  95.  
  96.   square()
  97.  
  98.   C = Object.assign(
  99.     d.createElement`canvas`, { width: S, height: S }
  100.   ).getContext`2d`
  101.  
  102.   fillStyle = 'rgba(82, 82, 82, 1)'
  103.   fillRect(0, 0, S, S)
  104.  
  105.   loop = _ => {
  106.     ticks++
  107.     fillStyle = 'rgba(82, 82, 82, 0.1)'
  108.     fillRect(0, 0, S, S)
  109.  
  110.     globalAlpha = .4
  111.  
  112.     drawImage(C.canvas, -1, 5, S + 1, S + 5)
  113.     globalAlpha = 1
  114.  
  115.     save()
  116.     translate(20, 50)
  117.     scale(.9, .7)
  118.  
  119.     for (i in squares) {
  120.       squares[i].draw()
  121.     }
  122.  
  123.     restore()
  124.     delay++
  125.     C.drawImage(canvas, 0, 0)
  126.     requestAnimationFrame(loop)
  127.   }
  128.   loop()
  129. }

Another thing for #genuary2022… destroy a square

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

Gumowski / Mira Thing

  1. D = document
  2. B = D.body
  3. S = 1200
  4. with(
  5.   B.appendChild(Object.assign(
  6.     D.createElement`canvas`, {
  7.       width: S,
  8.       height: S
  9.     })).getContext`2d`) {
  10.  
  11.   canvas.style.transformOrigin = '0 0'
  12.   canvas.style.transform = 'scale(.5)'
  13.  
  14.   b = .9998
  15.   xn1 = 5
  16.   yn1 = 0
  17.   xn = yn = 0
  18.   scale = 20
  19.   iterations = 1000
  20.  
  21.   f = x => {
  22.     x2 = x * x
  23.     return a * x + (2 * (1 - a) * x2) / (1 + x2)
  24.   }
  25.  
  26.   mouseX = mouseY = 0
  27.   onpointermove = e => {
  28.     mouseX = e.clientX
  29.     mouseY = e.clientY
  30.   }
  31.  
  32.   dwn = 0
  33.  
  34.   fillStyle = '#000'
  35.   fillRect(0, 0, S, S)
  36.  
  37.   loop = _ => {
  38.  
  39.     a = mouseY / 1000
  40.     xn1 = mouseX / 30
  41.     yn1 = 0
  42.  
  43.     dwn += 1
  44.  
  45.     for (var i = 0; i < iterations; i++) {
  46.       xn = xn1;
  47.       yn = yn1;
  48.  
  49.       fillStyle = `hsla(${i / 30}, ${dwn / 6}%, 50%, .2)`
  50.  
  51.       xn1 = b * yn + f(xn)
  52.       yn1 = -xn + f(xn1)
  53.       fillRect(S * .5 + xn1 * scale, yn1 * scale / 2 + dwn, 1, 1)
  54.     }
  55.  
  56.     requestAnimationFrame(loop)
  57.   }
  58.   loop()
  59. }

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

// animation // canvas // graphics // math // speedcoding
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}