feat: project fusilli

error-four-o-four · Aug 12, 2024 · a43ebd0 · a43ebd0
1 parent 922fbaf
commit a43ebd0
Show file tree

Hide file tree

Showing 43 changed files with 1,788 additions and 25 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -16,7 +16,7 @@ <h1>p5 <img src="/sketches/static/favicon.svg"> js sketches</h1>
       </header>
       <main>
         <ul id="sketches">
-					<li><a href="/sketches/views/foo/" alt="Link to foo">Foo</a><span>(2024-08-05)</span></li>
+					<li><a href="/sketches/views/fusilli/" alt="Link to fusilli">Fusilli</a><span>(2024-07-23)</span></li>
 				</ul>
       </main>
     </div>

diff --git a/dist/static/global.css b/dist/static/global.css
diff --git a/dist/views/foo/index-DPL9cTha.js b/dist/views/foo/index-DPL9cTha.js
diff --git a/dist/views/foo/index.html b/dist/views/foo/index.html
diff --git a/dist/views/fusilli/index-Dlw8ddXY.js b/dist/views/fusilli/index-Dlw8ddXY.js
diff --git a/dist/views/fusilli/index.html b/dist/views/fusilli/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" >
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" >
+		<link rel="icon" type="image/svg+xml" href="/sketches/static/favicon.svg">
+		<link rel="stylesheet" href="/sketches/static/global.css">
+		<title>Fusilli 2024-07-23</title>
+		<script type="module" crossorigin src="/sketches/views/fusilli/index-Dlw8ddXY.js"></script>
+	</head>
+	<body>
+		<main>
+			<div id="wrapper"></div>
+			<div id="content">
+				<h1>Fusilli</h1>
+				<h4>2024-07-23</h4>
+				<p>Click on canvas to regenerate.</p>
+
+				<pre>
+type EdgeData = {
+	lane: 'B' | 'L' | 'F' | 'R';
+	color: 'hsl(hue, sat, lgt)' | 'rgb(r, g, b)';
+}
+
+type TileData = {
+	coords: [number, number];
+	hasIntersections: boolean;
+	edges: Record&lt;'N' | 'E' | 'S' | 'W', ParsedEdgeData&gt;&semi;
+};</pre>
+				<div class="col-2">
+					<div>
+						<img src="/sketches/views/fusilli/tiles-V8Nkxhiz.png">
+					</div>
+					<div>
+						<img src="/sketches/views/fusilli/lanes-B_ooWDBc.png">
+					</div>
+				</div>
+				<div>
+					<img src="/sketches/views/fusilli/output32x32a-C90nIw-f.png">
+					<img src="/sketches/views/fusilli/output32x32b-BGpi8YOh.png">
+					<img src="/sketches/views/fusilli/output64x64-CPSKmk9a.png">
+					<img src="/sketches/views/fusilli/output96x96-Boa16Z5X.png">
+					<img src="/sketches/views/fusilli/output256x256a-N4mXM1Sf.png">
+					<img src="/sketches/views/fusilli/output256x256b-BQzCe0nZ.png">
+					<img src="/sketches/views/fusilli/output256x256c-fOPUEpHi.png">
+				</div>
+			</div>
+		</main>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js" integrity="sha512-d6sc8kbZEtA2LwB9m/ck0FhvyUwVfdmvTeyJRprmj7Wg9wRFtHDIpr6qk4g/y3Ix3O9I6KHIv6SGu9f7RaP1Gw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	</body>
+</html>

