)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Inline Binary

  1. console.log(0b1010 & 0b0010)
  2. // 2

… 😀

HSL to RGB JavaScript

  1. const hsl2rgb = (h, s, l, o) => {
  2.   if (h > 1 || s > 1 || l > 1) {
  3.       h /= 360;
  4.       s /= 100;
  5.       l /= 100;
  6.   }
  7.   h *= 360;
  8.  
  9.   let R, G, B, X, C;
  10.  
  11.   h = (h % 360) / 60;
  12.   C = 2 * s * (l < .5 ? l : 1 - l);
  13.   X = C * (1 - Math.abs(h % 2 - 1));
  14.   R = G = B = l - C / 2;
  15.  
  16.   h = ~~h;
  17.   R += [C, X, 0, 0, X, C][h];
  18.   G += [X, C, C, X, 0, 0][h];
  19.   B += [0, 0, X, C, C, X][h];
  20.   return `rgba(${~~(R * 255)}, ${~~(G * 255)}, ${~~(B * 255)}, ${o})`;
  21. };
  22.  
  23. console.log(hsl2rgb(122, 50, 50, .5));

Taken from the Raphaël source… Always fun to browse – I’ve learned lots of great stuff from it 😀

Freeth’s Nephroid Animated

  1. const FOUR_PI = 4 * Math.PI;
  2. const { cos, sin } = Math;
  3.  
  4. const canvas = document.body.appendChild(
  5.   document.createElement('canvas')
  6. );
  7. const c = canvas.getContext('2d');
  8.  
  9. function resize() {
  10.   canvas.width = window.innerWidth;
  11.   canvas.height = window.innerHeight;
  12. }
  13.  
  14. let inc = 0;
  15. function draw() {
  16.   c.clearRect(0, 0, canvas.width, canvas.height);
  17.   c.fillStyle = 'blue';
  18.  
  19.   const halfWidth = window.innerWidth / 2;
  20.   const halfHeight = window.innerHeight / 2;
  21.   let theta = 0,
  22.     a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,
  23.     x,
  24.     y;
  25.  
  26.   c.save();
  27.   c.translate(halfWidth, halfHeight)
  28.  
  29.   // Freeth's Nephroid
  30.   // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/
  31.   // r = a(1 + 2sin(θ / 2))
  32.   let b = 2 * cos(inc);
  33.   inc += .01;
  34.  
  35.   for (let i = 0; theta < FOUR_PI; i++) {
  36.     let rad = a * (b + 2 * sin(theta / 2))
  37.     x = rad * cos(theta);
  38.     y = rad * sin(theta);
  39.     c.fillRect(x, y, 2, 2);
  40.     theta += 0.05;
  41.   }
  42.   c.restore();
  43.  
  44.   requestAnimationFrame(draw)
  45. }
  46.  
  47. resize();
  48. window.addEventListener('resize', resize);
  49.  
  50. draw()

It’s always fun to play with curves from here Famous Curves Index

Draw an Egg on Canvas Javascript

  1. const TWO_PI = Math.PI * 2;
  2. const THREE_PI = 3 * Math.PI;
  3. const canvas = document.body.appendChild(
  4.   document.createElement('canvas')
  5. );
  6.  
  7. const c = canvas.getContext('2d');
  8. const halfWidth = (canvas.width = 250) / 2;
  9. const halfHeight = (canvas.height = 250) / 2;
  10.  
  11. const scale = 10;
  12.  
  13. c.fillStyle = '#f0e195';
  14. c.strokeStyle = '#c2a272';
  15. c.beginPath();
  16.  
  17. for (let theta = 0; theta <= TWO_PI; theta += 0.02) {
  18.   const x = (TWO_PI - Math.sin(theta)) * Math.cos(theta);
  19.   const y = THREE_PI * Math.sin(theta);
  20.   c.lineTo(halfWidth + x * scale, halfHeight - y * scale);
  21. }
  22.  
  23. c.fill();
  24. c.stroke();

Draw a parametric egg curve…

Write An Array of Files in Node

  1. const fs = require('fs');
  2.  
  3. function writeNextFile(file, content, files, done) {
  4.   fs.writeFile(file, content + '\n', () => {
  5.     const next = files.shift();
  6.     if (!next && done != null) {
  7.       done();
  8.       return;
  9.     }
  10.     writeNextFile(next.file, next.content, files, done);
  11.   });
  12. }
  13. function writeFiles(files, cb) {
  14.   const curr = files.shift();
  15.   writeNextFile(curr.file, curr.content, files, cb);
  16. }
  17.  
  18. writeFiles(
  19.   [
  20.     {
  21.       file: 'zevan1.txt',
  22.       content: 'hello world'
  23.     },
  24.     {
  25.       file: 'zevan2.txt',
  26.       content: 'goodbye world'
  27.     },
  28.     {
  29.       file: 'confusing.txt',
  30.       content: 'greetings world'
  31.     }
  32.   ],
  33.   () => {
  34.     console.log('done');
  35.   }
  36. );

Wrote this snippet for a friend a few weeks back… I don’t do tons of node, so maybe there is a better way but….

// io // javascript // node
snippet.zone ~ 2021-24 /// {s/z}