Snippet Zone

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

Odd Gradient Notation

```
// "Being clever is not clever"
```
```
// -- Bjarne Stroustrup
```
```
D = document
```
```
ang = {
```
```
  '|': 180,
```
```
  '-': 90,
```
```
  '\\': 135,
```
```
  '/': 225
```
```
}
```
```
 
```
```
box = def => {
```
```
  def = def.split(/\s+/)
```
```
  form = def.length
```
```
  I = i => parseInt(def[i], 16)
```
```
 
```

  ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},

    _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},

    _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}

```
  ][form]()
```
```
 
```
```
  c = c.split``
```
```
 
```
```
  ca = c[0]
```
```
  ca = ca+ca+ca
```
```
  cD = ang[c[1]]
```
```
  cb = c[2]
```
```
  cb = cb+cb+cb 
```
```
 
```
```
  D.body.appendChild(
```
```
    D.createElement`div`
```
```
  ).style = `
```

    position: absolute; left: ${x}px; top: ${y}px;

```
    width: ${w}px; height: ${h}px;
```

    background: linear-gradient(${cD}deg, #${ca}, #${cb})

```
  `
```
```
}
```
```
 
```
```
const parse = prog => prog.trim()
```
```
  .split(/\n+/m)
```
```
  .map(line => box(line.trim()))
```
```
 
```
```
parse(`
```
```
  0 64 0/f
```
```
  64 64 0\\f
```
```
  a0 f0 30 54 f\\0
```
```
  0 6f 20 60 0-c
```
```
  f 7f 20 60 0|c
```
```
  1f 8f 30 30 c/0
```
```
`)
```

Just playing around… odd micro-gradient notation:

```
'0 64 0/f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0/f = gradient black to white top right to bottom left

```
 
```
```
'64 64 0\\f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0\\f = black to to white gradient top left to bottom right

```
 
```
```
'0 6f 20 60 0-c'
```
```
// x=0 y=0x6f width=0x20 height=0x60
```

// 0-c = gradient black to grey (#ccc) left to right

```
 
```
```
// etc... ( | ) is top to bottom grad
```

February 27, 2022

// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

Fake RNG

```
let anchors
```
```
let idx
```
```
let leng = 10
```
```
let size = 200
```
```
let px = 0
```
```
let py = 0
```
```
 
```
```
function seed() {
```
```
  idx = 0
```
```
  anchors = (Date.now() + '').split``
```
```
    .reverse()
```
```
    .map(v => parseFloat(v) / 10)
```
```
    .splice(0, leng)
```
```
}
```
```
 
```
```
let last = 0
```
```
let zoom = 1
```
```
function rand() {
```
```
  if (idx > size * size) seed()
```
```
 
```
```
  px += zoom
```
```
  py += ~~(px / size)
```
```
 
```
```
  if (px >= size) px = 0
```
```
  if (py >= size) py = 0
```
```
 
```
```
  const point = {
```
```
    x: anchors[idx % leng],
```
```
    y: anchors[(idx + 1) % leng]
```
```
  }
```
```
  idx++
```
```
 
```
```
  let dists = []
```

  for (let i = 0; i < anchors.length; i += 2) {

```
    let dx = px - anchors[i] * size
```
```
    let dy = py - anchors[i + 1] * size
```

    dists.push(Math.sqrt(dx * dx + dy * dy))

```
  }
```
```
  dists.sort()
```
```
  last += (dists[0] / size - last) / 4
```
```
  return last
```
```
}
```
```
 
```
```
seed()
```
```
 
```
```
let d = document
```
```
let b = d.body
```
```
with (b.appendChild(
```

  Object.assign(d.createElement`canvas`, { width: 400, height: 400 })

```
).getContext`2d`) {
```
```
  fillStyle = 'black'
```
```
  fillRect(0, 0, 400, 400)
```
```
 
```
```
  for (let i = 0; i < 200; i++) {
```
```
    for (let j = 0; j < 200; j++) {
```
```
      const c = rand() * 255
```

      fillStyle = `rgb(${c}, ${c}, ${c})`

```
      fillRect(j * 2, i * 2, 1, 2)
```
```
    }
```
```
  }
```
```
}
```

Another one for genuary “Create your own pseudo-random number generator and visually check the results.”

January 24, 2022

// canvas // graphics // hacks // math // random // speedcoding

Repeatedly Refresh Webpage

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
  <meta charset="UTF-8">
```

  <meta http-equiv="refresh" content="2">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

```
  <title>Title</title>
```
```
</head>
```
```
<body>
```
```
  <script>
```

    document.body.innerHTML = Math.random() * 100;

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

Refresh a webpage every two seconds with:

```
<meta http-equiv="refresh" content="2">
```

January 16, 2022

// hacks // html

Polar Forking Tweak

```
const FOUR_PI = 6 * 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.fillStyle = 'rgba(0, 0, 0, .3)'
```

  c.fillRect(0, 0, canvas.width, canvas.height)

```
  c.fillStyle = 'white';
```
```
 
```

  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)
```
```
 
```
```
  let b = 5 * cos(inc);
```
```
  inc += .02;
```
```
 
```

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

    let rad = a * (b + 10 * sin(theta / 3));

    // randomly speed-coded and tweaked... leaving as is :D

    x = rad * cos(theta + b / 10) * cos(b / 10 +theta * 2) * cos(theta * 2);

    y = rad * sin(theta * 2) * cos(theta + b / 3) * cos(theta * 2);

```
    c.fillRect(x,y, 2, 2);
```
```
    theta += 0.04;
```
```
  }
```
```
  c.restore();
```
```
 
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
 
```
```
resize();
```
```
addEventListener('resize', resize);
```
```
 
```
```
draw();
```

Just randomly futzing with sin/cos…

January 12, 2022

// animation // canvas // curves // graphics // hacks // humor // math

Older Posts

Newer Posts

W3Schools Output Tag

Odd Gradient Notation

Fake RNG

Repeatedly Refresh Webpage

Polar Forking Tweak

Recent

Archive