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);
}
}
Hier sollen Daten aus ML5 Libr für Visualisierungen genutzt werden, z.B. aus dem BodyPose Modell. ml5.js ist eine benutzerfreundliche JavaScript-Bibliothek, die auf TensorFlow.js basiert und maschinelles Lernen direkt im Browser ermöglicht. Sie bietet eine einfache API und vortrainierte Modelle für Aufgaben wie Bildklassifikation, Objekterkennung, Sprachverarbeitung und Pose-Tracking. Ziel ist es, maschinelles Lernen für Kreative, Künstler und Entwickler zugänglich zu machen, insbesondere für interaktive und kreative Projekte. Als Open-Source-Bibliothek arbeitet ml5.js eng mit Tools wie p5.js zusammen und richtet sich an eine breite, inklusive Community.
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.
Ein paar Anregungen zur Lösung der Aufgaben gibt es in dieser Playlist.