vincent/thrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

page transition, optimize lighting

Browse Source
This commit is contained in:
Vincent van der Wal
2026-07-19 10:55:51 +02:00
parent f724cbff6d
commit 99c2851285
21 changed files with 388 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+23 -10
View File
@@ -6,7 +6,7 @@ Most sacred-geometry figures are drawn flat. This project asks what they look li
when they are built in real 3D space: the Fruit of Life as a rotated cubic sphere
packing, the Platonic solids nested inside it with their vertices on the circle
centres, the torus as a field of winding strands, and so on. Every page is an
interactive scene with orbit controls and a lil-gui panel for playing with the
interactive scene with orbit controls and a control panel for playing with the
parameters.
## Pages
@@ -17,25 +17,38 @@ parameters.
| Metatron's Cube | `src/metatron.js` | The 3D Fruit of Life circle grid with the five Platonic solids (fire, earth, air, water, aether) aligned to it, plus the Merkaba and the full Metatron web |
| Toroidal Field | `src/torus.js` | A torus with field-line strands winding around the surface and particles flowing along them |
| Vector Equilibrium | `src/matrix.js` | The cuboctahedron: radial spokes equal to the edges, and the 12-around-1 kissing-sphere packing |
| Golden Spiral | `src/phyllotaxis.js` | Phyllotaxis at the golden angle: sunflower disc, pinecone and Fibonacci sphere; nudge the angle to watch the pattern collapse |
| Golden Spiral | `src/phyllotaxis.js` | Phyllotaxis at the golden angle: sunflower disc, pinecone and Fibonacci sphere, with a looping growth animation; nudge the angle to watch the pattern collapse |
| Flower of Life | `src/flower.js` | A cubic grid of interlocking spheres |
| Seed of Life | `src/seed.js` | The seven seed circles rotated through space |
## Design
The landing page palette (deep warm gradient, orange `#f44f04`, cream `#f5e9de`)
is used 1:1 in the scenes: the canvases are transparent, so the CSS gradient is
the scenery background. The shadow wall is invisible; each shape projects a
light orange outline onto it. Dark/light theme toggle in the nav, persisted in
localStorage.
Page navigations fly the shapes out past the camera, crossfade documents via
the View Transitions API (Chromium; graceful cut elsewhere), and fly the next
page's shapes in from the distance.
## Development
Built with [Vite](https://vite.dev/) as a multi-page app.
```sh
npm install
npm start # dev server with hot reload
npm start # dev server
npm run build # production build into build/
npm run preview # serve the production build
```
Each page is its own webpack entry; the page list lives at the top of
`webpack.config.js`. To add a new exploration, add `src/<name>.js` (the shared
scene setup is in `src/lib/stage.js`) and one line to the `pages` array.
Every page shares the chrome in `src/lib/chrome.js`: fade transitions between
pages and a dark/light toggle (bottom right, persisted in localStorage). Dark
mode matches the landing page; light mode is the original orange room.
Each exploration is a `src/<name>.html` + `src/<name>.js` pair; register new
pages in the `pages` list in `vite.config.js`. Shared code lives in `src/lib/`:
`stage.js` (scene/camera/lights/wall/controls), `theme.js` (palette),
`transit.js` (fly in/out), `chrome.js` (nav, theme toggle, transitions),
`edgeTubes.js` (line-thickness helpers).
## Debug flags (Metatron page)
src/css/styles.scss
+111 -44
View File
@@ -3,22 +3,20 @@
// Every page shares --page-bg: the scene canvases are transparent, so the
// landing gradient is the scenery background, 1:1.
:root {
--page-bg: radial-gradient(ellipse at 50% 30%, #2a1204 0%, #120701 60%, #000 100%);
--fade-bg: #120701;
--page-bg: radial-gradient(ellipse at 50% 30%, #52220a 0%, #140801 60%, #000 100%);
--ink: #f5e9de;
--ink-soft: rgba(245, 233, 222, 0.7);
--ink-faint: rgba(245, 233, 222, 0.55);
--panel-bg: rgba(18, 7, 1, 0.75);
--panel-bg: rgba(18, 7, 1, 0.6);
--panel-border: rgba(244, 79, 4, 0.35);
}
html[data-theme='light'] {
--page-bg: radial-gradient(ellipse at 50% 30%, #fff8f0 0%, #ffe7d3 60%, #ffd4b3 100%);
--fade-bg: #ffe7d3;
--page-bg: radial-gradient(ellipse at 50% 30%, #fff8f0 0%, #fdca9e 55%, #ef9d55 100%);
--ink: #1b0a02;
--ink-soft: rgba(27, 10, 2, 0.7);
--ink-faint: rgba(27, 10, 2, 0.5);
--panel-bg: rgba(255, 248, 240, 0.85);
--panel-bg: rgba(255, 248, 240, 0.6);
--panel-border: rgba(244, 79, 4, 0.4);
}
@@ -34,39 +32,66 @@ body {
color: var(--ink);
}
// the scenes cast their projection onto the wall, so the glow of the gradient
// follows it: lib/glow.js projects the wall centre into screen space every
// frame and drives --glow-x/--glow-y; the landing keeps it centred
html:not([data-theme='light']) body:not(.landing) {
background: radial-gradient(ellipse 75% 90% at var(--glow-x, 12%) var(--glow-y, 50%), #5c2609 0%, #140801 65%, #000 100%);
}
html[data-theme='light'] body:not(.landing) {
background: radial-gradient(ellipse 75% 90% at var(--glow-x, 12%) var(--glow-y, 50%), #fff8f0 0%, #fdca9e 60%, #ef9d55 100%);
}
canvas {
display: block;
}
// page transition: opaque at first paint, faded out by chrome.js once the page
// is ready, faded back in before navigating away. High z-index so it also
// covers stats (z-index 10000) and lil-gui.
.fade {
position: fixed;
inset: 0;
z-index: 10001;
background: var(--fade-bg);
opacity: 1;
pointer-events: none;
transition: opacity 0.35s ease;
// page transitions: while the shapes fly out, the page content fades
// (html.leaving, set by chrome.js), the browser crossfades the documents
// (Chromium), and the next page's content fades back in. The gradient
// background never fades, so pages blend through it instead of through black.
@view-transition {
navigation: auto;
}
&.done {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.45s;
}
canvas,
.page-nav,
.lil-gui,
.theme-toggle,
.landing-content {
animation: page-enter 0.6s ease;
transition: opacity 0.45s ease;
}
html.leaving :is(canvas, .page-nav, .lil-gui, .theme-toggle, .landing-content) {
opacity: 0;
}
@keyframes page-enter {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.theme-toggle {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 20;
width: 40px;
height: 40px;
width: 48px;
height: 48px;
border: 1px solid var(--panel-border);
border-radius: 50%;
background: var(--panel-bg);
backdrop-filter: blur(10px);
color: var(--ink);
font-size: 18px;
font-size: 22px;
line-height: 1;
cursor: pointer;
@@ -75,26 +100,34 @@ canvas {
}
}
// back-link on the exploration pages; bottom-left because stats sits top-left
// and lil-gui top-right
// floating variant (landing page): top right
body > .theme-toggle {
position: fixed;
top: 16px;
right: 16px;
z-index: 20;
}
// top bar on the exploration pages: back link, page title, theme toggle
.page-nav {
position: fixed;
bottom: 16px;
top: 16px;
left: 16px;
z-index: 10;
display: flex;
gap: 12px;
align-items: baseline;
gap: 16px;
align-items: center;
font-family: Georgia, 'Times New Roman', serif;
a {
color: var(--ink);
background: var(--panel-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--panel-border);
text-decoration: none;
padding: 6px 12px;
padding: 14px 26px;
border-radius: 999px;
font-size: 14px;
font-size: 18px;
&:hover {
border-color: #f44f04;
@@ -103,7 +136,7 @@ canvas {
span {
color: var(--ink-soft);
font-size: 14px;
font-size: 17px;
letter-spacing: 0.04em;
}
}
@@ -121,16 +154,22 @@ canvas {
--number-color: #ff9a5c;
--string-color: #ff9a5c;
--font-family: Georgia, 'Times New Roman', serif;
--font-size: 13px;
--input-font-size: 13px;
--widget-border-radius: 6px;
--font-size: 17px;
--input-font-size: 17px;
--title-height: 44px;
--widget-height: 34px;
--spacing: 10px;
--padding: 14px;
--folder-indent: 14px;
--widget-border-radius: 8px;
&.root {
margin: 12px;
margin: 16px;
width: 370px;
border: 1px solid var(--panel-border);
border-radius: 12px;
overflow: hidden;
backdrop-filter: blur(6px);
backdrop-filter: blur(10px);
}
&.root > .title {
@@ -143,16 +182,37 @@ html[data-theme='light'] .lil-gui {
--string-color: #c2410c;
}
@media (max-width: 600px) {
.lil-gui.root {
width: calc(100vw - 24px);
max-height: 45vh;
overflow-y: auto;
}
.page-nav {
gap: 8px;
a,
span {
font-size: 15px;
}
a {
padding: 10px 16px;
}
}
}
// ---------- landing ---------- //
body.landing {
--card-bg: rgba(18, 7, 1, 0.65);
--card-bg-hover: rgba(42, 18, 4, 0.85);
--card-bg: rgba(18, 7, 1, 0.5);
--card-bg-hover: rgba(42, 18, 4, 0.75);
}
html[data-theme='light'] body.landing {
--card-bg: rgba(255, 255, 255, 0.6);
--card-bg-hover: rgba(255, 255, 255, 0.95);
--card-bg: rgba(255, 255, 255, 0.45);
--card-bg-hover: rgba(255, 255, 255, 0.8);
}
.landing-bg {
@@ -202,6 +262,7 @@ html[data-theme='light'] body.landing {
border: 1px solid var(--panel-border);
border-radius: 12px;
background: var(--card-bg);
backdrop-filter: blur(10px);
color: inherit;
text-decoration: none;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
@@ -228,7 +289,13 @@ html[data-theme='light'] body.landing {
}
.soon {
margin-top: 72px;
width: fit-content;
margin: 72px auto 0;
padding: 28px 40px;
border: 1px solid var(--panel-border);
border-radius: 12px;
background: var(--card-bg);
backdrop-filter: blur(10px);
text-align: center;
h3 {
@@ -247,7 +314,7 @@ html[data-theme='light'] body.landing {
li {
font-size: 14px;
color: var(--ink-faint);
color: var(--ink-soft);
margin: 6px 0;
}
}
src/flower.html
-1
View File
@@ -7,7 +7,6 @@
<link rel="stylesheet" href="./css/styles.scss">
</head>
<body>
<div class="fade"></div>
<nav class="page-nav">
<a href="index.html">&larr; Thrive</a>
<span>Flower of Life</span>
src/flower.js
+6 -1
View File
@@ -8,6 +8,8 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import './lib/chrome.js';
import { sceneColors } from './lib/theme.js';
import { bindWorld } from './lib/transit.js';
import { bindGlow } from './lib/glow.js';
import { bindCameraMemory } from './lib/cameraMemory.js';
const colors = sceneColors();
@@ -16,7 +18,7 @@ const colors = sceneColors();
const scene = new THREE.Scene();
const world = new THREE.Group();
scene.add( world );
const updateWorld = bindWorld( world );
const updateWorld = bindWorld( world, 1.5 );
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 500 );
@@ -42,6 +44,8 @@ window.addEventListener( 'resize', () => {
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( -4, 0, 0 );
bindCameraMemory( camera, controls );
const updateGlow = bindGlow( camera );
// const geometry_torus = new THREE.TorusGeometry( 2.5, 2.5, 32, 128 );
@@ -387,6 +391,7 @@ function animate () {
// }
updateWorld();
updateGlow();
controls.update();
renderer.render( scene, camera );
src/index.html
-1
View File
@@ -7,7 +7,6 @@
<link rel="stylesheet" href="./css/styles.scss">
</head>
<body class="landing">
<div class="fade"></div>
<main class="landing-content">
<header>
<h1>Thrive</h1>
src/lib/cameraMemory.js
+32
View File
@@ -0,0 +1,32 @@
// Preserves the orbit camera across the reload that a theme switch triggers.
// chrome.js fires thrive:store-camera right before reloading; the saved pose is
// restored (and cleared) on the next load of the same page, so regular
// navigation still gets the default framing.
const KEY = `thrive-camera:${location.pathname}`;
export function bindCameraMemory( camera, controls ) {
window.addEventListener( 'thrive:store-camera', () => {
try {
sessionStorage.setItem( KEY, JSON.stringify( {
position: camera.position.toArray(),
target: controls.target.toArray(),
} ) );
} catch {
// storage unavailable: the camera just resets
}
} );
let saved = null;
try {
saved = JSON.parse( sessionStorage.getItem( KEY ) );
sessionStorage.removeItem( KEY );
} catch {
saved = null;
}
if ( saved ) {
camera.position.fromArray( saved.position );
controls.target.fromArray( saved.target );
controls.update();
}
}
src/lib/chrome.js
+20 -25
View File
@@ -1,38 +1,30 @@
import { currentTheme, toggleTheme } from './theme.js';
import { EXIT_MS } from './transit.js';
// Shared page chrome: theme attribute for the CSS, fade transitions between
// pages, and the dark/light toggle. Imported for its side effects by every page.
// Shared page chrome: theme attribute for the CSS, page transitions, and the
// dark/light toggle. Imported for its side effects by every page.
//
// Navigation choreography: the shapes fly out first (thrive:exit), then the
// browser's cross-document view transition (see @view-transition in the CSS)
// crossfades the last frame into the next page, whose shapes fly in. No
// blocking overlay - pages blend into each other.
document.documentElement.dataset.theme = currentTheme();
const FADE_MS = 350;
window.addEventListener( 'DOMContentLoaded', () => {
// the overlay lives in the HTML templates so it covers the very first paint;
// pages without one (shouldn't happen) still get a working fallback
let fade = document.querySelector( '.fade' );
if ( ! fade ) {
fade = document.createElement( 'div' );
fade.className = 'fade';
document.body.appendChild( fade );
}
// double rAF so the browser commits the opaque state before transitioning
requestAnimationFrame( () => requestAnimationFrame( () => fade.classList.add( 'done' ) ) );
// fly the shapes out first, fade through the background for the tail of the
// flight, then navigate
const fadeTo = ( action ) => {
// shapes fly out and the page content fades (html.leaving) at the same
// time; navigation happens mid-flight so the document crossfade blends
// moving frames instead of an empty pause
const leaveTo = ( action ) => {
window.dispatchEvent( new Event( 'thrive:exit' ) );
setTimeout( () => fade.classList.remove( 'done' ), EXIT_MS - FADE_MS + 100 );
setTimeout( action, EXIT_MS + 100 );
document.documentElement.classList.add( 'leaving' );
setTimeout( action, EXIT_MS * 0.75 );
};
document.addEventListener( 'click', ( event ) => {
const link = event.target.closest( 'a[href]' );
if ( ! link || link.origin !== location.origin ) return;
event.preventDefault();
fadeTo( () => { location.href = link.href; } );
leaveTo( () => { location.href = link.href; } );
} );
const button = document.createElement( 'button' );
@@ -41,11 +33,14 @@ window.addEventListener( 'DOMContentLoaded', () => {
button.title = 'toggle dark / light';
button.addEventListener( 'click', () => {
// the scenes build their materials once at startup, so switching theme
// reloads the page - the fade makes that read as a transition
fadeTo( () => {
// reloads the page behind the same fly-out + crossfade; the camera pose
// is stashed so the reload comes back to the same view
window.dispatchEvent( new Event( 'thrive:store-camera' ) );
leaveTo( () => {
toggleTheme();
location.reload();
} );
} );
document.body.appendChild( button );
// scene pages carry the toggle in the top nav; the landing gets it floating
( document.querySelector( '.page-nav' ) || document.body ).appendChild( button );
} );
src/lib/glow.js
+35
View File
@@ -0,0 +1,35 @@
import * as THREE from 'three';
// Keeps the gradient's bright spot gravitating toward the projection wall as
// the camera orbits: the wall centre (x = -10 in every scene) is projected into
// screen space each frame and eased into the CSS gradient position.
const WALL_CENTRE = new THREE.Vector3( -10, 0, 0 );
export function bindGlow( camera ) {
const projected = new THREE.Vector3();
let x = 12;
let y = 50;
let writtenX = null;
let writtenY = null;
return function update() {
projected.copy( WALL_CENTRE ).project( camera );
// when the wall goes behind the camera the projection flips sides;
// leave the glow where it last was until the wall swings back
if ( projected.z < 1 ) {
const targetX = THREE.MathUtils.clamp( ( projected.x + 1 ) * 50, -40, 140 );
const targetY = THREE.MathUtils.clamp( ( 1 - projected.y ) * 50, -40, 140 );
x += ( targetX - x ) * 0.08;
y += ( targetY - y ) * 0.08;
}
// writing the property repaints the whole gradient, so only touch the
// DOM while the glow is actually moving
if ( writtenX !== null && Math.abs( x - writtenX ) < 0.05 && Math.abs( y - writtenY ) < 0.05 ) return;
writtenX = x;
writtenY = y;
document.body.style.setProperty( '--glow-x', `${x.toFixed( 2 )}%` );
document.body.style.setProperty( '--glow-y', `${y.toFixed( 2 )}%` );
};
}
src/lib/stage.js
+5
View File
@@ -5,6 +5,8 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import './chrome.js';
import { sceneColors } from './theme.js';
import { bindWorld } from './transit.js';
import { bindGlow } from './glow.js';
import { bindCameraMemory } from './cameraMemory.js';
// Shared scene setup for the exploration pages: the landing page gradient shows
// through a transparent canvas, a side light throws a light orange shadow onto
@@ -35,6 +37,8 @@ export function createStage( { target = [ 0, 0, 0 ] } = {} ) {
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( ...target );
bindCameraMemory( camera, controls );
const updateGlow = bindGlow( camera );
// dark mode gets a soft warm ambient so unlit faces keep their colour
if ( colors.dark ) scene.add( new THREE.AmbientLight( colors.light, 0.9 ) );
@@ -78,6 +82,7 @@ export function createStage( { target = [ 0, 0, 0 ] } = {} ) {
for ( const update of updates ) update( time );
updateWorld();
updateGlow();
controls.update();
renderer.render( scene, camera );
}
src/lib/theme.js
+2 -2
View File
@@ -29,6 +29,6 @@ const fills = {
export function sceneColors() {
return currentTheme() === 'dark'
? { dark: true, light: 0xffb37a, line: 0xf5e9de, shadow: 0xff9a5c, fills }
: { dark: false, light: 0xffb37a, line: 0x1b0a02, shadow: 0xf44f04, fills };
? { dark: true, light: 0xffb37a, line: 0x1b0a02, shadow: 0xffb385, fills }
: { dark: false, light: 0xffb37a, line: 0xffffff, shadow: 0xd94403, fills };
}
src/lib/transit.js
+5 -4
View File
@@ -9,8 +9,9 @@ const easeOutCubic = ( t ) => 1 - Math.pow( 1 - t, 3 );
const easeInCubic = ( t ) => t * t * t;
// wraps a THREE.Group holding all of a page's shapes; call the returned
// function every frame
export function bindWorld( world ) {
// function every frame. baseScale is the group's resting scale, for pages whose
// raw geometry is smaller than the others.
export function bindWorld( world, baseScale = 1 ) {
let mode = 'enter';
let start = performance.now();
@@ -22,10 +23,10 @@ export function bindWorld( world ) {
return function update() {
if ( mode === 'enter' ) {
const k = Math.min( 1, ( performance.now() - start ) / ENTER_MS );
world.scale.setScalar( Math.max( 0.001, easeOutCubic( k ) ) );
world.scale.setScalar( baseScale * Math.max( 0.001, easeOutCubic( k ) ) );
} else {
const k = Math.min( 1, ( performance.now() - start ) / EXIT_MS );
world.scale.setScalar( 1 + easeInCubic( k ) * 7 );
world.scale.setScalar( baseScale * ( 1 + easeInCubic( k ) * 7 ) );
}
};
}
src/matrix.html
-1
View File
@@ -7,7 +7,6 @@
<link rel="stylesheet" href="./css/styles.scss">
</head>
<body>
<div class="fade"></div>
<nav class="page-nav">
<a href="index.html">&larr; Thrive</a>
<span>Vector Equilibrium</span>
src/matrix.js
+2 -2
View File
@@ -13,7 +13,7 @@ import { makeTube } from './lib/edgeTubes.js';
const { scene, colors, onUpdate } = createStage();
const params = {
scale: 2,
scale: 3,
edges: true,
spokes: true,
fill: true,
@@ -93,10 +93,10 @@ function renderMatrix() {
} );
const spheres = new THREE.Group();
const sphereGeometry = new THREE.SphereGeometry( sphereRadius, 48, 48 );
// no castShadow: the projection stays an outline of edges and spokes
for ( const point of [ centre, ...vertices ] ) {
const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.position.copy( point );
sphere.castShadow = true;
spheres.add( sphere );
}
spheres.visible = params.spheres;
src/metatron.html
-1
View File
@@ -7,7 +7,6 @@
<link rel="stylesheet" href="./css/styles.scss">
</head>
<body>
<div class="fade"></div>
<nav class="page-nav">
<a href="index.html">&larr; Thrive</a>
<span>Metatron's Cube</span>
src/metatron.js
+116 -193
View File
@@ -8,11 +8,10 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import './lib/chrome.js';
import { sceneColors } from './lib/theme.js';
import { bindWorld } from './lib/transit.js';
import { bindGlow } from './lib/glow.js';
import { bindCameraMemory } from './lib/cameraMemory.js';
const colors = sceneColors();
// the per-solid near-black line colours only read on the light background;
// dark mode swaps them all for the shared light line colour
const lineColor = ( light ) => colors.dark ? colors.line : light;
// the landing gradient shows through a transparent canvas; all shapes live in
// `world`, which page transitions fly in and out
@@ -46,6 +45,8 @@ window.addEventListener( 'resize', () => {
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( -4, 0, 0 );
bindCameraMemory( camera, controls );
const updateGlow = bindGlow( camera );
// const geometry_torus = new THREE.TorusGeometry( 2.5, 2.5, 32, 128 );
@@ -233,151 +234,81 @@ const params = {
// radius: 1
// };
let sphere, circleCircum, cube, cubeLines;
let spheres = [];
let spheresLines = [];
let circleCircum, cube, cubeLines;
let gui;
let solids = [];
let renderFlower = (radius = 1) => {
spheres = [];
spheresLines = [];
// tear down the previous render's shapes and GUI so re-rendering never stacks duplicates
if ( gui ) gui.destroy();
for ( let obj of solids ) world.remove( obj );
solids = [];
// 3D fruit of life: a circle on the centre, on every cube corner and on
// every cube edge midpoint (the inner ring of the 2D pattern)
const d = 4 * 0.612 * radius;
const points = [ [ 0, 0, 0 ] ];
for ( let sx of [ -1, 1 ] ) {
for ( let sy of [ -1, 1 ] ) {
for ( let sz of [ -1, 1 ] ) {
points.push( [ sx * d, sy * d, sz * d ] );
}
}
}
// circles on demand: a translucent sphere and ring on every vertex of a
// solid, toggled per element from its folder
const circleSphereGeometry = new THREE.SphereGeometry( radius, 48, 48 );
const circleSphereMaterial = new THREE.MeshStandardMaterial( {
color: colors.fills.sphere,
metalness: 0.7,
roughness: 0.3,
opacity: 0.8,
transparent: true
} );
const ringGeometry = new THREE.TorusGeometry( radius, params['tube'], 48, 64 );
const ringMaterial = new THREE.MeshBasicMaterial( {
color: colors.line,
opacity: 0.35,
transparent: true
} );
// only the edge midpoints whose coordinates share a sign: the other six sit on
// the projection equator and would add circles between the two rings
for ( let s of [ -1, 1 ] ) {
points.push( [ s * d, s * d, 0 ] );
points.push( [ s * d, 0, s * d ] );
points.push( [ 0, s * d, s * d ] );
}
const occupiedSpots = new Set();
const addCircleAt = ( x, y, z, parent ) => {
let xtemp, ytemp, ztemp;
// one circle per spot: if any group already placed a circle here (fire and
// earth share all eight cube corners), later ones are skipped
const addCircleMeshes = ( point, group ) => {
const spot = point.toArray().map( ( n ) => n.toFixed( 2 ) ).join( ',' );
if ( occupiedSpots.has( spot ) ) return;
occupiedSpots.add( spot );
[xtemp, ytemp, ztemp] = rotatePoint3D(x, y, z, params['yangle'], params['xangle'], params['zangle'])
const sphere = new THREE.Mesh( circleSphereGeometry, circleSphereMaterial );
sphere.position.copy( point );
group.add( sphere );
let sphereGeometry = new THREE.SphereGeometry( radius, 64, 64 );
let sphereMaterial = new THREE.MeshStandardMaterial( {
color: colors.fills.sphere,
metalness: 0.7,
roughness: 0.3,
opacity: 0.8,
transparent: true
} );
sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.position.x = xtemp;
sphere.position.y = ytemp;
sphere.position.z = ztemp;
parent.add( sphere );
let circleGeometry = new THREE.TorusGeometry( radius, params['tube'], 64, 64 );
let circleMaterial = new THREE.MeshBasicMaterial( {
color: colors.line,
opacity: 0.1,
transparent: true
} );
let ring = new THREE.Mesh( circleGeometry, circleMaterial );
ring.castShadow = true;
const ring = new THREE.Mesh( ringGeometry, ringMaterial );
ring.rotation.y = Math.PI / 2;
ring.position.x = xtemp;
ring.position.y = ytemp;
ring.position.z = ztemp;
parent.add( ring );
circleGeometry = new THREE.TorusGeometry( 0.01, 0.01, 64, 64 );
circleMaterial = new THREE.MeshBasicMaterial( {
color: colors.line,
opacity: 0.1,
transparent: true
} );
circleCircum = new THREE.Mesh( circleGeometry, circleMaterial );
circleCircum.castShadow = true;
circleCircum.rotation.y = Math.PI / 2;
circleCircum.position.x = xtemp;
circleCircum.position.y = ytemp;
circleCircum.position.z = ztemp;
parent.add( circleCircum );
sphere.start_x = x;
sphere.start_y = y;
sphere.start_z = z;
ring.start_x = x;
ring.start_y = y;
ring.start_z = z;
circleCircum.start_x = x;
circleCircum.start_y = y;
circleCircum.start_z = z;
spheres.push(sphere)
spheresLines.push(ring)
spheresLines.push(circleCircum)
ring.position.copy( point );
ring.castShadow = true;
group.add( ring );
};
for ( let point of points ) {
addCircleAt( ...point, world );
}
// circles on a solid's vertices
const makeVertexCircles = ( geometry, rotation ) => {
const group = new THREE.Group();
const seen = new Set();
const positions = geometry.attributes.position;
const vertex = new THREE.Vector3();
// the remaining cube circles: the six equatorial edge midpoints and the six
// face centres, hidden behind the "allCubeCircles" toggle
const extraCircles = new THREE.Group();
extraCircles.visible = false;
for ( let i = 0; i < positions.count; i++ ) {
vertex.fromBufferAttribute( positions, i );
const key = vertex.toArray().map( ( n ) => n.toFixed( 3 ) ).join( ',' );
if ( seen.has( key ) ) continue;
seen.add( key );
for ( let s of [ -1, 1 ] ) {
for ( let extraPoint of [
[ s * d, -s * d, 0 ], [ s * d, 0, -s * d ], [ 0, s * d, -s * d ],
[ s * d, 0, 0 ], [ 0, s * d, 0 ], [ 0, 0, s * d ],
] ) {
addCircleAt( ...extraPoint, extraCircles );
const point = vertex.clone().applyMatrix4( rotation );
addCircleMeshes( point, group );
}
}
world.add( extraCircles );
return group;
};
// Metatron's web: every circle centre connected to every other one
let web = new THREE.Group();
const webMaterial = new THREE.MeshBasicMaterial( { color: colors.line, opacity: 0.5, transparent: true } );
const webUp = new THREE.Vector3( 0, 1, 0 );
for ( let i = 0; i < points.length; i++ ) {
for ( let j = i + 1; j < points.length; j++ ) {
const [ ax, ay, az ] = rotatePoint3D( ...points[ i ], params[ 'yangle' ], params[ 'xangle' ], params[ 'zangle' ] );
const [ bx, by, bz ] = rotatePoint3D( ...points[ j ], params[ 'yangle' ], params[ 'xangle' ], params[ 'zangle' ] );
const a = new THREE.Vector3( ax, ay, az );
const b = new THREE.Vector3( bx, by, bz );
const direction = new THREE.Vector3().subVectors( b, a );
const length = direction.length();
const webTube = params['tube'] * 0.4;
const cylinder = new THREE.CylinderGeometry( webTube, webTube, length, 6 );
cylinder.translate( 0, length / 2, 0 );
const strand = new THREE.Mesh( cylinder, webMaterial );
strand.position.copy( a );
strand.quaternion.setFromUnitVectors( webUp, direction.clone().normalize() );
web.add( strand );
}
}
web.visible = false;
world.add( web );
const addCircles = ( group, visible ) => {
group.visible = visible;
world.add( group );
solids.push( group );
return group;
};
// the exact rotation the circle grid uses, as a matrix - solids aligned with
// this coincide with the dots instead of approximating them with tuned angles
@@ -401,13 +332,15 @@ let renderFlower = (radius = 1) => {
cube = new THREE.Mesh( boxGeometry, boxMaterial );
cube.setRotationFromMatrix( gridRotation );
cubeLines = makeEdgeTubes( boxGeometry, lineColor( 0x1b0a02 ), params['tube'] );
cubeLines = makeEdgeTubes( boxGeometry, colors.line, params['tube'] );
cubeLines.setRotationFromMatrix( gridRotation );
cubeLines.castShadow = true;
world.add( cubeLines );
world.add( cube );
const cubeCircles = addCircles( makeVertexCircles( boxGeometry, gridRotation ), true );
// fire - radius sqrt(3)d puts every vertex exactly on a corner dot
const tetraGeometry = new THREE.TetrahedronGeometry( Math.sqrt( 3 ) * d )
const tetraMaterial = new THREE.MeshStandardMaterial( {
@@ -419,7 +352,7 @@ let renderFlower = (radius = 1) => {
} );
let tetra = new THREE.Mesh( tetraGeometry, tetraMaterial );
let tetraLines = makeEdgeTubes( tetraGeometry, lineColor( 0x140101 ), params['tube'] );
let tetraLines = makeEdgeTubes( tetraGeometry, colors.line, params['tube'] );
@@ -427,21 +360,29 @@ let renderFlower = (radius = 1) => {
tetra.setRotationFromMatrix( gridRotation );
tetraLines.castShadow = true;
world.add( tetraLines );
world.add( tetra );
// second tetrahedron of the star tetrahedron (Merkaba): the same shape
// rotated a quarter turn so it interlocks with the first
const tetraGeometry2 = new THREE.TetrahedronGeometry( Math.sqrt( 3 ) * d );
tetraGeometry2.rotateZ( Math.PI / 2 );
let tetra2 = new THREE.Mesh( tetraGeometry2, tetraMaterial );
let tetraLines2 = makeEdgeTubes( tetraGeometry2, lineColor( 0x140101 ), params['tube'] );
let tetraLines2 = makeEdgeTubes( tetraGeometry2, colors.line, params['tube'] );
tetra2.rotation.copy( tetra.rotation );
tetraLines2.rotation.copy( tetraLines.rotation );
world.add( tetraLines2 );
world.add( tetra2 );
// both tetrahedra form one element, controlled together
const fireFill = new THREE.Group();
fireFill.add( tetra, tetra2 );
const fireFrame = new THREE.Group();
fireFrame.add( tetraLines, tetraLines2 );
world.add( fireFrame );
world.add( fireFill );
const fireCircles = new THREE.Group();
fireCircles.add( makeVertexCircles( tetraGeometry, gridRotation ) );
fireCircles.add( makeVertexCircles( tetraGeometry2, gridRotation ) );
addCircles( fireCircles, true );
// radius 2d puts the projected corners exactly on the outer circle centres
const octaGeometry = new THREE.OctahedronGeometry( 2 * d )
@@ -454,7 +395,7 @@ let renderFlower = (radius = 1) => {
} );
let octa = new THREE.Mesh( octaGeometry, octaMaterial );
let octaLines = makeEdgeTubes( octaGeometry, lineColor( 0x0a2528 ), params['tube'] );
let octaLines = makeEdgeTubes( octaGeometry, colors.line, params['tube'] );
octaLines.setRotationFromMatrix( gridRotation );
octa.setRotationFromMatrix( gridRotation );
@@ -463,6 +404,8 @@ let renderFlower = (radius = 1) => {
world.add( octaLines );
world.add( octa );
const octaCircles = addCircles( makeVertexCircles( octaGeometry, gridRotation ), true );
// radius 1.663d puts the projected corners on the outer circle centres
const icosaGeometry = new THREE.IcosahedronGeometry( 1.663 * d )
const icosaMaterial = new THREE.MeshStandardMaterial( {
@@ -474,7 +417,7 @@ let renderFlower = (radius = 1) => {
} );
let icosa = new THREE.Mesh( icosaGeometry, icosaMaterial );
let icosaLines = makeEdgeTubes( icosaGeometry, lineColor( 0x000000 ), params['tube'] );
let icosaLines = makeEdgeTubes( icosaGeometry, colors.line, params['tube'] );
// a grid-aligned icosahedron projects its corners 22.2 degrees off the dot
// hexagon, so it gets an extra twist about the view diagonal to meet the dots
@@ -492,6 +435,8 @@ let renderFlower = (radius = 1) => {
world.add( icosaLines );
world.add( icosa );
const icosaCircles = addCircles( makeVertexCircles( icosaGeometry, icosaRotation ), false );
// 2.29 * 1.003: tuned against the circle pattern
const dodecaGeometry = new THREE.DodecahedronGeometry( 2.297 * radius )
const dodecaMaterial = new THREE.MeshStandardMaterial( {
@@ -503,7 +448,7 @@ let renderFlower = (radius = 1) => {
} );
let dodeca = new THREE.Mesh( dodecaGeometry, dodecaMaterial );
let dodecaLines = makeEdgeTubes( dodecaGeometry, lineColor( 0x000000 ), params['tube'] );
let dodecaLines = makeEdgeTubes( dodecaGeometry, colors.line, params['tube'] );
// aether: a dodecahedron vertex sits on the cube diagonal, so the plain grid
// rotation points a vertex straight at the light and shares the cube's frame,
@@ -518,6 +463,18 @@ let renderFlower = (radius = 1) => {
world.add( dodeca );
// the in-between circles of the 2D pattern: the six edge midpoints that
// form the inner ring
const innerCircles = new THREE.Group();
const innerPoints = [];
for ( let s of [ -1, 1 ] ) {
innerPoints.push( [ s * d, s * d, 0 ], [ s * d, 0, s * d ], [ 0, s * d, s * d ] );
}
for ( const p of innerPoints ) {
addCircleMeshes( new THREE.Vector3( ...p ).applyMatrix4( gridRotation ), innerCircles );
}
addCircles( innerCircles, true );
// Big circle: visible as a solid tube, same thickness as the shape edges
let circleGeometry = new THREE.TorusGeometry( 5 * radius, params['tube'], 64, 64);
let circleMaterial = new THREE.MeshBasicMaterial( { color: colors.line } );
@@ -526,7 +483,7 @@ let renderFlower = (radius = 1) => {
circleCircum.castShadow = true;
world.add( circleCircum );
solids.push( cube, cubeLines, tetra, tetraLines, tetra2, tetraLines2, octa, octaLines, icosa, icosaLines, dodeca, dodecaLines, circleCircum, web, extraCircles );
solids.push( cube, cubeLines, fireFill, fireFrame, octa, octaLines, icosa, icosaLines, dodeca, dodecaLines, circleCircum );
gui = new GUI();
@@ -534,34 +491,20 @@ let renderFlower = (radius = 1) => {
let guiDict = {};
let fire = gui.addFolder('Fire');
guiDict['fire'] = {'folder': fire, 'object': tetra, 'objectLines': tetraLines};
let fire2 = gui.addFolder('Fire 2');
guiDict['fire2'] = {'folder': fire2, 'object': tetra2, 'objectLines': tetraLines2};
guiDict['fire'] = {'folder': fire, 'object': fireFill, 'objectLines': fireFrame, 'circles': fireCircles};
let air = gui.addFolder('Air');
guiDict['air'] = {'folder': air, 'object': octa, 'objectLines': octaLines};
guiDict['air'] = {'folder': air, 'object': octa, 'objectLines': octaLines, 'circles': octaCircles};
let earth = gui.addFolder('Earth');
guiDict['earth'] = {'folder': earth, 'object': cube, 'objectLines': cubeLines};
guiDict['earth'] = {'folder': earth, 'object': cube, 'objectLines': cubeLines, 'circles': cubeCircles};
let water = gui.addFolder('Water');
guiDict['water'] = {'folder': water, 'object': icosa, 'objectLines': icosaLines};
guiDict['water'] = {'folder': water, 'object': icosa, 'objectLines': icosaLines, 'circles': icosaCircles};
let aether = gui.addFolder('Aether')
guiDict['aether'] = {'folder': aether, 'object': dodeca, 'objectLines': dodecaLines};
let circles = gui.addFolder('Circles')
guiDict['circles'] = {'folder': circles};
circles.add( { web: false }, 'web' ).onChange( ( value ) => {
web.visible = value;
} );
circles.add( { allCubeCircles: false }, 'allCubeCircles' ).onChange( ( value ) => {
extraCircles.visible = value;
} );
let folderStandard = {
show: true,
fill: true,
@@ -569,29 +512,8 @@ let renderFlower = (radius = 1) => {
scale: 1,
}
circles.add( folderStandard, 'show', true).onChange((value) => {
if (value) {
for (let sphere of spheres) {
sphere.visible = true;
}
for (let sphereLine of spheresLines) {
sphereLine.visible = true;
}
} else {
for (let sphere of spheres) {
sphere.visible = false;
}
for (let sphereLine of spheresLines) {
sphereLine.visible = false;
}
}
});
for (let fld of Object.keys(guiDict)) {
// guiDict[fld]['folder'].close()
if (fld === "circles") {
continue
}
guiDict[fld]['folder'].close()
folderStandard.show = true;
guiDict[fld]['folder'].add( folderStandard, 'scale', 0, 2 ).step(0.001).onChange( (value) => {
@@ -601,6 +523,7 @@ let renderFlower = (radius = 1) => {
guiDict[fld]['objectLines'].scale.x = value
guiDict[fld]['objectLines'].scale.y = value
guiDict[fld]['objectLines'].scale.z = value
if (guiDict[fld]['circles']) guiDict[fld]['circles'].scale.setScalar(value);
});
guiDict[fld]['folder'].add( folderStandard, 'show', true).onChange((value) => {
@@ -626,28 +549,27 @@ let renderFlower = (radius = 1) => {
guiDict[fld]['objectLines'].visible = false;
}
});
if (guiDict[fld]['circles']) {
guiDict[fld]['folder'].add( { circles: guiDict[fld]['circles'].visible }, 'circles' ).onChange( (value) => {
guiDict[fld]['circles'].visible = value;
});
}
}
gui.add( params, 'radius', 0.5, 1.5).onChange( (value) => {
for (let sphere of spheres) {
world.remove(sphere)
}
for (let sphereLine of spheresLines) {
world.remove(sphereLine)
}
gui.add( { innerCircles: true }, 'innerCircles' ).onChange( (value) => {
innerCircles.visible = value;
});
// rebuilding destroys and recreates the GUI, which would kill the very
// slider being dragged - so the scene only rebuilds when the drag ends
gui.add( params, 'radius', 0.5, 1.5).onFinishChange( (value) => {
renderFlower (value)
});
gui.add( params, 'tube', 0.01, 0.1 ).step( 0.005 ).onChange( () => {
for (let sphere of spheres) {
world.remove(sphere)
}
for (let sphereLine of spheresLines) {
world.remove(sphereLine)
}
gui.add( params, 'tube', 0.01, 0.1 ).step( 0.005 ).onFinishChange( () => {
renderFlower (params['radius'])
});
// ?only=<fire|fire2|air|earth|water|aether> hides the other solids, for
// ?only=<fire|air|earth|water|aether> hides the other solids, for
// checking a single shape against the reference
const only = debugFlags.get( 'only' );
if ( only && guiDict[ only ] ) {
@@ -658,7 +580,7 @@ let renderFlower = (radius = 1) => {
}
}
gui.close();
}
renderFlower()
@@ -717,6 +639,7 @@ function animate () {
// }
updateWorld();
updateGlow();
controls.update();
renderer.render( scene, camera );
src/phyllotaxis.html
-1
View File
@@ -7,7 +7,6 @@
<link rel="stylesheet" href="./css/styles.scss">
</head>
<body>
<div class="fade"></div>
<nav class="page-nav">
<a href="index.html">&larr; Thrive</a>
<span>Golden Spiral</span>
src/phyllotaxis.js
+22 -11
View File
@@ -17,6 +17,7 @@ const params = {
angle: GOLDEN_ANGLE,
form: 'sunflower',
grow: false,
speed: 1,
spin: true,
resetAngle: () => {
params.angle = GOLDEN_ANGLE;
@@ -50,20 +51,20 @@ function renderPattern() {
if ( params.form === 'sunflower' ) {
// r ~ sqrt(i) keeps the seed density constant across the disc
const r = 5 * Math.sqrt( t );
const r = 6.5 * Math.sqrt( t );
dummy.position.set( r * Math.cos( theta ), r * Math.sin( theta ), 0 );
dummy.scale.setScalar( 0.11 );
dummy.scale.setScalar( 0.15 );
} else if ( params.form === 'pinecone' ) {
const r = 3.5 * Math.sqrt( t );
dummy.position.set( r * Math.cos( theta ), r * Math.sin( theta ), 4 * ( 1 - t ) - 2 );
dummy.scale.setScalar( 0.13 );
const r = 4.5 * Math.sqrt( t );
dummy.position.set( r * Math.cos( theta ), r * Math.sin( theta ), 6 * ( 1 - t ) - 3 );
dummy.scale.setScalar( 0.17 );
} else {
// fibonacci sphere: even latitude steps + golden angle in longitude
// spreads points almost perfectly uniformly over a sphere
const y = 1 - 2 * t;
const r = Math.sqrt( Math.max( 0, 1 - y * y ) );
dummy.position.set( 4 * r * Math.cos( theta ), 4 * r * Math.sin( theta ), 4 * y );
dummy.scale.setScalar( 0.12 );
dummy.position.set( 5.5 * r * Math.cos( theta ), 5.5 * r * Math.sin( theta ), 5.5 * y );
dummy.scale.setScalar( 0.16 );
}
dummy.updateMatrix();
@@ -78,12 +79,19 @@ function renderPattern() {
renderPattern();
// growth loop: seeds appear one by one from the centre the way the plant grows
// them, rest at the full shape, then start over; speed scrubs the growth rate
const GROW_S = 6;
const PAUSE_S = 4;
onUpdate( ( time ) => {
if ( params.spin ) group.rotation.x = time * 0.1;
if ( params.grow ) {
// seeds appear one by one from the centre, the way the plant grows them
mesh.count = Math.min( params.count, Math.floor( ( time % 30 ) * 100 ) + 1 );
const growDuration = GROW_S / params.speed;
const position = time % ( growDuration + PAUSE_S );
const progress = Math.min( 1, position / growDuration );
mesh.count = Math.max( 1, Math.floor( progress * params.count ) );
}
} );
@@ -92,5 +100,8 @@ gui.add( params, 'count', 10, MAX_COUNT ).step( 10 ).onChange( renderPattern );
gui.add( params, 'angle', 130, 145 ).step( 0.001 ).onChange( renderPattern );
gui.add( params, 'resetAngle' ).name( 'reset to golden angle' );
gui.add( params, 'form', [ 'sunflower', 'pinecone', 'sphere' ] ).onChange( renderPattern );
gui.add( params, 'grow' ).onChange( () => { mesh.count = params.count; } );
gui.add( params, 'spin' );
const animation = gui.addFolder( 'Animation' );
animation.add( params, 'grow' ).onChange( () => { mesh.count = params.count; } );
animation.add( params, 'speed', 0.25, 4 ).step( 0.05 );
animation.add( params, 'spin' );
src/seed.html
-1
View File
@@ -7,7 +7,6 @@
<link rel="stylesheet" href="./css/styles.scss">
</head>
<body>
<div class="fade"></div>
<nav class="page-nav">
<a href="index.html">&larr; Thrive</a>
<span>Seed of Life</span>
src/seed.js
+6 -1
View File
@@ -8,6 +8,8 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import './lib/chrome.js';
import { sceneColors } from './lib/theme.js';
import { bindWorld } from './lib/transit.js';
import { bindGlow } from './lib/glow.js';
import { bindCameraMemory } from './lib/cameraMemory.js';
const colors = sceneColors();
@@ -16,7 +18,7 @@ const colors = sceneColors();
const scene = new THREE.Scene();
const world = new THREE.Group();
scene.add( world );
const updateWorld = bindWorld( world );
const updateWorld = bindWorld( world, 3 );
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 500 );
@@ -42,6 +44,8 @@ window.addEventListener( 'resize', () => {
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( -4, 0, 0 );
bindCameraMemory( camera, controls );
const updateGlow = bindGlow( camera );
// const geometry_torus = new THREE.TorusGeometry( 2.5, 2.5, 32, 128 );
@@ -440,6 +444,7 @@ function animate () {
// }
updateWorld();
updateGlow();
controls.update();
renderer.render( scene, camera );
src/torus.html
-1
View File
@@ -7,7 +7,6 @@
<link rel="stylesheet" href="./css/styles.scss">
</head>
<body>
<div class="fade"></div>
<nav class="page-nav">
<a href="index.html">&larr; Thrive</a>
<span>Toroidal Field</span>
src/torus.js
+3 -2
View File
@@ -9,8 +9,8 @@ import { createStage } from './lib/stage.js';
const { scene, colors, onUpdate } = createStage();
const params = {
radius: 3,
tube: 1.4,
radius: 4,
tube: 1.7,
strands: 12,
windings: 4,
surface: true,
@@ -80,6 +80,7 @@ function renderTorus() {
curves.push( curve );
const particle = new THREE.Mesh( particleGeometry, particleMaterial );
particle.castShadow = true;
particle.userData.phase = s / params.strands;
group.add( particle );
parts.push( particle );