Interaktives Display – Versteckte Botschaft

Was passieren soll:

Mit Hilfe von p5.js soll ein Display erstellt werden, welches eine versteckte Botschaft zeigen soll, sobald sich die Maus über das Display bewegt.

Mit dem Bewegungsverlauf der Maus wird die Botschaft angezeigt.

Im folgenden Tutorial wird erklärt, wie dieses Ziel erreicht wird.

---

Part I

Zunächst öffnen wir p5.js über die Webanwendung.
(Ein Download des Editors für ein Arbeiten im Offline-Modus ist ebenfalls möglich.)

Achtung: Um Bilder hochladen zu können muss ein (kostenloser) Account erstellt werden.

p5.js – Start

---

Schritt 1 – Grid aus Rechtecken erstellen

Deklarieren von vier Variablen:

• cols (= columns)
• row
• csize (= column size)
• rsize (= row size)

csize und rsize werden dann noch mit einer Zahl initialisert für die Breite und Höhe jedes Rechtecks im Raster. In diesem Beispiel nehmen wir 4 für csize und 5 für rsize.

//Schritt 1: Grid erstellen
//cols und rows: Anzahl der Spalten und Zeilen
//csize und rsize: Breite und Höhe jedes Rechtecks in der Rasterung

let cols; let rows; let csize = 4; let rsize = 5;

---

Nun werden die Rechtecke mittels funktion setup() berechnet. Die Größe des Canvas wird auf auf 800 x 200 geändert.

//Setup Funktion: Canvas erstellen

function setup() {
	createCanvas(800, 200);

//Berechnung der Anzahl der Spalten und Zeilen, basierend auf der Canvas Größe

    cols = width/csize;
    rows = height/rsize;
}

---

Das Grid wird nun mit function draw() erstellt.

function draw() {
  background(220); //Hintergrundfarbe auf Hellgrau setzen
  for (let i=0; i<cols; i++) {
    for (let j=0; j<rows; j++) {
      rects[i][j].display();
    }
  }
}

---

Schritt 2 – Bild importieren

Hier kann man das im Tutorial verwendete Bild downloaden: Tutorial Image

Um ein Bild zu importieren, erstellen wir zuerst den Ordner “images”.
Hierzu klicken wir auf das Plus-Symbol links oben.
Im Anschluss das Bild in den Ordner uploaden (Pfeil neben dem Ordner).

ACHTUNG:

Wenn man ein eigenes Bild hochladen möchte, sollte man darauf achten, dass das Image genau 800 auf 200 Pixel besitzt. Ansonsten müssten Daten im Code auf das Bild angepasst werden.

Nach dem Upload wieder zurück auf den sketch.js File gehen (der zuvor erstellte Code).

Es wird eine Neue Variable deklariert. – let img;

ACHTUNG:

Die Variable let img; sollte am gleichen Ort deklariert werden, wie die Variablen für das Grid.

let cols; let rows; let csize = 4; let rsize = 5;

//img: Variable die Bild speichert
let img;

Nun eine neue Funktion erstellen, damit das Bild vorgeladen werden kann.

Der Pfad/die Location von dem Bild wird hierbei angegeben.

let cols; let rows; let csize = 4; let rsize = 5;

//img: Variable die Bild speichert
let img;

//Preload Funktion: Laden des Bildes
function preload() {
  img = loadImage("images/welcome.png"); //Argument beihaltet die Location des Bildes
}

So müsste der komplette Code bis hierhin aussehen:

//Schritt 1: Grid erstellen
//cols und rows: Anzahl der Spalten und Zeilen
//csize und rsize: Breite und Höhe jedes Rechtecks in der Rasterung

let cols; let rows; let csize = 4; let rsize = 5;

//img: Variable die Bild speichert
let img;

//Preload Funktion: Laden des Bildes
function preload() {
  img = loadImage("images/welcome.png"); 
  //Argument beihaltet die Location des Bildes
}

//Setup Funktion: Canvas erstellen
function setup() {
	createCanvas(800, 200);

//Berechnung der Anzahl der Spalten und Zeilen, basierend auf der Canvas Größe
    cols = width/csize;
    rows = height/rsize;
  
}
  
  function draw() {
  background(220); //Hintergrundfarbe auf Hellgrau setzen
  for (let i=0; i<cols; i++) {
    for (let j=0; j<rows; j++) {
      rects[i][j].display();
    }
  }
}

---

Schritt 3 – Extrahieren der Farbwerte vom Bild

Im Folgenden wollen wir Farbwerte aus dem Bild extrahieren. Damit kann dann das Grid eingefärbt werden.

Neue Variable let bright; erstellen – ebenfalls am selben Ort, wie die anderen Variablen!

Danach bei function setup() eine neue for() – Schleife erstellen.
Dort wird die Information der Farben geholt.

//Setup Funktion: Canvas erstellen
function setup() {
	createCanvas(800, 200);

//Berechnung der Anzahl der Spalten und Zeilen, basierend auf der Canvas Größe
    cols = width/csize;
    rows = height/rsize;
  
  for (let i=0; i<cols; i++) {
    rects[i] = [];
    for (let j=0; j<rows; j++) {
      let c = img.get(i*csize, j*rsize); 
    }
  }
  
}

---

Schritt 4 – Rect Klasse erstellen

Um eine Klasse zu erstellen, brauchen wir dafür zunächst ein eigenes File (auf der linken Seite auf das Plus-Icon klicken).

