Skip to content

Instantly share code, notes, and snippets.

@pete-otaqui
Last active October 26, 2015 16:33
Show Gist options
  • Save pete-otaqui/08a18b8dd109f3c745da to your computer and use it in GitHub Desktop.
Save pete-otaqui/08a18b8dd109f3c745da to your computer and use it in GitHub Desktop.
wallmaker - bad geometry
// do once per "row" (going down)
for ( let y=0; y<boxesDown; y++ ) {
// do once per "column" (going across)
for ( let x=0; x<boxesAcross; x++ ) {
// rx = top-left x coord of current square
let rx = x * size;
// ry = top-left y coord of current square
let ry = y * size;
// cx = centre point x coord of current square
let cx = rx + halfSize;
// cy = centre point y coord of current square
let cy = ry + halfSize;
// dx = detla between center x of the whole thing and cx
let dx = cx - midX;
// dy = detla between center y of the whole thing and cy
let dy = cy - midY;
// get the "slope"
let slope = dy / dx;
// "adjacent" (sohcahtoa) is half the box length (i.e. the middle)
// of the square out to one edge, either vertically or horizontally
let adjacent = halfSize;
// create some variables
let opposite, gx1, gy1, gx2, gy2;
// some jiggery pokery here to use the correct
// corners, depending on which quadrant the
// original slope lies within. My geometry sucks.
// what we are looking for is gx1, gy1 and gx2, gy2
// the line of these points runs from the center of
// the whole thing through the center of the current box
// each of the pair of points is one the edge of the
// current box ...
if ( slope >= -1 && slope <= 1 ) {
opposite = adjacent * slope;
if ( slope < 0 && cy < midY ) {
adjacent *= -1;
opposite *= -1;
}
gx1 = Math.round(cx + adjacent);
gy1 = Math.round(cy + opposite);
gx2 = Math.round(cx - adjacent);
gy2 = Math.round(cy - opposite);
} else {
opposite = adjacent / slope;
gx1 = Math.round(cx + opposite);
gy1 = Math.round(cy + adjacent);
gx2 = Math.round(cx - opposite);
gy2 = Math.round(cy - adjacent);
}
let gradient = context.createLinearGradient(gx1, gy1, gx2, gy2);
let [pr0, pg0, pb0] = xyToRGBA(gx1, gy1, imageData);
let [pr1, pg1, pb1] = xyToRGBA(gx2, gy2, imageData);
gradient.addColorStop(0, `rgba(${pr1}, ${pg1}, ${pb1}, 0.4)`);
gradient.addColorStop(1, `rgba(${pr0}, ${pg0}, ${pb0}, 0.8)`);
context.fillStyle = gradient;
context.fillRect(rx, ry, size, size);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment