Example
// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 3-6: Interactive Zoog?
void setup() {
  // Set the size of the window
  size(200,200);  
  smooth();
  // The frame rate is set to 30 frames per second.
  frameRate(30);
}

void draw() {
  // Draw a white background
  background(255);  
  
  // Set ellipses and rects to CENTER mode
  ellipseMode(CENTER);
  rectMode(CENTER); 
  
  // Draw Zoog's body
  stroke(0);
  fill(175);
  rect(mouseX,mouseY,20,100);

  // Draw Zoog's head
  stroke(0);
  fill(255);
  ellipse(mouseX,mouseY-30,60,60); 

  // Draw Zoog's eyes
  // The eye color is determined by the mouse location.
  fill(mouseX,0,mouseY); 
  ellipse(mouseX-19,mouseY-30,16,32); 
  ellipse(mouseX+19,mouseY-30,16,32); 

  // Draw Zoog's legs
  stroke(0);
  // The legs are drawn according to the mouse location and the previous mouse location.
  line(mouseX-10,mouseY+50,pmouseX-10,pmouseY+60);
  line(mouseX+10,mouseY+50,pmouseX+10,pmouseY+60);
}

void mousePressed() {
  println("Take me to your leader!"); 
}
  • mm

    It might be a very silly question but I was wondering why in this lines:

    // Draw Zoog’s legs
    stroke(0);
    // The legs are drawn according to the mouse location and the previous mouse location.
    line(mouseX-10,mouseY+50,pmouseX-10,pmouseY+60);
    line(mouseX+10,mouseY+50,pmouseX+10,pmouseY+60);

    pmouseX has the same numerical value as mouseX but pmouseY doesn’t?

  • http://www.learningprocessing.com Daniel Shiffman

    This is just an arbitrary way to draw the legs that makes them longer (vertically) as you move the mouse. But there are plenty of other ways you could draw them!

  • Indu

    Is it possible to use two different interactive inputs? Like mouseX1, mouseY1 and mouseX2, mouseY2?

  • shiffman

    there is only one mouse, but you can make up as may variables as you like!

  • Indu

    So, if I want to use two fingers on say, an interactive touch panel..how do I go about that?

  • shiffman

    you would need to interface with the touch panel itself (using whatever technology it uses to detect the touches).  For example: http://ccv.nuigroup.com/

  • http://twitter.com/akageorgi Georgi

    I started reading this book a week ago, and you can see my first work. I calling it “crazy robot”!

    Thank you Shiffman for your great job!

    void setup(){
    size(400,400);
    smooth();
    frameRate(10);
    }

    void draw(){
    background(255);
    rectMode(CENTER);
    ellipseMode(CENTER);

    //antennas
    stroke(255,0,0);
    line(mouseX-10,mouseY-50,pmouseX-20,pmouseY-70);
    line(mouseX+10,mouseY-50,pmouseX+20,pmouseY-70);
    stroke(0);
    strokeWeight(2);
    point(pmouseX-15,pmouseY-70);
    point(pmouseX-25,pmouseY-70);
    point(pmouseX-20,pmouseY-75);
    point(pmouseX+15,pmouseY-70);
    point(pmouseX+25,pmouseY-70);
    point(pmouseX+20,pmouseY-75);

    //head//
    fill(100);
    noStroke();
    rect(mouseX,mouseY-45,40,30);

    //eyes
    fill(255);
    stroke(0);
    strokeWeight(1);
    ellipse(mouseX-10,mouseY-50,(abs(mouseX-pmouseX)*2),(abs(mouseY-pmouseY)*2));
    ellipse(mouseX+10,mouseY-50,(abs(mouseX-pmouseX)*2),(abs(mouseY-pmouseY)*2));
    fill(mouseX,0,mouseY);
    ellipse(mouseX-10,mouseY-50,10,10);
    ellipse(mouseX+10,mouseY-50,10,10);
    ill(255);
    noStroke();

    //mouth
    ellipse(mouseX+7,mouseY-37,5,5);
    ellipse(mouseX-7,mouseY-37,5,5);
    rect(mouseX,mouseY-37,16,5);
    stroke(1);
    line(mouseX-5,mouseY-40,mouseX-5,mouseY-35);
    line(mouseX,mouseY-40,mouseX,mouseY-35);
    line(mouseX+5,mouseY-40,mouseX+5,mouseY-35);

    //neck
    noStroke();
    fill(80);
    rect(mouseX,mouseY-25,10,10);

    //wheels
    ellipse(mouseX-20,mouseY-20,10,10);
    ellipse(mouseX+20,mouseY-20,10,10);

    //body
    ellipse(mouseX,mouseY+20,30,30);
    fill(100,200);
    rect(mouseX,mouseY,40,40);

    //hands
    stroke(1);
    strokeWeight(1);
    line(mouseX-20,mouseY-20,pmouseX-30,pmouseY+10);
    line(mouseX+20,mouseY-20,pmouseX+30,pmouseY+10);
    noStroke();
    ellipse(pmouseX-30,pmouseY+10,10,10);
    ellipse(pmouseX+30,pmouseY+10,10,10);
    fill(255);
    ellipseMode(CORNER);
    ellipse(pmouseX-35,pmouseY+10,5,5);
    ellipse(pmouseX+30,pmouseY+10,5,5);
    }

    void keyPressed(){
    background(255);
    }

    void mousePressed(){
    println(“Take me to your leader!”);
    }

  • ray

    awesome! btw the ‘fill’ towards the bottom of the ‘eyes’ section is missing the letter ‘f’ for anyone w trouble running the script

  • shiffman

    Thank you!

  • Keith

    Just letting you know, in your code on page 40 of your beginners guide for processing.

    void draw()

    {

    // Draw a black background

    background(255);

    example 3-6 has an error, where the background should state white instead of black

    Thanks

  • Frank Beltrán

    Hi, I started reading the Book and it’s been great.

    I’ve had an issue with my character… When I run it on Java, it seems pretty fine… But when I run it on JavaScript, the hair, made of triangles made by beginShape(TRIANGLES) are gone… missing…

    Does anyone know why this is happening?

    Thanks!

    Frank

    void setup() {
    size(300, 300);
    smooth();
    frameRate(20);
    }

    void draw() {
    background(255);
    rectMode(CENTER);
    ellipseMode(CENTER);

    //head
    fill(0, 150, 0);
    rect(mouseX, mouseY-60, 50, 100);
    //hair

    fill(0);
    noStroke();
    beginShape(TRIANGLES);

    vertex(mouseX-25, mouseY-110);
    vertex(pmouseX-30, pmouseY-100);
    vertex(mouseX-15, mouseY-110);

    vertex(mouseX-15, mouseY-110);
    vertex(pmouseX-20, pmouseY-100);
    vertex(mouseX-5, mouseY-110);

    vertex(mouseX-5, mouseY-110);
    vertex(pmouseX-10, pmouseY-100);
    vertex(mouseX+5, mouseY-110);

    vertex(mouseX+5, mouseY-110);
    vertex(pmouseX, pmouseY-100);
    vertex(mouseX+15, mouseY-110);

    vertex(mouseX+15, mouseY-110);
    vertex(pmouseX+10, pmouseY-100);
    vertex(mouseX+25, mouseY-110);

    //mouth
    fill(255, 0, 0);
    stroke(0);
    ellipse(mouseX, mouseY-30, 10+(abs(mouseY-pmouseY)*3), 5+(abs(mouseX-pmouseX)*3));

    // bumbpy eyes
    fill(255);

    ellipse(mouseX-15, mouseY-50, 10+(abs(mouseX-pmouseX)*2), 10+(abs(mouseY-pmouseY)*2));
    ellipse(mouseX+15, mouseY-50, 10+(abs(mouseX-pmouseX)*2), 10+(abs(mouseY-pmouseY)*2));

    //eyes
    fill(mouseX, 0, mouseY);
    ellipse(mouseX-15, mouseY-50, 3, 3);
    ellipse(mouseX+15, mouseY-50, 3, 3);

    //torso
    fill(230, 168, 5);
    rect(mouseX, mouseY+5, 25, 30);

    //tie
    fill(0);
    triangle(mouseX-3, mouseY-10, mouseX+3, mouseY-10, mouseX, mouseY-2);

    beginShape();

    vertex(mouseX, mouseY-2);
    vertex(pmouseX-3, pmouseY+5);
    vertex(pmouseX, pmouseY+12);
    vertex(pmouseX+3, pmouseY+5);
    endShape(CLOSE);

    //HANDS
    line(mouseX-12.5, mouseY-10, pmouseX-27, pmouseY+12);
    line(mouseX+12.5, mouseY-10, pmouseX+27, pmouseY+12);

    fill(0, 150, 0);
    ellipse(pmouseX-27, pmouseY+12, 4, 4);
    ellipse(pmouseX+27, pmouseY+12, 4, 4);

    //legs
    line(mouseX-5, mouseY+20, pmouseX-5, pmouseY+40);
    line(mouseX+5, mouseY+20, pmouseX+5, pmouseY+40);

    fill(200,0,0);
    ellipse(pmouseX-9,pmouseY+40,12,7);
    ellipse(pmouseX+9,pmouseY+40,12,7);

    }