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
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.
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.
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.
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.