Jana's Office Hour Code

sketch.hs

var sugarParticles = [];

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(168, 255, 255);

  //Table 
  fill(200, 150, 130);
  noStroke();
  rect(0, 310, 600, 100)

  //Coffee Cup 
  noStroke()
  fill(200, 50, 100)
  rect(200, 180, 200, 200, 10, 10, 40, 40)
  stroke(200, 50, 100);
  strokeWeight(20)
  noFill()
  bezier(210, 320, 100, 310, 180, 200, 210, 250);
  fill(90, 39, 41)
  stroke(200, 50, 100)
  ellipse(300, 190, 180, 100)

  //Sugar Button
  fill(24, 61, 97);
  noStroke();
  rect(260, 0, 90, 50)
  fill(255);
  textSize(20);
  text('SUGAR', 270, 30);
  
  // Draw sugar particles
  for (var i = 0; i < sugarParticles.length; i++) {
    sugarParticles[i].update();
    sugarParticles[i].show(); 
  }
}

function mouseClicked() {
  console.log(mouseX, mouseY)
  if (mouseX > 260 && mouseX < 350 && mouseY > 0 && mouseY < 50) {
    console.log('mouse clicked inside sugar button')
    sugarParticles.push(new SugarParticle(280, 65))
    sugarParticles.push(new SugarParticle(290, 65))
    sugarParticles.push(new SugarParticle(300, 65))
    sugarParticles.push(new SugarParticle(310, 65))
    sugarParticles.push(new SugarParticle(320, 65))
  } else {
    console.log('mouse clicked outside sugar button')
  }
}

class SugarParticle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.gravity = 1;
    this.size = 5;
  }
  
  update() {
    this.y += this.gravity;
    if(this.y > 190) {
      this.y = 10000;
    }
  }
  
  show() {
    fill(255)
    circle(this.x, this.y, this.size)
  }
}