diff --git a/dist/views/fusilli/lanes-B_ooWDBc.png b/dist/views/fusilli/lanes-B_ooWDBc.png
diff --git a/dist/views/fusilli/output256x256a-N4mXM1Sf.png b/dist/views/fusilli/output256x256a-N4mXM1Sf.png
diff --git a/dist/views/fusilli/output256x256b-BQzCe0nZ.png b/dist/views/fusilli/output256x256b-BQzCe0nZ.png
diff --git a/dist/views/fusilli/output256x256c-fOPUEpHi.png b/dist/views/fusilli/output256x256c-fOPUEpHi.png
diff --git a/dist/views/fusilli/output32x32a-C90nIw-f.png b/dist/views/fusilli/output32x32a-C90nIw-f.png
diff --git a/dist/views/fusilli/output32x32b-BGpi8YOh.png b/dist/views/fusilli/output32x32b-BGpi8YOh.png
diff --git a/dist/views/fusilli/output64x64-CPSKmk9a.png b/dist/views/fusilli/output64x64-CPSKmk9a.png
diff --git a/dist/views/fusilli/output96x96-Boa16Z5X.png b/dist/views/fusilli/output96x96-Boa16Z5X.png
diff --git a/dist/views/fusilli/tiles-V8Nkxhiz.png b/dist/views/fusilli/tiles-V8Nkxhiz.png
diff --git a/public/static/global.css b/public/static/global.css
@@ -1,6 +1,26 @@
-body {
-  margin: 0;
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  color-scheme: dark light;
   background-color: hsl(0, 0%, 10%);
   color: #eee;
-  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }
+
+html, body {
+	position: relative;
+	margin: 0;
+	padding: 0;
+	min-height: 100vh;
+}
+
+body {
+  min-width: 320px;
+}
diff --git a/sketches/2024-07-23-fusilli/assets/lanes.png b/sketches/2024-07-23-fusilli/assets/lanes.png
diff --git a/sketches/2024-07-23-fusilli/assets/output256x256a.png b/sketches/2024-07-23-fusilli/assets/output256x256a.png
diff --git a/sketches/2024-07-23-fusilli/assets/output256x256b.png b/sketches/2024-07-23-fusilli/assets/output256x256b.png
diff --git a/sketches/2024-07-23-fusilli/assets/output256x256c.png b/sketches/2024-07-23-fusilli/assets/output256x256c.png
diff --git a/sketches/2024-07-23-fusilli/assets/output32x32a.png b/sketches/2024-07-23-fusilli/assets/output32x32a.png
diff --git a/sketches/2024-07-23-fusilli/assets/output32x32b.png b/sketches/2024-07-23-fusilli/assets/output32x32b.png
diff --git a/sketches/2024-07-23-fusilli/assets/output64x64.png b/sketches/2024-07-23-fusilli/assets/output64x64.png
diff --git a/sketches/2024-07-23-fusilli/assets/output96x96.png b/sketches/2024-07-23-fusilli/assets/output96x96.png
diff --git a/sketches/2024-07-23-fusilli/assets/style.css b/sketches/2024-07-23-fusilli/assets/style.css
@@ -0,0 +1,71 @@
+main {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 0;
+}
+
+#wrapper {
+	height: var(--elt-size);
+	margin: 0 auto;
+	padding: 2rem 0;
+	aspect-ratio: 1;
+	display: flex;
+	justify-content: center;
+  align-items: center;
+
+	canvas {
+		box-shadow: 2px 2px 1rem #0009;
+		border: 1px solid #fff3;
+	}
+}
+
+#wrapper.loading:after {
+	content: 'Loading ...';
+	display: block;
+	position: absolute;
+	padding: 0.25rem 0.5rem;
+	background-color: hsl(0, 0%, 15%);
+	box-shadow: 2px 2px 1rem #0006;
+	border-radius: 0.125rem;
+}
+
+#content {
+	position: relative;
+	width: var(--elt-size);
+	margin: 0 auto;
+
+	pre {
+		background-color: #0003;
+		/* width: fit-content; */
+		padding: 0.75rem 1.25rem
+	}
+
+	div {
+		padding: 0.75rem 0 1.25rem;
+	}
+
+	div > img {
+		display: block;
+		position: relative;
+		max-width: 100%;
+		margin: 0 auto 2rem auto;
+	}
+
+	.col-2 {
+		display: grid;
+		grid-template-columns: auto auto;
+		column-gap: 1rem;
+	}
+}
+
+@media (orientation: landscape) {
+	:root {
+		--elt-size: calc(100vh - 2 * 2rem);
+	}
+}
+
+@media (orientation: portrait) {
+	:root {
+		--elt-size: calc(100vw - 2 * 2rem);
+	}
+}
diff --git a/sketches/2024-07-23-fusilli/assets/tiles.png b/sketches/2024-07-23-fusilli/assets/tiles.png
diff --git a/sketches/2024-07-23-fusilli/index.html b/sketches/2024-07-23-fusilli/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
+		<link rel="stylesheet" href="/static/global.css">
+		<title>Fusilli 2024-07-23</title>
+	</head>
+	<body>
+		<main>
+			<div id="wrapper"></div>
+			<div id="content">
+				<h1>Fusilli</h1>
+				<h4>2024-07-23</h4>
+				<p>Click on canvas to regenerate.</p>
+
+				<pre>
+type EdgeData = {
+	lane: 'B' | 'L' | 'F' | 'R';
+	color: 'hsl(hue, sat, lgt)' | 'rgb(r, g, b)';
+}
+
+type TileData = {
+	coords: [number, number];
+	hasIntersections: boolean;
+	edges: Record&lt;'N' | 'E' | 'S' | 'W', ParsedEdgeData&gt;&semi;
+};</pre>
+				<div class="col-2">
+					<div>
+						<img src="./assets/tiles.png">
+					</div>
+					<div>
+						<img src="./assets/lanes.png">
+					</div>
+				</div>
+				<div>
+					<img src="./assets/output32x32a.png">
+					<img src="./assets/output32x32b.png">
+					<img src="./assets/output64x64.png">
+					<img src="./assets/output96x96.png">
+					<img src="./assets/output256x256a.png">
+					<img src="./assets/output256x256b.png">
+					<img src="./assets/output256x256c.png">
+				</div>
+			</div>
+		</main>
+		<script src="/p5.js/1.9.4/p5.min.js"></script>
+		<script type="module">
+			import './assets/style.css'
+			import { sketch } from './src/sketch.ts'
+			new window.p5(sketch, document.getElementById('wrapper'));
+		</script>
+	</body>
+</html>
diff --git a/sketches/2024-07-23-fusilli/package.json b/sketches/2024-07-23-fusilli/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "fusilli",
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "tsc": "tsc --noEmit",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "author": "ich",
+  "license": "MIT"
+}