Name: “rect.js”

Nun auf index.html klicken (auch auf der linken Seite in dem Menü).

Dort die neu erstellte Datei verlinken (unter   <script src=“sketch.js"></script> ).

Für die Verlinkung wird dieser code eingefügt:
<script src="rect.js"></script>

Danach auf das neu erstellte File rect.js klicken, um die Klasse zu coden.

class Rect {
 constructor(x, y, isBlack) {
    this.x = x;
    this.y = y; 
    this.isBlack = isBlack; 
    this.c = 0;
  }

 display() {
    fill(this.c); 
    rect(this.x, this.y, csize, rsize); 
  }

Überprüfen ob Klasse funktioniert:

Auf sketch.js gehen und dann bei den vorhandenen Variablen eine neue Variable let rects = []; erstellen.

Danach bei der for-Schleife folgenden Code-Part hinzufügen:

rects[i] = [];

rects[i][j] = new Rect(icsize, jrsize, bright);

Die komplette function setup() sieht dann so aus:

//Setup Funktion: Canvas erstellen
function setup() {
  createCanvas(800, 200);
  
  //Berechnung der Anzahl der Spalten und Zeilen, basierend auf der Canvas größe
    cols = width/csize;
    rows = height/rsize;

  
  for (let i=0; i<cols; i++) {
    rects[i] = [];
    for (let j=0; j<rows; j++) {
      //Die Farbinformationen werden von den verschiedenen Rechtecken geholt
      let c = img.get(i*csize, j*rsize);
      if (brightness(c) == 0) {
        bright = true;
      } else {
        bright = false;
      }
      rects[i][j] = new Rect(i*csize, j*rsize, bright);
    }
  }
}

Jetzt werden ein paar Einstellungen gemacht, damit die Anzeige besser wird. Dazu gehen wir wieder in die rect.js Datei.

Dort wird die Strichstärke dünner gemacht und die Farben werden auf Schwarz oder Weiß gesetzt.

display() {
    strokeWeight(0.5);
    if (this.isBlack == true) {
      this.c = 0;
    }

Danach wieder auf sketch.js gehen, damit hier die Farben aktualisiert werden.

Diesen Teil wird nun bei function setup() hinzugefügt:

if (brightness(c) == 0) { 
 bright = true; 
} else {
 bright = false;
}

So sieht die komplette function setup() nun aus:

//Setup Funktion: Canvas erstellen
function setup() {
  createCanvas(800, 200);
  
  //Berechnung der Anzahl der Spalten und Zeilen, basierend auf der Canvas größe
    cols = width/csize;
    rows = height/rsize;

  
  for (let i=0; i<cols; i++) {
    rects[i] = [];
    for (let j=0; j<rows; j++) {

      //Die Farbinformationen werden von den verschiedenen Rechtecken geholt
      let c = img.get(i*csize, j*rsize);
      if (brightness(c) == 0) {
        bright = true;
      } else {
        bright = false;
      }
      rects[i][j] = new Rect(i*csize, j*rsize, bright);
    }
  }
}

---

Part II

Im zweiten Abschnitt des Tutorials wird erklärt, wie die Interaktivität des Displays mit der PC-Mous erreicht wird.

Schritt 1 – Distanz berechnen

Wieder auf rect.js gehen und eine neue Methode erstellen, darin eine neue Variable deklarieren, damit die Distanz zwischen der Location der Mouse und Koordinaten der Rechtecke berechnet werden kann.

Wenn die Entfernung kleiner als 50 ist, dann ändert sich die Farbe des Bildes.

//Überprüft, ob Mouse über Rechteck schwebt 
  mouseHover() {

   //Berechnet die Entfernung zwischen Mausposition und Rechteck
    let distance = dist(this.x, this.y, mouseX, mouseY); 
    if (distance < 50) { //Wenn Distanz unter 50 ist, dann:
      if (this.isBlack == true) { //wenn Farbe schwarz ist dann:
        this.c = 255; //weiß
      } 
    }
  }

Damit die Methode funktioniert, muss dieser Code-Part in die display() Funktion eingebaut werden:

this.mouseHover();

Komplette display() Methode:

//Zeigt das Rechteck auf Canvas an
  display() {
    strokeWeight(0.5); //Strichstärke 
    //if (this.isBlack == true) { //Bestimmt die Farbe
     // this.c = 0;
    //} 
     //Zeichnet das Rechteck an Koordinatetn this.x und this.y und mit Breite csize und höhe rsize
    
    this.mouseHover();
    fill(this.c); 
    rect(this.x, this.y, csize, rsize); 
  }
  
  //Überprüft, ob Mouse über Rechteck schwebt 
  mouseHover() {
   //Berechnet die Entfernung zwischen Mausposition und Rechteck
    let distance = dist(this.x, this.y, mouseX, mouseY); 
    if (distance < 50) { //Wenn Distanz unter 50 ist, dann:
      if (this.isBlack == true) { //wenn Farbe schwarz ist dann:
        this.c = 255; //weiß
      } 
    }
   if (this.c > 0){
     this.c -= 10;
   }
  }
}

---

Fertig!

Das Ende des Tutorials ist erreicht und wir wünschen noch viel Spaß beim weiteren Experimentieren.

---

Hier ist der vollständige Code:

Code Download

Dieses Tutorial wurde inspiriert von: Tutorial | Interactive Display with a Secret Message

---

Back to Top