Snippet Zone

Building Spikes Codegolf

```
f = 
```
```
 
```
```
n=>`   ^ 
```
```
  /|\\
```
```
 /.|.\\
```
```
/..|..\\
```

___`.replace(/.[_|^]./g,'$&'.repeat(n))+'____'

```
 
```
```
// test it out
```
```
document.body.innerHTML += 
```
```
`<pre>${f(1)}
```
```
${f(3)}
```
```
${f(4)}`
```

Great codegolf stackexchange answer from user tsh

March 11, 2022

// codegolf // golfed // javascript // regex // strings

W3Schools Output Tag

```

```
```
<!DOCTYPE html>
```
```
<html>
```
```
<body>
```
```
 
```
```
<h1>The output element</h1>
```
```
 
```

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

```
<input type="range" id="a" value="50">
```

+<input type="number" id="b" value="25">

```
=<output name="x" for="a b"></output>
```
```
</form>
```
```
 
```

<p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>

```
 
```
```
</body>
```
```
</html>
```

I like w3Schools.

This code has some problems… but… for a cool little snippet to play with – I think that’s ok. SnippetZone certainly has tons of things like this…

March 11, 2022

// hacks // html // humor // speedcoding

Canvas Path2D

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
)
```
```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth
```
```
canvas.height = innerHeight
```
```
 
```
```
c.translate(10, 10)
```

const path = new Path2D('M 154.75 61.5 Q 169.75 63.8 184.8 69.35 173.15 68.3 161.7 69.4 173.1 73.85 184.8 75.95 173.1 77.15 161.65 75.95 173.05 80.45 184.8 82.55 173 83.75 160.05 82.35 173 87.05 184.8 89.15 172.95 90.35 161.65 89.1 172.9 93.65 184.8 95.75 172.8 96.9 161.65 95.7 172.8 100.2 184.8 102.35 172.75 103.5 163.7 102.7 172.7 106.8 184.8 110.3 172.7 110.1 161.65 108.85 172.6 113.35 184.8 118.85 171.05 116.05 158.35 114.65 167.3 126.9 174 141.45 166.5 132.45 157.65 125.1 162.55 136.3 169.35 146.1 160.2 138.65 152.95 129.7 157.85 141 164.7 150.75 155.5 143.25 147.3 133.15 153.15 145.6 160 155.45 150.75 147.9 143.65 139 148.45 150.2 155.35 160.1 146.05 152.4 139 143.65 143.7 154.75 150.7 164.75 141.3 157.05 135.5 150.05 139 159.35 145.05 170.4 136.65 161.7 129.7 152.95 134.25 163.9 139 176.45 131.3 164.75 123.3 154.8 121 169.8 115.45 184.8 116.5 173.15 115.4 161.7 110.95 173.1 108.85 184.8 107.65 173.1 108.85 161.65 104.35 173.05 102.25 184.8 101.05 173 102.45 160.05 97.75 173 95.65 184.8 94.45 172.95 95.7 161.65 91.15 172.9 89.05 184.8 87.9 172.8 89.1 161.65 84.6 172.8 82.45 184.8 81.3 172.75 82.1 163.7 78 172.7 74.5 184.8 74.7 172.7 75.95 161.65 71.45 172.6 65.95 184.8 68.75 171.05 70.15 158.4 57.9 167.35 43.35 174.05 52.35 166.55 59.7 157.7 48.5 162.6 38.7 169.4 46.15 160.25 55.1 153 43.8 157.9 34.05 164.75 41.55 155.55 51.65 147.35 39.2 153.2 29.35 160.05 36.9 150.8 45.8 143.7 34.6 148.5 24.7 155.4 32.4 146.1 41.15 139.05 30.05 143.75 20.05 150.75 27.75 141.35 34.75 135.55 25.45 139.05 14.4 145.1 23.1 136.7 31.85 129.75 20.9 134.3 8.35 139.05 20.05 131.3 30.05 123.3 15.05 121 0 115.45 11.65 116.5 23.1 115.4 11.7 110.95 0 108.85 11.7 107.65 23.15 108.85 11.75 104.35 0 102.25 11.8 101.05 24.75 102.45 11.8 97.75 0 95.65 11.85 94.45 23.15 95.7 11.9 91.15 0 89.05 12 87.9 23.15 89.1 12 84.6 0 82.45 12.05 81.3 21.1 82.1 12.1 78 0 74.5 12.1 74.7 23.15 75.95 12.2 71.45 0 65.95 13.75 68.75 26.45 70.15 17.45 57.9 10.75 43.35 18.25 52.35 27.1 59.7 22.2 48.5 15.4 38.7 24.55 46.15 31.8 55.1 26.9 43.8 20.05 34.05 29.25 41.55 37.45 51.65 31.6 39.2 24.75 29.35 34 36.9 41.1 45.8 36.3 34.6 29.4 24.7 38.7 32.4 45.75 41.15 41.05 30.05 34.05 20.05 43.45 27.75 49.25 34.75 45.75 25.45 39.7 14.4 48.1 23.1 55.05 31.85 50.5 20.9 45.75 8.35 53.5 20.05 61.5 30.05 63.8 15.05 69.35 0 68.3 11.65 69.4 23.1 73.85 11.7 75.95 0 77.15 11.7 75.95 23.15 80.45 11.75 82.55 0 83.75 11.8 82.35 24.75 87.05 11.8 89.15 0 90.35 11.85 89.1 23.15 93.65 11.9 95.75 0 96.9 12 95.7 23.15 100.2 12 102.35 0 103.5 12.05 102.7 21.1 106.8 12.1 110.3 0 110.1 12.1 108.85 23.15 113.35 12.2 118.85 0 116.05 13.75 114.65 26.45 126.9 17.45 141.45 10.75 132.45 18.25 125.1 27.1 136.3 22.2 146.1 15.4 138.65 24.55 129.7 31.8 141 26.9 150.75 20.05 143.25 29.25 133.15 37.45 145.6 31.6 155.45 24.75 147.9 34 139 41.1 150.2 36.3 160.1 29.4 152.4 38.7 143.65 45.75 154.75 41.05 164.75 34.05 157.05 43.45 150.05 49.25 159.35 45.75 170.4 39.7 161.7 48.1 152.95 55.05 163.9 50.5 176.45 45.75 164.75 53.5 154.75 61.5 140.2 73.15 129.35 85.4 146 97.85 158.35 114.65 M 61.5 30.05 Q 73.15 44.6 85.4 55.45 97.8 38.8 114.65 26.45 M 30.05 123.3 Q 44.6 111.65 55.45 99.45 38.8 87 26.45 70.15 M 123.3 154.8 Q 111.65 140.25 99.4 129.4 86.95 146.05 70.15 158.4');

```
 
