Week 4 : Function and object

This week, I have tried using function to draw complex design with multiples time with different inputs.

The ramen and bowl’s height could be input different arguments and possibilities, and I also reorganize the function in a cleaner look. Additionally, I have establish the “dice-rolling” function into a random seating number. I wanted to make a button with mouseClicked(), then could refresh the button color and the text with random numbers. However, there would be errors in misplacement of the text. I am also confused of how to use the createGraphics(). So I wonder if we could make a function in a function.

http://alpha.editor.p5js.org/ellacyt/sketches/Bk8LxyG3-

function setup() { 
  createCanvas(600, 400);
  ellipseMode(RADIUS);

  display();
  
  fill(255);
  text("Your waiting number for...", 10, 20);
  waitNumber(100,20);
  text("Next!", 10, 60);

} 

function draw() { 


  //ramen
  drawNoodles(50,50,0,40);
  drawNoodles(80,50,50,30);
  drawNoodles(100,10,40,20);
  drawNoodles(110,-30,40,40);
  
}

function display(){ //background
  background(153,0,0);
  noStroke();
  fill(204,0,0);
  ellipse(420,200,400);
  
}

function drawNoodles (x,y,bowlHeight,noodleHeight){ //ramen
  
  let radius = 30;
  let ny = y - bowlHeight - noodleHeight - radius;
  
  //chopstick
  translate(x,y);
  stroke(230,115,0);
  strokeWeight(4);
  line(x+4,y,x+70,y-10);
	line(x+6,y+10,x+70,y+20);

  //noodles
  stroke(255,230,128);
  strokeWeight(3);
  line(x+20,y,x+20,y+80+noodleHeight);
	line(x+30,y-4,x+30,y+150+noodleHeight);
  line(x+40,y-5,x+40,y+50+noodleHeight);
  line(x+50,y-6,x+50,y+159+noodleHeight);
  noFill();
  
  //bowl
  fill(255);
  noStroke();
  ellipse(x+35,y+190,33,20);
  fill(255);
  noStroke();
	rect(x,y+190,70,ny);
  stroke(204,0,0);
  line(x,y+190,x+75,y+190);

}

function waitNumber(numSides,y){
  var d = 1 + int(random(numSides));
  text("1 - 4 people..." + d, 10, y+20);
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top