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

Rotate Point Around Point (Golfed)

  1.   rot = (
  2.     cx, cy, X, Y, ang,
  3.     cos = Math.cos(-ang),
  4.     sin = Math.sin(-ang),
  5.     x = cos * (X - cx) + sin * (Y - cy) + cx,
  6.     y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })

Rotate one point around another… I like to use something like this when speed-coding and golfing…

// math // matrix // oldschool // tricks

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

Polar Plots

  1. const Pnt = (x, y, p = { x, y }) => (
  2.   p.add = o => (p.x += o.x, p.y += o.y, p), p
  3. );
  4. Pnt.polar = (rad, t) => Pnt(rad * Math.cos(t), rad * Math.sin(t));
  5.  
  6. const pnts = {};
  7. let index = -1;
  8. const polar = (inc, rad) => {
  9.   index++;
  10.   if (!pnts[index]) pnts[index] = 0;
  11.   return Pnt.polar(rad, (pnts[index] += inc));
  12. };
  13.  
  14. let d = document;
  15. let b = d.body;
  16. with (b.appendChild(
  17.   Object.assign(d.createElement`canvas`, {
  18.     width: 600,
  19.     height: 500,
  20.   })
  21. ).getContext`2d`) {
  22.   canvas.style.transformOrigin = "0 0";
  23.   canvas.style.transform = "scale(.6)";
  24.  
  25.   let p0 = Pnt(80, 100);
  26.   let p1 = Pnt(270, 100);
  27.   let p2 = Pnt(480, 40);
  28.   let p3 = Pnt(170, 180);
  29.   let p4 = Pnt(430, 300);
  30.  
  31.   fillStyle = "black";
  32.  
  33.   function loop() {
  34.     for (let i = 0; i < 20; i++) {
  35.       index = -1;
  36.  
  37.       p0.add(polar(0.2, 4).add(polar(-0.4, 2).add(polar(0.05, 1))));
  38.       fillRect(p0.x, p0.y, 1, 1);
  39.  
  40.       p1.add(
  41.         polar(0.1, 2).add(
  42.           polar(-0.2, 2).add(polar(0.03, 1).add(polar(-0.01, 0.5)))
  43.         )
  44.       );
  45.       fillRect(p1.x, p1.y, 1, 1);
  46.  
  47.       p2.add(polar(0.08, 3).add(polar(-0.2, -12).add(polar(2, 10))));
  48.       fillRect(p2.x, p2.y, 1, 1);
  49.  
  50.       p3.add(polar(0.08, 7).add(polar(-0.2, -12).add(polar(2, 11))));
  51.       fillRect(p3.x, p3.y, 1, 1);
  52.  
  53.       p4 = p4.add(polar(0.025, 2).add(polar(-0.05, 1)));
  54.       fillRect(p4.x, p4.y, 1, 1);
  55.     }
  56.     requestAnimationFrame(loop);
  57.   }
  58.  
  59.   loop();
  60. }

Some polar plots…

// canvas // javascript // math // speed-coded // speedcoding

Plot Implicit Equation

  1. let canvas = document.body.appendChild(
  2.   Object.assign(document.createElement('canvas'), {
  3.     width: 200,
  4.     height: 200
  5.   })
  6. );
  7.  
  8. let c = canvas.getContext("2d"),
  9.   pixels = c.createImageData(canvas.width, canvas.height),
  10.   size = canvas.width * canvas.height,
  11.   width = canvas.width,
  12.   index = 0,
  13.   x, y,
  14.   a = 1,
  15.   col,
  16.   scale = 0.01;
  17.  
  18. for (var i = 0; i < size; i++) {
  19.   x = i % width;
  20.   y = parseInt(i / width);
  21.   x -= 110;
  22.   y -= 100;
  23.   x *= scale;
  24.   y *= scale;
  25.   // http://www-history.mcs.st-and.ac.uk/Curves/Trifolium.html
  26.   col = (x * x + y * y) * (y * y + x * (x + a));
  27.  
  28.   if (col >= 4 * a * x * y * y) {
  29.     col = 155;
  30.   }
  31.  
  32.   pixels.data[index++] = col;
  33.   pixels.data[index++] = col;
  34.   pixels.data[index++] = col;
  35.   pixels.data[index++] = 255;
  36. }
  37.  
  38. c.putImageData(pixels, 0, 0);

Plot an implicit equation on a canvas.

// canvas // javascript // math // tricks
Older Posts
Newer Posts

Recent

Archive

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