p5, Teil 3 / 2020-01-23 / Matthias Edler-Golla, CC BY-SA 4.0


|



 



Themen

  • Tastatur-Events
  • Tastatur-Spiel
  • Bilder einfügen
  • Sounds abspielen
  • Das Mikro des Computers nutzen
  • Die Kamera des Computers verwenden
  • 3 Übungen dazu…

Beispiels- und Übungspaket 3

Bitte ladet den 3. Teil des Beispiel- und Übungspakets runter und entpackt dies – fügt die Dateien wieder im bisherigen Ordner p5-grundlagen-und-uebungen ein!


Tastatur-Events

Drückt man auf der Tastatur auf einen Buchstaben, kann P5 dies interpretieren… Seid vorsichtig bei der Verwendung von „besonderen“ Tasten (Pfeiltasten…), das ist etwas komplizierter.

Demo

Schaut Euch die Demo an…

P5

var HG = 255;

function setup() {
  createCanvas(960, 400);
  background(255);
  textSize(200);
  textAlign(CENTER);
  fill(255,0,0);
}

function draw(){
  background(HG);
  text(key, width/2, 250); 
}

function keyPressed(){
  // Groß- und Kleinschreibung…
  if (key == "A" || key == "a"){
    HG = 0;
  }

  if (key == "B" || key == "b") {
    HG = 120;
  }

  if (key == "C" || key == "c") {
    HG = int(random(0,255));
  }
}

Tastatur-Spiel

Mit Tastatur-Events kann man ziemlich einfach Geschicklichkeitsspiele machen…

Demo

Schaut Euch die Demo an…

P5

var d = 100;
var x, y;
var s = 1; // Geschwindigkeit
var Xr = 1; // X-Richtung
var Yr = 1; // Y-Richtung

function setup() {
  createCanvas(960, 500);
  noStroke();
  textSize(100);
  textAlign(CENTER);
  x = 0;
  y = 0;
}

function draw() {
  background(255);
  fill(255, 0, 0);
  ellipse(x, y, d);
  x = x + s * Xr;
  y = y + s * Yr;

  // wenn der Mittelpunkt des Kreises die Ränder der Bühne berührt
  // ist das Spiel aus
  if (x < 0 || x > width || y < 0 || y > height) {
    background(0);
    text("Game over!", width / 2, 280);
  }
}

function keyPressed() {
  if (key == "X" || key == "x") {
    // ändert die X-Richtung
    Xr = -Xr;
  }

  if (key == "Y" || key == "y") {
    // ändert die Y-Richtung
    Yr = -Yr;
  }

  if (key == "S" || key == "s") {
    // Erhöht die Geschwindigkeit
    s = s + 1;
  }

  if (key == "N" || key == "n") {
    // Neustart, alles auf 0 setzen
    x = 0;
    y = 0;
    Xr = 1;
    Yr = 1;
    s = 1;
  }
}

Mouse verfolgen

Je schneller man den Cursor bewegt, desto größer werden Kreis/Quadrat

Probiert mal die verschiedenen Tastatur-Befehle aus!

Demo

Schaut Euch die Demo an…

P5

var d;
var fuellung;
var form = "ellipse";

function setup() {
  createCanvas(960, 600);
  background(255);
  rectMode(CENTER);
  fuellung = fill(255,90);
}

function draw(){
  // einfache if/else-Anweisung

  if (mouseIsPressed) {
    // bei gedrückter MouseTaste werden die Kreise/Rechtecke transparent rot gefüllt
    fill(255, 0, 0, 130);
  } else {
    fuellung;
  }

  // fill(255, 130);

  // Durchmesser des Kreises/Rechtecks abhängig
  // von Geschwindigkeit in der die Mouse bewegt wird
  // pmouseX und pmouseY sind Angaben, an welcher
  // Position sich die Mouse im vorherigen Frame befand
  d = dist(mouseX, mouseY, pmouseX, pmouseY);

  //console.log(d);

  if (form == "ellipse"){
    ellipse(mouseX, mouseY, d, d);
  } else {
    rect(mouseX, mouseY, d, d);
  }

  // hier evtl. einbauen, dass automatisch Bild 1x pro Sekunde gespeichert wird
}

function keyPressed(){

  if (key == "S" || key == "s"){
    // Bild mit Datum und Uhrzeit speichern
    var zeitstempel = "" + year() + month() + day() + "_" + hour() + minute() + second();
    // funktioniert im Chrome besser, weil kein Popup
    save(zeitstempel + "_muster.png");

  } else if (key == "L" || key == "l") {
    // Canvas leeren
    background(255);
    fuellung = fill(255, 130);

  } else if (key == "F" || key == "f") {
    // andere Füll-Farbe, zufällig
    fuellung = fill(int(random(0,255)),int(random(0,255)),int(random(0,255)),int(random(30,110)));

  } else if (key == "R" || key == "r") {
    // entweder Rechteck oder Kreis
    if (form == "rechteck"){
      form = "ellipse";
    } else {
      form = "rechteck";
    }
  }
}

