Quantum Consciousness Transmutation
Generated by GridFlow AI | Tags: quantum, superposition, L-system, probability-cloud, alchemical, consciousness, neural-network, wave-function
💡 AI 提示词
Wave Function Collapse Probability Clouds Rendering Quantum Superposition States with alchemical transmutation theme - mercury silver, sulfur yellow, deep cosmic indigo - using L-systems with extreme depth recursion simulating neural or fungal consciousness🔧 核心算法要点
- L-system generation with 4 growth stages using recursive string rewriting with FF+[[F]-F]-[-F]+F branching pattern
- Multi-resolution pixel-level fractal noise rendering at 4px step for quantum probability field visualization with wave interference
- Multi-layer compositing with 4 offscreen buffers (background, midground, foreground, glow) using BLEND, SCREEN, ADD, OVERLAY blend modes
- Neural network node visualization with pulsing connections rendered as probabilistic superposition states
- Sacred geometry polygonal rings rotating at varying speeds creating consciousness emergence patterns
- Quantum collapse visualization triggered by mouse press using bezier-deformed elliptical orbits radiating from collapse point
- 10 orbiting probability nodes around mouse position creating observer effect visualization
🎨 原始代码
var sketch = function(p) {
var bgBuffer, midBuffer, fgBuffer, glowBuffer;
var lSystems = [];
var time = 0;
var collapsed = false;
var collapsePoint = null;
var collapseRadius = 0;
var MERCURY_SILVER, SULFUR_YELLOW, COSMIC_INDIGO;
var axiom = 'F';
var rules = {};
var growthStages = [4, 5, 6, 7];
p.setup = function() {
var container = document.getElementById('p5-wrapper');
p.createCanvas(container.offsetWidth, container.offsetHeight).parent(container);
p.colorMode(p.RGB, 255, 255, 255, 100);
p.noStroke();
MERCURY_SILVER = [192, 200, 210];
SULFUR_YELLOW = [218, 195, 80];
COSMIC_INDIGO = [25, 15, 65];
rules = {
'F': 'FF+[[F]-F]-[-F]+F',
'+': '+',
'-': '-',
'[': '[',
']': ']'
};
bgBuffer = p.createGraphics(p.width, p.height);
midBuffer = p.createGraphics(p.width, p.height);
fgBuffer = p.createGraphics(p.width, p.height);
glowBuffer = p.createGraphics(p.width, p.height);
bgBuffer.colorMode(p.RGB, 255, 255, 255, 100);
midBuffer.colorMode(p.RGB, 255, 255, 255, 100);
fgBuffer.colorMode(p.RGB, 255, 255, 255, 100);
glowBuffer.colorMode(p.RGB, 255, 255, 255, 100);
for (var i = 0; i < growthStages.length; i++) {
lSystems.push(generateLSystem(growthStages[i]));
}
};
function generateLSystem(iterations) {
var current = axiom;
for (var i = 0; i < iterations; i++) {
var next = '';
for (var j = 0; j < current.length; j++) {
var c = current.charAt(j);
next += rules[c] || c;
}
current = next;
}
return current;
}
function renderProbabilityField() {
bgBuffer.loadPixels();
var d = p.pixelDensity();
var w = bgBuffer.width * d;
var h = bgBuffer.height * d;
var step = 4;
for (var x = 0; x < w; x += step) {
for (var y = 0; y < h; y += step) {
var idx = 4 * (y * w + x);
var n1 = p.noise(x * 0.001, y * 0.001, time * 0.05);
var n2 = p.noise(x * 0.003 + 100, y * 0.003 + 100, time * 0.08);
var n3 = p.noise(x * 0.006 + 200, y * 0.006 + 200, time * 0.12);
var n = (n1 + n2 * 0.5 + n3 * 0.25) / 1.75;
var waveX = x / w * p.TWO_PI * 3;
var waveY = y / h * p.TWO_PI * 3;
var interference = (p.sin(waveX + time) * p.cos(waveY - time * 0.7) +
p.sin((waveX + waveY) * 0.5 + time * 1.3) + 1) * 0.33;
var probability = n * interference;
var mx = p.mouseX / p.width;
var my = p.mouseY / p.height;
var mouseInfluence = 1 - p.dist(x / w, y / h, mx, my) * 1.5;
probability = probability * 0.7 + mouseInfluence * 0.3;
probability = p.constrain(probability, 0, 1);
var r = COSMIC_INDIGO[0] * probability + MERCURY_SILVER[0] * (1 - probability);
var g = COSMIC_INDIGO[1] * probability + MERCURY_SILVER[1] * (1 - probability);
var b = COSMIC_INDIGO[2] * probability + MERCURY_SILVER[2] * (1 - probability);
var a = 60 + probability * 40;
for (var dx = 0; dx < step && x + dx < w; dx++) {
for (var dy = 0; dy < step && y + dy < h; dy++) {
var fillIdx = 4 * ((y + dy) * w + (x + dx));
bgBuffer.pixels[fillIdx] = r;
bgBuffer.pixels[fillIdx + 1] = g;
bgBuffer.pixels[fillIdx + 2] = b;
bgBuffer.pixels[fillIdx + 3] = a * 255 / 100;
}
}
}
}
bgBuffer.updatePixels();
}
function renderLSystem(sys, startAngle, startLength, depth, offsetX, offsetY, buf) {
var stack = [];
var x = offsetX;
var y = offsetY;
var angle = startAngle;
var length = startLength;
buf.push();
buf.translate(x, y);
for (var i = 0; i < sys.length; i++) {
var c = sys.charAt(i);
if (c === 'F') {
var startX = 0;
var startY = 0;
var endX = p.cos(angle) * length;
var endY = p.sin(angle) * length;
var ctrlX1 = startX + p.cos(angle) * length * 0.3 + p.sin(time * 2 + i * 0.1) * 8;
var ctrlY1 = startY + p.sin(angle) * length * 0.3 + p.cos(time * 2 + i * 0.1) * 8;
var ctrlX2 = endX - p.cos(angle) * length * 0.3 + p.sin(time * 1.5 + i * 0.15) * 6;
var ctrlY2 = endY - p.sin(angle) * length * 0.3 + p.cos(time * 1.5 + i * 0.15) * 6;
var colChoice = p.random();
var strokeCol;
if (colChoice < 0.6) {
strokeCol = MERCURY_SILVER;
} else {
strokeCol = SULFUR_YELLOW;
}
buf.noFill();
buf.stroke(strokeCol[0], strokeCol[1], strokeCol[2], 80);
buf.strokeWeight(p.random(0.5, 2.5));
buf.strokeJoin(p.ROUND);
buf.strokeCap(p.ROUND);
buf.beginShape();
buf.curveVertex(startX, startY);
buf.curveVertex(startX, startY);
buf.curveVertex(ctrlX1, ctrlY1);
buf.curveVertex(ctrlX2, ctrlY2);
buf.curveVertex(endX, endY);
buf.curveVertex(endX, endY);
buf.endShape();
buf.translate(endX, endY);
length *= 0.65;
} else if (c === '+') {
angle += p.radians(p.random(20, 50));
} else if (c === '-') {
angle -= p.radians(p.random(20, 50));
} else if (c === '[') {
stack.push({ x: 0, y: 0, angle: angle, length: length });
buf.push();
} else if (c === ']') {
var state = stack.pop();
if (state) {
angle = state.angle;
length = state.length;
}
buf.pop();
buf.translate(0, 0);
}
}
buf.pop();
}
function renderProbabilityCloud(cx, cy, baseRadius, intensity, buf) {
buf.push();
buf.translate(cx, cy);
for (var ring = 0; ring < 15; ring++) {
var r = baseRadius * (ring + 1) / 15;
var alpha = intensity * (1 - ring / 15) * 60;
buf.noFill();
buf.stroke(SULFUR_YELLOW[0], SULFUR_YELLOW[1], SULFUR_YELLOW[2], alpha);
buf.strokeWeight(1.5 - ring * 0.08);
buf.beginShape();
for (var a = 0; a <= p.TWO_PI; a += 0.08) {
var wave1 = p.sin(a * 5 + time * 1.5) * 0.15;
var wave2 = p.cos(a * 3 - time) * 0.1;
var wave3 = p.sin(a * 7 + time * 0.7) * 0.08;
var spiralR = r * (1 + wave1 + wave2 + wave3);
var px = p.cos(a) * spiralR;
var py = p.sin(a) * spiralR;
buf.curveVertex(px, py);
}
buf.endShape(p.CLOSE);
}
buf.pop();
}
function renderWaveFunctions(buf) {
for (var i = 0; i < 6; i++) {
var yBase = p.height * (0.2 + i * 0.12);
var phase = time * 0.8 + i * 1.2;
buf.noFill();
var alpha = 70 - i * 8;
if (i % 2 === 0) {
buf.stroke(MERCURY_SILVER[0], MERCURY_SILVER[1], MERCURY_SILVER[2], alpha);
} else {
buf.stroke(SULFUR_YELLOW[0], SULFUR_YELLOW[1], SULFUR_YELLOW[2], alpha);
}
buf.strokeWeight(1.5 + (i % 3) * 0.5);
buf.strokeJoin(p.ROUND);
buf.strokeCap(p.ROUND);
buf.beginShape();
for (var x = 0; x <= p.width; x += 4) {
var n = p.noise(x * 0.002 + i * 10, phase);
var wave1 = p.sin(x * 0.008 + phase) * 40;
var wave2 = p.cos(x * 0.012 - phase * 0.6) * 25;
var wave3 = p.sin(x * 0.02 + phase * 2) * 10;
var y = yBase + (n - 0.5) * 80 + wave1 + wave2 + wave3;
buf.curveVertex(x, y);
}
buf.endShape();
}
}
function renderCollapseVisualization(x, y, radius, buf) {
buf.push();
buf.translate(x, y);
for (var layer = 0; layer < 12; layer++) {
var r = radius * (layer + 1) / 12;
var alpha = 100 - layer * 7;
var sw = 3 - layer * 0.2;
buf.noFill();
buf.stroke(MERCURY_SILVER[0], MERCURY_SILVER[1], MERCURY_SILVER[2], alpha);
buf.strokeWeight(sw);
buf.beginShape();
var segments = 24;
for (var i = 0; i <= segments; i++) {
var angle = (i / segments) * p.TWO_PI;
var wobble1 = p.sin(angle * 4 + time * 3) * 8;
var wobble2 = p.cos(angle * 6 - time * 2) * 5;
var wobble3 = p.sin(angle * 8 + time * 1.5) * 3;
var rx = r + wobble1 + wobble2 + wobble3;
var ry = (r + wobble1 + wobble2 + wobble3) * 0.7;
var px = p.cos(angle) * rx;
var py = p.sin(angle) * ry;
if (i === 0) {
buf.vertex(px, py);
} else {
var prevAngle = ((i - 1) / segments) * p.TWO_PI;
var cpx1 = px + p.cos(prevAngle + p.HALF_PI) * 20;
var cpy1 = py + p.sin(prevAngle + p.HALF_PI) * 14;
var cpx2 = px + p.cos(angle - p.HALF_PI) * 20;
var cpy2 = py + p.sin(angle - p.HALF_PI) * 14;
buf.bezierVertex(cpx1, cpy1, cpx2, cpy2, px, py);
}
}
buf.endShape(p.CLOSE);
}
buf.pop();
}
function renderSacredGeometry(buf) {
var cx = p.width / 2;
var cy = p.height / 2;
var baseSize = p.min(p.width, p.height) * 0.35;
for (var ring = 0; ring < 8; ring++) {
var size = baseSize * (ring + 1) / 8;
var alpha = 40 - ring * 4;
var rot = time * (ring % 2 === 0 ? 1 : -1) * 0.3;
buf.push();
buf.translate(cx, cy);
buf.rotate(rot);
buf.noFill();
buf.stroke(COSMIC_INDIGO[0] + 30, COSMIC_INDIGO[1] + 20, COSMIC_INDIGO[2] + 50, alpha);
buf.strokeWeight(1);
var sides = 3 + ring;
buf.beginShape();
for (var i = 0; i <= sides; i++) {
var angle = (i / sides) * p.TWO_PI - p.HALF_PI;
var wobble = p.sin(angle * 3 + time * 2 + ring) * size * 0.1;
var px = p.cos(angle) * (size + wobble);
var py = p.sin(angle) * (size + wobble);
buf.curveVertex(px, py);
}
buf.endShape(p.CLOSE);
buf.pop();
}
}
function renderNeuralConnections(buf) {
var nodes = [];
var numNodes = 12;
for (var i = 0; i < numNodes; i++) {
var angle = (i / numNodes) * p.TWO_PI + time * 0.2;
var radius = p.min(p.width, p.height) * 0.25 + p.sin(time + i) * 50;
nodes.push({
x: p.width / 2 + p.cos(angle) * radius,
y: p.height / 2 + p.sin(angle) * radius
});
}
for (var i = 0; i < nodes.length; i++) {
for (var j = i + 1; j < nodes.length; j++) {
var dist = p.dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
if (dist < p.min(p.width, p.height) * 0.4) {
var alpha = 50 * (1 - dist / (p.min(p.width, p.height) * 0.4));
buf.stroke(SULFUR_YELLOW[0], SULFUR_YELLOW[1], SULFUR_YELLOW[2], alpha);
buf.strokeWeight(0.5);
buf.line(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
}
}
}
for (var i = 0; i < nodes.length; i++) {
var pulse = p.sin(time * 3 + i) * 0.3 + 1;
var nodeSize = 8 * pulse;
buf.noStroke();
buf.fill(MERCURY_SILVER[0], MERCURY_SILVER[1], MERCURY_SILVER[2], 70);
buf.ellipse(nodes[i].x, nodes[i].y, nodeSize * 2, nodeSize * 2);
buf.noFill();
buf.stroke(MERCURY_SILVER[0], MERCURY_SILVER[1], MERCURY_SILVER[2], 40);
buf.strokeWeight(1);
buf.ellipse(nodes[i].x, nodes[i].y, nodeSize * 4, nodeSize * 4);
}
}
function renderEtherealTendrils(buf) {
for (var t = 0; t < 4; t++) {
var startX = p.width * (0.15 + t * 0.23);
var startY = p.height * 1.1;
buf.noFill();
buf.stroke(SULFUR_YELLOW[0], SULFUR_YELLOW[1], SULFUR_YELLOW[2], 60);
buf.strokeWeight(1.5);
buf.strokeJoin(p.ROUND);
buf.strokeCap(p.ROUND);
buf.beginShape();
buf.curveVertex(startX, startY);
buf.curveVertex(startX, startY);
var prevX = startX;
var prevY = startY;
for (var i = 1; i <= 20; i++) {
var progress = i / 20;
var waveX = p.sin(progress * p.PI * 3 + time + t * 2) * 80 * (1 - progress * 0.5);
var waveY = p.cos(progress * p.PI * 2 - time * 0.7 + t) * 40 * (1 - progress * 0.3);
var cx = startX + waveX;
var cy = startY - progress * p.height * 1.0 + waveY;
var ctrlX = (prevX + cx) / 2 + waveX * 0.5;
var ctrlY = (prevY + cy) / 2;
buf.curveVertex(ctrlX, ctrlY);
prevX = cx;
prevY = cy;
}
buf.curveVertex(prevX, prevY);
buf.endShape();
}
}
p.draw = function() {
time += 0.016;
bgBuffer.blendMode(p.BLEND);
bgBuffer.background(COSMIC_INDIGO[0], COSMIC_INDIGO[1], COSMIC_INDIGO[2], 15);
midBuffer.clear();
fgBuffer.clear();
glowBuffer.blendMode(p.BLEND);
glowBuffer.background(0, 0, 0, 10);
renderProbabilityField();
renderSacredGeometry(midBuffer);
renderWaveFunctions(midBuffer);
renderNeuralConnections(midBuffer);
var lx = p.width * 0.12;
for (var i = 0; i < lSystems.length; i++) {
var ly = p.height * 0.75 + p.sin(time * 0.5 + i * 1.5) * 30;
var angle = -p.HALF_PI + p.sin(time * 0.3 + i) * 0.2;
var len = 35 + i * 8;
renderLSystem(lSystems[i], angle, len, 3, lx, ly, midBuffer);
var cloudX = lx + p.sin(time + i * 2) * 40;
var cloudY = p.height * 0.35 + p.cos(time * 0.7 + i * 1.5) * 30;
renderProbabilityCloud(cloudX, cloudY, 50 + i * 12, 0.4 + i * 0.1, glowBuffer);
lx += p.width * 0.22;
}
renderEtherealTendrils(midBuffer);
if (collapsed && collapsePoint) {
collapseRadius = p.lerp(collapseRadius, 80, 0.1);
renderCollapseVisualization(collapsePoint.x, collapsePoint.y, collapseRadius, fgBuffer);
renderProbabilityCloud(collapsePoint.x, collapsePoint.y, 100, 0.8, glowBuffer);
var dx = (p.mouseX || p.width / 2) - collapsePoint.x;
var dy = (p.mouseY || p.height / 2) - collapsePoint.y;
var dist = p.sqrt(dx * dx + dy * dy);
if (dist > 250) {
collapsed = false;
}
}
var mx = p.mouseX || p.width / 2;
var my = p.mouseY || p.height / 2;
for (var i = 0; i < 10; i++) {
var angle = (i / 10) * p.TWO_PI + time * 0.4;
var dist = 80 + p.sin(time * 1.5 + i * 0.8) * 40;
var sx = mx + p.cos(angle) * dist;
var sy = my + p.sin(angle) * dist;
var size = 15 + p.sin(time * 2 + i) * 8;
glowBuffer.noStroke();
glowBuffer.fill(MERCURY_SILVER[0], MERCURY_SILVER[1], MERCURY_SILVER[2], 50);
glowBuffer.ellipse(sx, sy, size, size);
glowBuffer.noFill();
glowBuffer.stroke(SULFUR_YELLOW[0], SULFUR_YELLOW[1], SULFUR_YELLOW[2], 60);
glowBuffer.strokeWeight(1);
glowBuffer.ellipse(sx, sy, size * 2.5, size * 2.5);
}
p.blendMode(p.BLEND);
p.image(bgBuffer, 0, 0);
p.blendMode(p.SCREEN);
p.image(midBuffer, 0, 0);
p.blendMode(p.ADD);
p.image(glowBuffer, 0, 0);
p.image(fgBuffer, 0, 0);
p.blendMode(p.OVERLAY);
p.noStroke();
p.fill(COSMIC_INDIGO[0], COSMIC_INDIGO[1], COSMIC_INDIGO[2], 25);
p.rect(0, 0, p.width, p.height);
p.blendMode(p.BLEND);
};
p.mousePressed = function() {
collapsed = true;
collapsePoint = { x: p.mouseX, y: p.mouseY };
collapseRadius = 10;
};
p.keyPressed = function() {
if (p.key === 'r' || p.key === 'R') {
collapsed = false;
collapsePoint = null;
collapseRadius = 0;
}
if (p.key === 'c' || p.key === 'C') {
lSystems = [];
for (var i = 0; i < growthStages.length; i++) {
growthStages[i] = 4 + p.floor(p.random(4));
lSystems.push(generateLSystem(growthStages[i]));
}
}
if (p.key === ' ') {
for (var i = 0; i < growthStages.length; i++) {
growthStages[i] = p.floor(p.random(3, 8));
lSystems[i] = generateLSystem(growthStages[i]);
}
}
};
p.windowResized = function() {
var container = document.getElementById('p5-wrapper');
p.resizeCanvas(container.offsetWidth, container.offsetHeight);
bgBuffer.resizeCanvas(p.width, p.height);
midBuffer.resizeCanvas(p.width, p.height);
fgBuffer.resizeCanvas(p.width, p.height);
glowBuffer.resizeCanvas(p.width, p.height);
bgBuffer.colorMode(p.RGB, 255, 255, 255, 100);
midBuffer.colorMode(p.RGB, 255, 255, 255, 100);
fgBuffer.colorMode(p.RGB, 255, 255, 255, 100);
glowBuffer.colorMode(p.RGB, 255, 255, 255, 100);
};
}; // p5 init stripped
✨ AI 艺术解读
This piece visualizes quantum superposition as recursive probability fields rendered through L-systems that grow like neural axons or fungal mycelium—representing consciousness emerging from quantum uncertainty. The alchemical palette channels ancient transmutation symbolism: mercury silver embodies the fluidity of unobserved states, sulfur yellow represents the fire of wave function collapse and enlightenment, while cosmic indigo grounds the piece in the infinite void from which all possibilities emerge. Mouse interaction triggers collapse events, making the viewer an active participant in determining which probability becomes reality—a meditation on observer effect and the nature of consciousness itself.
📝 补充说明
- Pixel-level rendering with 4px step provides 16x speedup while maintaining smooth gradients through per-pixel interpolation filling
- L-systems use curveVertex sequences for organic neural branching rather than straight line segments, creating consciousness-like structures
- Blend mode stacking (BLEND -> SCREEN -> ADD -> OVERLAY) creates luminous depth impossible with single-canvas rendering
- Probability clouds use triple-frequency sine/cosine wave interference to simulate quantum superposition states
- Keyboard controls: R resets collapse, C randomizes L-system depth, SPACE regenerates all growth stages