Snippet Zone

Rotate Point Around Point (Golfed)

```
  rot = (
```
```
    cx, cy, X, Y, ang,
```
```
    cos = Math.cos(-ang),
```
```
    sin = Math.sin(-ang),
```

    x = cos * (X - cx) + sin * (Y - cy) + cx,

    y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })

Rotate one point around another… I like to use something like this when speed-coding and golfing…

January 6, 2022

// math // matrix // oldschool // tricks

Speed Coded Cosine Dither

```
d = document
```
```
b = d.body
```
```
wh = 300
```
```
hs = wh / 2
```
```
S = 1.5
```
```
with(
```
```
  b.appendChild(Object.assign(
```
```
    d.createElement`canvas`, {
```
```
      width: wh, height: wh
```
```
    })).getContext`2d`) {
```
```
 
```
```
  canvas.style.transformOrigin = '0 0'
```

  canvas.style.transform = `scale(${S})`

  canvas.style.imageRendering = 'pixelated'

```
 
```
```
  fillStyle = 'gray'
```
```
 
```
```
  fillRect(0, 0, wh, wh)
```
```
  shadowBlur = 80
```
```
  shadowColor = 'black';
```
```
  shadowOffsetY = 20
```
```
  for (let i = 0; i < 70; i++) {
```
```
    save()
```
```
    translate(hs, hs)
```
```
    rotate(i / 33)
```
```
    scale(1 - i / 100, 1)
```
```
    translate(-hs, -hs)
```

    fillStyle = `hsl(${i << 2}, 50%, 50%)`

```
    beginPath()
```
```
    arc(hs, hs, hs * .8, 0, 7)
```
```
    fill()
```
```
    restore()
```
```
    shadowColor = 'transparent'
```
```
    shadowBlur = 0
```
```
  }
```
```
 
```

  C = Object.assign(d.createElement`canvas`, {

```
    width: wh, height: wh
```
```
  }).getContext('2d')
```
```
  C.drawImage(canvas, 0, 0);
```
```
 
```
```
  im = getImageData(0, 0, wh, wh);
```
```
 
```
```
  p = im.data
```
```
  size = wh * wh * 4
```
```
 
```
```
  modd = Math.random() * 5550
```
```
  for (let i = 0; i < size; i += 4) {
```

    if (Math.random() < 0.0001) modd = Math.random() * 5550

```
    M = Math.cos(i % modd) * 255
```
```
    p[i] = M < p[i] ? 255 : 0;
```
```
    p[i + 1] = M < p[i + 1] ? 255 : 0;
```
```
    p[i + 2] = M < p[i + 2] ? 255 : 0;
```
```
  }
```
```
 
```
```
  putImageData(im, 0, 0);
```

  globalCompositeOperation = 'hard-light'

```
  drawImage(C.canvas, 0, 0);
```
```
}
```

Some speed-coded canvas stuff with a dither inspired by #genuary2022

January 2, 2022

// canvas // graphics // javascript // random // speedcoding // tricks

Plot Implicit Equation

```
let canvas = document.body.appendChild(
```

  Object.assign(document.createElement('canvas'), {

```
    width: 200,
```
```
    height: 200
```
```
  })
```
```
);
```
```
 
```
```
let c = canvas.getContext("2d"),
```

  pixels = c.createImageData(canvas.width, canvas.height),

```
  size = canvas.width * canvas.height,
```
```
  width = canvas.width,
```
```
  index = 0,
```
```
  x, y,
```
```
  a = 1,
```
```
  col,
```
```
  scale = 0.01;
```
```
 
```
```
for (var i = 0; i < size; i++) {
```
```
  x = i % width;
```
```
  y = parseInt(i / width);
```
```
  x -= 110;
```
```
  y -= 100;
```
```
  x *= scale;
```
```
  y *= scale;
```

  // http://www-history.mcs.st-and.ac.uk/Curves/Trifolium.html

  col = (x * x + y * y) * (y * y + x * (x + a));

```
 
```
```
  if (col >= 4 * a * x * y * y) {
```
```
    col = 155;
```
```
  }
```
```
 
```
```
  pixels.data[index++] = col;
```
```
  pixels.data[index++] = col;
```
```
  pixels.data[index++] = col;
```
```
  pixels.data[index++] = 255;
```
```
}
```
```
 
```
```
c.putImageData(pixels, 0, 0);
```

Plot an implicit equation on a canvas.

December 28, 2021

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

Select All Text contentEditable

```
<div style="border:solid 1px #D31444"
```
```
     contenteditable="true"
```

     onclick="document.execCommand('selectAll', false, null)">some text...</div>

When clicking on an editable node, select all existing text…

Quick test version…

```
document.body.innerHTML += `
```

  <div id="el" style="border:solid 1px #D31444"

    contenteditable="true">some text...</div>`

```
 
```
```
el.addEventListener('click', () => {
```

  document.execCommand('selectAll', false, null)

```
})
```

December 24, 2021

// html // javascript // tricks // ui

Martin Kleppe’s Golfed Blobs Quine

<pre id=p style=background:#000><svg onload='setInterval(f=n=>

{for(t++,o=i=1;i++<476;o+=i%30?([(f+"")[i%195],"o"][c=0|(h=v=>

(M=Math).hypot(i/30-8+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))

(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'>

Great golfed snippet from Martin Kleppe – can’t wait to fork it… 😀

This was updated a bit later to be even smaller:

<body onload='setInterval(f=n=>{for(t++,o=i=1;i++<476;o+=i%30?([(f+f)[i],"o"][c=0|(h=v=>(M=Math).hypot(i/30-7+3*M.sin(t/8/v),i%30/2-7+4*M.cos(t/9/v)))(7)*h(9)*h(6)/52]||".").fontcolor(c?c>2:n):"\n");p.innerHTML=o},t=1)'bgcolor=X><pre id=p>

December 22, 2021

// dom // golfed // graphics // hacks // html // humor // javascript // math // strings // tricks

Older Posts

Newer Posts

Rotate Point Around Point (Golfed)

Speed Coded Cosine Dither

Plot Implicit Equation

Select All Text contentEditable

Martin Kleppe’s Golfed Blobs Quine

Recent

Archive