"use strict";
window.addEventListener("load", function () {
let triWidth, triHeight; // length of triangle side and altitude
let canv, ctx; // canvas and context
let canvbg, ctxbg; // background canvas and context
let maxx, maxy; // canvas dimensions
let grid;
let nbx, nby;
let hnbx, hnby; // number of triangles in the half of the width, height of the canvas
let nbLines;
let anglesLines, shade;
let grev;
let events;
// shortcuts for Math.
const mrandom = Math.random;
const mfloor = Math.floor;
const mround = Math.round;
const mceil = Math.ceil;
const mabs = Math.abs;
const mmin = Math.min;
const mmax = Math.max;
const mPI = Math.PI;
const mPIS2 = Math.PI / 2;
const m2PI = Math.PI * 2;
const msin = Math.sin;
const mcos = Math.cos;
const matan2 = Math.atan2;
const mhypot = Math.hypot;
const msqrt = Math.sqrt;
const rac3 = msqrt(3);
const rac3s2 = rac3 / 2;
const mPIS3 = Math.PI / 3;
const sinPIS6 = 0.5;
const cosPIS6 = rac3s2;
const sinPIS3 = cosPIS6;
const cosPIS3 = sinPIS6;
//------------------------------------------------------------------------
function alea(mini, maxi) {
// random number in given range
if (typeof maxi == "undefined") return mini * mrandom(); // range 0..mini
return mini + mrandom() * (maxi - mini); // range mini..maxi
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function intAlea(mini, maxi) {
// random integer in given range (mini..maxi - 1 or 0..mini - 1)
//
if (typeof maxi == "undefined") return mfloor(mini * mrandom()); // range 0..mini - 1
return mini + mfloor(mrandom() * (maxi - mini)); // range mini .. maxi - 1
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function removeElement(array, element) {
let idx = array.indexOf(element);
array.splice(idx, 1);
} // removeElement
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function randomElement(array) {
return array[intAlea(0, array.length)];
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function arrayShuffle(array) {
/* randomly changes the order of items in an array
only the order is modified, not the elements
*/
let k1, temp;
for (let k = array.length - 1; k >= 1; --k) {
k1 = intAlea(0, k + 1);
temp = array[k];
array[k] = array[k1];
array[k1] = temp;
} // for k
return array;
} // arrayShuffle
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/* returns lerp point between p0 and p1,
alpha = 0 will return p0, alpha = 1 will return p1
values of alpha outside [0,1] may be used to compute points outside the p0-p1 segment
*/
function lerp(p0, p1, alpha) {
return {
x: (1 - alpha) * p0.x + alpha * p1.x,
y: (1 - alpha) * p0.y + alpha * p1.y
};
} // function lerp
//------------------------------------------------------------------------
class Triangle {
/* numbering of vertices / edges
0 2---1---1
/ \ \ /
2 0 2 0
/ \ \ /
2---1---1 0
*/
constructor(kx, ky, color) {
this.color = color ? color : `hsl(${intAlea(360)},100%,50%)`;
this.kx = kx;
this.ky = ky;
this.kxc = kx - hnbx;
this.kyc = ky - hnby;
this.upsideDown = (this.kxc + this.kyc) & 1; // 0 or 1
this.setXY();
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
setXY() {
let xa, ya, vertices, deltay, upsideDown;
// centre of this triangle (middle of height, not gravity centre)
this.ya = ya = maxy / 2 + this.kyc * triHeight;
this.xa = xa = maxx / 2 + (this.kxc * triWidth) / 2;
this.vertices = vertices = [];
deltay = triHeight / 2;
if (this.upsideDown) deltay = -deltay;
vertices[0] = { x: xa, y: ya - deltay, hue: intAlea(360) };
vertices[1] = { x: xa + triWidth / 2, y: ya + deltay, hue: intAlea(360) };
vertices[2] = { x: xa - triWidth / 2, y: ya + deltay, hue: intAlea(360) };
// make vertices unique, i.e. re-use vertices from neighbors if already exist
// assumes triangles are created in the "natural" order
// from 0 to 3 of the above vertices will be replaced
if (this.ky != 0) {
// not first row : copy from row above
if (this.upsideDown) {
vertices[1] = grid[this.ky - 1][this.kx].vertices[1];
vertices[2] = grid[this.ky - 1][this.kx].vertices[2];
} else {
vertices[0] = grid[this.ky - 1][this.kx].vertices[0];
}
}
if (this.kx != 0) {
// not first column : copy from column kx - 1
vertices[0] = grid[this.ky][this.kx - 1].vertices[1];
vertices[2] = grid[this.ky][this.kx - 1].vertices[0];
}
} // setXY
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
setNeighbours() {
/* to be called only after the whole grid has been created */
this.neighbours = [];
for (let k = 0; k < 3; ++k) {
kx = this.kx + [1, 0, -1][k];
ky =
this.ky +
[
[0, 1, 0],
[0, -1, 0]
][this.upsideDown][k];
this.neighbours[k] =
kx < 0 || kx >= nbx || ky < 0 || ky >= nby ? false : grid[ky][kx];
} // for k
} // Triangle.setNeighbour
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
draw() {
/*
ctx.beginPath();
ctx.moveTo(this.vertices[0].x, this.vertices[0].y);
ctx.lineTo(this.vertices[1].x, this.vertices[1].y);
ctx.lineTo(this.vertices[2].x, this.vertices[2].y);
ctx.closePath();
ctx.lineWidth = 2;
ctx.strokeStyle = rndColor();
ctx.stroke();
*/
let xc, yc, a0, a1, radius;
let noc = intAlea(3);
for (let k = 0; k < 3; ++k) {
if (k == noc) continue;
xc = this.vertices[k].x;
yc = this.vertices[k].y;
for (let kl = 0; kl < nbLines; ++kl) {
radius = (triWidth * (kl + 0.5)) / nbLines;
if (kl < nbLines / 2) {
// full 60-degrees arc
a0 = [
[mPIS3, -mPI, -mPIS3],
[-2 * mPIS3, 2 * mPIS3, 0]
][this.upsideDown][k];
a1 = a0 + mPIS3;
} else {
let ang = anglesLines[kl];
a0 = [
[
[null, -2 * mPIS3 - ang, -mPIS3], // normal, noc = 0
[mPIS3, null, -ang], // noc = 1
[2 * mPIS3 - ang, -mPI, null]
], // noc = 2
[
[null, 2 * mPIS3, mPIS3 - ang], // upsideDown, noc = 0
[-mPIS3 - ang, null, 0], // noc = 1
[-2 * mPIS3, mPI - ang, null] // noc = 2
]
][this.upsideDown][noc][k];
a1 = [
[
[null, -2 * mPIS3, -mPIS3 + ang], // normal, noc = 0
[mPIS3 + ang, null, 0], // noc = 1
[2 * mPIS3, -mPI + ang, null]
], // noc = 2
[
[null, 2 * mPIS3 + ang, mPIS3], // upsideDown, noc = 0
[-mPIS3, null, ang], // noc = 1
[-2 * mPIS3 + ang, mPI, null] // noc = 2
]
][this.upsideDown][noc][k];
}
ctx.beginPath();
ctx.arc(xc, yc, radius, a0, a1);
let hue, lum;
if (nbLines & 1 && kl == (nbLines - 1) / 2) {
hue = 0;
lum = 100;
} else {
lum = shade[kl];
if (kl < nbLines / 2) hue = this.vertices[k].hue;
else hue = this.vertices[noc].hue;
}
if (grev) lum = 100 - lum;
ctx.strokeStyle = `hsl(${hue},100%, ${lum}%)`;
ctx.lineWidth = triWidth / nbLines - 2;
ctx.stroke();
} // for kl
} //
} // draw
} // class Triangle
//------------------------------------------------------------------------
function rndColor() {
return `hsl(${intAlea(360)},${intAlea(80, 100)}%,${intAlea(35, 65)}%)`;
}
//------------------------------------------------------------------------
function createGrid() {
let kx1, ky1, cell;
let stackDist = [];
grid = [];
for (let ky = 0; ky < nby; ++ky) {
grid[ky] = [];
for (let kx = 0; kx < nbx; ++kx) {
grid[ky][kx] = new Triangle(kx, ky);
} // for kx
} // for ky
grid.forEach((line) => line.forEach((tri) => tri.setNeighbors));
} // createGrid
//------------------------------------------------------------------------
let animate;
{
// scope for animate
let animState;
animate = function (tStamp) {
const event = events.pop();
window.requestAnimationFrame(animate);
if (event && event.event == "reset") animState = 0;
if (event && event.event == "click") animState = 0;
switch (animState) {
case 0:
if (startOver()) {
++animState;
}
break;
case 1:
grid.forEach((line) => {
line.forEach((cell) => {
cell.draw();
}); // line.forEach
}); // grid.forEach
++animState;
break;
} // switch
}; // animate
} // scope for animate
//------------------------------------------------------------------------
function startOver() {
// canvas dimensions
maxx = window.innerWidth;
maxy = window.innerHeight;
canv.width = maxx;
canv.height = maxy;
ctx.lineJoin = "bevel";
ctx.lineCap = "round";
triWidth = msqrt(maxx * maxy) / alea(5, 10); // about 10-20 triangles in average screen dimension
triHeight = triWidth * rac3s2;
hnby = mceil((maxy / triHeight - 1) / 2); // the full array has 2 * hnbx + 1 rows
hnbx = mceil(maxx / triWidth);
nbx = 1 + 2 * hnbx;
nby = 1 + 2 * hnby;
if (nbx < 3 || nby < 3) return false;
ctx.clearRect(0, 0, maxx, maxy);
nbLines = intAlea(4, 25);
grev = alea(1) > 0.2; // choice of increasing / decreasing lightness
// calculation of angles for incomplete arcs
anglesLines = [];
for (let k = 0; k < nbLines; ++k) {
if (k < nbLines / 2) continue; // pointless (and no solution) for alpha < 1/2
let alpha = (k + 0.5) / nbLines;
let x = (-1 + msqrt(3 * (4 * alpha * alpha - 1))) / 2;
let y = (1 - x) / msqrt(3);
anglesLines[k] = mabs(matan2(y - msqrt(3), x)) - mPI / 3;
}
// calculation of lightness levels for coloring
switch (nbLines) {
case 1:
case 2:
case 3:
shade = [50, 50, 50];
break;
default:
shade = [];
for (let k = 0; k < mfloor(nbLines / 2); ++k) {
shade[k] = shade[nbLines - k - 1] =
25 + (50 * k) / (mfloor(nbLines / 2) - 1);
} // for k
}
let idmax = nbLines / 2;
createGrid();
return true;
} // startOver
//------------------------------------------------------------------------
function mouseClick(event) {
events.push({ event: "click" });
} // mouseMove
//------------------------------------------------------------------------
//------------------------------------------------------------------------
// beginning of execution
{
// document.body.style.backgroundColor = bgColor;
canv = document.createElement("canvas");
canv.style.position = "absolute";
document.body.appendChild(canv);
ctx = canv.getContext("2d");
} // création CANVAS
canv.addEventListener("click", mouseClick); // just for initial position
events = [{ event: "reset" }];
requestAnimationFrame(animate);
}); // window load listener
!
