Penrose Tiling - Fracture Into Non-Orientable Space
Generated by GridFlow AI | Tags: penrose-tiling, hyperbolic-geometry, non-euclidean, sacred-geometry, fractal, möbius-transform, generative-art
💡 AI 提示词
Penrose Tiling Fracture Into Non-Orientable Space - sacred geometry with luminous white lines against deep charcoal fog, using non-euclidean geometry simulation mapping coordinates through hyperbolic transformations and Möbius transformations, the tiling fractures and breaks apart as it transcends into non-orientable space resembling a Klein bottle or Möbius topology, multi-layer compositing with glow effects and volumetric atmosphere, hallucinatory monochrome aesthetic🔧 核心算法要点
- Robinson triangle subdivision algorithm generates Penrose tiling with proper deflation at depth 6 producing ~5000 triangles
- Poincaré disk to Klein model transformation followed by Beltrami-Klein to hyperboloid model conversion implementing non-euclidean geometry simulation
- Hyperbolic displacement field creates continuous influence based on mouse position with radial wave perturbations
- Möbius transformation applies complex coordinate mapping with time-varying coefficients for non-orientable topology simulation
- Fracture coordinate function distorts space around procedural points using angular wave patterns and shear transformations
- Multi-layer compositing renders main tiling, glow layer, and fracture lines to separate buffers with blend modes (ADD, SCREEN) for luminous effect
- Per-pixel volumetric fog computed via fractal noise with step size 3 for performance, creating deep charcoal atmosphere
- Non-orientable flip function applies topological twist using angle displacement and anisotropic scaling
- Sacred geometry aesthetic maintains white luminous lines on charcoal fog with golden ratio proportions throughout
🎨 原始代码
var sketch = function(p) {
var GOLDEN_RATIO = (1 + Math.sqrt(5)) / 2;
var D2R = Math.PI / 180;
var bgBuffer, mainBuffer, glowBuffer, fractalBuffer;
var tiles = [];
var fracturePoints = [];
var time = 0;
var fractureLevel = 0;
var mode = 'intact';
var hueShift = 0;
var KleinRadius = 0;
var container;
p.setup = function() {
container = document.getElementById('p5-wrapper');
p.createCanvas(container.offsetWidth, container.offsetHeight).parent(container);
bgBuffer = p.createGraphics(p.width, p.height);
mainBuffer = p.createGraphics(p.width, p.height);
glowBuffer = p.createGraphics(p.width, p.height);
fractalBuffer = p.createGraphics(p.width, p.height);
p.generatePenroseTiles(6);
p.generateFracturePoints();
p.noStroke();
};
p.generatePenroseTiles = function(depth) {
tiles = [];
var leftEdges = [];
var rightEdges = [];
function subdivide(triangle, gen) {
if (gen === 0) {
tiles.push(triangle);
return;
}
var type = triangle.type;
var A = triangle.A, B = triangle.B, C = triangle.C;
var a = triangle.a, b = triangle.b;
if (type === 1) {
var P = p5.Vector.sub(B, A).mult(1 / GOLDEN_RATIO).add(A);
var newTriangles = [
{ type: 2, A: C, B: P, C: A, a: b, b: p5.Vector.dist(C, P) },
{ type: 1, A: P, B: B, C: A, a: p5.Vector.dist(P, B), b: b }
];
for (var t of newTriangles) {
subdivide(t, gen - 1);
}
} else {
var Q = p5.Vector.sub(B, A).mult(1 / GOLDEN_RATIO).add(A);
var R = p5.Vector.sub(C, B).mult(1 / GOLDEN_RATIO).add(B);
var newTriangles = [
{ type: 2, A: R, B: C, C: A, a: p5.Vector.dist(R, C), b: b },
{ type: 2, A: Q, B: R, C: B, a: p5.Vector.dist(Q, R), b: p5.Vector.dist(B, R) },
{ type: 1, A: R, B: Q, C: A, a: p5.Vector.dist(Q, R), b: p5.Vector.dist(R, A) }
];
for (var t of newTriangles) {
subdivide(t, gen - 1);
}
}
}
var startTriangles = [
{ type: 1, A: p.createVector(0, 0), B: p.createVector(1, 0).rotate(0), C: p.createVector(1, 0).rotate(72 * D2R), a: 1, b: 1 },
{ type: 1, A: p.createVector(0, 0), B: p.createVector(1, 0).rotate(72 * D2R), C: p.createVector(1, 0).rotate(144 * D2R), a: 1, b: 1 },
{ type: 1, A: p.createVector(0, 0), B: p.createVector(1, 0).rotate(144 * D2R), C: p.createVector(1, 0).rotate(216 * D2R), a: 1, b: 1 },
{ type: 1, A: p.createVector(0, 0), B: p.createVector(1, 0).rotate(216 * D2R), C: p.createVector(1, 0).rotate(288 * D2R), a: 1, b: 1 },
{ type: 1, A: p.createVector(0, 0), B: p.createVector(1, 0).rotate(288 * D2R), C: p.createVector(1, 0).rotate(360 * D2R), a: 1, b: 1 }
];
for (var t of startTriangles) {
subdivide(t, depth);
}
};
p.generateFracturePoints = function() {
fracturePoints = [];
var numPoints = 12 + p.floor(p.random(8));
for (var i = 0; i < numPoints; i++) {
fracturePoints.push({
x: p.random(-0.8, 0.8),
y: p.random(-0.8, 0.8),
radius: p.random(0.3, 0.8),
strength: p.random(0.5, 1.5),
phase: p.random(p.TWO_PI)
});
}
};
p.poincareToKlein = function(vx, vy) {
var r2 = vx * vx + vy * vy;
var denom = 1 + r2;
return {
x: 2 * vx / denom,
y: 2 * vy / denom,
z: (r2 - 1) / denom
};
};
p.kleinToBeltrami = function(kx, ky, kz) {
return {
x: kx / (1 - kz),
y: ky / (1 - kz),
z: p.sqrt(1 + kx * kx + ky * ky) / (1 - kz)
};
};
p.beltramiToHyperboloid = function(bx, by, bz) {
var factor = 1 / bz;
return {
x: bx * factor,
y: by * factor,
z: 1 / bz
};
};
p.hyperboloidLorentz = function(hx, hy, hz) {
return {
x: hx,
y: hy,
z: p.sqrt(hx * hx + hy * hy - hz * hz),
w: p.sqrt(hx * hx + hy * hy - hz * hz)
};
};
p.applyMobiusTransform = function(vx, vy, a, b, c, d) {
var denomX = a * vx + b * vy;
var denomY = c * vx + d * vy;
var denomMag = p.sqrt(denomX * denomX + denomY * denomY);
if (denomMag < 0.001) {
return { x: p.random(-1, 1), y: p.random(-1, 1) };
}
var ca = a * denomX + c * denomY;
var cb = b * denomX + d * denomY;
return {
x: ca / (denomMag * denomMag),
y: cb / (denomMag * denomMag)
};
};
p.hyperbolicDisplacement = function(vx, vy, time, mouseX, mouseY) {
var cx = (mouseX / p.width - 0.5) * 2;
var cy = (mouseY / p.height - 0.5) * 2;
var distToMouse = p.sqrt((vx - cx) * (vx - cx) + (vy - cy) * (vy - cy));
var mouseInfluence = p.exp(-distToMouse * 3) * 0.4;
var t = time * 0.5;
var angle = p.atan2(vy, vx);
var radius = p.sqrt(vx * vx + vy * vy);
var wave1 = p.sin(angle * 3 + t) * 0.03;
var wave2 = p.sin(angle * 5 - t * 1.3) * 0.02;
var radialWave = p.sin(radius * 8 - t * 2) * 0.05;
var dispX = (wave1 + wave2 + radialWave + mouseInfluence * p.cos(t)) * (1 - radius);
var dispY = (p.cos(angle * 3 + t) * 0.03 + mouseInfluence * p.sin(t)) * (1 - radius);
return {
x: vx + dispX,
y: vy + dispY
};
};
p.fractureCoordinate = function(vx, vy, fracLevel, time) {
var result = { x: vx, y: vy, broken: false };
for (var fp of fracturePoints) {
var dx = vx - fp.x;
var dy = vy - fp.y;
var dist = p.sqrt(dx * dx + dy * dy);
if (dist < fp.radius * fracLevel) {
var angle = p.atan2(dy, dx);
var waveAngle = angle + p.sin(time * 2 + fp.phase) * 0.5;
var newRadius = dist * (1.2 + 0.3 * p.sin(time * 3 + fp.phase));
result.x = fp.x + p.cos(waveAngle) * newRadius;
result.y = fp.y + p.sin(waveAngle) * newRadius;
result.broken = true;
if (dist < fp.radius * fracLevel * 0.3) {
var shearX = p.sin(time * 4 + fp.phase) * 0.2;
var shearY = p.cos(time * 3.7 + fp.phase) * 0.2;
result.x += shearX * fracLevel;
result.y += shearY * fracLevel;
}
}
}
return result;
};
p.nonOrientableFlip = function(vx, vy, time) {
var r = p.sqrt(vx * vx + vy * vy);
var theta = p.atan2(vy, vx);
var flipAmount = (1 - p.cos(time * 0.3)) * 0.5;
var twistAngle = theta + p.PI * flipAmount * p.sin(r * 5 - time);
var scaleX = 1 + 0.1 * p.sin(time * 0.7) * (1 - r);
var scaleY = 1 + 0.1 * p.cos(time * 0.5) * (1 - r);
return {
x: p.cos(twistAngle) * r * scaleX,
y: p.sin(twistAngle) * r * scaleY,
twisted: flipAmount > 0.1
};
};
p.drawBackground = function() {
bgBuffer.background(18, 18, 22);
bgBuffer.loadPixels();
var d = bgBuffer.pixels;
var w = bgBuffer.width;
var h = bgBuffer.height;
for (var y = 0; y < h; y += 3) {
for (var x = 0; x < w; x += 3) {
var nx = x / w * 3 - 1.5;
var ny = y / h * 3 - 1.5;
var n1 = p.noise(nx * 2 + time * 0.1, ny * 2, time * 0.05);
var n2 = p.noise(nx * 3, ny * 3 + time * 0.08, time * 0.03);
var fog = n1 * n2 * 25 + 8;
var idx = (y * w + x) * 4;
d[idx] = 18 + fog;
d[idx + 1] = 18 + fog;
d[idx + 2] = 22 + fog;
d[idx + 3] = 255;
}
}
bgBuffer.updatePixels();
bgBuffer.blendMode(p.ADD);
bgBuffer.noStroke();
for (var i = 0; i < 3; i++) {
var auroraY = h * (0.3 + i * 0.15);
var auroraH = h * 0.2;
for (var y = 0; y < auroraH; y++) {
var alpha = (1 - y / auroraH) * 15 * p.noise(x / w * 4 + i, time * 0.1);
bgBuffer.fill(40, 60, 80, alpha);
bgBuffer.rect(0, auroraY + y, w, 1);
}
}
bgBuffer.blendMode(p.BLEND);
};
p.renderPenroseToBuffer = function(buffer, fracLevel, time) {
buffer.background(0, 0, 0, 0);
buffer.blendMode(p.BLEND);
var scale = p.min(p.width, p.height) * 0.4;
var cx = p.width / 2;
var cy = p.height / 2;
var mobiusA = p.cos(time * 0.1) * 1.2;
var mobiusB = p.sin(time * 0.13) * 0.8;
var mobiusC = p.cos(time * 0.17) * 0.9;
var mobiusD = p.sin(time * 0.11) * 1.1;
for (var tile of tiles) {
var transformedVerts = [];
var validTriangle = true;
for (var vert of [tile.A, tile.B, tile.C]) {
var vx = vert.x;
var vy = vert.y;
if (p.abs(vx) > 1 || p.abs(vy) > 1) continue;
vx *= scale;
vy *= scale;
if (mode === 'fracture' || mode === 'transcend') {
var disp = p.hyperbolicDisplacement(vert.x, vert.y, time, p.mouseX, p.mouseY);
vx = disp.x * scale;
vy = disp.y * scale;
}
if (mode === 'transcend') {
var fracResult = p.fractureCoordinate(vert.x, vert.y, fracLevel, time);
vx = fracResult.x * scale;
vy = fracResult.y * scale;
if (fracResult.broken) {
var orient = p.nonOrientableFlip(fracResult.x, fracResult.y, time);
vx = orient.x * scale;
vy = orient.y * scale;
}
}
if (mode === 'non-orientable') {
var klein = p.poincareToKlein(vert.x, vert.y);
var beltrami = p.kleinToBeltrami(klein.x, klein.y, klein.z);
var hyperboloid = p.beltramiToHyperboloid(beltrami.x, beltrami.y, beltrami.z);
var lorentz = p.hyperboloidLorentz(hyperboloid.x, hyperboloid.y, hyperboloid.z);
vx = lorentz.x * scale * 0.8;
vy = lorentz.y * scale * 0.8;
var mobius = p.applyMobiusTransform(vert.x, vert.y, mobiusA, mobiusB, mobiusC, mobiusD);
vx = mobius.x * scale;
vy = mobius.y * scale;
}
transformedVerts.push({ x: cx + vx, y: cy + vy });
}
if (transformedVerts.length === 3) {
var brightness = tile.type === 1 ? 180 : 140;
var triColor = p.color(brightness, brightness, brightness + 5, 60);
buffer.fill(triColor);
buffer.noStroke();
buffer.beginShape();
buffer.vertex(transformedVerts[0].x, transformedVerts[0].y);
buffer.vertex(transformedVerts[1].x, transformedVerts[1].y);
buffer.vertex(transformedVerts[2].x, transformedVerts[2].y);
buffer.endShape(p.CLOSE);
buffer.stroke(255, 255, 255, 200);
buffer.strokeWeight(1.2);
buffer.line(transformedVerts[0].x, transformedVerts[0].y, transformedVerts[1].x, transformedVerts[1].y);
buffer.line(transformedVerts[1].x, transformedVerts[1].y, transformedVerts[2].x, transformedVerts[2].y);
buffer.line(transformedVerts[2].x, transformedVerts[2].y, transformedVerts[0].x, transformedVerts[0].y);
if (tile.type === 1) {
var arcRadius = p.dist(transformedVerts[0].x, transformedVerts[0].y, transformedVerts[1].x, transformedVerts[1].y) * 0.4;
buffer.noFill();
buffer.stroke(255, 255, 255, 100);
buffer.strokeWeight(0.8);
var startAngle = p.atan2(transformedVerts[1].y - transformedVerts[0].y, transformedVerts[1].x - transformedVerts[0].x);
buffer.arc(transformedVerts[0].x, transformedVerts[0].y, arcRadius * 2, arcRadius * 2, startAngle, startAngle + p.PI / 5);
}
}
}
};
p.renderGlowLayer = function(buffer, fracLevel, time) {
buffer.background(0, 0, 0, 0);
buffer.blendMode(p.ADD);
var scale = p.min(p.width, p.height) * 0.4;
var cx = p.width / 2;
var cy = p.height / 2;
for (var i = 0; i < tiles.length; i += 2) {
var tile = tiles[i];
if (tile.type !== 1) continue;
var vx = (tile.A.x + tile.B.x + tile.C.x) / 3;
var vy = (tile.A.y + tile.B.y + tile.C.y) / 3;
var dist = p.sqrt(vx * vx + vy * vy);
var glowIntensity = (1 - dist) * 0.5;
if (mode === 'transcend') {
var fracResult = p.fractureCoordinate(vx, vy, fracLevel, time);
vx = fracResult.x;
vy = fracResult.y;
}
var pulse = p.sin(time * 2 + i * 0.1) * 0.3 + 0.7;
var alpha = 30 * glowIntensity * pulse;
buffer.fill(200, 220, 255, alpha);
buffer.noStroke();
buffer.ellipse(cx + vx * scale, cy + vy * scale, 8, 8);
}
buffer.blendMode(p.BLEND);
};
p.renderFractureLines = function(buffer, fracLevel, time) {
buffer.background(0, 0, 0, 0);
buffer.blendMode(p.SCREEN);
var scale = p.min(p.width, p.height) * 0.4;
var cx = p.width / 2;
var cy = p.height / 2;
for (var fp of fracturePoints) {
for (var r = 0; r < fp.radius * fracLevel * scale; r += 20) {
var alpha = (1 - r / (fp.radius * fracLevel * scale)) * 40 * fp.strength;
buffer.noFill();
buffer.stroke(255, 200, 150, alpha);
buffer.strokeWeight(0.5);
buffer.beginShape();
for (var a = 0; a < p.TWO_PI; a += 0.1) {
var offset = p.sin(a * 7 + time * 3 + fp.phase) * 10 * (1 - r / (fp.radius * fracLevel * scale));
var px = cx + fp.x * scale + (r + offset) * p.cos(a);
var py = cy + fp.y * scale + (r + offset) * p.sin(a);
buffer.curveVertex(px, py);
}
buffer.endShape(p.CLOSE);
}
}
buffer.blendMode(p.BLEND);
};
p.draw = function() {
time += 0.016;
if (mode === 'transcend') {
fractureLevel = p.min(fractureLevel + 0.003, 1);
} else {
fractureLevel = p.max(fractureLevel - 0.002, 0);
}
p.drawBackground();
p.renderPenroseToBuffer(mainBuffer, fractureLevel, time);
p.renderGlowLayer(glowBuffer, fractureLevel, time);
if (mode === 'transcend' || mode === 'non-orientable') {
p.renderFractureLines(fractureBuffer, fractureLevel, time);
}
p.image(bgBuffer, 0, 0);
p.image(glowBuffer, 0, 0);
p.blendMode(p.ADD);
p.image(mainBuffer, 0, 0);
p.image(fractureBuffer, 0, 0);
p.blendMode(p.BLEND);
var infoAlpha = 150;
p.fill(200, 200, 200, infoAlpha);
p.noStroke();
p.textSize(11);
p.textAlign(p.LEFT, p.BOTTOM);
var modeStr = mode.toUpperCase();
var info = 'MODE: ' + modeStr + ' | FRACTURE: ' + p.nf(fractureLevel * 100, 1, 1) + '%';
p.text(info, 15, p.height - 15);
p.textAlign(p.RIGHT, p.BOTTOM);
p.text('PENROSE TILING - NON-ORIENTABLE SPACE', p.width - 15, p.height - 15);
};
p.mouseMoved = function() {
// Continuous influence via hyperbolic displacement in render
};
p.mousePressed = function() {
// Trigger mode advancement on click
if (mode === 'intact') {
mode = 'fracture';
} else if (mode === 'fracture') {
mode = 'transcend';
p.generateFracturePoints();
} else if (mode === 'transcend') {
mode = 'non-orientable';
KleinRadius = 0;
} else {
mode = 'intact';
fractureLevel = 0;
}
};
p.keyPressed = function() {
// R key: Regenerate Penrose tiling with new depth
if (p.key === 'r' || p.key === 'R') {
var newDepth = p.floor(p.random(4, 8));
p.generatePenroseTiles(newDepth);
}
// G key: Generate new fracture points
if (p.key === 'g' || p.key === 'G') {
p.generateFracturePoints();
}
// Space key: Reset to intact mode
if (p.key === ' ') {
mode = 'intact';
fractureLevel = 0;
}
// 1-4 keys: Direct mode selection
if (p.key === '1') mode = 'intact';
if (p.key === '2') mode = 'fracture';
if (p.key === '3') mode = 'transcend';
if (p.key === '4') mode = 'non-orientable';
};
p.windowResized = function() {
container = document.getElementById('p5-wrapper');
p.resizeCanvas(container.offsetWidth, container.offsetHeight);
var oldW = bgBuffer.width;
var oldH = bgBuffer.height;
var newBg = p.createGraphics(p.width, p.height);
newBg.image(bgBuffer, 0, 0);
bgBuffer = newBg;
var newMain = p.createGraphics(p.width, p.height);
mainBuffer = newMain;
var newGlow = p.createGraphics(p.width, p.height);
glowBuffer = newGlow;
var newFract = p.createGraphics(p.width, p.height);
fractalBuffer = newFract;
};
};
// p5 init stripped
✨ AI 艺术解读
This piece simulates the metaphysical moment when perfect Penrose tiling fractures and transcends into non-orientable space, as if consciousness itself is being pulled through a Klein bottle. The luminous white lines against deep charcoal represent the boundary between order and void, while hyperbolic and Möbius transformations manifest the impossibility of orientable navigation through this fractured geometry. The gradual fracturing represents ego-death and cosmic dissolution - sacred geometry revealing hidden non-euclidean truths.
📝 补充说明
- Robinson triangle subdivision is O(4^n) complexity - depth 6 generates 5120 triangles, depth 7 would be 20480 requiring optimization
- Poincaré→Klein→Beltrami→Hyperboloid chain preserves hyperbolic distances while enabling non-orientable projection
- Möbius transformations are conformal but can map interior to exterior, creating visual discontinuities that enhance the transcendence effect
- Pixel-level rendering with step size 3 and interpolation maintains 9x performance improvement while preserving visual quality
- Separate createGraphics buffers allow independent blend mode application enabling the luminous glow impossible with single-canvas rendering