let steamParticles = [];

let numSteamParticles = 30;

​

function setup() {

  createCanvas(800, 600);

  // Initialize steam particles with random positions and properties

  for (let i = 0; i < numSteamParticles; i++) {

    steamParticles.push(createSteamParticle());

  }

}

​

function draw() {

  // Draw the main scene

  drawClinicBackground();

  drawTreatmentBed();

  drawPatient();

  drawSteam();

}

​

​

// 1. BACKGROUND (Wall Gradient, Window, Furniture, etc.)

​

function drawClinicBackground() {

  // Draw a gradient wall from top to bottom

  drawWallGradient(color(235, 245, 250), color(210, 225, 235), 0, 0, width, height * 0.7);

​

  // Draw floor (simple rectangle)

  noStroke();

  fill(220, 230, 235);

  rect(0, height * 0.7, width, height * 0.3);

​

  // Window with a simple scenic gradient

  drawWindow(70, 100, 180, 130);

​

  // Poster on the wall

  fill(255);

  rect(300, 50, 110, 150, 5);

  fill(160, 190, 200);

  textSize(16);

  textAlign(CENTER, CENTER);

  text("SKIN CARE", 300 + 55, 125);

​

  // A small side table near the window

  drawSideTable(width - 200, height * 0.5 - 10, 70, 100);

​

  // Potted plant in the corner

  drawPottedPlant(100, height * 0.65 + 10, 40, 60);

​

  // A background cabinet on the right

  fill(190, 205, 210);

  rect(width - 150, height * 0.3, 130, 200, 10);

​

  // A lamp or overhead light fixture

  fill(240);

  ellipse(width / 2, 60, 120, 40);

  fill(200);

  rect(width / 2 - 5, 0, 10, 40);

}

​

// A helper function to draw a vertical gradient for the wall

function drawWallGradient(topColor, bottomColor, x, y, w, h) {

  noFill();

  for (let i = y; i <= y + h; i++) {

    let inter = map(i, y, y + h, 0, 1);

    let c = lerpColor(topColor, bottomColor, inter);

    stroke(c);

    line(x, i, x + w, i);

  }

}

​

// Draw a simple window with a subtle scenic gradient (sky + hint of land)

function drawWindow(x, y, w, h) {

  // Window frame

  fill(180, 190, 195);

  rect(x, y, w, h, 5);

​

  // Interior (the "view" outside)

  noStroke();

  // create a sky to land gradient

  for (let i = 0; i < h; i++) {

    let inter = map(i, 0, h, 0, 1);

    let skyColor = lerpColor(color(150, 200, 255), color(100, 180, 220), inter);

    fill(skyColor);

    rect(x + 5, y + 5 + i, w - 10, 1);

  }

​

  // A simple "mountain/hill" shape

  fill(140, 180, 160);

  beginShape();

  vertex(x + 5, y + h - 20);

  vertex(x + w / 3, y + h - 40);

  vertex(x + (2 * w) / 3, y + h - 10);

  vertex(x + w - 5, y + h - 20);

  vertex(x + w - 5, y + h - 5);

  vertex(x + 5, y + h - 5);

  endShape(CLOSE);

}

​

// A small side table with a few "skincare product" bottles on top

function drawSideTable(x, y, w, h) {

  // Table body

  fill(175);

  rect(x, y, w, h, 5);

​

  // Table top

  fill(160);

  rect(x - 5, y - 10, w + 10, 10, 5);

​

  // Draw some product bottles

  fill(220, 150, 150);

  rect(x + 10, y - 20, 10, 20, 3);

​

  fill(180, 220, 170);

  rect(x + 25, y - 30, 12, 30, 3);

​

  fill(170, 180, 220);

  rect(x + 40, y - 25, 10, 25, 3);

}

​

// A potted plant for decoration

function drawPottedPlant(x, y, potWidth, potHeight) {

  // Pot

  fill(180, 120, 80);

  rect(x, y, potWidth, potHeight, 5);

​

  // Plant leaves (simple arcs and ellipses)

  fill(100, 180, 100);

  ellipse(x + potWidth / 2, y - 10, potWidth * 1.2, potWidth);

  ellipse(x + potWidth / 2 - 10, y - 30, potWidth, potWidth * 1.2);

  ellipse(x + potWidth / 2 + 10, y - 30, potWidth, potWidth * 1.2);

}

​

//-----------------------------------------------------------

// 2. TREATMENT BED & PATIENT

//-----------------------------------------------------------

​

function drawTreatmentBed() {

  // Bed base

  fill(220);

  stroke(180);

  strokeWeight(2);

  rect(width / 2 - 200, height / 2, 400, 120, 20);

  // Pillow

  noStroke();

  fill(245);

  rect(width / 2 - 150, height / 2 - 20, 300, 40, 20);

}

​

function drawPatient() {

  // Torso

  fill(255, 224, 189); // skin tone

  noStroke();

  beginShape();

    vertex(width / 2 - 70, height / 2 + 40);

    vertex(width / 2 + 70, height / 2 + 40);

    vertex(width / 2 + 90, height / 2 + 120);

    vertex(width / 2 - 90, height / 2 + 120);

  endShape(CLOSE);

  // Neck

  rect(width / 2 - 30, height / 2 + 20, 60, 20);

  // Head (ellipse for simplicity)

  fill(255, 224, 189);

  ellipse(width / 2, height / 2 - 20, 100, 120);

  // Hair (simple arc)

  fill(100, 70, 50);

  arc(width / 2, height / 2 - 50, 120, 100, PI, 0);

  // Facial features

  fill(80, 40, 40); // eyes

  ellipse(width / 2 - 20, height / 2 - 25, 10, 5);

  ellipse(width / 2 + 20, height / 2 - 25, 10, 5);

  // Mouth

  fill(220, 120, 120);

  arc(width / 2, height / 2, 30, 20, 0, PI);

  // Spa mask overlay (optional, semi-transparent)

  fill(180, 255, 200, 100); // soft green with some transparency

  ellipse(width / 2, height / 2 - 20, 92, 110);

}

​

//-----------------------------------------------------------

// 3. STEAM / AROMA ANIMATION

//-----------------------------------------------------------

​

function createSteamParticle() {

  return {

    x: random(width / 2 - 50, width / 2 + 50),

    y: random(height / 2 - 10, height / 2 + 30),

    size: random(10, 20),

    speed: random(0.1, 0.4),

    alpha: random(100, 150)

  };

}

​

function drawSteam() {

  // Draw and update each steam particle

  noStroke();

  for (let i = 0; i < steamParticles.length; i++) {

    let p = steamParticles[i];

    fill(255, 255, 255, p.alpha);

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

    // Move the particle upwards

    p.y -= p.speed;

    // Small horizontal "drift"

    p.x += map(noise(p.y * 0.01, p.x * 0.01), 0, 1, -0.2, 0.2);

    // Gradually fade out

    p.alpha -= 0.2;

    // Reset the particle when it goes out of range

    if (p.y < height / 2 - 80 || p.alpha < 0) {

      steamParticles[i] = createSteamParticle();

      steamParticles[i].y = height / 2 + random(0, 30);

      steamParticles[i].alpha = random(100, 150);

    }

  }

}

​