Bilder einfügen

Bilder lassen sich ganz einfach in P5 importieren – optimiert diese aber vorab z.B. in Photoshop auf die gewünschte Größe – hier 960x400px, 72dpi;

Haltet mal in der Demo die Mousetaste gedrückt!

Demo

Schaut Euch die Demo an…

P5

var hgbild;
var cursorBild;

// Vorladen der Bilder
function preload(){
  hgbild = loadImage("Osterhase.jpg");
  cursorBild = loadImage("sternchen.svg");
}

function setup(){
  createCanvas(960,400);
  background(0);
  noCursor();
}

function draw(){
  if (mouseIsPressed){
    tint(mouseX, mouseY, 0);
  }

  image(hgbild, 0, 0);
  noTint();
  image(cursorBild, mouseX, mouseY);
}

Sounds gleich am Start des Sketches abspielen

Demo

Schaut/hört Euch die Demo an…

P5

var mySound;

// Vorladen des Sounds, damit dieser gleich losspielt
function preload(){
  // soundFormats('mp3', 'ogg', 'wav');
  mySound = loadSound("sounds/ambience-creepy-wind-a.wav");
}

function setup(){
  // https://github.com/processing/p5.js/wiki/Beyond-the-canvas
  createCanvas(200,200);
  background(0);
  mySound.play();
}

Sounds abspielen, wenn sich etwas ereignet

Demo

Schaut Euch die Demo an…

P5

var mySound;

var radius = 120;
var x = 0;
var speed = 5.0;
var direction = 1

function preload(){
  mySound = loadSound("sounds/buttonchime02up.wav");
}

function setup(){
  createCanvas(960,440);
  ellipseMode(RADIUS);
  x = width/2;
}

function draw(){
  background(0);
  x += speed * direction;
  // nur an den Rändern wird der Sound abgespielt
  if((x > width - radius) || (x < radius)) {
    direction = -direction;
    mySound.play();
  }

  if (direction == 1) {
    arc(x, 220, radius, radius, 0.52, 5.76);
  } else {
    arc(x, 220, radius, radius, 3.67, 8.9);
  }
}

Computer-Microfon nutzen

Aus Sicherheitsgründen werden Ihr vom Browser gefragt, ob Ihr es zulassen wollt, dass das Mikrofon des Computers vom Browser angeschaltet werden darf – sonst könnte ja jede(r) mithören…

Demo

Schaut Euch die Demo an…

P5

var mic;
var amp;
var scale = 1.0;

function setup(){
  createCanvas(960, 500);
  textSize(24);
  frameRate(30);

  // audio-input erzeugen und starten
  mic = new p5.AudioIn();
  mic.start();

  // Amplitude erzeugen und mit Micro verbinden
  amp = new p5.Amplitude();
  amp.setInput(mic);
}

function draw(){
  background(0);

  var lautstaerke = amp.getLevel();

  scale = map(lautstaerke, 0, 1.0, 30, width);

  // wenn die Lautstaerke einen best. Level erreicht, wird der Kreis rot
  if (lautstaerke < 0.4){
    fill(0,255,255);
  } else {
    fill(255,0,0);
  }

  ellipse(width/2, height/2, scale, scale);

  text(lautstaerke,5,25);
}

Computer-Microfon für Animation nutzen

Animation, die abhängig von der Lautstärke ist

Demo

Schaut Euch die Demo an…

P5

var mic;
var amp;
var scale = 1.0;

var x = -1;

function setup(){
  // https://github.com/processing/p5.js/wiki/Beyond-the-canvas

  // erweitert den Canvas auf die gesamte zur Verfügung stehenden Fläche
  maxBreiteHoehe();

  background(0);

  frameRate(60);

  // audio-input erzeugen und starten
  mic = new p5.AudioIn();
  mic.start();

  // Amplitude erzeugen und mit Micro verbinden
  amp = new p5.Amplitude();
  amp.setInput(mic);

  fill(255,0,0,40);
}

function draw(){
  // Hintergrund, der langsam faded
  fadeHG(0);

  var lautstaerke = amp.getLevel();

  scale = map(lautstaerke, 0, 1.0, 10, width);

  fill(random(255),random(255),random(255),random(200));

  ellipse(x, height/2 + random(-200,200), scale, scale);

  // Ellipse bewegen
  if ( x < width){
    x = x + 5;
  } else {
    x = -1;
  }
}

