1. Basics and visuals




How to use p5.js sketches in websites

During the lecture we will mainly use the P5 online editor. However, the sketches can be used in any website running in a modern browser. Here`s how to implement them:

CSS to center canvas


  html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;

  /* This centers our sketch horizontally. */
  justify-content: center;

  /* This centers our sketch vertically. */
  align-items: center;
}
  

Canvas with full window-size:

function setup() {
        createCanvas(windowWidth, windowHeight);
        background(255, 0, 200);
      }

      function windowResized() {
        resizeCanvas(windowWidth, windowHeight);
      }
  

Place canvas-element in a div-container:

function setup() {
  var canvas = createCanvas(640, 480);

  // Move the canvas into < div id="sketch-container" >.
  canvas.parent('sketch-container');

  background(100, 100, 100);
}

  


Exporting PDFs for plotting

Library: https://github.com/zenozeng/p5.js-pdf
Examples: http://zenozeng.github.io/p5.js-pdf/examples/#basic





Example: Plotter drawings by Anders Hoff


Talking to a pen plotter

Instead of exporting PDF- and vector-files from p5 and Processing, it is also possible to write code that talks directly to the plotter. This allows to move the pen with simple instructions.

Talking to AxiDraw Pen Plotter directily from Processing via Serial port:
https://github.com/evil-mad/AxiDraw-Processing

JavaScript libraries for AxiDraw Pen Plotter:
https://github.com/ubilabs/axidraw

Serial Command Set for EiBotBoard (AxiDraw):
http://evil-mad.github.io/EggBot/ebb.html

Documentation of the EiBotBoard Hardware (AxiDraw):
http://www.schmalzhaus.com/EBB/

Moving an object by keyboard input:

var xPos = 200;
var yPos = 200;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  //background(c, 0, 0);
  background(255);
  ellipse(xPos, yPos, 100,100);
}

function keyPressed(){
  if(key == "a"){
     xPos = xPos - 10;
  }
  if(key == "s"){
     xPos = xPos + 10;
  }
  
  if(key == "w"){
     yPos = yPos - 10;
  }
  if(key == "y"){
     yPos = yPos + 10;
  }
  
}



Interactively moving the plotter pen

Mouse


      Umpcoming.
      

Keyboard


      Upcoming.
        

Leap Motion


      Upcoming.
        

Game Pad


      Upcoming.
        

Eye Tracking


      Upcoming.
      

Object Tracking


      Upcoming.
        

Example: object-Tracking


Drawing sketch on mobile devices

function setup() {
    createCanvas(640, 480);
    background(100);
  }

  function draw() {
    if (mouseIsPressed) {
      fill(0);
    } else {
      fill(255);
    }
    ellipse(mouseX, mouseY, 80, 80);
  }


More basic drawing

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

function setup() {
  createCanvas(640,480);
  background(255);
}

function draw() {
  //background(255);
  stroke(0,30);
  strokeWeight(0.5);
  line(300,200,random(640),random(480));
}
function setup() {
  createCanvas(windowHeight, windowWidth);
  background(200);
}

function draw() {
  
  if(mouseIsPressed){
   if(mouseButton == LEFT){
      strokeWeight(random (1,10));
      line(pmouseX, pmouseY, mouseX, mouseY);
   }
    
   if(mouseButton == RIGHT){
     background(200);
   }
  }
}


9. Variables



10. Looping / recursion

var amount;

function setup() {
  amount = 1000;
  createCanvas(400, 400);
  background(220);
  noFill();
}


function draw() {
  amount = amount + 10;
  background(220);
   for (var i = 0; i < 400; i = i+20){
    	ellipse(200, 200, i, random(10)/random(1));
      //ellipse(i, random(20)+200, 3, 3);
      //ellipse(random(400), random(400), 10,10);
  }
}


11. Branching



12. Randomness

random()



  

Perlin Noise

let xoff = 0.0;
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

simple function



  

simple function with return value



  


Basic FX programming: loading and manipulating images

var grimesPic;
var step = 15;

function preload() {
    grimesPic = loadImage('img/grimes2.jpg');
  
}

function setup() {
  createCanvas(690, 400);
  //image(grimesPic, 0,0, width, height);
  grimesPic.resize(width,0);
  grimesPic.loadPixels();
  strokeWeight(4);
  noStroke();
  fill(0,60);
  for (let y = 0; y < height; y += 4) {
   for (let x = 0; x < width; x += 12){
     var c = grimesPic.get(x,y);
     fill(red(c),green(c), blue(c), 40);
     stroke(red(c),green(c), blue(c), 40);
     ellipse(x,y, 5,5);
     line(x,y, x+random(-50,150), y+random(-50,150));
   }
  }
}

function draw() {
  
  
}