User Tools

Site Tools


part_3-_continuous_mode

Processing Tutorial

Part 3: Continuous Mode

When displaying dynamic information where the output changes over time (repainting a drawing, doing animations, plotting time-varying data), you would like to update the screen regularly. Processing provides a second mode, Continuous Mode, for implementing just this kind of behavior. In this mode we can use functions (think of these as static Java methods). Note that in Continuous mode, all of your code has to be in methods; you can't mix Basic and Continuous modes.

Note: There are no access modifiers in Processing - everything is automatically public (unlike the “friendly” default in Java when an access modifier isn't used).

Note: You also don't have to have a main() function. This will be automatically generated.

The two methods you'll want to use first are setup() and draw() (both of which have return type void). The setup() function is the first function called when the sketch is run. Subsequently, draw() will be called repeatedly. For example:

int x=10;

void setup()
{
  size(400,200);
}

void draw()
{ 
   rect(x,10,20,20); 
   x += 10;
}

This examples draws a sequence of overlapping squares, running right off the edge of the window. Try it!

You can stop draw from being called repeatedly by calling noLoop() in setup. The draw function will only be called once, after setup. If you want to call draw again after that, call redraw(). [Note that you can't call draw explicitly anywhere in your sketch].

Not putting in a setup() or draw() function is the same as not putting in a constructor in a Java class - they will be created for you, but they will be empty.

There are other functions provided by Processing, as well, and they can have return types other than void. You can also write your own functions. For example, this sketch makes use of the built-it mousePressed function:

int x=10;

void setup()
{
  size(400,200);
  noLoop();
}

void mousePressed()
{
  rect(x+=10,10,20,20); 
  redraw();
}

void draw()
{ 
   rect(10,10,20,20); 
}

Try this example out as well! The Processing website includes a number of useful examples, replicated here.


Prev: Part 2- Basic Mode | Next: Part 4- Java Mode

part_3-_continuous_mode.txt · Last modified: 2007/09/10 17:03 by scarl