assignment 01 week 01

let steamParticles = [];

​

function setup() {

    createCanvas(500, 500);

    // Generate initial steam particles above the cup

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

        steamParticles.push(new Steam(random(275, 325), random(220, 260)));

    }

}

​

function draw() {

    background(220);

​

    // Draw coffee jar with text

    drawCoffeeJar(100, 150, 120, 180);

​

    // Draw coffee cup

    drawCoffeeCup(250, 300, 100, 80);

​

    // Draw animated steam above the cup

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

        steamParticles[i].update();

        steamParticles[i].display();

        if (steamParticles[i].isOffScreen()) {

            steamParticles.splice(i, 1);

            steamParticles.push(new Steam(random(275, 325), random(220, 260))); // Ensure steam is directly above the cup

        }

    }

}

​

// Function to draw a coffee jar with text

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

    // Jar outline

    fill(150, 100, 50);

    stroke(100);

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

​

    // Coffee inside

    fill(90, 50, 20);

    noStroke();

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

​

    // Lid

    fill(80);

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

​

    // "COFFEE" Text

    fill(255);

    textSize(20);

    textStyle(BOLD);

    textAlign(CENTER, CENTER);

    text("COFFEE", x + w / 2, y + h / 2 - 20);

}

​

// Function to draw a coffee cup

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

    // Cup body

    fill(230);

    stroke(150);

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

​

    // Coffee inside cup

    fill(90, 50, 20);

    noStroke();

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

​

    // Handle

    noFill();

    stroke(150);

    strokeWeight(4);

    arc(x + w - 5, y + h / 2, 30, 30, -HALF_PI, HALF_PI);

}

​

// Steam class for animated steam directly above the cup

class Steam {

    constructor(x, y) {

        this.x = x;

        this.y = y;

        this.alpha = 255;

        this.noiseOffset = random(1000);

    }

​

    update() {

        this.y -= 1; // Move upward

        this.x += sin(this.noiseOffset) * 0.5; // Small horizontal wiggle

        this.alpha -= 2; // Gradually fade out

        this.noiseOffset += 0.1;

    }

​

    display() {

        noFill();

        stroke(255, this.alpha);

        ellipse(this.x, this.y, 10, 15);

    }

​

    isOffScreen() {

        return this.alpha <= 0;

    }

}

​