)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
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

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

Smooth Bezier on Canvas

  1. const canvas = document.createElement('canvas');
  2. const c = canvas.getContext('2d');
  3.  
  4. document.body.appendChild(canvas);
  5.  
  6. function draw() {
  7.   canvas.width = window.innerWidth;
  8.   canvas.height = window.innerHeight;
  9.   c.fillStyle = 'gray';
  10.   c.fillRect(0, 0, canvas.width, canvas.height);
  11.  
  12.   c.strokeStyle = 'white';
  13.   c.lineWidth = 2;
  14.  
  15.   c.beginPath();
  16.   c.moveTo(0, 0);
  17.   bezierSkin([10, 10, 210, 10, 10, 300, 210, 300], false);
  18.   bezierSkin([200, 10, 330, 10, 250, 300]);
  19.   bezierSkin(
  20.     Array(30)
  21.       .fill(0)
  22.       .map((a, b) => (b % 2 == 0) * 300 + Math.random() * 300)
  23.   );
  24.   c.stroke();
  25. }
  26. window.addEventListener('resize', draw);
  27. draw();
  28.  
  29. // array of xy coords, closed boolean
  30. function bezierSkin(bez, closed = true) {
  31.   const avg = calcAvgs(bez);
  32.   const leng = bez.length;
  33.   let i, n;
  34.  
  35.   if (closed) {
  36.     c.moveTo(avg[0], avg[1]);
  37.     for (i = 2; i < leng; i += 2) {
  38.       n = i + 1;
  39.       c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
  40.     }
  41.     c.quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]);
  42.   } else {
  43.     c.moveTo(bez[0], bez[1]);
  44.     c.lineTo(avg[0], avg[1]);
  45.     for (i = 2; i < leng - 2; i += 2) {
  46.       n = i + 1;
  47.       c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
  48.     }
  49.     c.lineTo(bez[leng - 2], bez[leng - 1]);
  50.   }
  51. }
  52.  
  53. // create anchor points by averaging the control points
  54. function calcAvgs(p) {
  55.   const avg = [];
  56.   const leng = p.length;
  57.   let prev;
  58.   for (var i = 2; i < leng; i++) {
  59.     prev = i - 2;
  60.     avg.push((p[prev] + p[i]) / 2);
  61.   }
  62.   // close
  63.   avg.push((p[0] + p[leng - 2]) / 2);
  64.   avg.push((p[1] + p[leng - 1]) / 2);
  65.   return avg;
  66. }

Being able to draw smooth lines that connect arbitrary points is something that I find myself needing very frequently. This is a port of an old old snippet of mine that does just that. By averaging control points of a quadratic bezier curve we ensure that our resulting Bezier curves are always smooth.

It would be very cool if html5 canvas implemented the Catmull Rom Spline but it unfortunately does not. The wonderful Raphael library used to have support for it.

// canvas // graphics // javascript // math // tricks

Obfuscated Canvas Commands

  1. const oCan = (
  2.   d = document,
  3.   b = d.body,
  4.   canvas = b.appendChild(document.createElement('canvas')),
  5.   c = canvas.getContext('2d'),
  6.   props = [],
  7.   o = {},
  8.   docs = {},
  9.   cmds = [],
  10.   L,
  11.   k,
  12.   du,
  13.   j,
  14.   draw,
  15.   id
  16. ) => {
  17.   ;(onresize = () => {
  18.     canvas.width = innerWidth
  19.     canvas.height = innerHeight
  20.     if (draw) {
  21.       clearTimeout(id)
  22.       id = setTimeout(() => cmds.forEach(v => draw(v)), 500)
  23.     }
  24.   })()
  25.  
  26.   Object.assign(b.style, { margin: 0, height: '100%' })
  27.  
  28.   // longer way: console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(c)));
  29.   for (let i in c) props.push(i)
  30.  
  31.   // make alphabetical since object keys have
  32.   // no order
  33.   props.sort().map(i => {
  34.     L = i.match(/[A-Z]/)
  35.     k = i[0]
  36.     if (L) k += L[0]
  37.     du = 0
  38.     if (o[k]) {
  39.       j = 0
  40.       while (o[k]) k += i[++j]
  41.     }
  42.  
  43.     o[k] =
  44.       (typeof c[i])[0] == 'f'
  45.         ? (...args) => c[i].apply(c, args)
  46.         : v => (c[i] = v)
  47.     docs[i] = k
  48.   })
  49.  
  50.   console.log('docs:', JSON.stringify(docs, null, 2))
  51.  
  52.   return (draw = (s, cmd, currFn, args = [], part, fn, num) => {
  53.     cmd = s.split(/\s+/)
  54.     cmds.push(s)
  55.     c.save()
  56.     for (let i = 0; i < cmd.length; i++) {
  57.       part = cmd[i]
  58.       fn = o[part]
  59.       if (fn && currFn != fn) {
  60.         currFn && currFn.apply(c, args)
  61.         currFn = fn
  62.         args = []
  63.       } else {
  64.         num = parseFloat(part)
  65.         args.push(!isNaN(num) ? num : part)
  66.       }
  67.     }
  68.     currFn && currFn.apply(c, args)
  69.     c.restore()
  70.   })
  71. }
  72.  
  73. const c = oCan()
  74. // `font` & text not suppoted
  75. // make str a function so resize works?
  76. c(`
  77.   fS #ccc
  78.   fR 0 0 400 ${innerHeight}
  79.   fS blue
  80.   fR 40 0 20 20
  81.   gCl difference
  82.   ro .25
  83.   fR 50 0 30 30
  84.   gCl source-over
  85.   fS rgba(200,100,9)
  86.   fR 100 100 40 40
  87.   `)

I’ve had this idea for a long time, never bothered doing it until now. I wrote it in a semi-golfed style for no reason… Anyway, this lets you write canvas code in a strange obfuscated syntax that looks like this:

  1. c(`
  2.   fS #ccc
  3.   fR 0 0 400 ${innerHeight}
  4.   fS blue
  5.   fR 40 0 20 20
  6.   gCl difference
  7.   ro .25
  8.   fR 50 0 30 30
  9.   gCl source-over
  10.   fS rgba(200,100,9)
  11.   fR 100 100 40 40
  12.   `)

This snippet logs out some JSON that shows all the method aliases for the canvas context.

// canvas // codegolf // color // golfed // graphics // hacks // humor // javascript // json // strings // tricks

Easy Random Color

  1.  
  2. document.body.innerHTML += 'click to randomize background color';
  3.  
  4. document.addEventListener('click', () => { 
  5.   const hue = Math.random() * 360;
  6.   document.body.style.background = `hsl(${hue}deg, 50%, 50%)`;
  7. });

One way to generate a random color is to randomize the hue argument of the css hsl. This value is in degrees 0-360 (colorwheel). The other arguments can be randomized as well if you need random saturation and lightness… like this: 

  1.  
  2. document.body.innerHTML += 'click to randomize background color';
  3.  
  4. document.addEventListener('click', () => { 
  5.   const hue = Math.random() * 360;
  6.   const saturation = Math.random() * 100;
  7.   const lightness = Math.random() * 100;
  8.   document.body.style.background = `hsl(${hue}deg, ${saturation}%, ${lightness}%)`;
  9. });
// css // dom // graphics // javascript
Older Posts
Newer Posts

Recent

Archive

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