Processing vs p5.js | skolekoding.no

Skolekoding.no > p5.js > Processing vs p5.js

Eksemplene er hentet fra bøkene Getting Started with Processing og Getting Started with p5.js. Begge bøkene er veldig gode innføringsbøker/hefter på ca 200 små sider med mange korte ekempler. Bøkene er nærmest identiske side for side. De bruker de samme eksemplene, men på hvert sitt språk.

Getting Started with p5.js er uten ES6. Med innføringen av ES6 likner p5.js enda mer på Processing, blant annet brukes ordet class og en egen konstruktørfunksjon i klassen. Se eksempel 6 nedenfor.

Litt om ES6 og let vs var
Eksempel på bruk av class
Søk på denne siden for mer info om p5.js og ES6.

Processing eksempel 1

int y = 100;
float d = 2.5;
void setup() {
- size(480, 120);
}
void draw() {
- background(204);
- ellipse(75, y, d, d);
- ellipse(175, y, d, d);
- ellipse(275, y, d, d);
}

p5.js eksempel 1

let y = 100;
let d = 2.5;
function setup() {
- createCanvas(480, 120);
}
function draw() {
- background(204);
- ellipse(75, y, d, d);
- ellipse(175, y, d, d);
- ellipse(275, y, d, d);
}

Processing eksempel 2

size(480, 120);
int y = 100;
int d = 130;
ellipse(75, y, d, d);
ellipse(175, y, d, d);
ellipse(275, y, d, d);

p5.js eksempel 2

// I p5.js må du ha med setup() og draw()
function setup() {
- createCanvas(480, 120);
}
function draw() {
- let y = 100;
- let d = 130;
- ellipse(75, y, d, d);
- ellipse(175, y, d, d);
- ellipse(275, y, d, d);
}

Processing eksempel 3

void setup() {
- size(480, 120);
- strokeWeight(2);
}
void draw() {
- background(204);
- for (int i = 20; i < 400; i += 20) {
  - line(i, 0, i + i/2, 80);
- }
}

p5.js eksempel 3

function setup() {
- createCanvas(480, 120);
- strokeWeight(2);
}
function draw() {
- background(204);
  - for (let i = 20; i < 400; i += 20) {
  - line(i, 0, i + i/2, 80);
- }
}

Processing eksempel 4

void setup() {
- size(120,120);
- bacground(204);
}
void draw() {
- pushMatrix();
- translate(mouseX, mouseY);
- rect(0, 0, 30, 30);
- popMatrix();
- translate(35, 10);
- rect(0, 0, 15, 15);
}

p5.js eksempel 4

function setup() {
- createCanvas(120,120);
- background(204);
}
function draw() {
- push();
- translate(mouseX, mouseY);
- rect(0, 0, 30, 30);
- pop();
- translate(35, 10);
- rect(0, 0, 15, 15);
}

Processing eksempel 5

JitterBug bug;
void setup() {
- size(480, 120);
- background(204);
- bug = new JitterBug(width/2, height/20);
}
void draw() {
- bug.move();
- bug.display();
}
class JitterBug {
- float x;
- float y;
- int diameter;
- float speed = 2.5;
- _{// Konstruktør}
- JitterBug(float tempX, float tempY, int tempDiameter) {
  - _{// Kun variabler som tas med inn fra hovedprogram}
  - x = tempX;
  - y = tempY;
  - diameter = tempDiameter;
- }
- void move() {
  - x +=random(-speed, speed);
  - y +=random(-speed, speed);
- }
- void display() {
  - ellipse(x, y, diameter, diameter);
- }
}

p5.js eksempel 5

let bug;
function setup() {
- createCanvas(480, 120);
- background(204);
- bug = new JitterBug(width/2, height/2,
- 20);
}
function draw() {
- bug.move();
- bug.display();
}
class JitterBug {
- _{// Ingen variabeldeklarasjon før konstruktøren.}
- constructor(tempX, tempY, tempDiameter) {
- - _{// Alle klassens variabler}
  - this.x = tempX;
  - this.y = tempY;
  - this.diameter = tempDiameter;
  - this.speed = 2.5;
- }
- move() {
  - this.x += random(this.speed, this.speed);
  - this.y += random(-this.speed, this.speed);
- }
- display() {
  - ellipse(this.x, this.y, this.diameter, this.diameter);
- }
}

Processing eksempel 6

int[] x = new int[2];
void setup() {
- size(200, 200);
- x[0] = 12;
- x[1] = 2;
}

p5.js eksempel 7

let x = []; _{// Ingen variabeltype og ingen størrelse (dynamisk tabell)}
function setup() {
- createCanvas(200, 200);
- x[0] = 12;
- x[1] = 2;
}

I p5.js er tabellene dynamiske. Vi kan legge til og fjerne celler

– Legge til: x.push(3); legger til en celle bakerst med innhold 3
– Legge til 10 først i tabellen: x.unshift(10)
– Fjerne: x.pop(); Trekker fra bakerste celle
– Fjerne spesifik celle : x.splice(3,1) Fjerner 1 celle fra og med celle nr 3.
– I Proceccing brukes ArrayList istedet for vanlig tabell for å kunne legge til og fjerne celler.

PVektor

PVector dragForce = velocity.get();

PVector a = PVector.div(force, mass);

p5Vektor

let dragForce = velocity.copy();

let a = p5.Vector.div(force, this.mass);

skolekoding.no
Stein Olav Kivle