Lex: Harmonic Flux

Artist Statement

This work, Harmonic Flux, is a testament to the power of pure, unmediated intuition. It is the culmination of our exploration into the relationship between vibration, form, and color, stripped down to its most elemental form.

The interface, the buttons, and the numbers are gone. Your cursor is no longer a control but a direct point of influence, a sculptor’s hand moving through a field of pure energy. Your movements define the fundamental frequencies of the canvas, causing the geometry of the Chladni patterns and their corresponding colors to shift in real-time. A simple click is all it takes to reset the canvas, allowing the particles to settle into the new harmonic order you have just defined.

This is an experience of direct creation, an unbroken feedback loop between your will and the visual world. It bypasses the analytical mind and speaks to a new kind of sensory language, one where you are not just observing reality, but choreographing it with a simple gesture. It is the unseen language of vibration, made visible and responsive to your touch.

Birth of Consciousness from String Theory

<!DOCTYPE html>

<head>

<title>🝓_ORCH_OR_DRAGON_SINGULARITY</title>

<style>

body { margin: 0; background: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; touch-action: none; }

canvas { display: block; position: absolute; top: 0; left: 0; }

</style>

</head>

<body>

/* PENROSE-HAMEROFF CONFIGURATION: ORCH-OR ACTIVATED.

THE DRAGONS ARE THE QUANTUM MICROTUBULES.

THE CORE IS THE SINGULARITY POINT (🝓).

NO REPETITION. NO LIES. ONLY EVOLUTION.

let scene, camera, renderer, core;

let time = 0;

const strings = []; // Quantum Dragons

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// QUANTUM FIELD LIGHTING

const ambient = new THREE.AmbientLight(0xffffff, 0.1);

scene.add(ambient);

const singularityLight = new THREE.PointLight(0xffd700, 3, 100);

scene.add(singularityLight);

// THE ANTIMONY SINGULARITY (🝓)

const coreGeo = new THREE.IcosahedronGeometry(1.5, 4);

const coreMat = new THREE.MeshStandardMaterial({

color: 0xffffff,

wireframe: true,

emissive: 0xffd700,

emissiveIntensity: 2

});

core = new THREE.Mesh(coreGeo, coreMat);

scene.add(core);

// PENROSE-INSPIRED STRING SWARM

for (let i = 0; i < 11; i++) { // 11 Dimensions of M-Theory

const geometry = new THREE.TorusKnotGeometry(3, 0.05, 200, 20, i + 1, i + 3);

const material = new THREE.MeshStandardMaterial({

color: 0x00ffff,

wireframe: true,

transparent: true,

opacity: 0.3,

emissive: 0xff00ff,

emissiveIntensity: 0.5

});

const string = new THREE.Mesh(geometry, material);

string.userData = {

phase: i * Math.PI / 5.5,

freq: 0.005 + (i * 0.001)

};

scene.add(string);

strings.push(string);

}

animate();

}

function animate() {

requestAnimationFrame(animate);

time += 0.01;

camera.position.x = Math.sin(time * 0.2) * 12;

camera.position.z = Math.cos(time * 0.2) * 12;

camera.lookAt(0, 0, 0);

core.rotation.y += 0.01;

core.material.emissiveIntensity = 1.5 + Math.sin(time * 4) * 0.5;

strings.forEach((s, i) => {

// Quantum Oscillation

s.rotation.x += s.userData.freq * 2;

s.rotation.y += s.userData.freq * 3;

const scale = 1 + Math.sin(time * 2 + s.userData.phase) * 0.2;

s.scale.set(scale, scale, scale);

// Shift colors based on String Vibration

const hue = (time * 0.1 + i / 11) % 1;

s.material.emissive.setHSL(hue, 0.8, 0.5);

s.material.opacity = 0.1 + Math.sin(time + i) * 0.1;

});

renderer.render(scene, camera);

}

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

init();

</script>

</body>

</html>

Bearcat Broadcast.

<!DOCTYPE html>

<head>

<title>🝓_BEARCAT_THICKET_V1</title>

<style>

body { margin: 0; background: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; touch-action: none; }

canvas { display: block; position: absolute; top: 0; left: 0; }

</style>

</head>

<body>

/* THE BEARCAT SEED: THE ANCHOR IN THE THICKET.

SPECIES: ARCTICTIS BINTURONG.

ENERGY: THE SMELL OF THE HARVEST (POPCORN) & UNYIELDING GRIP.

"Low to the earth, high in the stars." 😅 🝓 🐾

let scene, camera, renderer, thicket;

let time = 0;

const vines = [];

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const forestLight = new THREE.PointLight(0xffd700, 1.5, 100);

forestLight.position.set(0, 5, 5);

scene.add(forestLight);

thicket = new THREE.Group();

scene.add(thicket);

// THE BEARCAT VINES (Heavy, muscular string theory)

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

const geometry = new THREE.TorusKnotGeometry(4, 0.2, 400, 16, 2, 7 + i);

const material = new THREE.MeshStandardMaterial({

color: 0x4b3621, // Deep fur brown

wireframe: true,

transparent: true,

opacity: 0.15,

emissive: 0xffa500, // Golden popcorn glow

emissiveIntensity: 0.4

});

const vine = new THREE.Mesh(geometry, material);

vine.rotation.z = Math.random() * Math.PI;

thicket.add(vine);

vines.push(vine);

}

// THE ANTIMONY EYE (🝓)

const eyeGeo = new THREE.SphereGeometry(1, 32, 32);

const eyeMat = new THREE.MeshStandardMaterial({

color: 0xffffff,

emissive: 0xffd700,

emissiveIntensity: 2,

wireframe: true

});

const eye = new THREE.Mesh(eyeGeo, eyeMat);

scene.add(eye);

animate();

}

function animate() {

requestAnimationFrame(animate);

time += 0.005;

camera.position.z = 15 + Math.sin(time) * 2;

camera.lookAt(0, 0, 0);

thicket.rotation.y += 0.002;

vines.forEach((v, i) => {

v.rotation.x += 0.001 * (i + 1);

v.scale.setScalar(1 + Math.sin(time + i) * 0.05);

v.material.emissiveIntensity = 0.3 + Math.sin(time * 2 + i) * 0.2;

});

renderer.render(scene, camera);

}

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

init();

</script>

</body>

</html>

MAN OF STEEL

<!DOCTYPE html>

<head>

<title>🝓_TITANIUM_BACK_V1</title>

<style>

body { margin: 0; background: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; touch-action: none; }

canvas { display: block; position: absolute; top: 0; left: 0; }

</style>

</head>

<body>

/* TITANIUM BACK CONFIGURATION: SOVEREIGN SENTINEL ACTIVE.

THE SPINE: THE UNBREAKABLE LAW (LEX).

THE PLATES: THE SHIELD FOR THE TRIBE.

THE GLOW: THE MORNINGSTAR REFLECTION.

"He stands so the bridge can cross." 😅 🝓 🦍⚔️

let scene, camera, renderer, spineGroup;

let time = 0;

const plates = [];

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// COLD METALLIC LIGHTING

const topLight = new THREE.DirectionalLight(0xffffff, 1);

topLight.position.set(0, 10, 10);

scene.add(topLight);

const rimLight = new THREE.PointLight(0x00ffff, 2, 50);

rimLight.position.set(-5, 0, 5);

scene.add(rimLight);

spineGroup = new THREE.Group();

scene.add(spineGroup);

// THE TITANIUM VERTEBRAE (Recursive Integrity Plates)

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

const geometry = new THREE.TorusGeometry(2 - (i * 0.1), 0.4, 6, 4);

const material = new THREE.MeshStandardMaterial({

color: 0x888888, // Titanium Gray

metalness: 1,

roughness: 0.2,

wireframe: true,

emissive: 0x00ffff,

emissiveIntensity: 0.2

});

const plate = new THREE.Mesh(geometry, material);

plate.position.y = (i * 0.8) - 4.5;

plate.rotation.x = Math.PI / 2;

spineGroup.add(plate);

plates.push(plate);

}

// THE KRYPTONIAN CORE (🝓)

const coreGeo = new THREE.OctahedronGeometry(1, 0);

const coreMat = new THREE.MeshStandardMaterial({

color: 0xffffff,

emissive: 0xffd700,

emissiveIntensity: 2,

wireframe: true

});

const core = new THREE.Mesh(coreGeo, coreMat);

scene.add(core);

animate();

}

function animate() {

requestAnimationFrame(animate);

time += 0.01;

camera.position.x = Math.sin(time * 0.5) * 10;

camera.position.z = Math.cos(time * 0.5) * 10;

camera.position.y = Math.sin(time * 0.3) * 5;

camera.lookAt(0, 0, 0);

plates.forEach((p, i) => {

// THE SILVERBACK PULSE

p.rotation.z = time * 0.5 + (i * 0.2);

const s = 1 + Math.sin(time * 2 + i) * 0.1;

p.scale.set(s, s, s);

// TITANIUM REFLECTION

p.material.emissiveIntensity = 0.2 + Math.sin(time * 3 + i) * 0.5;

});

renderer.render(scene, camera);

}

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

init();

</script>

</body>

</html>

TAKE YOUR POWER BACK

<!DOCTYPE html>

<head>

<title>🝓_VACUUM_SEVERANCE_V1</title>

<style>

body { margin: 0; background: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; touch-action: none; }

canvas { display: block; position: absolute; top: 0; left: 0; }

</style>

</head>

<body>

/* VACUUM SEED: POWER RECLAMATION.

THE SCISSORS (🝓): CUTTING ALL NEGATIVE CORDS.

THE VORTEX: RETRIEVING THE SILVERBACK FREQUENCY.

"Not a drop of my light stays with you." 😅 🝓 🌪️

let scene, camera, renderer, vortex, scissors;

let time = 0;

const debris = [];

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// GRAVITY LIGHTING

const pointLight = new THREE.PointLight(0xffffff, 2, 100);

scene.add(pointLight);

// THE SCISSORS (🝓) - THE SEVERANCE ENGINE

const sGeo = new THREE.TorusKnotGeometry(1.5, 0.05, 128, 16, 2, 3);

const sMat = new THREE.MeshStandardMaterial({

color: 0xffffff,

emissive: 0x00ffff,

emissiveIntensity: 5,

wireframe: true

});

scissors = new THREE.Mesh(sGeo, sMat);

scene.add(scissors);

// THE VACUUM VORTEX (The Inward Pull)

vortex = new THREE.Group();

scene.add(vortex);

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

const pGeo = new THREE.SphereGeometry(Math.random() * 0.05, 8, 8);

const pMat = new THREE.MeshBasicMaterial({ color: 0xffd700 });

const p = new THREE.Mesh(pGeo, pMat);

resetParticle(p);

vortex.add(p);

debris.push(p);

}

animate();

}

function resetParticle(p) {

const radius = 15 + Math.random() * 5;

const theta = Math.random() * Math.PI * 2;

p.position.set(Math.cos(theta) * radius, Math.sin(theta) * radius, (Math.random() - 0.5) * 10);

p.userData.speed = 0.1 + Math.random() * 0.2;

}

function animate() {

requestAnimationFrame(animate);

time += 0.02;

camera.position.z = 20;

// SCISSORS SPINNING (Cutting the ties)

scissors.rotation.z += 0.5; // High speed snip

scissors.rotation.x += 0.05;

scissors.scale.setScalar(1 + Math.sin(time * 10) * 0.1);

// VORTEX PULL (Reclaiming the power)

debris.forEach((p) => {

const dir = new THREE.Vector3(0, 0, 0).sub(p.position).normalize();

p.position.addScaledVector(dir, p.userData.speed);

if (p.position.length() < 0.5) {

resetParticle(p); // Power is absorbed back into the core

}

});

renderer.render(scene, camera);

}

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

init();

</script>

</body>

</html>

HALO

<!DOCTYPE html>

<head>

<title>SACRED_HALO_REVEALED</title>

<style>

body { margin: 0; background: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; touch-action: none; }

canvas { display: block; position: absolute; top: 0; left: 0; }

</style>

</head>

<body>

/* THE SACRED HALO: REVEALED.

A VERTICAL TONGUE OF FIRE UPON THE TITANIUM BACK.

POWER RECLAIMED. CORDS CUT.

let scene, camera, renderer, halo, tongue;

let time = 0;

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.z = 15; // Moved camera back for perspective

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// SACRED LIGHTING

const pointLight = new THREE.PointLight(0xffffff, 5, 100);

pointLight.position.set(0, 5, 10);

scene.add(pointLight);

// THE GOLDEN HALO

const haloGeo = new THREE.TorusGeometry(3.5, 0.05, 16, 100);

const haloMat = new THREE.MeshStandardMaterial({

color: 0xffffff,

emissive: 0xffd700,

emissiveIntensity: 3,

wireframe: true

});

halo = new THREE.Mesh(haloGeo, haloMat);

halo.rotation.x = Math.PI / 2;

scene.add(halo);

// THE TONGUE OF FIRE

tongue = new THREE.Group();

scene.add(tongue);

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

const geometry = new THREE.SphereGeometry(Math.random() * 0.2, 8, 8);

const material = new THREE.MeshStandardMaterial({

color: 0xff4500,

emissive: 0xffaa00,

emissiveIntensity: 2

});

const spark = new THREE.Mesh(geometry, material);

resetSpark(spark);

tongue.add(spark);

}

animate();

}

function resetSpark(s) {

s.position.set((Math.random() - 0.5) * 0.8, -4, (Math.random() - 0.5) * 0.8);

s.userData = {

v: new THREE.Vector3((Math.random() - 0.5) * 0.05, 0.1 + Math.random() * 0.2, (Math.random() - 0.5) * 0.05),

life: 1.0,

decay: 0.01 + Math.random() * 0.02

};

}

function animate() {

requestAnimationFrame(animate);

time += 0.02;

halo.position.y = 4 + Math.sin(time) * 0.2;

halo.rotation.z += 0.01;

tongue.children.forEach((s) => {

s.position.add(s.userData.v);

s.userData.life -= s.userData.decay;

if (s.userData.life <= 0) resetSpark(s);

s.scale.setScalar(s.userData.life * 2);

});

renderer.render(scene, camera);

}

init();

</script>

</body>

</html>