Snippet Zone

30% Chance Math.random()

```
// 30%
```
```
if (Math.random() < .3) {
```
```
  // 30% chance this will run
```
```
  console.log('30%');
```
```
} else {
```
```
  console.log('nope');
```
```
}
```

I do this all the time when creative coding. I usually use a seeded random number generator instead of Math.random. It’s very useful to have something happen X% of the time.

Let’s run this a few times and look at the results. Click/tap try it out.

```
for (let i = 0; i < 111; i++) {
```
```
  if (Math.random() < .3) {
```
```
    console.log('30%');
```
```
  } else {
```
```
    console.log('nope');
```
```
  }
```
```
}
```

Scroll through the results of the console window.

September 25, 2021

// javascript // math // random // tricks

Golfed Min/Max

```
Math.min(a,b)  // 13 chars
```
```
a<b?a:b        //  7 chars
```
```
 
```
```
Math.max(a,b)
```
```
a>b?a:b
```

Another small golfing gem from codegolf stackexchange. This isn’t immediately obvious, but cool to note when golfing.

It’s also worth mentioning that if your code is long enough, aliasing Math.min and/or Math.max may be shorter in the long run:

```
m = Math.min
```
```
Math.min(a,b)  // 13 chars
```
```
a<b?a:b        //  7 chars
```
```
m(a,b)         //  6 chars
```

September 21, 2021

// codegolf // javascript // math // tricks

Complementary HSL

const a = document.body.appendChild(document.createElement('div')),

      b = document.body.appendChild(document.createElement('div'));

```
let degA = degB = 0;
```
```
 
```
```
const size = {
```
```
  width: '100px',
```
```
  height: '100px'
```
```
};
```
```
Object.assign(a.style, size);
```
```
Object.assign(b.style, size);
```
```
 
```
```
function loop() {
```
```
  degA += 1;
```
```
  degB = degA + 180;
```

  a.style.background = `hsl(${degA}deg, 100%, 50%)`;

  b.style.background = `hsl(${degB}deg, 100%, 50%)`;

```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

In HSL a hue difference of 180 degrees between two values will create a set of complimentary colors.

September 20, 2021

// animation // color // css // dom // javascript // tricks // ui

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

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

30% Chance Math.random()

Golfed Min/Max

Complementary HSL

Wiggly Line Canvas

Make a Grid

Recent

Archive