Basics of Image Processing
We raden je aan deze tutorial door te nemen voordat je door deze website navigeert! Je zult ons later dankbaar zijn.
Pixel Array
Er zijn een paar programmeertalen die ons een lijst geven met alle pixels die op het scherm worden weergegeven. In p5.js is deze lijst een platte array met de RGBA-waarden van elke pixel op het canvas. Omdat elke pixel wordt beschreven met vier stukjes informatie, neemt deze vier slots op de Pixel Array in beslag.
pixels = [p1, p1, p1, p1, p2, p2, p2, p2, p3, p3, p3, p3, ...]
Die stukjes informatie komen overeen met de rgba-waarden van de pixel (red, green, blue & alpha), die variëren van 0 tot 255.

Dat betekent dat als de eerste pixel op het scherm (linksboven) zwart is en de tweede pixel (de rechterbuur) wit, ze als volgt zouden worden weergegeven op de Pixel Array:
pixels = [0, 0, 0, 255, 255, 255, 255, 255, ...]
Pixel Density (ofwel: pixel dichtheid)
Als uw computer relatief nieuw is, is de kans groot dat deze een scherm heeft dat een aantal pixels in één comprimeert, waardoor een hogere definitie wordt gegenereerd. Om onze code te laten werken, hebben we een meer rudimentaire setup nodig. Om dat te doen, voeg je in je functie setup() het volgende in:
pixelDensity(1);
function setup(){
createCanvas(320,240);
pixelDensity(1);
}
Dit zorgt ervoor dat je canvas slechts één pixel per pixel weergeeft. Terug naar de oude situatie.
Loading Pixels
De eerste stap om toegang te krijgen tot de Pixel Array op uw p5.js-schets, is deze te uploaden. Om een Pixel Array voor je hele canvas te krijgen, voeg je aan het begin van je functie draw() in:
Als je niet met je hele canvas wilt knoeien, maar alleen een afbeelding, voeg dan toe:
img.loadPixels();
(img == variabel naam van je afbeelding)
[ATTENTIE:] pixels (or img.pixels) is de naam die p5.js geeft aan Pixel Array! Dit moet je onthouden voor later!
Double For Loop
Als je je hele canvas wilt manipuleren, heb je een dubbelefor loop nodig die door elke kolom en elke rij van je scherm gaat. Ons doel is om door de eerste rij te gaan (x bij x), een y naar beneden te gaan, elke x opnieuw te doorlopen, en weer een y naar beneden, en... je snapt het idee.
function setup(){
createCanvas(320,240);
pixelDensity(1);
}
function draw(){
background(255);
loadPixels();
for(var y = 0; y < height; y++) {
for(var x = 0; x < width; x++){
}
}
}

We verhogen x, maar op een bepaald y-niveau. Dat betekent dat onze y's onze buitenste for-loop zullen zijn, en onze x's onze binnenste loop.
Indexing
Navigeren door elke pixel op het scherm is al moeilijk genoeg, maar navigeren door elke RGBA-waarde van elke pixel is nog moeilijker. Om je leven gemakkelijker te maken, navigeer je 4 bij 4 door jouw Pixel Array (aangezien elke pixel 4 slots in beslag neemt).

Om dat te doen, initialiseer je binnen je for-loop een indexvariabele die de r-waarde (eerste waarde) van elke pixel zal zijn. Hoe krijgen we de index van de roodwaarde van een pixel uit de X/Y-coördinaten?
De indexpositie van de rode waarde is 4 keer het aantal pixels dat ervoor staat.


var index = (x + y * width)*4;
Aangezien onze indexvariabele overeenkomt met r(ed) en deze 4 bij 4 beweegt, is index+1 g(reen), index+2 is b(lue) en index+3 is a(lfa).
red = pixels[index+0];
green = pixels[index+1];
blue = pixels[index+2];
alpha = pixels[index+3];
Je for-loop zou er tot nu toe zo uit moeten zien:
function draw() {
background(51);
loadPixels();
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var index = (x + y * width)*4;
pixels[index+0] = ?;
pixels[index+1] = ?;
pixels[index+2] = ?;
pixels[index+3] = ?;
}
}
}
Gebruik img.pixels[ ] als je een afbeelding hebt gebruikt in plaats van je canvas.
Cool, geweldig, geweldig! Dat is jouw 'mise-en-place' voor het spelen met pixels. Nu hoef je alleen nog maar je script te schrijven en het programma het te laten uitvoeren!
Het script dat we vandaag met je zullen delen, is hoe je een luidruchtige regenbooggradiënt van je canvas kunt maken.
- Set every red value to it's x position.
- Set every green value to a random number between 0 and 255.
- Set every blue value to it's y position.
- Set every alpha to 255
Je code zou er zo uit moeten zien:
function draw() {
background(51);
loadPixels();
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var index = (x + y * width)*4;
pixels[index+0] = x;
pixels[index+1] = random(255);
pixels[index+2] = y;
pixels[index+3] = 255;
}
}
}
Gebruik img.pixels als je een afbeelding hebt gebruikt in plaats van je canvas.
Update Pixels
Bijna klaar! Aangezien u uw Pixel Array hebt gemanipuleerd, moet u deze bijwerken zodat uw canvas deze aan u kan weergeven. Vlak voor het einde van de scope van je functie draw(), voeg je dit in:
updatePixels();
function draw() {
background(51);
loadPixels();
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var index = (x + y * width)*4;
pixels[index+0] = x;
pixels[index+1] = random(255);
pixels[index+2] = y;
pixels[index+3] = 255;
}
}
updatePixels();
}
of img.updatePixels(); als je een afbeelding hebt gebruikt in plaats van je canvas.