Processing og p5.js

Bjørn Fjukstad

PhD Student, Institutt for Informatikk

bjorn@cs.uit.no

Oversikt

Denne presentasjonen finner dere på kodeklubben-tromso.github.io/laererkonferanse og koden til alle eksemplene/oppgavene ligger der.

Processing

Programmeringsmiljø som gjør det enkelt å bruke kode til å lage tegninger, animasjoner og interaktiv grafikk

Perfekt for å komme i gang med programmering!

processing.org

p5.js

JavaScript-bibliotek som tar Processing inn i nettleseren.

Lar oss bruke mer enn det vanlige Processing tegnemiljøet

p5js.org/reference har masse gode tips og triks

Første tegning 



// ellipse(x, y, bredde, høyde)
ellipse(5, 5, 10, 10);

// rect(x, y, bredde, høyde) 
rect(20, 20, 40, 40);

Variabler 



var x = 10;
var y = 20;

var t = "Hei!"

rect(x, y, width/2, height/2); 

text(t, x, y)

Setup og Draw

I p5.js bruker vi to funksjoner for å lage programmer. setup kjøres én gang når programmet startes, mens draw kjøres hele tida. 


var i = 0; 

function setup(){
    createCanvas(300,300)
}

function draw(){
    background(200)
    text("Hei " + i, width/2, height/2) 
    i = i + 1
}

Tilfeldige sirkler 


function setup(){
    createCanvas(600,400)
}
function draw(){
    fill(random(0,255),
         random(0,255),
         random(0,255))

    ellipse(random(0,500),
            random(0,500), 
            10,
            10)
}

Følg musa


function setup(){
    createCanvas(600, 400)
}
function draw(){
   if(mouseIsPressed){
           fill(0)
           stroke(255)
       } else {
           fill(255)
           stroke(0)
       }
    ellipse(mouseX, mouseY, 30, 30)
}

Lyd 


var mic;
function setup(){
  createCanvas(600,400)
  mic = new p5.AudioIn()
  mic.start();
}
function draw(){
  background(0);
  micLevel = mic.getLevel();
  ellipse(width/2,
     constrain(height - micLevel*height*5, 0, height),
     30, 30);
}

Webcam 


var capture;

function setup() {
  createCanvas(400, 400);
  capture = createCapture(VIDEO);
  capture.size(400, 400);
  capture.hide();
}

function draw() {
  background(255);
  image(capture, 0, 0, 400, 400);
}

Instagram? 


var images; 
function setup(){
  createCanvas(400,400)
  frameRate(0.5) 
 
  var url =  "https://api.instagram.com/v1/locations/"
  url += "328157028" 
  url += "/media/recent"
  url += "?client_id=01c16f5b206349839ea20f187d11050f"
  loadJSON(url, function(data){
    images = data.data;
  }, 'jsonp');  
}    

function draw(){
  var img = loadImage(
      images[i].images.low_resolution.url,
      function(img){
          image(img, 0, 0) 
  })
  i = (i + 1) % images.length
}

Objekter 


var bug; 
function setup(){
    createCanvas(600,400)
    bug = new Bug() 
}
function draw(){
    background(255, 150, 150)
    bug.move()
    bug.display()
}

function Bug() {
    this.x = random(width);
    this.y = random(height);
    this.diameter = random(10,30) 
    this.speed = 1; 
}

Bug.prototype.move = function(){
    this.x += random(-this.speed, this.speed)
    this.y += random(-this.speed, this.speed)
}

Bug.prototype.display = function() {
    ellipse(this.x, this.y, 
            this.diameter, this.diameter)
}

Takk!

Bjørn Fjukstad

PhD Student, Institutt for Informatikk

Oppgaver

7 oppgaver, regner ikke med at dere blir ferdige med alt

Alle oppgavene kommer med litt pre-kode og et løsningsforslag

Dere kan enten bruke et vanlig tekstprogram eller p5js editoren

Oppgavene ligger på kodeklubben-tromso.github.io