2a – Worked examples

Example 1: Basic face

//SHAPES, LINES, POINTS
//processing will only run through void setup when the sketch is compiled
//so we ususally only put things here that don't need to change -> initial conditions.
//Things like size of the screen, sometimes the background.
void setup() {
 
  size(400, 400); //change the size of the screen
  background(255, 255, 255); //color background
  smooth(); // smooths out curves
}
 
//processing loops through void draw continuously
void draw() {
  //hair
  fill(240, 50, 240); //the fill will color interiors of shapes below, remember fill(R,G,B)
  ellipse(200, 180, 260, 320); //ellipse(x,y,w,h);
 
  //ears
  fill(200, 50, 100);
  ellipse(100, 200, 50, 50);
  ellipse(300, 200, 50, 50);
 
  fill(200, 50, 100);
  //neck
  rectMode(CENTER); //repositions index point the the center of the rectangle
  rect(width/2, 350, 50, 200);
 
  //face
  ellipse(200, 200, 200, 300);
 
  //fringe
  noStroke();
  fill(240, 50, 240);
 
  //rect(110,90,180,60);
  stroke(0);
 
  //eyes
  fill(0, 0, 200);
  ellipse(150, 200, 20, 20);
  ellipse(250, 200, 20, 20);
 
  //mouth
  fill(255, 0, 0);
  noStroke();
  ellipse(width/2-10, 300, 25, 50);
  ellipse(width/2+10, 300, 25, 50);
 
  stroke(0);
  line(150, 300, 250, 300);
 
  //nose
  line(width/2, 200, width/2, 250);
 
  //eyebrows
  line(150, 180, 180, 190);
  line(220, 190, 250, 180);
 
  //PRINT OUT MOUSE COORINATES SO YOU CAN SEE PIXEL VALUES
  //AT THE MOUSE POSITION AROUND THE SCREEN
  //this will help you place shapes
 
  println("X position="+mouseX); //prints mouse X location to consol for every loop of draw
  //the inverted commas contain a string data type - aka a word.
  //the plus then tacks on the value of mouseX (the pixel value) so we can read it
 
  println("Y position="+mouseY); //prints mouseY location to console
}
'+
1
'+
2 - 3
4 - 5
6 - 7
8 - 9
10 - 11
12 - 13
13 - 14
[x]