add h-tree project

src/lib/utils/materials.ts

@@ -2,4 +2,8 @@ export const glazeProps = {
   roughness: 0.15,
   transmission: 1,
   thickness: 2,
-}
+}
+
+export const getRandomColor = (): string => {
+  return `#${Math.floor(Math.random() * 16777215).toString(16)}`
+}

src/routes/showcase/h-tree/_routeLib/Branch.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Vector3Tuple } from 'three';
+	import { randFloat, randInt } from 'three/src/math/MathUtils';
+	import {
+		calculateNextPoint,
+		defaultAngle,
+		defaultAxis,
+		defaultBranchRate,
+		defaultBranchWidth,
+		defaultColor1,
+		defaultLength,
+		defaultLineMaterial_0,
+		defaultLineMaterial_1,
+		defaultLineMaterial_2,
+		defaultLineMaterial_3,
+		defaultLineMaterial_4,
+		defaultLineStart,
+		allowRandomness
+	} from './treeState';
+	import { linear } from 'svelte/easing';
+	import { tweened } from 'svelte/motion';
+	import { Line2 } from 'threlte';
+	import { onMount } from 'svelte';
+
+	export let lineStart = defaultLineStart;
+	export let length = defaultLength;
+	export let angle = defaultAngle;
+	export let axis = defaultAxis;
+	export let branchRate = defaultBranchRate;
+	export let branchWidth = defaultBranchWidth;
+	export let color1 = defaultColor1;
+	export let idx = 0;
+	let pX = tweened(lineStart[0], { duration: 1000 / (idx || 1), easing: linear });
+	let pY = tweened(lineStart[1], { duration: 1000 / (idx || 1), easing: linear });
+	let pZ = tweened(lineStart[2], { duration: 1000 / (idx || 1), easing: linear });
+	let renderNextBranches = false;
+	let material = defaultLineMaterial_0;
+	let lineEnd: Vector3Tuple;
+
+	onMount(() => {
+		lineEnd = calculateNextPoint(lineStart, angle, axis, length, !!idx && $allowRandomness);
+		if (branchWidth > 0.2) {
+			material = defaultLineMaterial_0;
+		} else if (branchWidth > 0.18) {
+			material = defaultLineMaterial_1;
+		} else if (branchWidth > 0.14) {
+			material = defaultLineMaterial_2;
+		} else if (branchWidth > 0.1) {
+			material = defaultLineMaterial_3;
+		} else {
+			material = defaultLineMaterial_4;
+		}
+
+		pX.set(lineEnd[0]);
+		pY.set(lineEnd[1]);
+		pZ.set(lineEnd[2]).then(() => {
+			renderNextBranches = true;
+		});
+	});
+</script>
+
+<Line2 points={[lineStart, [$pX, $pY, $pZ]]} {material} />
+
+{#if length > 1 && renderNextBranches}
+	<svelte:self
+		lineStart={lineEnd}
+		length={length - defaultLength * ($allowRandomness ? randFloat(0.1, 0.2) : 0.165)}
+		angle={angle + 90 * ($allowRandomness ? randFloat(0.1, 0.75) : 1)}
+		axis="z"
+		branchRate={$allowRandomness ? randInt(1, 4) : branchRate}
+		branchWidth={branchWidth * 0.75}
+		{color1}
+		idx={idx + 1}
+	/>
+	{#if branchRate > 1}
+		<svelte:self
+			lineStart={lineEnd}
+			length={length - defaultLength * ($allowRandomness ? randFloat(0.1, 0.2) : 0.165)}
+			angle={angle - 90 * ($allowRandomness ? randFloat(0.1, 0.75) : 1)}
+			axis="z"
+			branchRate={$allowRandomness ? randInt(1, 4) : branchRate}
+			branchWidth={branchWidth * 0.75}
+			{color1}
+			idx={idx + 1}
+		/>
+	{/if}
+	{#if branchRate > 2}
+		<svelte:self
+			lineStart={lineEnd}
+			length={length - defaultLength * ($allowRandomness ? randFloat(0.1, 0.2) : 0.165)}
+			angle={angle + 90 * ($allowRandomness ? randFloat(0.1, 0.75) : 1)}
+			axis="x"
+			branchRate={$allowRandomness ? randInt(1, 4) : branchRate}
+			branchWidth={branchWidth * 0.75}
+			{color1}
+			idx={idx + 1}
+		/>
+	{/if}
+	{#if branchRate > 3}
+		<svelte:self
+			lineStart={lineEnd}
+			length={length - defaultLength * ($allowRandomness ? randFloat(0.1, 0.2) : 0.165)}
+			angle={angle - 90 * ($allowRandomness ? randFloat(0.1, 0.75) : 1)}
+			axis="x"
+			branchRate={$allowRandomness ? randInt(1, 4) : branchRate}
+			branchWidth={branchWidth * 0.75}
+			{color1}
+			idx={idx + 1}
+		/>
+	{/if}
+{/if}

src/routes/showcase/h-tree/_routeLib/HTree.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	// import { SphereBufferGeometry, MeshStandardMaterial, type Vector3Tuple } from 'three';
+	// import type { Vector3Tuple } from 'three';
+	// import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial';
+	// import { Mesh, InstancedMesh, Line2, Instance } from 'threlte';
+	// import { branches, connectVectors, type Branch } from './treeState';
+
+	// let allThePoints: Vector3Tuple[] = [];
+	// $: if ($branches && $connectVectors) {
+	// 	console.log('Mapping...');
+	// 	allThePoints = [[0, 0, 0], ...$branches.map((b: Branch) => b.points[1])];
+	// }
+</script>
+
+<!-- <InstancedMesh
+	geometry={new SphereBufferGeometry(0.08)}
+	material={new MeshStandardMaterial({
+		color: 'coral'
+	})}
+>
+	{#each $branches as branch (branch.id)}
+		<Instance
+			position={{ x: branch.points[1][0], y: branch.points[1][1], z: branch.points[1][2] }}
+		/>
+	{/each}
+</InstancedMesh> -->
+
+<!-- {#if allThePoints.length > 2 && $connectVectors}
+	<Line2
+		points={allThePoints}
+		material={new LineMaterial({
+			worldUnits: true,
+			linewidth: 0.03,
+			// @ts-ignore bad types
+			color: 'limegreen'
+			// clipIntersection: true
+		})}
+	/>
+{:else}
+	{#each $branches as branch (branch.id)}
+		<Line2 points={branch.points} material={branch.material} />
+	{/each}
+{/if} -->

src/routes/showcase/h-tree/_routeLib/SeedPod.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { TorusGeometry, CircleGeometry } from 'three';
+	import { Reflector } from 'three/examples/jsm/objects/Reflector.js';
+	import { Mesh, MeshInstance } from 'threlte';
+	import { tweened } from 'svelte/motion';
+	import { linear } from 'svelte/easing';
+	import { LayerMaterial, Noise } from 'lamina/vanilla';
+	import { pointerX } from './treeState';
+	const mirrorPlane = new CircleGeometry(15, 50);
+	const reflector = new Reflector(mirrorPlane, {
+		clipBias: 0.003,
+		color: '#92e2f9'
+	});
+
+	let offsetX = tweened(0, { duration: 500, easing: linear });
+	// dark blue: '#060516'
+	// cyan-ish: '#92e2f9'
+	// 'deeppink'
+	let laminaMaterial: any = new LayerMaterial({
+		lighting: 'basic',
+		layers: [
+			new Noise({
+				colorA: 'deeppink',
+				colorB: 'deeppink',
+				colorC: '#060516',
+				colorD: '#060516',
+				alpha: 1,
+				scale: 2,
+				type: 'curl',
+				offset: [0, 0, 0],
+				mapping: 'local',
+				mode: 'normal',
+				visible: true
+			})
+		]
+	});
+
+	$: {
+		offsetX.set($pointerX);
+	}
+
+	$: {
+		laminaMaterial.layers[0].offset = [$offsetX, 0, 0];
+		laminaMaterial = laminaMaterial;
+	}
+</script>
+
+<Mesh
+	geometry={new TorusGeometry(15, 0.4, 8, 64)}
+	material={laminaMaterial}
+	position={{ y: 0 }}
+	rotation={{ x: Math.PI / 2 }}
+/>
+<MeshInstance mesh={reflector} rotation={{ x: -Math.PI / 2 }} />