// ermittelt die zur Verfügung stehende Breite und Höhe
function maxBreiteHoehe() {
  Breite = window.innerWidth;
  Hoehe = window.innerHeight;
  console.log(Breite + ', ' + Hoehe);

  var meinCanvas = createCanvas(Breite, Hoehe);
  meinCanvas.parent('meinContainer');
}

// Kreise faden langsam aus
function fadeHG(wert){
  noStroke();
  fill(wert,3);
  rect(0, 0, width, height);
}

Computer-Kamera

… auch hier fragt der Browser Euch um Erlaubnis…

testet mal die verschiedenen Filter, die via Tastatur eingebaut sind!

Demo

Schaut Euch die Demo an…

P5

var capture;

function setup() {
  // https://github.com/processing/p5.js/wiki/Beyond-the-canvas
  createCanvas(960,600);
  capture = createCapture();
  capture.hide();
}

function draw() {
  var aspectRatio = capture.height/capture.width;
  var h = width* aspectRatio;
  image(capture, 0, 0, width, h);

  // bei Drücker der Ziffern auf der Tastatur
  // werden verschiedenen Filter aktiviert
  // ACHTUNG: Nur solange die Taste gedrückt ist!
  if (keyIsPressed){
    if (key == "1"){
      filter(POSTERIZE,2);
    }
    if (key == "2"){
      filter(THRESHOLD);
    }
    if (key == "3"){
      filter(INVERT);
    }
    if (key == "4"){
      filter(GRAY);
    }
    if (key == "5"){
      filter(ERODE);
    }
    if (key == "6"){
      filter(BLUR,20);
    }
  }
}

// wenn die Mousetaste losgelassen wird
// wird ein Foto mit Datum und Uhrzeit gemacht
// z.B. 20171219_132636_video-shot.jpg
function mouseReleased() {
  var dateiname = "" + year() + month() + day() + "_" + hour() + minute() + second() + "_video-shot.jpg"
  save(dateiname);
}

Übungen


Rechteck wächst mit Tastatur-Befehlen

da gibt es natürlich noch ganz viele Zwischenschritte!

Briefing

  • Canvas: 960 × 400 Pixel, weiß

  • keine Füllfarbe

  • Strichstärke 2px

  • Strichfarbe rot

  • rectMode(CENTER);

  • Rechteck in der Mitte des Canvas, Anfangsgröße 20 × 20 Pixel

  • Bei Drücken der X-Taste wird das Rechteck um 10px breiter, das Zentrum bleibt aber in der Mitte des Canvas

  • Bei Drücken der Y-Taste wird das Rechteck um 10px höher, das Zentrum bleibt aber in der Mitte des Canvas

  • Drücken der Taste „S“ speichert das Muster als „muster.png“

Königsaufgabe

Wie macht man es, dass das Muster jeweils mit Datum und Sekunden-genauer Uhrzeit gespeichert wird?


Pfeile als Cursor

Die benötigten Bilder befinden sich schon im Übungsordner…

Briefing

  • Canvas: 960 × 400 Pixel
  • Helikopter-Bild als Hintergrundbild
  • kein Cursor
  • Roter Pfeil an Cursor-Position, wenn der Cursor in der oberen Hälfte des Canvas ist
  • Blauer Pfeil an Cursor-Position, wenn der Cursor in der unteren Hälfte des Canvas ist

P5

// schaut bei https://p5js.org/reference/ folgendes nach:

mouseX;
mouseY;

https://p5js.org/reference/


Live Video mit Filter Threshold

Briefing

  • Canvas: 960 × 600 Pixel
  • Live Video Stream
  • wenn die Mouse-Taste gedrückt ist, soll auf das Video der Filter „THRESHOLD“ angewendet werden

P5

Schaut bei https://p5js.org/reference/ nach, was man mit „mouseIsPressed“ machen kann…


Am 23.01.20 abzugeben

Bitte haltet Euch an die vorgegebene Struktur !

P5 Übungen

  • jede(r) einzeln
  • die jeweiligen Übungen in ihren Ordnern – gemeinsam mit der jeweiligen index.html-Datei

Bitte ladet Eure P5-Aufgaben via „Cyberduck“ in Euren Webspace auf dem FK12-Server (fk12.org) und testet, ob man Eure Übungen online sehen kann!

Hölzchen-Spiel

Bitte erstellt die Dokumentation als ein PDF – z.B. in Indesign

  • Entwurfsskizzen
  • Gebrauchsanweisung
  • Verpackung/Transportmöglichkeit (falls notwendig)
  • Fotos des Spieles (Produktfoto)
  • Fotos von Leuten beim Spielen

Bitte schickt mir das PDF mit den Hölzchenspiel-Sachen per Mail oder – falls die Dateien zu groß sind – z.B. via https://wetransfer.com/


Danke

Weitere Vorträge: