Creating your first Processing sketch for the Web

In this first recipe, we'll take a look at the new JAVASCRIPT mode. You'll learn about the differences between the STANDARD and the JAVASCRIPT modes.

Getting ready

The first thing you need to do is switch to JAVASCRIPT mode. You already know how to do this, as you've learned about it a while ago. If you can't remember, go take a look at the Switching modes recipe in Chapter 1, Getting Started with Processing 2.

How to do it...

Once you're in JAVASCRIPT mode, type the following code in the editor. This is just a basic sketch with a line that runs around the screen. You should be able to understand the code.

float x, y;
float prevX, prevY;
  
void setup()
{
  size( 640, 480 );
  smooth();
  background( 0 );
  
  x = random( width );
  y = random( height );
  prevX = x + random( -10, 10 );
  prevY = y + random( -10, 10 );
}
  
void draw()
{
  stroke( random( 192 ) );
  strokeWeight( 1 );
  line( x, y, prevX, prevY );
  
  prevX = x;
  prevY = y;...