Step 3: Defining your Processing project

Launch Create draw() setup() Run Extras previous step next step

1. Override the draw() method

Now, that you have seen your applet run.  It's time to put something in (on) the applet.  We will start with a rectangle that does not move, and then we'll make it move. 

Some things to note about graphics in Java.  The pixel in the upper left corner has coordinates x=0 and y=0.  The pixel in the lower right corner has coordinates x=width-1 and y=height-1.  Watch for how this affects how you work with a drawing canvas.

empty window with title Applet Viewer

  1. Add a public void draw() method to your MovingRectangle class.  This method will override the draw() method that is inherited from PApplet.
  2. Click in the body of your draw() method and add code to draw a rectangle. 

    3. To draw a rectangle, you need:

    1. coordinates of the upper left corner of the rectangle (x,y)
    2. width of the rectangle in pixels
    3. height of the rectangle in pixels

    Here are some examples.  Try them and your own to see how the coodinate system works.
    rect( 10, 5, 50, 30 ) ;  // draw a rectangle with upper left corner at (10,5).
                             // The rectangle will be 50 pixels wide and 30 pixels high.

    rect( x, y, width, height ) ; // assign values to the variables x,y,width,height first

  3. Run your applet (and stop it when done viewing).
  4. To make the rectangle move, we'll need to change the x and y coordinates on each frame.
    1. Add int variables named x and y. 
    2. Assign a random integer to x and to y before drawing the rectangle.
    3. Add code to keep the random x between 0 and the width of the applet and to keep the random y between 0 and the height of the applet.
      int x = (int) (Math.random()*getWidth());
      int y = (int) (Math.random()*getHeight());
      rect( x, y, 50, 30 ) ;

    4. Run your PApplet. What happened? 
    5. Add a call to background(127) at the start of your draw() method.
    6. Run your PApplet. What happens now?  Can you explain the new behavior?
  5. Add a line of text that displays the values for x, y of the rectangle.  The method call text( "word", x, y ) will place "word" starting at coordinate (x,y).  Note: (x,y) for a text string is the pixel at the lower left baseline of the text string.
  6. Add more rectangles, try to get them to move in controlled directions and "bounce" off the borders of the applet view panel.

Don't forget methods can call other methods. But, be warned that performance (refresh delays and other) will result if you try to do too much processing on each call to the draw() method.

To show figures and text on our applet, we will need to override (redefine) the setup() and draw() methods that we inherited from class PApplet.  Continue with the next steps to get some ideas.

2. Override the setup() method to get things started

Launch Create draw() setup() Run Extras previous step next step

Your PApplet class uses the setup() method for code that must execute when the applet is started. Code in the setup() method executes just once at the start of the applet.  It is kind of like a constructor for applets. Use it to initialize any items (data members) in your applet.  You can also "draw" things here, but they will be drawn over by the draw method.

  1. Add a public void setup() method to your MovingRectangle class.  This method overrides (redefines) the setup() method that is inherited from PApplet.
  2. Click in the body of your newly added setup() method.
  3. Add code to set the size of your applet by calling the size() method with the number of pixels for width and height (in that order). Hint: size() is inherited from class PApplet. Here are some examples:
    size( 100, 50 ) ;  // 100 pixels wide by 5 pixels high
    size( 200, 200 ) ; // 200 x 200 applet viewer canvas
    size( 400, 50 ) ;  // 400 x 50 pixels (looks like a banner -- think text scrolling)

  4. Set the background color by calling the background() method with a value from 0-255.
    background( 0 )   ; // sets background color to black
    background( 255 ) ; // white
    background( 127 ) ; // gray

  5. Run your applet as shown above. Don't forget to close your Applet Viewer each time you start one.
  6. To see some of the other commands (methods you can call), check out this reference page.

Ready, set, draw! (in the next step).

Can you answer these questions?

  1. Where must you declare and initialize x, y, width, height so that they can be changed on each frame refresh?
  2. What happens if x or y is negative or larger than the dimensions of the applet?

  3. What does the fill() method do? Try adding these commands to different places in your draw method to see their affect on the rectangle(s) you draw?
    fill( 255, 127, 0 ) ;
    fill( 255, 0, 0 ) ;
    fill( 0, 255, 0 ) ;
    fill( 0, 0, 255 ) ;

  4. Does the fill() method call go before or after the rect() method call to set the color of the rectangle method?
  5. What does the noStroke() method call do when placed before a rect() method call?
    Tip: try multiple rect() calls to see if it affects one or all rectangles.
  6. What happens if you have more than one rect() method call, or more than one fill() or noStroke() method calls?

Launch Create draw() setup() Run Extras previous step next step


2015 Deb Deppeler