fusilli-animata refactor

error-four-o-four · Aug 15, 2024 · 58d9cc0 · 58d9cc0
1 parent a753a7d
commit 58d9cc0
Show file tree

Hide file tree

Showing 18 changed files with 339 additions and 588 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/...es/2024-08-12-fusilli-animated/index.html → ...hes/2024-08-12-fusilli-animata/index.html b/...es/2024-08-12-fusilli-animated/index.html → ...hes/2024-08-12-fusilli-animata/index.html
@@ -6,7 +6,7 @@
 		<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
 		<link rel="stylesheet" href="/static/global.css">
 		<link rel="stylesheet" href="/static/default.css">
-		<title>Fusilli animated - 2024-08-12</title>
+		<title>fusilli-animata - 2024-08-12</title>
 	</head>
 	<body>
 		<main>

diff --git a/.../2024-08-12-fusilli-animated/package.json → ...s/2024-08-12-fusilli-animata/package.json b/.../2024-08-12-fusilli-animated/package.json → ...s/2024-08-12-fusilli-animata/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fusilli-animated",
+  "name": "fusilli-animata",
   "type": "module",
   "version": "0.0.0",
   "scripts": {

diff --git a/...2024-08-12-fusilli-animated/src/config.ts → .../2024-08-12-fusilli-animata/src/config.ts b/...2024-08-12-fusilli-animated/src/config.ts → .../2024-08-12-fusilli-animata/src/config.ts
@@ -1,17 +1,18 @@
 import type { TileType } from "./types.js";
 
-export const GRID = {
-	SIZE: 24,
+export const CANVAS_SIZE = Math.min(window.innerWidth, window.innerHeight);
+// export const CANVAS_SIZE = 720;
 
-	// COL: 0
-	// ROW: 0
-};
+// amount per edge
+export const TILES_AMOUNT = 16;
+// COL: 0
+// ROW: 0
 
-// const CANVAS_SIZE = Math.min(window.innerWidth, window.innerHeight);
-const CANVAS_SIZE = 640;
+export const MIN_LIFETIME = 180;
+export const MAX_LIFETIME = 300;
+export const FADE_TRANSITION_LGTH = 16;
 
-// const SIDE_LGTH = Math.floor(Math.min(window.innerWidth, window.innerHeight) / (0.5 * GRID.SIZE));
-const SIDE_LGTH = Math.floor(CANVAS_SIZE / GRID.SIZE);
+const SIDE_LGTH = Math.floor(CANVAS_SIZE / TILES_AMOUNT);
 
 export const TILE = {
 	SIDE_LGTH: SIDE_LGTH,

diff --git a/...-08-12-fusilli-animated/src/core/nodes.ts → ...4-08-12-fusilli-animata/src/core/nodes.ts b/...-08-12-fusilli-animated/src/core/nodes.ts → ...4-08-12-fusilli-animata/src/core/nodes.ts
diff --git a/...-12-fusilli-animated/src/core/observer.ts → ...8-12-fusilli-animata/src/core/observer.ts b/...-12-fusilli-animated/src/core/observer.ts → ...8-12-fusilli-animata/src/core/observer.ts
@@ -4,11 +4,9 @@ import type {
 	NodeHash,
 } from "../types";
 
-import { GRID, EDGES } from "../config";
+import { TILES_AMOUNT, EDGES } from "../config";
 import * as util from './utils.js';
 
-const { SIZE } = GRID;
-
 export class NodesObserver {
 	occupied: Set<NodeHash>;
 	col: number;
@@ -30,14 +28,14 @@ export class NodesObserver {
 
 		if (this.edge === 0) {
 			this.col += 1;
-			this.col %= SIZE;
+			this.col %= TILES_AMOUNT;
 		}
 
 		if (this.edge === 0 && this.col === 0) {
 			this.row += 1;
 		}
 
-		if (this.row === SIZE) {
+		if (this.row === TILES_AMOUNT) {
 			this.done = true;
 		}
 	}

diff --git a/sketches/2024-08-12-fusilli-animata/src/core/tiles.ts b/sketches/2024-08-12-fusilli-animata/src/core/tiles.ts
@@ -0,0 +1,81 @@
+import type { TileType, TileHash, TileProps } from "../types.js";
+import { TILES, TILE } from "../config.js";
+
+export function createTiles(size: number) {
+	const result = new Map<TileHash, TileProps>();
+	const weights = (Object.keys(TILES) as TileType[])
+		.reduce((all, type) => {
+			const length = TILES[type].weight;
+			return [
+				...all,
+				...Array.from({ length }, () => type)
+			];
+		}, [] as TileType[]);
+
+	const { SIDE_LGTH, HALF_SIDE_LGTH } = TILE;
+
+	let hash: TileHash;
+
+	for (let row = 0; row < size; row += 1) {
+		for (let col = 0; col < size; col += 1) {
+			hash = `${col}.${row}`;
+			result.set(hash, createTileProps(col, row));
+		}
+	}
+
+	function createTileProps(col: number, row: number): TileProps {
+		const type = pickType();
+		const rotation = pickRotation();
+
+		return {
+			type,
+			lanes: rotateTileHash(type, rotation),
+			col,
+			row,
+			rotation,
+			position: getPositionCoords(col, row),
+			center: getCenterCoords(col, row),
+		};
+	}
+
+	function pickType(): TileType {
+		const index = Math.floor(Math.random() * weights.length);
+		return weights[index];
+	}
+
+	function pickRotation() {
+		return Math.floor(Math.random() * 4);
+	}
+
+	function rotateTileHash(type: TileType, rotation: number) {
+		let i = 0;
+		while (i < rotation) {
+			type = type.slice(-1) + type.slice(0, 3);
+			i += 1;
+		}
+		return type;
+	}
+
+	function getPositionCoords(
+		col: number,
+		row: number
+	): [number, number] {
+		return [
+			col * SIDE_LGTH,
+			row * SIDE_LGTH,
+		];
+	}
+
+	function getCenterCoords(
+		col: number,
+		row: number
+	): [number, number] {
+		return [
+			col * SIDE_LGTH + HALF_SIDE_LGTH,
+			row * SIDE_LGTH + HALF_SIDE_LGTH,
+		];
+	}
+
+	return result;
+}
+
diff --git a/...-08-12-fusilli-animated/src/core/utils.ts → ...4-08-12-fusilli-animata/src/core/utils.ts b/...-08-12-fusilli-animated/src/core/utils.ts → ...4-08-12-fusilli-animata/src/core/utils.ts
@@ -10,7 +10,7 @@ import type {
 } from "../types.js";
 
 import {
-	GRID,
+	TILES_AMOUNT,
 	EDGES,
 	LANES
 } from "../config.js";
@@ -160,28 +160,27 @@ export function assertNonNullable(
 
 // #####
 
-const { SIZE } = GRID;
-
-const matrixNext = [
-	[0, 1],
-	[-1, 0],
-	[0, -1],
-	[1, 0]
-];
 
 export function getNextTile(
 	tiles: TilesMap,
 	col: number,
 	row: number,
 	nextEdge: Edge,
 ): TileEntry | undefined {
+	const matrix = [
+		[0, 1],
+		[-1, 0],
+		[0, -1],
+		[1, 0]
+	];
+
 	const index = EDGES.indexOf(nextEdge);
 
 	// unecessary ??
 	if (index < 0) return;
 
-	col += matrixNext[index][0];
-	row += matrixNext[index][1];
+	col += matrix[index][0];
+	row += matrix[index][1];
 
 	if (isOutOfBounds(col, row)) return;
 
@@ -192,25 +191,26 @@ export function getNextTile(
 }
 
 
-const matrixPrev = [
-	[0, -1],
-	[1, 0],
-	[0, 1],
-	[-1, 0]
-];
 
 export function getPrevTile(
 	tiles: TilesMap,
 	col: number,
 	row: number,
 	edge: Edge
 ): TileEntry | undefined {
+	const matrix = [
+		[0, -1],
+		[1, 0],
+		[0, 1],
+		[-1, 0]
+	];
+
 	const index = EDGES.indexOf(edge);
 
 	if (index < 0) return;
 
-	col += matrixPrev[index][0];
-	row += matrixPrev[index][1];
+	col += matrix[index][0];
+	row += matrix[index][1];
 
 	if (isOutOfBounds(col, row)) return;
 
@@ -221,7 +221,7 @@ export function getPrevTile(
 }
 
 function isOutOfBounds(col: number, row: number) {
-	return col < 0 || row < 0 || col >= SIZE || row >= SIZE;
+	return col < 0 || row < 0 || col >= TILES_AMOUNT || row >= TILES_AMOUNT;
 }
 
 // #####

diff --git a/...-12-fusilli-animated/src/renderer/lane.ts → ...8-12-fusilli-animata/src/renderer/lane.ts b/...-12-fusilli-animated/src/renderer/lane.ts → ...8-12-fusilli-animata/src/renderer/lane.ts
@@ -186,7 +186,7 @@ function laneAnglesToAnglesArray(array: [number, number, number, number]) {
 
 // access precalculated coords
 
-export const laneRenderer: Record<
+export const LaneRenderer: Record<
 	Lane,
 	(
 		p: P5,