Spectre / Robin Houston

canvas = {

const ct = DOM.context2d(WIDTH, HEIGHT);

ct.canvas.ct = ct;

const s = ct.canvas.style;

s.margin = `0 ${(width - WIDTH) / 2}px`;

s.backgroundColor = "black";

ct.setTransform(1,0,0,-1, ct.canvas.width/2, ct.canvas.height/2);

ct.strokeStyle = "white";

ct.lineWidth = 2;

return ct.canvas;

}

WIDTH = Math.min(800, width)

HEIGHT = 500

t = {

while (true) {

yield Math.sin(Date.now() / 4000 * Math.PI)**2;

}

function rotate(n, [a,b,c,d]) {

n = ((n % 12) + 12) % 12;

for (let i=0; i < n; i++) {

[a,b,c,d] = [

(3*b - c) / 2,

(a - d) / 2,

(a + 3*d) / 2,

(b + c) / 2,

];

}

return [a,b,c,d];

}

HEX_SIDE = Math.sqrt((2 + 2/SQRT3) * (1 + 1 / (Math.sqrt(15) + 4)));

HEX_DELTAS = ({

S: [

[-.5, 0, 0, .5],

[-.875, 0, 0, -.125],

[1/3, 0, 0, -1/3],

[2/3, 0, 0, 0],

[1/3, 0, 0, 1/3],

],

C: [

[0, 0, 0, .5],

[-.875, 0, 0, .125],

[0, 0, 0, -.5],

[.875, 0, 0, .125],

[0, 0, 0, .5],

],

N: [

[.25, 0, 0, .25],

[-1/3, 0, 0, 1/3],

[-1, 0, 0, 0],

[-1/3, 0, 0, -1/3],

[.875, 0, 0, -.125],

[.25, 0, 0, .25],

],

W: [

[-1, 0, 0, 0],

[-1/3, 0, 0, -1/3],

[.5, 0, 0, -.5],

[2/3, 0, 0, 0],

[0, 0, 0, .5],

[-1, 0, 0, 0],

],

E: [

[1, 0, 0, 0],

[.5, 0, 0, .5],

[-.5, 0, 0, .5],

[-2/3, 0, 0, 0],

[-.25, 0, 0, -.25],

[0, 0, 0, -.5],

[.5, 0, 0, -.5],

],

SE: [

[-1, 0, 0, 0],

[-1/3, 0, 0, -1/3],

[1, 0, 0, -1],

[1, 0, 0, 0],

[1/3, 0, 0, 1/3],

[-1/3, 0, 0, 1/3],

],

NE: [

[1, 0, 0, 1],

[-1/3, 0, 0, 1/3],

[-1, 0, 0, 0],

[-.5, 0, 0, -.5],

[1/3, 0, 0, -1/3],

[2/3, 0, 0, 0],

],

SW: [

[-1, 0, 0, -1],

[1/3, 0, 0, -1/3],

[1, 0, 0, 0],

[.5, 0, 0, .5],

[-1/3, 0, 0, 1/3],

[-2/3, 0, 0, 0],

],

NW: [

[-.5, 0, 0, .5],

[-2/3, 0, 0, 0],

[-1, 0, 0, -1],

[1/3, 0, 0, -1/3],

[1, 0, 0, 0],

[1/3, 0, 0, 1/3],

],

WNW: [

[-1, 0, 0, 0],

[-1/3, 0, 0, -1/3],

[1, 0, 0, -1],

[1, 0, 0, 0],

[1/3, 0, 0, 1/3],

[-1/3, 0, 0, 1/3],

]

})

function interpolate(t, a, b) {

const result = Array(a.length);

for (let i = 0; i < a.length; ++i) {

result[i] = (1-t) * a[i] + t*b[i];

}

return result;

}

function tile(type, [x1, x2, y1, y2], i, n, r) {

const points = [];

const spectre_deltas = SPECTRE.map(v => rotate(n+1+r, v));

const hex_deltas = HEX_DELTAS[type].map(v => rotate(r, v));

let deltas = Array(14);

for (let j = 0; j < 14; ++j) {

deltas[j] = interpolate(t, spectre_deltas[j], hex_deltas[j]);

}

deltas = deltas.slice(i).concat(deltas.slice(0,i));

const scale = L/2 * ((1-t) + t * HEX_SIDE);

for (const v of deltas) {

const [dx1, dx2, dy1, dy2] = v;

x1 += dx1 * scale; x2 += dx2 * scale;

y1 += dy1 * scale; y2 += dy2 * scale;

points.push([x1, x2, y1, y2]);

}

return points.slice(13 - i).concat(points.slice(0, 13 - i));

}

function moveTo(ct, [x1, x2, y1, y2]) {

let x = x1 + x2 * SQRT3,

y = y1 + y2 * SQRT3;

ct.moveTo(x, y);

}

function lineTo(ct, [x1, x2, y1, y2]) {

let x = x1 + x2 * SQRT3,

y = y1 + y2 * SQRT3;

ct.lineTo(x, y);

}

function draw(ct, points) {

ct.beginPath();

moveTo(ct, points[points.length - 1]);

for (const pt of points) {

lineTo(ct, pt);

}

ct.stroke();

}

function make8cluster(pt, rot) {

const tiles = [];

let pts1, pts3, pts5, pts6, pts7;

tiles.push(pts5 = tile('C', pt, 0, 3, rot)); // 5

tiles.push(tile('S', pts5[9], 5, 4, rot)); // 8

tiles.push(pts6 = tile('E', pts5[1], 11, 0, rot)); // 6

tiles.push(tile('N', pts5[1], 13, 2, rot)); // 2

tiles.push(pts1 = tile('NW', pts5[5], 11, 4, rot)); // 1

tiles.push(tile('W', pts5[5], 13, 6, rot)); // 4

tiles.push(pts7 = tile('SW', pts5[9], 11, 8, rot)); // 7

tiles.push(pts3 = tile('NE', pts6[6], 0, 2, rot)); // 3

const control_points = [

pts1[4],

pts7[6],

pts6[4],

pts3[6],

];

return {

tiles,

control_points

};

}

function make9cluster(pt, rot) {

const { tiles, control_points } = make8cluster(pt, rot, true);

tiles.push(tile('WNW', tiles[4][6], 0, 6, rot)); // 9

return { tiles, control_points };

}

function dotAt(ct, [x1, x2, y1, y2]) {

ct.beginPath();

ct.ellipse(x1 + x2 * SQRT3, y1 + y2 * SQRT3, 10, 10, 0, 0, 2 * Math.PI);

ct.fillStyle = 'red';

ct.fill();

}

function translate(from, to, cluster) {

const [ from_x1, from_x2, from_y1, from_y2 ] = from;

const [ to_x1, to_x2, to_y1, to_y2 ] = to;

const dx1 = to_x1 - from_x1,

dx2 = to_x2 - from_x2,

dy1 = to_y1 - from_y1,

dy2 = to_y2 - from_y2;

for (const tile of cluster.tiles) {

for (let i = 0; i < tile.length; i++) {

const [ x1, x2, y1, y2 ] = tile[i];

tile[i] = [ x1 + dx1, x2 + dx2, y1 + dy1, y2 + dy2 ];

}

for (let i = 0; i < cluster.control_points.length; ++i) {

const [ x1, x2, y1, y2 ] = cluster.control_points[i];

cluster.control_points[i] = [ x1 + dx1, x2 + dx2, y1 + dy1, y2 + dy2 ];

}

{

const ct = canvas.ct;

ct.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);

ct.strokeStyle = 'white';

const c1 = make8cluster([0,0,-250,0], 11);

const c2 = make9cluster(c1.control_points[1], 3);

translate(c2.control_points[1], c1.control_points[1], c2);

const c3 = make9cluster(c1.control_points[2], 7);

translate(c3.control_points[2], c1.control_points[2], c3);

const c4 = make9cluster(c3.control_points[1], 9);

translate(c4.control_points[3], c3.control_points[1], c4);

const c5 = make9cluster(c4.control_points[0], 9);

translate(c5.control_points[2], c4.control_points[0], c5);

ct.strokeStyle = 'white';

for (const spectre of c1.tiles) draw(ct, spectre);

for (const spectre of c2.tiles) draw(ct, spectre);

for (const spectre of c3.tiles) draw(ct, spectre);

ct.strokeStyle = 'red';

for (const spectre of c4.tiles) draw(ct, spectre);

// for (const spectre of c5.tiles) draw(ct, spectre);

dotAt(ct, c4.control_points[0]);

return this || html`(<i>the drawing function</i>)`;

}

One platform to build and deploy the best data apps