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

Alphabet Array Golfed

  1. l=[]
  2. for(i=26;i--;)l[i]=(10+i).toString(36)
  3. console.log(l)

A nasty golfed way to fill an array with letters a-z.

I usually do (as seen in another post):

  1. let letters = 'abcdefghijklmopqrstuvwxyz'.split``
// codegolf // javascript // speedcoding // strings

Fake RNG

  1. let anchors
  2. let idx
  3. let leng = 10
  4. let size = 200
  5. let px = 0
  6. let py = 0
  7.  
  8. function seed() {
  9.   idx = 0
  10.   anchors = (Date.now() + '').split``
  11.     .reverse()
  12.     .map(v => parseFloat(v) / 10)
  13.     .splice(0, leng)
  14. }
  15.  
  16. let last = 0
  17. let zoom = 1
  18. function rand() {
  19.   if (idx > size * size) seed()
  20.  
  21.   px += zoom
  22.   py += ~~(px / size)
  23.  
  24.   if (px >= size) px = 0
  25.   if (py >= size) py = 0
  26.  
  27.   const point = {
  28.     x: anchors[idx % leng],
  29.     y: anchors[(idx + 1) % leng]
  30.   }
  31.   idx++
  32.  
  33.   let dists = []
  34.   for (let i = 0; i < anchors.length; i += 2) {
  35.     let dx = px - anchors[i] * size
  36.     let dy = py - anchors[i + 1] * size
  37.     dists.push(Math.sqrt(dx * dx + dy * dy))
  38.   }
  39.   dists.sort()
  40.   last += (dists[0] / size - last) / 4
  41.   return last
  42. }
  43.  
  44. seed()
  45.  
  46. let d = document
  47. let b = d.body
  48. with (b.appendChild(
  49.   Object.assign(d.createElement`canvas`, { width: 400, height: 400 })
  50. ).getContext`2d`) {
  51.   fillStyle = 'black'
  52.   fillRect(0, 0, 400, 400)
  53.  
  54.   for (let i = 0; i < 200; i++) {
  55.     for (let j = 0; j < 200; j++) {
  56.       const c = rand() * 255
  57.       fillStyle = `rgb(${c}, ${c}, ${c})`
  58.       fillRect(j * 2, i * 2, 1, 2)
  59.     }
  60.   }
  61. }

Another one for genuary “Create your own pseudo-random number generator and visually check the results.”

// canvas // graphics // hacks // math // random // speedcoding

Average Some Curves

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const c = canvas.getContext('2d');
  5.  
  6. function resize() {
  7.   canvas.width = window.innerWidth;
  8.   canvas.height = window.innerHeight;
  9.   draw();
  10. }
  11.  
  12. function draw() {
  13.   c.clearRect(0, 0, canvas.width, canvas.height);
  14.  
  15.   Math.min(window.innerWidth, window.innerHeight) * 0.0015;
  16.   const iter = 300,
  17.         halfWidth = window.innerWidth / 2,
  18.         halfHeight = window.innerHeight / 2;
  19.   let rad = 50, rad2 = 50, theta = 0, x, y;
  20.   let x2, y2;
  21.   for (let i = 0; i < 100; i++) {
  22.     c.fillStyle = 'blue';
  23.     x = halfWidth + rad * Math.cos(theta);
  24.     y = halfHeight + rad * Math.sin(theta);
  25.     c.fillRect(x, y, 5, 5);
  26.  
  27.     c.fillStyle = 'red';
  28.  
  29.     rad2 = 80 + rad * Math.cos(theta * 3);
  30.     x2 = halfWidth + rad2 * Math.cos(theta);
  31.     y2 = halfHeight + rad2 * Math.sin(theta);
  32.     c.fillRect(x2, y2, 5, 5);
  33.  
  34.     c.fillStyle = 'green';
  35.     c.fillRect((x2 + x) / 2, (y2 + y) / 2, 5, 5);
  36.  
  37.     theta += .1;
  38.   }
  39. }
  40.  
  41. resize();
  42. window.addEventListener('resize', resize);
// canvas // graphics // math // speedcoding

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}