Exercise 01

Let’s start with something simple…


// lines that begin with two slashes are comments for yourself
// point() draws a pixel on the display

point(50,50);
point(51,50);
point(52,50);
point(53,50);
point(54,50);
point(55,50);

// the first number is the X value (distance from the left border)
// the second number is the Y value (distance from the top border)


// line() draws a line on the display

line(0,0,99,99);

// use the menu Help > Reference to learn more about
// point() and line()

Exercise 02

There are two main functions (blocks of code) commonly used in a P5js sketch: Setup and Draw.

The setup function runs only once and the draw function loops indefinitely.

function setup() {
// create a canvas the size of the browser window
createCanvas(windowWidth, windowHeight);
} // the draw() function is called many times per second // it's very useful for animating objects function draw() { // background function erases the screen with a colour background(255, 204, 0); line(random(100), random(100), random(100), random(100)); }

Exercise 03

We can stop our draw loop by using noLoop() in the setup

// here the draw loop only will run once
// refresh browser window to get new result

function setup() {
createCanvas(windowWidth, windowHeight);
noLoop();
}
function draw() {
// choose a random background color
background(random(255), random(255), random(255));
line(random(width),random(width),random(width),random(width));
}

Exercise 04

Now let’s draw lines from the centre of our sketch but let’s calculate the centre and randomly pick end points for our lines.

// drawing lines from the center of the canvas
// why does the X and Y of second point need to be between 0 and width

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0); // this makes the background black
}
function draw() {
    stroke(random(255)); 
    // start lines in the middle of the screen (width/2, height/2)
    line(width/2, height/2, random(width), random(height));
}

Coordinate System Quiz

For the first sketch:
“A black outlined square with a red horizontal line from the midpoint of the left side toward the middle of the right side.”

For the second sketch:
“A black outlined square with a red diagonal line from the lower left corner toward the upper right corner; and another red line from the lower right corner to the upper left.”

For the third sketch:
“A black outlined square with a red diagonal line centered on the axis between the upper left and lower right corners and another red diagonal line centered on the axis between the lower left and upper right corners.”

For the fourth sketch:
“A black outlined square with a red horizontal line centered on the axis between the midpoint of the left side and the midpoint of the right side and a red diagonal line centered on the axis between the lower left and upper right corners.”

Exercise 05

Now let’s change the stroke colour randomly for each line.

// drawing lines from the center of the canvas
// why does the X and Y of second point need to be between 0 and width

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0); // this makes the background black
}
function draw() {
    stroke(0, 0, random(255)); // R, G, B
    // start lines in the middle of the screen (width/2, height/2)
    line(width/2, height/2, random(width), random(height));
}

Exercise 06

Let's make random horizontal lines

// creating random horizontal lines
 function setup() {
     createCanvas(windowWidth, windowHeight);
     frameRate(12);
 }
 function draw() {
     background(0);
     var lineY = random(height);

     strokeWeight(random(200));
     stroke(random(255),random(50,100));
     line(0,lineY, width,lineY);

 // let's create 4 lines for each Loop
 // next we will do this an easier way

     strokeWeight(random(200));
     stroke(random(255),random(50,100));
     line(0,lineY, width,lineY);

     strokeWeight(random(200));
     stroke(random(255),random(50,100));
     line(0,lineY, width,lineY);

     strokeWeight(random(200));
     stroke(random(255),random(50,100));
     line(0,lineY, width,lineY);
 }
 function mousePressed() {
   noLoop();
 }
 function mouseReleased() {
   loop();
 }


Exercise 07

Now let’s use a For Loop to repeat code instead of writing it multiple times.

The for statement is used to iterate over the elements of a sequence. It’s traditionally used when you have a piece of code which you want to repeat n number of time. The for loop is often distinguished by an explicit loop counter or loop variable.

// creating random horizontal lines

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(12);
}

function draw() {
    background(0);
    var lineY = random(height);
    // using a for loop to create multiple lines

for (i = 0; i <10; i++) {
    strokeWeight(random(400));
    stroke(random(200),random(50,150));
    line(0,lineY, width,lineY);
    }
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}

Exercise 08

// creating random vertical lines
// creating random horizontal lines

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(12);
}

function draw() {
    background(0);
    var lineX = random(width);
    // using a for loop to create multiple lines

for (i = 0; i <10; i++) {
    strokeWeight(random(400));
    stroke(random(200),random(50,150)); // two values in random creates a range
    line(lineX,0, lineX,height);
    }
}

function mousePressed() {
  noLoop();
}

function mouseReleased() {
  loop();
}