Kurze Teambesprechung, wie es mit Euren Hölzchen-Spielen steht

P5

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

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

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));
  }
}

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;
  }

}

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 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);
}

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();
}

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);
  }
}

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);
}

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);
}

… 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);
}

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?

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/

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…

Bitte ladet Eure P5-Aufgaben sowie die Hölzchenspiel-Dokumentationen auf den FK12-Server ins Verzeichnis "Edler-Golla_WiSe1718_ID" – vergesst dabei bitte nicht, Eure Sachen so zu benamen, dass ich weiss, von wem was ist!

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

P5 Übungen

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

… und schöne, erholsame Feiertage!