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.
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.
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 overdocument.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.
const canvas = document.createElement('canvas');
const c = canvas.getContext('2d');
document.body.appendChild(canvas);
function draw() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
c.fillStyle = 'gray';
c.fillRect(0, 0, canvas.width, canvas.height);
c.strokeStyle = 'white';
c.lineWidth = 2;
c.beginPath();
c.moveTo(0, 0);
bezierSkin([10, 10, 210, 10, 10, 300, 210, 300], false);
bezierSkin([200, 10, 330, 10, 250, 300]);
bezierSkin(Array(30)
.fill(0)
.map((a, b) => (b % 2 == 0) * 300 + Math.random() * 300)
);
c.stroke();
}window.addEventListener('resize', draw);
draw();
// array of xy coords, closed booleanfunction bezierSkin(bez, closed = true) {
const avg = calcAvgs(bez);
const leng = bez.length;
let i, n;
if (closed) {
c.moveTo(avg[0], avg[1]);
for (i = 2; i < leng; i += 2) {
n = i + 1;
c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
}c.quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]);
} else {
c.moveTo(bez[0], bez[1]);
c.lineTo(avg[0], avg[1]);
for (i = 2; i < leng - 2; i += 2) {
n = i + 1;
c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
}c.lineTo(bez[leng - 2], bez[leng - 1]);
}}// create anchor points by averaging the control pointsfunction calcAvgs(p) {
const avg = [];
const leng = p.length;
let prev;
for (var i = 2; i < leng; i++) {
prev = i - 2;
avg.push((p[prev] + p[i]) / 2);
} // closeavg.push((p[0] + p[leng - 2]) / 2);
avg.push((p[1] + p[leng - 1]) / 2);
return avg;
}Being able to draw smooth lines that connect arbitrary points is something that I find myself needing very frequently. This is a port of an old old snippet of mine that does just that. By averaging control points of a quadratic bezier curve we ensure that our resulting Bezier curves are always smooth.
It would be very cool if html5 canvas implemented the Catmull Rom Spline but it unfortunately does not. The wonderful Raphael library used to have support for it.