1. Basics and visuals


Content

P5

Fig. – Entwicklungslinie von Processing

Newest member of the Processing family is P5.js. It`s an adaption of Processing for JavaScript, it can be run in Browsers.

1. Setup

Local editors (OSX/Windows/Linux): Sublime Text or Visual Studio Code

P5 online Editor



1. Basic stragedies

function setup() {
      createCanvas(690, 300);
      background(255);
      fill(0);
      noStroke();
    }
    
    function draw() {
      ellipse(mouseX, mouseY, 4, 4);
    }
      
  


RGB-056-006-080-823-715 (Casey Reas, 2015)

function setup() {
      createCanvas(690, 300);
      background(255);
      fill(0);
      colorMode(HSB);
      noStroke();
    }
    
    function draw() {
      fill(random(150,255),100,200,0.1);
      ellipse(mouseX, mouseY, 50, 50);
    }
      
  


ellipse, rect, rectMode, stroke, strokeWeight, fill, color, colorMode, text, textFont, textAlign, loadImage


      function setup() {
        createCanvas(690, 400);
        background(255);
        text("Use mouse to draw.", 10, 30);
        text("Press any key to erase.", 10, 50);
      }
      
      function draw() {
        
        if(mouseIsPressed){
         if(mouseButton == LEFT){
            strokeWeight(random (1,10));
            line(pmouseX, pmouseY, mouseX, mouseY);
         }
          
         if(mouseButton == RIGHT){
           background(200);
         }
        }
      }
      
      function keyPressed(){
         background(255); 
         text("Use mouse to draw.", 10, 30);
         text("Press any key to erase.", 10, 50);
      }
  

Exercise
Rewrite the sketch in a way that the "brush" draws a colorful scattered line.



9. Variables

A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript : local variable and global variable. There are some rules while declaring a JavaScript variable (also known as identifiers). Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.



var price1 = 5;
var price2 = 6;
var total = price1 + price2;
  

Declaring Variables


var bikeName;
  

Assigning Variables


bikeName = "Puch";
var carName = "Volvo";
  

10. Looping / recursion

Der Wirklichkeitsschaum (Eno Henze, 2007)


step = 50;
      c = 0;
      
      function setup() {
        amount = 1000;
        createCanvas(690, 300);
        frameRate(6);
        colorMode(HSB);
        stroke(255);
      }
      
      
      function draw() {
        for(var yr = 0; yr < height; yr += step){
          for(var xr = 0; xr < width; xr += step){
           var randomHue = random(40);
           fill(randomHue,255,255);
           rect(xr,yr,step,step);
         }
        }
      }


11. Branching

if … then


var xBall,yBall;
var xSpeed, ySpeed;

function setup() {
  createCanvas(400, 400);
  xBall = width/2;
  yBall = height/2;
  xSpeed = 3;
  ySpeed = 4;
  fill(0);
}

function draw() {
  background(255);
  xBall += xSpeed;
  yBall += ySpeed;
  if(xBall>width){
     xSpeed = -xSpeed; 
  }
  if(yBall>height){
     ySpeed = -ySpeed; 
  }
  if(xBall<0){
     xSpeed = -xSpeed; 
  }
  if(yBall<0){
     ySpeed = -ySpeed; 
  }
  ellipse(xBall,yBall,10,10);
}
  

switch



12. Randomness

random()


      var amount;

      function setup() {
        amount = 1000;
        createCanvas(690, 400);
        background(255);
        noFill();
      
      }
      
      function draw() {
        amount = amount + 10;
        background(255);
        for (var i = 0; i < width; i = i + 20) {
          stroke(0, 100);
          noFill();
          ellipse(width / 2, 200, i, random(10) / random(1));
          fill(0);
          ellipse(i, random(height), 3, 3);
        }
      }

  


Perlin Noise


  let yoff = 3;
  let nx, ny, lastx, lasty;
  
  function setup(){
    createCanvas(600,400);
    nx = noise(xoff) * width;
    ny = noise(yoff) * height;
    lastx = nx;
    lasty = ny;
  }
  
  function draw() {
    //background(204);
    xoff = xoff + 0.01;
    yoff = yoff + 0.1;
    
    nx = noise(xoff) * width;
    ny = noise(yoff) * height;
    line(lastx, lasty, nx, ny);
    ellipse(nx, ny, 3, 3);
    lastx = nx;
    lasty = ny;
  }

  


13. Functions

Get keyboard input



  


Using a custom function to make the point move independently

Example: Snake Game


      var xPos = 200;
      var yPos = 200;
      var xSpeed = 0;
      var ySpeed = 0;
      
      function setup() {
        createCanvas(600, 400);
        frameRate(10);
        background(0);
        fill(255,50);
      }
      
      function draw() {
      //background(0);            // just one point
        rect(xPos, yPos, 10,10);
        //walker();               // autonomous walker
        move();
      }
      
      function keyPressed(){
        if(key == "a"){
           turnLeft();
        }
        if(key == "s"){
          turnRight();
        }
        
        if(key == "w"){
          turnUp();
        }
        if(key == "y"){
          turnDown();
        }
        
      }
      
      function move(){
        xPos += xSpeed;
        yPos += ySpeed;
      }
      
      function turnLeft(){
         xSpeed = -10;
         ySpeed = 0;
      }
      
      function turnRight(){
         xSpeed = 10;
         ySpeed = 0;
      }
      
      function turnUp(){
         xSpeed = 0;
         ySpeed = -10;
      }
      
      function turnDown(){
         xSpeed = 0;
         ySpeed = 10;
      }
      
      function walker(){
       var r = random(-0.5,3.5);
       r = round(r);
       if (r==0){turnLeft()}
       if (r==1){turnRight()}
       if (r==2){turnUp()}
       if (r==3){turnDown()}
      }
  

Example: Autonomous agents

https://en.wikipedia.org/wiki/Autonomous_agent

s

Exercise
Rewrite the snake sketch in a way that the "snake" stops at the edge of the window and the last rectangle turns red.



Custom function with return value

Example: Breakout Game


      var barX = 200;
      var barY = 380;
      
      var xPos = 200;
      var yPos = 200;
      var xSpeed = 0;
      
      function setup() {
        createCanvas(600, 400);
        background(0);
        rectMode(CENTER);
        fill(255);
      }
      
      function draw() {
        background(0);            // erase everything
        
        var check = testBorder();
        if (check == false){
          barX += xSpeed;
        }else{
          xSpeed = 0;
        }
        console.log(xSpeed);
        rect(barX, barY, 60,10);
      }
      
      
      function keyPressed(){
        if(key == "a"){
          xSpeed = -10;
        }
        if(key == "s"){
          xSpeed =  10;
        }  
      }
      
      function keyReleased(){
        xSpeed = 0;
      }
      
      function testBorder(){
        var colission = false;
        if (barX > width || barX < 0){
            colission = true;
        }
        return colission;
      }
  

Exercise
Add the bouncing ball from the previous example to the sketch. Find a way to let the ball bounce from the bar instead the bottom border of the window.