```
```
c.stroke(path);
```

Use SVG style paths in canvas…

March 9, 2022

// canvas // javascript // svg

Proxy Constants

```
const spec = {
```
```
  get(o, key) { 
```
```
    return o[key] != null ? 
```
```
      o[key] : o[key] = Objector()
```
```
  }
```
```
};
```
```
 
```

const Objector = () => new Proxy({}, spec);

```
 
```
```
const events = Objector();
```
```
 
```
```
events.graphics.RENDERED;
```
```
events.graphics.ERASED;
```
```
events.ui.LOADING;
```
```
events.ui.LOADED;
```
```
events.files.OPENED;
```
```
events.files.CLOSED;
```
```
 
```
```
const { ERASED } = events.graphics;
```

console.log('a', ERASED === events.graphics.ERASED);

console.log('b', ERASED === events.files.CLOSED);

This is somewhat evil… I’ve never liked these java style constants. Maybe I’ll write up a detailed alternative method some time.

March 8, 2022

// humor // proxies // tricks

Two Circles Explode

const { random, min, sqrt, cos, sin, PI } = Math

```
let TWO_PI = PI * 2
```
```
let minSize
```
```
 
```
```
document.body.style.margin = 0
```

document.body.style.background = 'black'

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
)
```
```
const c = canvas.getContext('2d')
```
```
 
```
```
addEventListener('resize', resize)
```
```
resize()
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth
```
```
  canvas.height = innerHeight
```

  minSize = min(innerWidth, innerHeight)

