let mic;
let isLit = true;
let started = false;
function setup() {
// Makes the canvas responsive for Tilda
let cnv = createCanvas(windowWidth, 400);
cnv.parent('p5-container');
mic = new p5.AudioIn();
}
function draw() {
background(252, 248, 232); // Postcard cream color
if (!started) {
drawStartScreen();
return;
}
let vol = mic.getLevel();
// Logic: If volume is high, "blow" the candle
if (vol > 0.15) {
isLit = false;
}
drawCandle();
if (isLit) {
drawFlame(vol);
} else {
drawSmoke();
drawRestartButton();
}
}
// This function unlocks the Mic on Mobile/Desktop
function mousePressed() {
if (!started) {
userStartAudio(); // Required by browsers
mic.start();
started = true;
}
// If candle is out, click to relight
if (!isLit) {
isLit = true;
}
}
function drawFlame(v) {
fill(255, 150, 0);
noStroke();
// The flame size reacts slightly to the noise before it goes out!
let flick = random(0, 5);
ellipse(width/2, 180, 20 + v*100 + flick, 35 + v*100);
}
function drawCandle() {
fill(200);
rect(width/2 - 10, 200, 20, 100); // Simple candle body
}
function drawStartScreen() {
fill(50);
textAlign(CENTER);
text("Tap to Light the Candle", width/2, height/2);
}