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

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

Recent

Archive

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