Snippet Zone

Bat Signal

document.body.innerHTML = '<pre>'+`n2zh2

```
f8l2b2l8
```
```
b8pep8
```
```
7cpepc
```
```
5ijiji
```
```
3yyq
```
```
0
```
```
0
```
```
0
```
```
3yyq
```
```
5afy8fa
```
```
98f69a96f8
```

f4f2d6d2f4`.replace(/./g,c=>'* '[(n=parseInt(c,36))&1].repeat(n/2||49))

           *                         *
       ****          *     *          ****
     ****            *******            ****
   ******            *******            ******
  *********         *********         *********
 ***********************************************
*************************************************
*************************************************
*************************************************
 ***********************************************
  *****       *********************       *****
    ****       ***    *****    ***       ****
       **       *      ***      *       **

Fun js codegolf answer from user arnauld… Whole thread is very fun…

January 15, 2022

// codegolf // javascript // strings

Inline Binary

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

… 😀

January 14, 2022

// binary // javascript

HSL to RGB JavaScript

```
const hsl2rgb = (h, s, l, o) => {
```
```
  if (h > 1 || s > 1 || l > 1) {
```
```
      h /= 360;
```
```
      s /= 100;
```
```
      l /= 100;
```
```
  }
```
```
  h *= 360;
```
```
 
```
```
  let R, G, B, X, C;
```
```
 
```
```
  h = (h % 360) / 60;
```
```
  C = 2 * s * (l < .5 ? l : 1 - l);
```
```
  X = C * (1 - Math.abs(h % 2 - 1));
```
```
  R = G = B = l - C / 2;
```
```
 
```
```
  h = ~~h;
```
```
  R += [C, X, 0, 0, X, C][h];
```
```
  G += [X, C, C, X, 0, 0][h];
```
```
  B += [0, 0, X, C, C, X][h];
```

  return `rgba(${~~(R * 255)}, ${~~(G * 255)}, ${~~(B * 255)}, ${o})`;

```
};
```
```
 
```
```
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 😀

January 13, 2022

// color // javascript // math

Freeth’s Nephroid Animated

```
const FOUR_PI = 4 * Math.PI;
```
```
const { cos, sin } = Math;
```
```
 
```

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
 
```
```
function resize() {
```
```
  canvas.width = window.innerWidth;
```
```
  canvas.height = window.innerHeight;
```
```
}
```
```
 
```
```
let inc = 0;
```
```
function draw() {
```

  c.clearRect(0, 0, canvas.width, canvas.height);

```
  c.fillStyle = 'blue';
```
```
 
```

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

```
  let theta = 0,
```

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

```
    x,
```
```
    y;
```
```
 
```
```
  c.save();
```
```
  c.translate(halfWidth, halfHeight)
```
```
 
```
```
  // Freeth's Nephroid
```

  // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/

```
  // r = a(1 + 2sin(θ / 2))
```
```
  let b = 2 * cos(inc);
```
```
  inc += .01;
```
```
 
```

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 2 * sin(theta / 2))

```
    x = rad * cos(theta);
```
```
    y = rad * sin(theta);
```
```
    c.fillRect(x, y, 2, 2);
```
```
    theta += 0.05;
```
```
  }
```
```
  c.restore();
```
```
 
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
 
```
```
resize();
```

window.addEventListener('resize', resize);

```
 
```
```
draw()
```

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

January 11, 2022

// animation // canvas // javascript // math

Draw an Egg on Canvas Javascript

```
const TWO_PI = Math.PI * 2;
```
```
const THREE_PI = 3 * Math.PI;
```

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
 
```
```
const c = canvas.getContext('2d');
```

const halfWidth = (canvas.width = 250) / 2;

const halfHeight = (canvas.height = 250) / 2;

```
 
```
```
const scale = 10;
```
```
 
```
```
c.fillStyle = '#f0e195';
```
```
c.strokeStyle = '#c2a272';
```
```
c.beginPath();
```
```
 
```

for (let theta = 0; theta <= TWO_PI; theta += 0.02) {

  const x = (TWO_PI - Math.sin(theta)) * Math.cos(theta);

```
  const y = THREE_PI * Math.sin(theta);
```

  c.lineTo(halfWidth + x * scale, halfHeight - y * scale);

```
}
```
```
 
```
```
c.fill();
```
```
c.stroke();
```

Draw a parametric egg curve…

January 10, 2022

// canvas // javascript // math

Older Posts

Newer Posts

Bat Signal

Inline Binary

HSL to RGB JavaScript

Freeth’s Nephroid Animated

Draw an Egg on Canvas Javascript

Recent

Archive