Workshop Processing, p5.js en computer vision
Introductie
Ik heb in de vorige workshop, de workshop van Arduino, al een beetje gewerkt met processing. Het is een interactieve manier van programmeren van animaties en afbeeldingen. De taal die wordt gebruikt binnen processing, een taal die ik tot nu toe nog niet kende. Tijdens deze opdrachten heb ik hiermee kennis gemaakt. Ik heb zo veel mogelijk filmpjes en foto’s gemaakt en deze toegevoegd aan de filmrol aan de linkerzijde van de pagina.
Shapes
Om het programma te leren kennen, ben ik begonnen met een ellipse te maken. Ik heb hier geoefend met een perfecte cirkel maken, maar ook de positionering van de ellipse. Daarna ben ik verdergegaan met kleuren aanpassen en de rand van de ellipse weghalen. In de onderstaande code heb ik verschillende cirkels gemaakt in verschillende groottes, kleuren en locaties.
Opdracht 2F
void setup(){
size(200,200);
ellipseMode(CORNER);
noStroke();
fill(255,68,159);
ellipse(50, 50, 100, 100);
stroke(255,245,183);
fill(0,234,211);
ellipseMode(CORNERS);
ellipse(40, 40, 70, 150);
noStroke();
fill(0,95,153);
ellipseMode(CENTER);
ellipse(120, 120, 100, 30);
}
void draw(){
}
Daarnaast kan je ook nog andere vormen toevoegen zoals een lijn of een driehoek. In de volgende opdracht heb ik twee rechthoeken, een driehoek en een quad gemaakt in verschillende posities, om te zorgen dat ik dit goed snap. Ik vond het soms nog wel lastig om de juiste positie aan te nemen voor de verschillende vormen.
Opdracht 2I
void setup(){
size(200,200);
noStroke();
fill(0,95,153);
rect(10,10,50,100);
fill(255,245,183);
triangle(90,90,90,50,50,50);
fill(0,191,255);
quad(120,120, 160, 100, 190, 180, 130, 150);
fill(210,105,30);
triangle(10, 140,10,180,60,160);
fill(255,20,147);
rect(100,10,90,90);
}
void draw(){}
Naast vormen positioneren kan je ze ook met elkaar laten interacteren. Ik heb dit gedaan door een rechthoek te maken wat de muis volgt en een cirkel die van kleur verandert als ik er met de muis overheen ga. Hoe ik dit heb gedaan is te zien in de onderstaande code.
Opdracht 2O
int diameter = 60;
void setup() {
size(200,200);
background (200,200,200);
frameRate(15);
}
void draw() {
background (200,200,200);
noStroke();
fill(0,191,255);
rect(mouseX, mouseY, diameter, diameter);
fill(mouseX, mouseY, mouseY);
ellipse(100,100,diameter, diameter);
}
Processing en Arduino
Zoals in de vorige workshop al duidelijk werd, kan processing en Arduino samen gebruikt worden. Deze twee programma’s kunnen aan elkaar gekoppeld worden door een library te importeren. Zo kan je veel verschillende dingen creëren, zoals een ledje die aangaat als je met je muis over een vierkant gaat. Ik heb met deze opdracht gezorgd dat als je over een ellipse gaat met je muis in processing, er een muziekje gaat afspelen via Arduino. Dit heb ik gedaan met de speaker en heb ik als ondersteuning opdracht 9 vanuit de workshop van Arduino. In het filmpje heb ik het geluid eronder geklapt, zodat je een idee krijgt hoe het hoort te klinken. In de code hoort de muziek te stoppen als ik uit de ellipse klik.
Opdracht 3B
Processing code:
import processing.serial.*;
Serial myPort; // Create object from Serial class
int val; // Data received from the serial port
void setup(){
size(200, 200);
String portName = Serial.list()[1];
myPort = new Serial(this, portName, 9600);
}
void draw() {
if (mousePressed && (mouseButton == LEFT)) {
fill(0);
myPort.write('H');
} else {
fill(126);
myPort.write('L'); // send an L otherwise
}
ellipseMode(CORNER);
ellipse(50, 50, 100, 100); // Draw a ellipse
}
Arduino code
char val; // Data received from the serial port
int speakerPin = 8;
void setup() {
pinMode(speakerPin, OUTPUT); // Set pin as OUTPUT
Serial.begin(9600); // Start serial communication at 9600 bps
}
void loop() {
while (Serial.available()) { // If data is available to read,
val = Serial.read(); // read it and store it in val
}
if (val == 'H') { // If H was received play music
tone(speakerPin, 392, 400); // plays a tone of 392Hz for 400ms
delay(500); // wait 500 ms
tone(speakerPin, 294, 400); // plays a tone of 493Hz for 400ms
delay(500); // wait 500 ms
tone(speakerPin, 330, 100); // plays a tone of 262Hz for 100ms
delay(50); // wait 25 ms
tone(speakerPin, 262, 100); // plays a tone of 262Hz for 100ms
delay(50); // wait 50 ms
tone(speakerPin, 262, 100); // plays a tone of 392Hz for 100ms
delay(50); // wait 50 ms
tone(speakerPin, 294, 100); // plays a tone of 294Hz for 100ms
delay(50); // wait 50 ms
tone(speakerPin, 330, 400); // plays a tone of 330Hz for 400ms
delay(500); // wait 250 ms
tone(speakerPin, 262, 400); // plays a tone of 262Hz for 400ms
delay(500); // wait 500 ms
} else {
digitalWrite(speakerPin, LOW); // Otherwise turn it OFF
}
delay(100); // Wait 100 milliseconds for next reading
}
p5.js
p5.js is een javascript library die focust op een interactieve manier van coderen, wat erg lijkt op processing. Het heeft wel een paar verschillen, zoals dat je niet vastzit aan een canvas maar je de hele browser pagina kan gebruiken als schetst. Om een begin te maken met deze manier van coderen heb ik een introductievideo gevolgd op de website van p5. Uiteindelijk heb ik mijn muis interactief gemaakt door een ellipse toe te voegen die de muis volgt. Deze verandert van kleur door de functie random() en als je de muis indrukt krijg je een dikke zwarte lijn. Bekijk de code om te zien hoe ik dit heb gedaan.
Opdracht 5C
function setup(){
createCanvas(400, 400);
}
function draw(){
if(MouseIsPressed){
fill(0);
}else{
var grey = random(255);
fill(grey);
}
ellipse(mouseX, mouseY, 80, 80)
}
opdracht 5E
Dit vond ik een lastige opgave, omdat ik dit een best lastig programma vond. Toch heb ik iets leuks kunnen maken van een van de voorbeelden. Je gezicht wordt herkent door een face tracker en je kan de 'neus' inklikken zodat hij reageert.
let value=0;
var capture;
var tracker
var w = 640,
h = 480;
function setup() {
capture = createCapture({
audio: false,
video: {
width: w,
height: h
}
}, function() {
console.log('capture ready.')
});
capture.elt.setAttribute('playsinline', '');
createCanvas(w, h);
capture.size(w, h);
capture.hide();
colorMode(HSB);
tracker = new clm.tracker();
tracker.init();
tracker.start(capture.elt);
}
function draw() {
image(capture, 0, 0, w, h);
var positions = tracker.getCurrentPosition();
noFill();
stroke(255);
beginShape();
for (var i = 0; i < positions.length; i++) {
vertex(positions[i][0], positions[i][1]);
}
endShape();
noStroke();
for (var i = 0; i < positions.length; i++) {
fill(map(i, 0, positions.length, 0, 360), 50, 100);
ellipse(positions[i][0], positions[i][1], 4, 4);
text(i, positions[i][0], positions[i][1]);
}
if (positions.length > 0) {
var mouthLeft = createVector(positions[44][0], positions[44][1]);
var mouthRight = createVector(positions[50][0], positions[50][1]);
var smile = mouthLeft.dist(mouthRight);
// uncomment the line below to show an estimate of amount "smiling"
// rect(20, 20, smile * 3, 20);
// uncomment for a surprise
noStroke();
fill(value);
ellipse(positions[62][0], positions[62][1], 50, 50);
}
}
function mouseClicked() {
if (value === 0) {
value = 255;
} else {
value = 0;
}
}