```
  clear()
```
```
}
```
```
 
```
```
function clear() {
```
```
  c.fillStyle = 'rgba(0, 0, 0, .15)'
```

  c.fillRect(0, 0, innerWidth, innerHeight)

```
}
```
```
 
```
```
let dots = []
```

function dot({x, y, vx, vy, rad, grav = .15}) {

```
  let sx = x
```
```
  let sy = y
```
```
  let svx = vx
```
```
  let svy = vy
```
```
  let intersected
```
```
  let partsNum = 20
```
```
  let parts = []
```
```
  let delay = random() * 5
```
```
  let time = 0
```
```
 
```
```
  dots.push(() => y > innerHeight)
```
```
 
```
```
  return {
```
```
    step() {
```
```
      time++
```
```
      if (time < delay) return
```
```
      if (intersected) {
```

        for (let i = 0; i < partsNum; i++) {

```
          parts[i].step()
```
```
        }
```
```
        return
```
```
      }
```
```
      x += vx
```
```
      y += vy
```
```
      vy += grav;
```
```
      c.beginPath()
```
```
      c.arc(x, y, rad(), 0, 7)
```
```
      c.fill()
```
```
    },
```
```
    reset() {
```
```
      x = sx;
```
```
      y = sy;
```
```
      vx = svx;
```
```
      vy = svy;
```
```
      intersected = false
```
```
    },
```
```
    hit() {
```
```
      if (!intersected) {
```
```
        partsNum = rad() / 3
```

        for (let i = 0; i < partsNum; i++) {

```
          let t = random() * TWO_PI
```
```
          let r = 5 + random() * 5
```
```
          let size = random() * 10
```
```
 
```
```
          parts.push(
```
```
            dot({
```
```
              x, y,
```
```
              vx: r * cos(t),
```
```
              vy: r * sin(t),
```
```
              rad: () => size
```
```
            })
```
```
          )
```
```
        }
```
```
      }
```
```
      intersected = true
```
```
    },
```
```
    get x() {
```
```
      return x
```
```
    },
```
```
    get y() {
```
```
      return y
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
const bigRad = () => minSize * .14;
```
```
 
```
```
let leftDot
```
```
let rightDot
```
```
 
```
```
function start() {
```
```
 
```
```
  rightDot = dot({
```
```
    x: innerWidth, 
```
```
    y: innerHeight / 2, 
```
```
    vx: -innerWidth * .005, 
```
```
    vy: -6, rad: bigRad
```
```
  })
```
```
 
```
```
  leftDot = dot({
```
```
    x: 0, 
```
```
    y: innerHeight / 2, 
```
```
    vx: innerWidth * .005, 
```
```
    vy: -6, rad: bigRad
```
```
  })
```
```
}
```
```
start()
```
```
 
```
```
function collide(a, b) {
```
```
  const dx = a.x - b.x
```
```
  const dy = a.y - b.y
```
```
  const dist = sqrt(dx**2 + dy**2)
```
```
  return dist <= bigRad() * 1.8
```
```
}
```
```
 
```
```
function loop() {
```
```
  let inc = 2
```
```
 
```
```
  clear()
```
```
  c.fillStyle = 'white'
```
```
  if (collide(leftDot, rightDot)) {
```
```
 
```
```
    leftDot.hit()
```
```
    rightDot.hit()
```
```
  }
```
```
 
```
```
  leftDot.step()
```
```
  rightDot.step()
```
```
 
```
```
  dots.forEach(done => {
```
```
    if (done()) inc++;
```
```
  }) 
```
```
 
```

  if (dots.length > 2 && inc == dots.length)  {

```
    dots = []
```
```
    start()
```
```
  }
```
```
 
```
```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Two circles intersect and explode repeatedly… works at any browser size…

March 7, 2022

// animation // canvas // gradients

Older Posts

Newer Posts

Building Spikes Codegolf

W3Schools Output Tag

Canvas Path2D

Proxy Constants

Two Circles Explode

Recent

Archive