createCanvas(800, 800);

  background('#D3C9E6'); // darker lavender background

}

​

let smokeParticles = [];

​

function draw() {

  background('#D3C9E6'); // redraw the darker lavender background each frame

​

  drawTeapot();

  drawPlateWithWagashi();

  drawTeaCup();  // Draw the tea cup next to the plate

​

  drawSmoke(); // animate smoke coming out of the teapot

}

​

function drawTeapot() {

  // draw the round teapot

  noStroke();

  // body of the teapot

  fill(255); // white teapot

  ellipse(400, 450, 360, 240); // enlarged round base

​

  // add shading for a 3D effect

  fill(200); // lighter gray for shading

  ellipse(400, 470, 360, 240); // shadow below the body

​

  // teapot spout

  fill(255); // white color for the spout

  stroke(180); // darker gray for the outline

  strokeWeight(3);

  beginShape();

  vertex(520, 380); // starting point of the spout

  bezierVertex(600, 350, 590, 410, 520, 410);

  endShape(CLOSE);

​

  // teapot handle

  noFill();

  stroke(255); // white stroke for visibility

  strokeWeight(25); // increased stroke weight for visibility

  arc(240, 450, 120, 120, HALF_PI, PI + HALF_PI);

​

  // teapot lid

  fill(255);

  ellipse(400, 375, 180, 60); // enlarged lid

  ellipse(400, 355, 60, 20);  // enlarged knob on top

​

  // add stroke for teapot outlines

  stroke(180); // darker gray for outlines

  strokeWeight(3); // outline stroke weight

  ellipse(400, 450, 360, 240); // outline for the body

  ellipse(400, 375, 180, 60); // outline for the lid

  ellipse(400, 355, 60, 20);  // outline for the knob

}

​

function drawPlateWithWagashi() {

  push();

  translate(600, 650); // Move the plate into position

  scale(1.2, 0.5); // Flatten the plate to give it a perspective effect

  noStroke();

​

  // Draw the plate

  fill(255); // white plate

  ellipse(0, 0, 240, 240); // base of the plate

  stroke(200); // light gray outline

  strokeWeight(2);

  ellipse(0, 0, 240, 240); // outline of the plate

​

  // Draw daifuku (mochi sweet)

  noStroke();

  drawMochi( -50, 0, 60, '#F8E8E9', '#BF4D73'); // main mochi and filling with depth

​

  // Draw sakura-shaped wagashi with shading for depth

  drawSakuraWagashi(50, 0); // add depth to sakura wagashi

​

  // Draw mint green wagashi with depth

  drawMochi(0, -50, 60, '#C3E6D7', '#8FBFAF'); // mint green wagashi with depth

  pop();

}

​

function drawMochi(x, y, size, fillColor, fillInnerColor) {

  // Outer mochi

  fill(fillColor); 

  beginShape();

  for (let i = 0; i < TWO_PI; i += PI / 6) {

    let xOffset = cos(i) * size / 2;

    let yOffset = sin(i) * size / 2;

    vertex(x + xOffset, y + yOffset);

  }

  endShape(CLOSE);

​

  // Inner filling

  fill(fillInnerColor);

  ellipse(x, y, size / 2, size / 2);

​

  // Shading on edges for depth

  fill(200, 150); // semi-transparent darker color for shadow

  beginShape();

  for (let i = 0; i < TWO_PI; i += PI / 6) {

    let xOffset = cos(i) * size / 2;

    let yOffset = sin(i) * size / 2;

    vertex(x + xOffset, y + yOffset);

  }

  endShape(CLOSE);

}

​

function drawSakuraWagashi(x, y) {

  fill('#FBCFCF'); // pastel pink

  beginShape();

  for (let i = 0; i < TWO_PI; i += PI / 3) {

    let xOffset = cos(i) * 30;

    let yOffset = sin(i) * 30;

    vertex(x + xOffset, y + yOffset);

    let xMid = cos(i + PI / 6) * 15;

    let yMid = sin(i + PI / 6) * 15;

    vertex(x + xMid, y + yMid);

  }

  endShape(CLOSE);

  fill('#BF4D73'); // center

  ellipse(x, y, 8, 8);

​

  // Shading to create depth on sakura wagashi

  fill(180, 100); // darker shadow color

  ellipse(x, y + 2, 8, 8); // small shadow below the center for depth

}

​

function drawTeaCup() {

  push();

  translate(250, 600); // Position the cup near the plate

​

  // Draw the cup body (cylindrical shape)

  fill(255); // all white cup, no stroke

  rect(-60, 0, 120, 100); // rectangle representing the cylindrical body

  // Draw the tea surface inside the cup (this replaces the top of the cylinder)

  fill('#A4D08A'); // green tea color

  ellipse(0, 0, 120, 20); // tea surface inside the cup

​

  // Draw the bottom base of the cup (circular bottom)

  fill(255); // white base, same as the cup

  ellipse(0, 100, 120, 0); // circular base with no stroke

  pop();

}

​

​

function drawSmoke() {

  for (let i = smokeParticles.length - 1; i >= 0; i--) {

    let p = smokeParticles[i];

    p.move();

    p.display();

    if (p.isFinished()) {

      smokeParticles.splice(i, 1); // remove the smoke particle if it fades out

    }

  }

​

  // add a new smoke particle occasionally from the spout

  if (frameCount % 10 === 0) {

    smokeParticles.push(new SmokeParticle(520, 385)); // position at the spout

  }

}

​

class SmokeParticle {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.size = random(15, 40); // increased size range for smoke

    this.alpha = 255;

    this.speedY = random(-1, -3); // increased upward speed

    this.drift = random(-1, 1); // wider horizontal drift

  }

​

  move() {

    this.y += this.speedY; // move up

    this.x += this.drift; // drift sideways

    this.alpha -= 3; // fade out faster

  }

​

  display() {

    noStroke();

    fill(255, this.alpha);

    ellipse(this.x, this.y, this.size);

  }

​

  isFinished() {

    return this.alpha <= 0; // check if particle has faded out

  }

}

​

function mousePressed() {

  loop(); // restart smoke animation when clicked

}

​

function mouseReleased() {

  noLoop(); // stop smoke animation when mouse is released

}

​