Themen
- 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 – 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.
Schaut Euch die Demo an…
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…
Schaut Euch die Demo an…
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;
}
}
Je schneller man den Cursor bewegt, desto größer werden Kreis/Quadrat
Probiert mal die verschiedenen Tastatur-Befehle aus!
Schaut Euch die Demo an…
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!
Schaut Euch die Demo an…
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);
}
Schaut/hört Euch die Demo an…
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();
}
Schaut Euch die Demo an…
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…
Schaut Euch die Demo an…
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
Schaut Euch die Demo an…
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!
Schaut Euch die Demo an…
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);
}
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“
Wie macht man es, dass das Muster jeweils mit Datum und Sekunden-genauer Uhrzeit gespeichert wird?
// schaut bei https://p5js.org/reference/ folgendes nach:
mouseX;
mouseY;
Schaut bei https://p5js.org/reference/ nach, was man mit „mouseIsPressed“ machen kann…
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!
Bitte erstellt die Dokumentation als ein PDF – z.B. in Indesign
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/