Mรถbius Light Transport Between Dimensional Orientability Boundaries
Generated by GridFlow AI | Tags: moebius-strip, 4d-projection, ray-marching, volumetric-light, synesthesia, sacred-geometry, dimensional-boundaries, iridescent, psychedelic, hyperdimensional
๐ก AI ๆ็คบ่ฏ
Mรถbius Strip Light Transport Between Dimensional Orientability Boundaries - recursive 3D-to-2D projection of hyper-dimensional geometry, psychedelic synesthesia with deep shifting gradients and iridescent elements, sacred geometry patterns, volumetric light transport through non-orientable surfaces๐ง ๆ ธๅฟ็ฎๆณ่ฆ็น
- 4D-to-3D-to-2D recursive projection using perspective projection with 4D rotation matrices in XW and YW planes
- Ray marching engine that samples a signed distance function for the Mรถbius strip parametric surface with 80x40 sample points
- Multi-layer compositing architecture with four offscreen buffers: background, Mรถbius surface, volumetric light, and final composite
- Volumetric light transport simulation using layered Perlin noise with ADD and SCREEN blend modes for glow effects
- Surface shading based on parametric UV coordinates with iridescence calculated from view angle dot product
- Sacred geometry overlay using torus-knot inspired patterns with golden-ratio proportions for compositional depth
๐จ ๅๅงไปฃ็
var sketch = function(p) {
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// MรBIUS STRIP LIGHT TRANSPORT - Recursive Hyper-dimensional Projection
// Visualizes the journey of light through non-orientable geometry
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
var bufferBg, bufferMoebius, bufferVolumetric, bufferFinal;
var container;
var time = 0;
// Mรถbius strip mathematical parameters
var moebiusRadius = 0.35;
var moebiusTwist = 3;
// 4D rotation angles for hyper-dimensional projection
var theta4D = 0;
var phi4D = 0;
// Camera orbit
var camAngle = 0;
var camHeight = 0.3;
// Palette colors (HSB)
var colors = {
deepViolet: [280, 85, 25],
cosmicCyan: [185, 90, 85],
iridescentMagenta: [315, 80, 90],
sacredGold: [45, 70, 95],
voidIndigo: [260, 60, 15]
};
// Interaction state
var mouseInfluence = 0;
var iridescenceMode = true;
var morphFactor = 0;
var clickBurst = 0;
var keyToggle = true;
// Ray marching parameters
var maxSteps = 48;
var maxDist = 4.0;
var surfaceThreshold = 0.002;
p.setup = function() {
container = document.getElementById('p5-wrapper');
p.createCanvas(container.offsetWidth, container.offsetHeight).parent(container);
p.colorMode(p.HSB, 360, 100, 100, 100);
p.noStroke();
// Initialize offscreen buffers for multi-layer compositing
bufferBg = p.createGraphics(p.width, p.height);
bufferMoebius = p.createGraphics(p.width, p.height);
bufferVolumetric = p.createGraphics(p.width, p.height);
bufferFinal = p.createGraphics(p.width, p.height);
// Configure buffer color modes
bufferBg.colorMode(p.HSB, 360, 100, 100, 100);
bufferMoebius.colorMode(p.HSB, 360, 100, 100, 100);
bufferVolumetric.colorMode(p.HSB, 360, 100, 100, 100);
bufferFinal.colorMode(p.HSB, 360, 100, 100, 100);
p.windowResized();
};
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// RECURSIVE 4D-TO-3D-TO-2D PROJECTION FUNCTIONS
// These implement the core hyper-dimensional projection paradigm
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// Project 4D point to 3D using perspective projection
function project4Dto3D(x4, y4, z4, w4, focal4D) {
var w4Comp = 1.0 / (1.0 + w4 * focal4D);
return p.createVector(x4 * w4Comp, y4 * w4Comp, z4 * w4Comp);
}
// Apply 4D rotation in XW plane
function rotate4DXW(v, angle) {
var c = p.cos(angle);
var s = p.sin(angle);
return p.createVector(
v.x * c - v.w * s,
v.y,
v.z,
v.x * s + v.w * c
);
}
// Apply 4D rotation in YW plane
function rotate4DYW(v, angle) {
var c = p.cos(angle);
var s = p.sin(angle);
return p.createVector(
v.x,
v.y * c - v.w * s,
v.z,
v.y * s + v.w * c
);
}
// Project 3D to 2D screen coordinates with perspective
function project3Dto2D(v3, camPos, focalLength) {
var relX = v3.x - camPos.x;
var relY = v3.y - camPos.y;
var relZ = v3.z - camPos.z;
var depth = 1.0 / (1.0 + relZ * focalLength);
return p.createVector(relX * depth, relY * depth, depth);
}
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// MรBIUS STRIP SDF - Signed Distance Function
// Returns distance to the Mรถbius surface from point p
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
function moebiusSDF(px, py, pz, u, v, r, twist) {
var x = (r + v * p.cos(u * twist)) * p.cos(u);
var y = (r + v * p.cos(u * twist)) * p.sin(u);
var z = v * p.sin(u * twist);
var dx = px - x;
var dy = py - y;
var dz = pz - z;
return p.sqrt(dx * dx + dy * dy + dz * dz);
}
// Compute closest distance to Mรถbius surface using gradient descent
function closestDistanceToMoebius(px, py, pz) {
var minDist = 9999;
var bestU = 0;
var bestV = 0;
var samplesU = 80;
var samplesV = 40;
for (var i = 0; i < samplesU; i++) {
var u = (i / samplesU) * p.TWO_PI * 2;
for (var j = 0; j < samplesV; j++) {
var v = (j / samplesV - 0.5) * moebiusRadius * 2;
var d = moebiusSDF(px, py, pz, u, v, moebiusRadius, moebiusTwist);
if (d < minDist) {
minDist = d;
bestU = u;
bestV = v;
}
}
}
return { dist: minDist, u: bestU, v: bestV };
}
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// RAY MARCHING ENGINE
// Marches rays through 4D-projected Mรถbius geometry
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
function rayMarch(rayOrigin, rayDir, pixelX, pixelY) {
var totalDist = 0;
var hitSurface = false;
var hitU = 0;
var hitV = 0;
var glowAccum = 0;
for (var step = 0; step < maxSteps; step++) {
// Current position along ray
var currX = rayOrigin.x + rayDir.x * totalDist;
var currY = rayOrigin.y + rayDir.y * totalDist;
var currZ = rayOrigin.z + rayDir.z * totalDist;
// Transform to Mรถbius local space (adds dimensional shift)
var dimShift = p.sin(time * 0.5 + pixelX * 0.01 + pixelY * 0.01) * 0.1;
var localX = currX + dimShift;
var localY = currY + dimShift * 0.7;
var localZ = currZ;
// Get distance to Mรถbius surface
var result = closestDistanceToMoebius(localX, localY, localZ);
var dist = result.dist;
// Accumulate glow near surface (volumetric effect)
var glowFactor = p.exp(-dist * 15.0) * 0.15;
glowAccum += glowFactor;
// Surface hit detection
if (dist < surfaceThreshold) {
hitSurface = true;
hitU = result.u;
hitV = result.v;
break;
}
// Adaptive step size
var stepSize = dist * 0.5 + 0.01;
totalDist += stepSize;
if (totalDist > maxDist) break;
}
return {
hit: hitSurface,
distance: totalDist,
u: hitU,
v: hitV,
glow: glowAccum
};
}
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// RENDER PASSES - Multi-layer compositing architecture
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// Background pass with cosmic gradients and sacred geometry
function renderBackground() {
var buf = bufferBg;
buf.background(colors.voidIndigo[0], colors.voidIndigo[1], colors.voidIndigo[2]);
buf.loadPixels();
var step = 2;
for (var x = 0; x < p.width; x += step) {
for (var y = 0; y < p.height; y += step) {
var nx = (x / p.width - 0.5) * 2;
var ny = (y / p.height - 0.5) * 2;
// Layered noise for depth
var noise1 = p.noise(nx * 3 + time * 0.1, ny * 3 - time * 0.07, time * 0.15);
var noise2 = p.noise(nx * 6 - time * 0.05, ny * 6 + time * 0.08, time * 0.2 + 100);
var noise3 = p.noise(nx * 1.5 + time * 0.03, ny * 1.5 - time * 0.02, time * 0.1 + 200);
var combined = noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2;
// Cosmic gradient
var gradY = (y / p.height - 0.5) * 2;
var hue = p.map(combined, 0, 1, colors.voidIndigo[0], colors.deepViolet[0]);
var sat = p.map(combined, 0, 1, 40, 70);
var bri = p.map(gradY * gradY + combined * 0.5, 0, 1.5, colors.voidIndigo[2], 35);
// Mouse interaction affects background
var mouseDist = p.dist(x, y, p.mouseX, p.mouseY);
var mouseGlow = p.exp(-mouseDist * 0.01) * 20;
bri += mouseGlow;
buf.stroke(hue % 360, sat, p.constrain(bri, 0, 100));
buf.point(x, y);
// Fill gaps with interpolation
if (step > 1) {
buf.stroke(hue % 360, sat, p.constrain(bri, 0, 100));
buf.point(x + 1, y);
buf.point(x, y + 1);
buf.point(x + 1, y + 1);
}
}
}
buf.updatePixels();
// Add sacred geometry overlay
buf.push();
buf.translate(p.width / 2, p.height / 2);
buf.blendMode(buf.ADD);
// Toroidal sacred geometry pattern
for (var i = 0; i < 6; i++) {
var angle = (i / 6) * p.TWO_PI + time * 0.2;
var r = p.width * 0.35 + p.sin(time * 0.5 + i) * 30;
buf.stroke(colors.sacredGold[0], colors.sacredGold[1], colors.sacredGold[2], 8);
buf.noFill();
buf.ellipse(p.cos(angle) * r * 0.3, p.sin(angle) * r * 0.3, r, r * 0.4);
}
buf.pop();
}
// Ray marched Mรถbius surface pass
function renderMoebiusPass() {
var buf = bufferMoebius;
buf.background(0, 0, 0, 0);
// Camera position orbiting in 3D
var camDist = 1.8;
var camX = p.cos(camAngle) * camDist;
var camY = camHeight;
var camZ = p.sin(camAngle) * camDist;
var rayOrigin = p.createVector(camX, camY, camZ);
// 4D rotation for hyper-dimensional shift
var v4temp = rotate4DXW(p.createVector(camX, camY, camZ, 0.5), theta4D);
v4temp = rotate4DYW(v4temp, phi4D);
var v4Projected = project4Dto3D(v4temp.x, v4temp.y, v4temp.z, v4temp.w, 2.0);
var focalLength = 1.2;
var step = 2;
buf.loadPixels();
for (var pixelX = 0; pixelX < p.width; pixelX += step) {
for (var pixelY = 0; pixelY < p.height; pixelY += step) {
// Screen coordinates normalized
var sx = (pixelX / p.width - 0.5) * 2 * (p.width / p.height);
var sy = (pixelY / p.height - 0.5) * 2;
// Ray direction
var rayDir = p.createVector(sx - camX * focalLength, sy - camY * focalLength, -1.5 - camZ * focalLength);
rayDir.normalize();
// Ray march
var result = rayMarch(rayOrigin, rayDir, pixelX, pixelY);
if (result.hit) {
// Surface shading based on position
var hue = (result.u * 30 + result.v * 60 + time * 20) % 360;
var sat = 70 + p.sin(result.u * 3 + result.v * 2) * 20;
var bri = 80 + result.glow * 50;
// Iridescence based on view angle
if (iridescenceMode) {
var viewDot = rayDir.x * p.cos(result.u) + rayDir.y * p.sin(result.u);
hue = (hue + viewDot * 60 + time * 30) % 360;
sat = p.map(p.abs(viewDot), 0, 1, 60, 95);
}
// Mouse influence on surface color
var mouseEffect = mouseInfluence * p.sin(pixelX * 0.05 + time) * 30;
hue = (hue + mouseEffect) % 360;
buf.stroke(hue, sat, p.constrain(bri, 0, 100));
buf.point(pixelX, pixelY);
// Fill with interpolated points
if (step > 1) {
for (var dx = 0; dx < step; dx++) {
for (var dy = 0; dy < step; dy++) {
buf.point(pixelX + dx, pixelY + dy);
}
}
}
}
}
}
buf.updatePixels();
// Add bloom layer using curves
buf.push();
buf.translate(p.width / 2, p.height / 2);
buf.blendMode(buf.ADD);
// Mรถbius outline with Bรฉzier curves
buf.stroke(colors.iridescentMagenta[0], 80, 60, 20);
buf.noFill();
buf.strokeWeight(2);
buf.beginShape();
for (var t = 0; t < p.TWO_PI * 2; t += 0.1) {
var mx = p.cos(t) * moebiusRadius * p.width * 0.4;
var my = p.sin(t) * moebiusRadius * p.height * 0.3;
var mz = p.sin(t * moebiusTwist) * moebiusRadius * p.width * 0.15;
buf.vertex(mx + mz * p.cos(time * 0.3), my + mz * p.sin(time * 0.3));
}
buf.endShape(p.CLOSE);
buf.pop();
}
// Volumetric light transport pass
function renderVolumetricPass() {
var buf = bufferVolumetric;
buf.background(0, 0, 0, 0);
buf.loadPixels();
var step = 3;
for (var x = 0; x < p.width; x += step) {
for (var y = 0; y < p.height; y += step) {
// Sample volumetric density
var nx = x / p.width;
var ny = y / p.height;
var density = p.noise(nx * 4 + time * 0.2, ny * 4 - time * 0.15, time * 0.3);
density *= p.noise(nx * 8 - time * 0.1, ny * 8 + time * 0.12, time * 0.4 + 50);
// Create light transport beams
var beamX = (nx - 0.5) * 2;
var beamY = (ny - 0.5) * 2;
var beamDist = p.sqrt(beamX * beamX + beamY * beamY);
var beam = p.exp(-beamDist * 2.5) * density;
// Morphing factor affects volumetric shape
var morph = p.sin(p.atan2(beamY, beamX) * 3 + time + morphFactor * 5) * 0.3 + 0.7;
beam *= morph;
// Color based on position and time
var hue = (p.map(beamX, -1, 1, colors.cosmicCyan[0], colors.iridescentMagenta[0]) + time * 20) % 360;
var sat = 75;
var bri = beam * 60;
// Click burst effect
if (clickBurst > 0) {
var burstDist = p.dist(x, y, p.width / 2, p.height / 2);
var burst = p.exp(-burstDist * 0.02) * clickBurst * 50;
bri += burst;
}
buf.stroke(hue, sat, p.constrain(bri, 0, 100));
buf.point(x, y);
// Fill gaps
if (step > 1) {
buf.stroke(hue, sat, p.constrain(bri * 0.8, 0, 100));
buf.point(x + 1, y);
buf.point(x, y + 1);
}
}
}
buf.updatePixels();
}
// Final compositing with blend modes
function renderFinalCompositing() {
var buf = bufferFinal;
buf.background(0, 0, 0, 0);
// Layer 1: Background
buf.image(bufferBg, 0, 0);
// Layer 2: Mรถbius surface with SCREEN blend for glow
buf.blendMode(buf.SCREEN);
buf.tint(100, 100, 100, 90);
buf.image(bufferMoebius, 0, 0);
// Layer 3: Volumetric light with ADD blend
buf.blendMode(buf.ADD);
buf.tint(100, 60, 100, 70);
buf.image(bufferVolumetric, 0, 0);
// Layer 4: Post-processing effects
buf.blendMode(buf.BLEND);
// Chromatic aberration on edges
var aberrationAmount = 2 + morphFactor * 3;
buf.tint(0, 0, 100, 15);
buf.image(bufferFinal, -aberrationAmount, 0);
buf.tint(0, 0, 100, 15);
buf.image(bufferFinal, aberrationAmount, 0);
}
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// INTERACTION HANDLERS
// Mouse: attract/repel/distort light transport
// Click: trigger dimensional burst
// Keys: toggle effects and modes
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// Mouse movement influences light transport direction
p.mouseMoved = function() {
mouseInfluence = p.map(p.mouseX, 0, p.width, -1, 1);
var verticalInfluence = p.map(p.mouseY, 0, p.height, -0.5, 0.5);
camHeight = 0.3 + verticalInfluence;
};
// Mouse press triggers dimensional shift burst
p.mousePressed = function() {
clickBurst = 1.0;
morphFactor = (morphFactor + 0.3) % 1.0;
// Dimensional shift in 4D space
theta4D += p.PI * 0.25;
phi4D += p.PI * 0.15;
};
// Key press toggles modes and resets
p.keyPressed = function() {
// I: Toggle iridescence
if (p.key === 'i' || p.key === 'I') {
iridescenceMode = !iridescenceMode;
}
// R: Reset dimensional rotations
if (p.key === 'r' || p.key === 'R') {
theta4D = 0;
phi4D = 0;
morphFactor = 0;
}
// Space: Toggle animation pause
if (p.key === ' ') {
keyToggle = !keyToggle;
}
// G: Cycle through gradient modes
if (p.key === 'g' || p.key === 'G') {
var temp = colors.deepViolet;
colors.deepViolet = colors.cosmicCyan;
colors.cosmicCyan = colors.iridescentMagenta;
colors.iridescentMagenta = temp;
}
};
// Handle window resize
p.windowResized = function() {
p.resizeCanvas(container.offsetWidth, container.offsetHeight);
// Recreate buffers at new size
bufferBg = p.createGraphics(p.width, p.height);
bufferMoebius = p.createGraphics(p.width, p.height);
bufferVolumetric = p.createGraphics(p.width, p.height);
bufferFinal = p.createGraphics(p.width, p.height);
var bufs = [bufferBg, bufferMoebius, bufferVolumetric, bufferFinal];
for (var i = 0; i < bufs.length; i++) {
bufs[i].colorMode(p.HSB, 360, 100, 100, 100);
}
};
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// MAIN DRAW LOOP
// Executes multi-pass rendering pipeline
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
p.draw = function() {
// Animate time if not paused
if (keyToggle) {
time += 0.008;
camAngle += 0.003;
theta4D += 0.005;
phi4D += 0.003;
}
// Decay click burst
clickBurst *= 0.92;
if (clickBurst < 0.01) clickBurst = 0;
// Execute render pipeline
renderBackground();
renderMoebiusPass();
renderVolumetricPass();
renderFinalCompositing();
// Display final composite
p.image(bufferFinal, 0, 0);
// Overlay info text
p.push();
p.fill(0, 0, 100, 50);
p.textSize(10);
p.text('MOBIUS TRANSPORT', 15, 25);
p.text('I: iridescence | R: reset | SPACE: pause | G: gradient', 15, 40);
p.text('Mouse: influence light | Click: dimensional shift', 15, 55);
p.pop();
};
};
โจ AI ่บๆฏ่งฃ่ฏป
This artwork visualizes the metaphysical journey of light through a Mรถbius strip - a surface with only one side that embodies the boundary between orientable and non-orientable dimensions. The recursive projection of 4D geometry onto 2D canvas evokes the impossible task of comprehending higher dimensions, while the iridescent, synesthetic color palette represents consciousness transcending ordinary perception. The volumetric light threads flowing through the geometric void suggest energy transport across dimensional barriers - a visual metaphor for enlightenment or ego-death where the viewer glimpses the structure underlying reality itself.
๐ ่กฅๅ ่ฏดๆ
- Ray marching step size of 2-3 pixels with interpolation fills is critical for maintaining visual quality while achieving interactive frame rates
- The 4D rotation angles should increment at different rates to create non-repeating, aperiodic motion that prevents visual staleness
- Using SCREEN blend mode on the Mรถbius surface layer creates natural bloom without post-processing shaders
- The click burst effect should decay exponentially (multiply by 0.92 per frame) for smooth visual transitions
- Gradient cycling should use rotation of the color array rather than random assignment to maintain palette coherence