isPointInPath Canvas
const canvas = document.createElement('canvas');const c = canvas.getContext('2d');let mouseX = 0, mouseY = 0;
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);
document.body.style.margin = 0;
c.fillStyle = 'black';
c.fillRect(0, 0, canvas.width, canvas.height);
document.addEventListener('mousemove', e => { mouseX = e.clientX;
mouseY = e.clientY;
});
// no scroll on mobile:
document.addEventListener('touchmove', e => e.preventDefault(), { passive: false });
document.addEventListener('touchmove', e => { mouseX = e.touches[0].clientX;
mouseY = e.touches[0].clientY;
});
const loop = () => { c.fillStyle = 'black';
c.fillRect(0, 0, canvas.width, canvas.height);
c.lineWidth = 3;
c.strokeStyle = 'blue';
c.beginPath();
c.moveTo(20, 20);
c.lineTo(110, 20);
c.lineTo(110, 110);
c.lineTo(20, 110);
c.closePath();
if (c.isPointInPath(mouseX, mouseY)) { c.strokeStyle = 'white';
c.fillStyle = 'red';
c.fill();
}
c.stroke();
requestAnimationFrame(loop);
};
loop();
See if a point is with a path inside canvas. Take a look at MDN for more info.
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.
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.
toString Hack Obfuscated
x=''+self
j=''
'd1d7a1712345691a7512d427b1da7d9ab7519a4b721a961721d694'
.split``
.map(_=>j+=`x[0x${_}]+`)console.log(eval(j+'""'))
Yesterday’s snippet saying something else…
It’s simpler than it looks:
x=''+self
// becomes "[object Window]"
j=''
// initialize `j` which will be javascript to pass to `eval`
'd1d7a17123456...'
// this is a list of index values to
// look up in `x` in hexidecimal so that each
// index is a single character
.split``
// split the index values into an array `[0xe, 0x2 ...`
.map(_=>j+=`x[0x${_}]+`)// map over the index values and write a string like
// this `x[0xe]+x[0x2]+...` into `j`
console.log(eval(j+'""'))
// evaluate `j` with an empty string at the end
// `x[0xe]+x[0x2]+""` and log it out
`
toString hack
x=self+''
console.log(
x[8],x[9],x[6],' ',
x[3],x[1],x[2],' ',
x[10],x[4],x[8],' ',
x[5],x[1],x[11]
)
Hit the “Try it out” and open the console….
