const id = `p5-${crypto.randomUUID()}`; display(html`

`); new p5((s) => { s.setup = () => { s.createCanvas(800, 950).parent(id); s.textFont("Courier New"); }; s.draw = () => { s.background(255); let centerX = s.width / 2; let startY = 250; let charWidth = 10; let charHeight = 18; let wallLeftX = centerX - 200; let wallRightX = centerX + 200; // 1. ХМАРКИ ДИМУ s.textAlign(s.CENTER, s.TOP); s.textSize(14); let smokeWords = visualPoem.smoke.text.split(" "); for (let i = 0; i < smokeWords.length; i++) { let reverseIndex = smokeWords.length - 1 - i; let wordY = startY - 40 - reverseIndex * (charHeight * 1.6); let wobbleX = s.sin(s.frameCount * 0.02 + i) * 35; let noiseX = s.map(s.noise(i * 0.5, s.frameCount * 0.01), 0, 1, -15, 15); let columnX = centerX + wobbleX + noiseX; s.fill(160, 160, 160, 120); s.text(" ) ( ", columnX + 15, wordY - 10); s.text(" ( ) ", columnX - 15, wordY + 10); s.fill(60); let leftSym = (i % 2 === 0) ? "( " : " ) "; let rightSym = (i % 2 === 0) ? " )" : " ( "; s.text(leftSym + smokeWords[i] + rightSym, columnX, wordY); } // 2. ДАХ ТА ПОЛУМ'Я s.textSize(15); s.textAlign(s.CENTER, s.TOP); let roofY = startY; for (let row = 0; row < visualPoem.roof.length; row++) { let currentLine = visualPoem.roof[row]; let rowY = startY + row * charHeight; s.fill(40); s.text(currentLine, centerX, rowY); let halfLineWidth = (currentLine.length * charWidth) / 2; let slopeRightX = centerX + halfLineWidth; s.push(); s.fill(s.random(200, 255), s.random(20, 70), 0); for (let f = 0; f < 3; f++) { let fireSym = visualPoem.fire.symbols[ Math.floor(s.random(visualPoem.fire.symbols.length)) ]; let fx = slopeRightX + s.random(5, 20) + (f * 8); let fy = rowY + s.random(-8, 5); s.text(fireSym, fx, fy); } if (row === 2) { s.fill(220, 80, 0); s.textAlign(s.LEFT, s.TOP); s.text(" <-- " + visualPoem.fire.text, slopeRightX + 30, rowY); } s.pop(); if (rowY > roofY) roofY = rowY; } let wallTopY = roofY + charHeight * 2; // 3. СТІНИ ТА ДВЕРІ let wallBottomY = wallTopY + 180; let doorLeftX = centerX - 50; let doorRightX = centerX + 50; let doorTopY = wallTopY + 60; s.textAlign(s.LEFT, s.TOP); s.fill(60); for (let x = wallLeftX; x <= wallRightX; x += charWidth) { s.text("-", x, wallTopY); s.text("-", x, wallBottomY); } for (let y = wallTopY; y <= wallBottomY; y += charHeight) { s.text("|", wallLeftX, y); s.text("|", wallRightX, y); if (y >= doorTopY) { s.text("|", doorLeftX, y); s.text("|", doorRightX, y); } } for (let x = doorLeftX; x <= doorRightX; x += charWidth) { s.text("-", x, doorTopY); } // 4. ТЕКСТ ВСЕРЕДИНІ ТА НАД ДВЕРИМА s.fill(40); s.textSize(14); s.textAlign(s.CENTER, s.TOP); s.text(visualPoem.aboveDoor, centerX, doorTopY - charHeight * 1.5); s.textAlign(s.LEFT, s.TOP); for (let i = 0; i < visualPoem.leftWall.length; i++) { s.text( visualPoem.leftWall[i], wallLeftX + 15, wallTopY + 60 + i * charHeight ); } for (let i = 0; i < visualPoem.rightWall.length; i++) { s.text( visualPoem.rightWall[i], doorRightX + 15, wallTopY + 60 + i * charHeight ); } // 5. СХОДИ let stairStartY = wallBottomY + charHeight; for (let i = 0; i < visualPoem.stairs.length; i++) { let stairX = doorLeftX - i * 20; let stairY = stairStartY + i * charHeight * 1.5; s.fill(100); s.text("_____", stairX - 40, stairY); s.fill(40); s.text(visualPoem.stairs[i], stairX, stairY); } // 6. ПОРІГ let thresholdY = stairStartY + visualPoem.stairs.length * charHeight * 1.5 + 20; s.fill(200, 0, 0); s.textSize(16); s.textAlign(s.CENTER, s.TOP); s.text("=========================================", centerX, thresholdY); s.text(visualPoem.threshold, centerX, thresholdY + charHeight); s.text("=========================================", centerX, thresholdY + charHeight * 2); }; });