Intro to P5

P5 is an open source programming environment and community that can be found at https://p5js.org/.

Homework until next time: Using 2D-shapes, draw some graphics and have them change somehow. For example, use a variable to change the value of color, size, position, movement. Send me URLs to the result.

We learned to draw 2D stuff with code like this:

function setup() {   //This is where we prepare stuff
      createCanvas(400, 400);   //size of canvas
      background(0);    //color of background
      fill(200);        //color filled areas
      stroke(255,0,0);  //color of lines 
}

function draw() { //This is where the magic happens
      rect(70,70,100,100); //draw a rectangle
}

To keep track of the X-coordinate of the rectangle we used a variable:

let Joe; //creating and naming a variable

void setup()
{
    createCanvas(400,400);
    Joe = 10;
}

void draw()
{
    background(0);  //redraw the background
    Joe = Joe + 1;  //increase the value in Joe with 1
    rect(Joe, 70, 100, 100); //drawing the rectangle using the variable as X-coordinate
}

We got introduced to IF-statements to make changes when circumstances are met:

 if(Joe > 400) //If variable is more than 400
 {
    Joe = 0;  //we set variable back to 0
 }

We also tried out the for-loop for stuff that gets repeated a number of times:

for (let i=0; i<5; i++) //the following will happen 5 times
 {
  rect(55*i, 55, 50, 50); 
  //you can use the counter variable i, if you want to
 }

The confusion about random():
random by default gives a decimal number between 0 and 1, which is why we hardly saw any changes during class when we used it with color. A better way to use it for our purposes is to give random two numbers and we will get a value between them. Like “random(0,255);”. We will still get decimal values (such as 125.2, 50.4, etc), but because javascript is so forgiving we can shove that value into a command that expects a regular number, and it will be rounded off. Such as below.

    color1 = random(0,255);
    color2 = random(0,255);
    color3 = random(0,255);
    fill(color1, color2, color3);

  System variables we talked about:
  mouseX: contains the X-coordinate of the pointer as a number
  mouseY: contains the Y-coordinate of the pointer as a number
  keyIsPressed: contains true or false depending on if a key 
  is pressed.
  
  The last can be used with an IF-statement like this:
  if(keyIsPressed==true){...
 
  Other useful system variables:
  width: contains the width of your sketch as a number
  height: contains the height of your sketch as a number
  displayWidth: contains the width of your whole screen
  displayHeight: contains the height of your whole screen

  Commands we used:
  point();   //draw point
  line();    //draw line
  rect();    //draw rectangle
 
  print();      //print out the content of a variable or text
  random();     //gives you a random number
  noCursor();   //hides the mousepointer
  background(); //draws background with specified color
  fill();       //sets color for shape areas
  stroke();     //sets color of lines and frames
  noFill(); noStroke(); //stops using fill and stroke

  The command saveFrames() can be used to save a sequence of frames
  if one wants to make a video.

For the full info of the use of these commands I encourage you to look up the commands in the reference part of the P5 site.