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.
const dist = (x1, y1, x2, y2) =>
Math.sqrt(
(x1 - x2) ** 2 +
(y1 - y2) ** 2);
const el = document.body.appendChild(
document.createElement('div')
);
el.innerHTML = `
<svg style="overflow:visible;">
<circle id="circA" cx="150" cy="100" r="50" fill="gray" />
<circle id="circB" cx="150" cy="200" r="50" fill="blue" />
<text id="text" dy="20" dx="20">move mouse</text>
</svg>
<style>
body, html, svg {
width: 100%;
height: 100%;
}</style>
`;function touch(e) {
const touches = e.touches;
let x, y;
if (touches != null && touches.length > 0) {
x = touches[0].clientX;
y = touches[0].clientY;
} else {
x = e.clientX;
y = e.clientY;
}return { x, y };
}const hasTouch = navigator.maxTouchPoints > 0;
const move = hasTouch ? 'touchmove' : 'mousemove';
document.addEventListener(move, e => {
const { x, y } = touch(e);
// using global ids :DcircB.cx.baseVal.value = x;
circB.cy.baseVal.value = y;
const distance = dist(
circA.cx.baseVal.value,
circA.cy.baseVal.value, x, y
);
text.innerHTML = 'move mouse, distance: ' + distance;
circA.r.baseVal.value = distance - circB.r.baseVal.value;
});
This snippet shows how to calculate the distance between two points. The dist function uses the pythagorean theorem:
const dist = (x1, y1, x2, y2) =>
Math.sqrt(
(x1 - x2) ** 2 +
(y1 - y2) ** 2);
Object.getOwnPropertyNames(Math).map(i => (this[i] = Math[i]))
;((
width = innerWidth * 2,
height = innerHeight * 2,
cnv = document.body.appendChild(
Object.assign(document.createElement('canvas'), {
width,height
})
),
c = cnv.getContext('2d'),
r = (n = 1) => Math.random() * n,
NUM = 50,
f = () => ({
ax: r(width),
ay: r(height),
x: 0,
y: 0,
T: r(9),
R: r(innerWidth * 0.8) + 40,
t: r(6),
C: round(r(255)),
m: r(5) + 1
}),
cs, sn, dx, dy,ns = [...Array(NUM)].map(f)
) => {
Object.assign(cnv.style, {
transformOrigin: '0 0',
transform: 'scale(.5)'
})
Object.assign(document.body.style, {
margin: 0,
padding: 0
})
const clear = () => {
c.fillStyle = '#666668'
c.fillRect(0, 0, width, height)
c.globalAlpha = 0.5
}onresize = () => {
width = cnv.width = innerWidth * 2
height = cnv.height = innerHeight * 2
clear()
}clear()
setInterval(() => {
for (i = 0; i < 30; i++) {
ns.map((n, i) => {
with (n) {
x = ax + R * cos(t)
y = ay + R * sin(t) * pow(sin(t * 0.5), m)
c.fillStyle = `rgba(${C},${C},${C},.02)`
;(cs = cos(T)), (sn = sin(T)), (dx = x - ax), (dy = y - ay)
c.fillRect(cs * dx - sn * dy + ax, sn * dx + cs * dy + ay, 50, 50)
t += 0.1
R -= 0.01
if (R < 5) ns[i] = f()
}})
}}, 16)
})()
Speed coded semi-golfed canvas texture. Best if viewed in fullscreen.