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

Complementary HSL

  1. const a = document.body.appendChild(document.createElement('div')),
  2.       b = document.body.appendChild(document.createElement('div'));
  3. let degA = degB = 0;
  4.  
  5. const size = {
  6.   width: '100px',
  7.   height: '100px'
  8. };
  9. Object.assign(a.style, size);
  10. Object.assign(b.style, size);
  11.  
  12. function loop() {
  13.   degA += 1;
  14.   degB = degA + 180;
  15.   a.style.background = `hsl(${degA}deg, 100%, 50%)`;
  16.   b.style.background = `hsl(${degB}deg, 100%, 50%)`;
  17.   requestAnimationFrame(loop);
  18. }
  19. loop();

In HSL a hue difference of 180 degrees between two values will create a set of complimentary colors.

// animation // color // css // dom // javascript // tricks // ui

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

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

Random Hex Color (semi-golfed)

  1. document.body.innerHTML += 'click anywhere...'
  2.  
  3. onclick = () =>
  4.   document.body.style.background = 
  5.     `#${Math.random().toString(16).substr(-6)}`

I golfed this snippet slightly for no reason in particular. I recently posted a nice readable way to make random hsl colors. This snippet generates a random hexidecimal color.

How it works:

  1. Math.random() // random number between 0 and 1
  2.  
  3. .toString(16) // convert to hex string (something like "0.2d6bcee4198d4")
  4.  
  5. .substr(-6) // grab the last 6 characters

Here is a non-golfed version:

  1. const instructionsEl = document.createElement('p');
  2. instructionsEl.innerHTML = 'click anywhere...';
  3. document.body.appendChild(instructionsEl);
  4.  
  5. const randomHexColor = () => 
  6.   `#${Math.random().toString(16).substr(-6)}`;
  7.  
  8. document.addEventListener('click', () => {
  9.   document.body.style.background = randomHexColor();
  10. });
// codegolf // color // css // golfed // hex // javascript
Newer Posts

Recent

Archive

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