Snippet Zone

Wiggly Line Canvas

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
document.body.style.margin = 0;
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth;
```
```
  canvas.height = innerHeight;
```
```
}
```
```
addEventListener('resize', resize);
```
```
resize();
```
```
 
```
```
const PAD = 50;
```
```
const RAD = 2;
```
```
const SPEED = 20;
```
```
const TWO_PI = Math.PI * 2;
```
```
 
```
```
let mode = 'draw';
```
```
 
```
```
let t = Math.random() * TWO_PI, 
```
```
    x = innerWidth / 2, 
```
```
    y = innerHeight / 2,
```
```
    vx = 0, vy = 0, ta = 0;
```
```
 
```
```
function loop() {
```
```
  for (var i = 0; i < SPEED; i++) {
```
```
    t = Math.sin(ta) * TWO_PI;
```
```
    vx = RAD * Math.cos(t);
```
```
    vy = RAD * Math.sin(t);
```
```
    ta += Math.random() * 0.1 - 0.05;
```
```
    x += vx;
```
```
    y += vy;
```
```
 
```
```
    if (Math.random() < 0.005) {
```
```
      mode = 'no draw';
```
```
    } else if (Math.random() < 0.005) {
```
```
      mode = 'draw';
```
```
    }
```
```
 
```
```
    if (mode === 'draw') {
```
```
      c.fillStyle = 'red';
```
```
      c.fillRect(x, y, 2, 2);
```
```
    }
```
```
 
```
```
    if (x < -PAD) {
```
```
      x = innerWidth + PAD;
```
```
    } else if (x > innerWidth + PAD) {
```
```
      x = -PAD;
```
```
    }
```
```
    if (y < -PAD) {
```
```
      y = innerHeight + PAD;
```
```
    } else if (y > innerHeight + PAD) {
```
```
      y = -PAD;
```
```
    }
```
```
  }
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.

September 19, 2021

// animation // canvas // javascript // math // random // tricks

Array Sum Golfed

```
a = [1, 2, 3, 6, 9];
```
```
sum = eval(a.join`+`);
```
```
console.log(sum);
```

Found myself doing something like this a few times… easy golfed array sum. I saw this over at codegolf stackexchange here.

That whole thread is a great. I plan to post more from there in the future.

September 18, 2021

// codegolf // humor // javascript // math // obfuscation

Canvas ImageData

const canvas = document.body.appendChild(

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

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

const size = canvas.width * canvas.height;

```
 
```
```
let index = 0, x, y;
```
```
 
```
```
for (var i = 0; i < size; i++){
```
```
  x = i % width;
```
```
  y = Math.floor(i / width);
```
```
 
```
```
  pixels.data[index++] = x;
```
```
  pixels.data[index++] = y;
```
```
  pixels.data[index++] = width - x;
```
```
  pixels.data[index++] = 255;
```
```
}
```
```
c.putImageData(pixels, 0, 0);
```

This shows how to set pixel data on an html5 canvas.

September 17, 2021

// canvas // color // graphics // hex // javascript // math

Short Floor (to Integer)

```
console.log(~~6.62606889);
```
```
console.log(0|6.62606889);
```
```
console.log(0^6.62606889);
```
```
 
```
```
console.log(Math.floor(6.62606889));
```
```
console.log(parseInt(6.62606889,10));
```

A few different ways to get rid of decimal values… turning a float into an int.

September 15, 2021

// binary // float // integer // javascript // math

Make a Grid

```
const cellSize = 25;
```
```
const cols = 10;
```
```
const rows = 20;
```
```
 
```
```
function makeDot(x, y) {
```

  const dot = document.body.appendChild(

```
    document.createElement('div')
```
```
  );
```
```
 
```
```
  dot.classList.add('cell');
```
```
 
```
```
  Object.assign(dot.style, {
```
```
    position: 'absolute',
```
```
    left: `${x}px`,
```
```
    top: `${y}px`,
```
```
    width: `${cellSize}px`,
```
```
    height: `${cellSize}px`,
```
```
    outline: '1px solid black',
```
```
    cursor: 'pointer',
```
```
    background: 'gray'
```
```
  });
```
```
 
```
```
  return dot;
```
```
}
```
```
 
```
```
for (let y = 0; y < rows; y++) {
```
```
  for (let x = 0; x < cols; x++) {
```

    makeDot(x * cellSize, y * cellSize);

```
  }
```
```
}
```
```
 
```

// make a cell red when it is rolled over

document.addEventListener('mouseover', e => {

  if (e.target.classList.contains('cell')) {

```
    e.target.style.background = 'red';
```
```
  }
```
```
});
```

Here is a simple example for arranging divs in a grid.

September 14, 2021

// css // dom // javascript // math // tricks // ui

Older Posts

Newer Posts

Wiggly Line Canvas

Array Sum Golfed

Canvas ImageData

Short Floor (to Integer)

Make a Grid

Recent

Archive