Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* PROG14998 Interactive Drawing
"Steeping Tea", by Avery "Ace" Bellikka
Submitted September 22 2016

Drawing of a little tea mug sitting on a table with steam floating above.
The user may scrub the mouse up/down to dip the teabag in the tea.
*/



void setup() {
  size(400,400);
  noStroke();
}

void draw() {
  rectMode(CORNERS);
  ellipseMode(CORNERS);
  
//background image
  background(#C69CC6);

  //table surface
  fill(#957A5E);
  noStroke();
  rect(0,300,400,400);
  
//window elements
  //window glass
  fill(#B8ECFA);
  stroke(#E0C38C);
  strokeWeight(4);
  rect(200,40,360,200);
  
//sun seen through window
  fill(#F8FF95,255);
  stroke(#FFFFFF);
  strokeWeight(2);
  ellipse(310,70,330,90);
  fill(#F8FF95,100);
  noStroke();
  ellipse(300,60,340,100);
  
  //window panes
  stroke(#E0C38C);
  strokeWeight(4);
  line(280,40,280,200);
  line(200,120,360,120);
  
//steam
  //left steam
  noFill();
  stroke(#ffffff,200);
  strokeWeight(3);
  //sin+frameCount makes the steam float up and down in the air
  arc(100,40+sin(frameCount*0.03)*7,140,80+sin(frameCount*0.03)*7,HALF_PI,TWO_PI-HALF_PI);
  arc(100,80+sin(frameCount*0.03)*7,140,120+sin(frameCount*0.03)*7,PI+HALF_PI,QUARTER_PI+TWO_PI);
  
  //right steam
  noFill();
  stroke(#ffffff,200);
  strokeWeight(3);
  arc(220,80+sin(frameCount*0.03)*7,260,120+sin(frameCount*0.03)*7,HALF_PI,TWO_PI-HALF_PI);
  arc(220,120+sin(frameCount*0.03)*7,260,160+sin(frameCount*0.03)*7,PI+HALF_PI,QUARTER_PI+TWO_PI);
  
//shadow
  fill(#675C51,200);
  noStroke();
  ellipse(20,320,250,380);
  
//tea mug
  //mug base
  noStroke();
  fill(#54CBC1);
  quad(110,320,250,320,240,350,120,350);
  ellipse(120,340,240,360);
  
  //main part of mug
  fill(#54CBC1);
  ellipse(80,160,280,200);
  quad(80,180,280,180,260,320,100,320);
  ellipse(100,300,260,340);
  
  //handle
  noFill();
  stroke(#54CBC1);
  strokeWeight(10);
  ellipse(240,200,320,300);
  
//tea bag  
  //back part of tea bag
  fill(#ffffff,255);
  noStroke();
  //mouseY/3 limits teabag's movement with the cursor
  quad(160,80+mouseY/3,200,80+mouseY/3,220,150+mouseY/3,140,150+mouseY/3);
  
  //tea grounds
  fill(#8E4C0A);
  noStroke();
  quad(160,120+mouseY/3,200,120+mouseY/3,210,140+mouseY/3,150,140+mouseY/3);
  ellipse(160,110+mouseY/3,200,130+mouseY/3);
  
  //string
  stroke(#E3D4BE,255);
  strokeWeight(2);
  line(180,30+mouseY/3,180,80+mouseY/3);

  //front part of tea bag
  fill(#ffffff,200);
  noStroke();
  quad(160,80+mouseY/3,200,80+mouseY/3,220,150+mouseY/3,140,150+mouseY/3);
  
  //staple
  stroke(#CECECE,255);
  strokeWeight(1);
  line(170,90+mouseY/3,190,90+mouseY/3);
  
  //tag part of bag
  fill(#2D6C0C);
  noStroke();
  triangle(170,20+mouseY/3,190,20+mouseY/3,180,30+mouseY/3);
  rect(170,0+mouseY/3,190,20+mouseY/3);

  //actual tea in the mug
  fill(#54CBC1);
  quad(80,180,280,180,260,320,100,320);
  
  fill(#8E4C0A,mouseY*0.8);
  ellipse(100,170,260,200);
  
}