Nutzung eines Bildes als Datenquelle. Dazu nehmen wir ein bestehendes Foto, laden es in P5, vergröbern die Auflösung, anaysieren die Pixel und zeichnen das Bild zunächst mit Punkten nach. Die Punktgröße sollte minimal 3px sein, sonst wird der Rechner etwas zu warm. Der Canvas sollte aus gleichem Grund die Klasse is-fixed haben. Danach sind folgende Ergänzungen im Code erforderlich:
Variable im Deklarationsblock anlegen
let img;
Bild vorladen
Hierfür nutzen wir die p5.js Funktion preload. Dafür muss natürlich ein Bild im images Verzeichnis liegen.
function preload() {
loadImage('images/farbig.jpg', setImage);
}
Bild skalieren und bereit stellen
function setImage(loadedImageFile) {
img = loadedImageFile;
img.resize(500, 0);
}
Pixelwerte akquirieren
const pixelSize = 10;
const tileCount = floor(width / pixelSize);
const rectSize = width / tileCount;
img.loadPixels();
for (let gridX = 0; gridX < tileCount; gridX++) {
for (let gridY = 0; gridY < tileCount; gridY++) {
const px = int(gridX * rectSize);
const py = int(gridY * rectSize);
const i = (py * img.width + px) * 4;
fill(img.pixels[i], img.pixels[i+1], img.pixels[i+2], 255);
ellipse(gridX * rectSize, gridY * rectSize, pixelSize);
}
}
Bei dieser Aufgabe geht es darum externe Daten in den Sketch zu integrieren. Hierzu eignen sich vor allem Daten im JSON Format. Hierzu gibt es ein kleines Beispiel in der p5.js Doku zur Funktion loadJSON.
Als Beispieldaten werden hier seismische Messungen genutzt.