Click the mouse to draw a rectangle. Hit the space bar to clear the window.

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

// Example 3-5: mousePressed and keyPressed
void setup() {
  size(200,200);
  background(255);
}

void draw() {
 // Nothing happens in draw() in this example!
}

// Whenever a user clicks the mouse the code written inside mousePressed() is executed.
void mousePressed() {
  stroke(0);
  fill(175);
  rectMode(CENTER);
  rect(mouseX,mouseY,16,16);
}

// Whenever a user presses a key the code written inside keyPressed() is executed.
void keyPressed() {
  background(255);
}
  • fabrice

    Hi,

    Open the sketch above in a tab of a browser. Open an other tab and return to sketch. I noticed that when you press a key, nothing happens. You must click in the sketch and it works. Please do you know if it’s possible to avoid that ?
    Thanks.

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

    Unfortunately, this is just the way applets in web browsers work, they need to be selected in order to have \focus\.

  • iceblaze

    ■Hi,

    Snce nothing happens in draw() in this example, why need \draw() { }\?
    Thanks.

  • iceblaze

    I have a new question.draw() { } move to end of the program, it still working. Why?
    Thanks.

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

    Generally, you still need to have draw() so that the window updates. The order of the functions, setup(), draw(), mousePressed(), etc. does not matter.

  • Donald clark

    Hi guys been studying this for a week now im starting feel like secret knowledge of the scribes is pouring through
    one question this monk has is “keyPressed” function,it appears to do nothing from what i’ve noticed!
    whats going on with this, for instance adding code or leaving the the function exempt from code makes no difference in functionality for me ?

  • Donald clark

    also i notice if i add code of the strokeWieght abs example in the draw function the rectangles in the mousePressed function are rendered with the same fill as the draw function leaving fill in the ,mousePressed function non functional

    my code is as follows

    void setup(){

    size (1080,724);

    background(255);

    smooth(200);

    }

    void draw() {

    // declares stroke colour gradient

    stroke(mouseX+#9B1B0C,mouseY+#0B84B9);

    /* declares line in context of x,y coordinates following the mouses current

    and previous location.*/

    line(pmouseX,pmouseY,mouseX,mouseY);

    /* determines the speed of the mouse using

    absoloute value of the stroke wight across x and y coordinates*/

    strokeWeight(abs(mouseX+8-pmouseX+6));

    strokeWeight(abs(mouseY+5-pmouseY+7));

    }

    //allows mouse click to render a rectangle

    void mousePressed() {

    stroke(0);

    fill(255);

    rectMode(CENTER);

    rect(mouseX,mouseY,16,16);

    println(“just because i can lol”);

    }

    void KeyPressed() {

    }

  • Processing Dummy

    hi, does anyone know how to do “reset” code by the keyPressed function?
    thanks a lot

  • Processor

    Another way of doing this:

    void draw() {
    a();
    }

    void a() {
    stroke(0);
    fill(175);
    rectMode(CENTER);
    rect(mouseX,mouseY,16,16);
    }

    But the example given seems more direct and thus more efficient.

  • Darth93

    does anyone know how you would go about doing this for a triangle? I can’t seem to find any examples in the book and when I tried doing it several ways of my own it still didn’t work.

  • Darth93

    this is my triangle:
    triangle(230,200,215,210,215,190);

    I want it to be mouseX-20,mouseY-20

  • shiffman

    you’ll want to make each point of the triangle relative to the mouse, i.e.

    triangle(mouseX-___,mouseY-___,mouseX-___,mouseY+____, etc.)

  • Maria Kiniaris

    Hey, i hope someone can help me. I am trying to put some code together for this sequence; when a certain key is pressed a certain shape appears. For example, when the space bar is pressed a circle appears. Please can someone help me out! Thank you!

  • Maria Kiniaris

    Hey, i hope you can help me. I am trying to put some code together for this sequence; when a certain key is pressed a certain shape appears. For example, when the space bar is pressed a circle appears. Please can someone help me out! Thank you!

  • mahii

    I want to color and hold the color in an ellipse or a specific area by clicking the mouse on that particular area. is there a way to do this ? i am currently using this code which colors it till i have pressed the mouse :

    PImage img;

    void setup() {

    size(displayWidth, displayHeight);

    img = loadImage(“foots.png”); //Load the image into the program

    }

    void draw() {

    image(img, 0, 0);

    stroke(0);

    fill(0);

    ellipse(439,187,20,20);

    if (mousePressed)

    {

    stroke(0);

    fill(255,0,0);

    beginShape();

    curveVertex(360,140);

    curveVertex(399,135);

    curveVertex(442,134);

    curveVertex(478,146);

    curveVertex(516,163);

    curveVertex(536,193);

    curveVertex(523,229);

    curveVertex(494,240);

    curveVertex(493,240);

    curveVertex(462,244);

    curveVertex(462,245);

    curveVertex(424,242);

    curveVertex(394,235);

    curveVertex(361,218);

    curveVertex(354,182);

    endShape();

    }

    }

  • Claudia

    Hi!!! I’m trying to create a ball floating around and whenever the mouse clicks, the colour increases, can I please have some help???

  • Claudia

    Here’s the screenshot