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

Array Based Collision Cells

  1. ((
  2.   d = document,
  3.   b = d.body,
  4.   canvas = b.appendChild(
  5.     d.createElement('canvas')
  6.   ),
  7.   c = canvas.getContext('2d'),
  8.   r = _ => Math.random(),
  9.   map = [
  10.     [0, 0, 0, 0, 0, 2],
  11.     [1, 1, 0, 0, 0, 1],
  12.     [1, 1, 2, 0, 0, 0],
  13.     [2, 2, 0, 0, 0, 1],
  14.     [0, 1, 0, 0, 2, 0],
  15.     [2, 0, 0, 0, 2, 1],
  16.   ],
  17.   mapW = map[0].length,
  18.   mapH = map.length,
  19.   cols = [, 'red', 'black'],
  20.   cell = (
  21.     x, y, idx,
  22.     col = cols[idx],
  23.     size = 30,
  24.     xp = x * size,
  25.     yp = y * size,
  26.     dir, 
  27.     mv = f => {
  28.       map[y][x] = 0
  29.       f()
  30.       map[y][x] = idx
  31.     }
  32.   ) => (move) => {
  33.     if (move) {
  34.       dir = ~~(r() * 4)
  35.       if (dir == 0 &&
  36.         x != 0 &&
  37.         map[y][x - 1] == 0) {
  38.         mv(_ => x--)
  39.       } else if (dir == 1 &&
  40.         x != mapW - 1 &&
  41.         map[y][x + 1] == 0) {
  42.         mv(_ => x++)
  43.       } else if (dir == 2 &&
  44.         y != 0 &&
  45.         map[y - 1][x] == 0) {
  46.         mv(_ => y--)
  47.       } else if (dir == 3 &&
  48.         y != mapH - 1 &&
  49.         map[y + 1][x] == 0
  50.       ) {
  51.         mv(_ => y++)
  52.       }
  53.     }
  54.  
  55.     xp += (x * size - xp) / 4
  56.     yp += (y * size - yp) / 4
  57.     c.fillStyle = col
  58.     c.fillRect(xp, yp, size, size)
  59.     c.strokeStyle = 'gray'
  60.     c.strokeRect(xp, yp, size, size)
  61.   },
  62.   cells = [],
  63.   w, h, idx, val, i, j,
  64.   draw = () => {
  65.     c.fillStyle = 'gray'
  66.     c.fillRect(0, 0, w, h)
  67.  
  68.     idx = ~~(r() * mapH * mapW)
  69.  
  70.     cells.forEach((cell, i) =>
  71.       cell(idx == i && r() < .3))
  72.   }
  73. ) => {
  74.   b.style.margin = 0
  75.  
  76.   onresize = () => {
  77.     w = canvas.width = innerWidth
  78.     h = canvas.height = innerHeight
  79.     draw()
  80.   }
  81.   onresize()
  82.  
  83.   for (i = 0; i < mapH; i++) {
  84.     for (j = 0; j < mapW; j++) {
  85.       val = map[i][j]
  86.       if (val != 0) cells.push(cell(j, i, val)) 
  87.     }
  88.   }
  89.  
  90.   setInterval(draw, 16)
  91. })()

Array based avoid. I was about to port an old thing that was similar to this and then thought it would be more fun to speedcode it instead. The result is a slightly golfed version of this old thing.

// animation // arrays // canvas // codegolf // graphics // javascript // math

Golfed Min/Max

  1. Math.min(a,b)  // 13 chars
  2. a<b?a:b        //  7 chars
  3.  
  4. Math.max(a,b)
  5. a>b?a:b

Another small golfing gem from codegolf stackexchange. This isn’t immediately obvious, but cool to note when golfing.

It’s also worth mentioning that if your code is long enough, aliasing Math.min and/or Math.max may be shorter in the long run:

  1. m = Math.min
  2. Math.min(a,b)  // 13 chars
  3. a<b?a:b        //  7 chars
  4. m(a,b)         //  6 chars
// codegolf // javascript // math // tricks

Wiggly Line Canvas

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const c = canvas.getContext('2d');
  5. document.body.style.margin = 0;
  6.  
  7. function resize() {
  8.   canvas.width = innerWidth;
  9.   canvas.height = innerHeight;
  10. }
  11. addEventListener('resize', resize);
  12. resize();
  13.  
  14. const PAD = 50;
  15. const RAD = 2;
  16. const SPEED = 20;
  17. const TWO_PI = Math.PI * 2;
  18.  
  19. let mode = 'draw';
  20.  
  21. let t = Math.random() * TWO_PI, 
  22.     x = innerWidth / 2, 
  23.     y = innerHeight / 2,
  24.     vx = 0, vy = 0, ta = 0;
  25.  
  26. function loop() {
  27.   for (var i = 0; i < SPEED; i++) {
  28.     t = Math.sin(ta) * TWO_PI;
  29.     vx = RAD * Math.cos(t);
  30.     vy = RAD * Math.sin(t);
  31.     ta += Math.random() * 0.1 - 0.05;
  32.     x += vx;
  33.     y += vy;
  34.  
  35.     if (Math.random() < 0.005) {
  36.       mode = 'no draw';
  37.     } else if (Math.random() < 0.005) {
  38.       mode = 'draw';
  39.     }
  40.  
  41.     if (mode === 'draw') {
  42.       c.fillStyle = 'red';
  43.       c.fillRect(x, y, 2, 2);
  44.     }
  45.  
  46.     if (x < -PAD) {
  47.       x = innerWidth + PAD;
  48.     } else if (x > innerWidth + PAD) {
  49.       x = -PAD;
  50.     }
  51.     if (y < -PAD) {
  52.       y = innerHeight + PAD;
  53.     } else if (y > innerHeight + PAD) {
  54.       y = -PAD;
  55.     }
  56.   }
  57.  
  58.   requestAnimationFrame(loop);
  59. }
  60. loop();

Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.

// animation // canvas // javascript // math // random // tricks

Array Sum Golfed

  1. a = [1, 2, 3, 6, 9];
  2. sum = eval(a.join`+`);
  3. console.log(sum);

Found myself doing something like this a few times… easy golfed array sum. I saw this over at codegolf stackexchange here.

That whole thread is a great. I plan to post more from there in the future.

// codegolf // humor // javascript // math // obfuscation

Canvas ImageData

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const width = 200;
  5. canvas.width = canvas.height = width;
  6.  
  7. const c = canvas.getContext('2d');
  8. const pixels = c.createImageData(canvas.width, canvas.height);
  9. const size = canvas.width * canvas.height;
  10.  
  11. let index = 0, x, y;
  12.  
  13. for (var i = 0; i < size; i++){
  14.   x = i % width;
  15.   y = Math.floor(i / width);
  16.  
  17.   pixels.data[index++] = x;
  18.   pixels.data[index++] = y;
  19.   pixels.data[index++] = width - x;
  20.   pixels.data[index++] = 255;
  21. }
  22. c.putImageData(pixels, 0, 0);

This shows how to set pixel data on an html5 canvas.

// canvas // color // graphics // hex // javascript // math
Older Posts
Newer Posts

Recent

Archive

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