Makey Makey Board
Beispielcodes
Zeit zum Experimentieren…

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

Das Makey Makey Board funktioniert wie eine Tastatur. Auf der Vorderseite des Boards kann man ganz einfach die Pfeiltasten, die SPACE-Taste und den linken Mouseclick simulieren – dabei spielt es keine Rolle, welches Programm man geöffnet hat!

… in p5.js kann man somit erst mal Sachen für die normale Computer-Tastatur schreiben und dann das Makey Makey Board anschliessen und eigene Interfaces entwickeln – siehe nächste Seite!

Schaut Euch die Demo an – auf einer normalen Tastatur verwendet das Script die Pfeiltasten zum Navigieren, die SPACE-Taste zum Neustarten des Spiels und die linke Mouse-Taste zum Erhöhen der Geschwindigkeit.

p5-Code

var x, y;

var d = 100; // Durchmesser des Kreises

var xR = 0;
var yR = 0;

var speed = 1;

var keyBoardSound, failSound;

function preload() {
  keyBoardSound = loadSound("sounds/buttonchime02up.wav");
  failSound = loadSound("sounds/443808__tissman__fail.wav");
}

function setup() {
  createCanvas(960, 400);

  frameRate(30);

  x = width / 2;
  y = height / 2;
}

function draw() {
  background(255);

  textSize(20);
  textAlign(LEFT);
  fill(255, 0, 0);
  text("KeyCode: " + keyCode, 5, height - 5); // Display last key pressed.

  fill(0, 0, 255);
  noStroke();
  ellipse(x + xR, y + 1 * yR, d, d);

  x = x + xR * speed;
  y = y + yR * speed;

  // wenn die Ränder des Kreises die Ränder der Bühne berühren
  // ist das Spiel aus
  // d / 2 = radius
  if (
    x - d / 2 < 0 ||
    x + d / 2 > width ||
    y - d / 2 < 0 ||
    y + d / 2 > height
  ) {
    background(0);
    textAlign(CENTER);
    textSize(150);
    fill(255, 0, 0);
    text("Game over!", width / 2, 220);
    failSound.play();
  }

  // wenn der Kreis noch weiter draussen ist, hört der Sound wieder auf
  var au = 15;
  if (x < 0 - au || x > width + au || y < 0 - au || y > height + au) {
    failSound.stop();
  }
}

function keyPressed() {
  /*
  38 = Pfeil rauf
  40 = Pfeil runter
  37 = Pfeil links
  39 = Pfeil rechts
  32 = SPACE-Taste
  */

  if (keyCode == 38) {
    yR = -1;
  }

  if (keyCode == 40) {
    yR = 1;
  }

  if (keyCode == 37) {
    xR = -1;
  }

  if (keyCode == 39) {
    xR = 1;
  }

  if (keyCode == 32) {
    // alles wieder auf Ausgangsposition
    xR = 0;
    yR = 0;
    x = width / 2;
    y = height / 2;
    speed = 1;
    background(0);
  }

  // egal, welche Taste gedrückt wird, der Sound wird abgespielt
  keyBoardSound.play();
}

function mouseReleased() {
  speed = speed + 1;
  keyBoardSound.play();
}

Auf der Rückseite des Makey Makey Boards gibt es noch einiges an weiteren Funktionen. So kann man z.B mit der Steckerleiste am linken Rand die Buchstaben W A S D F G auslösen…

Als Buttons kann man praktisch alles verwenden, das Strom leiten kann…

Schaut Euch die Demo an – bei einem normalen Keyboard werden die Tasten W A S D F verwendet…

p5 Code

var HGSound, CreepySound, SnareSound, DoorKnocksSound, PingSound, DubStebSound;
var HGSound_an = 0;

// Vorladen der Sounds, damit diese gleich losspielen
function preload() {
  // Hintergrundsound, läuft gleich am Anfang
  HGSound = loadSound("sounds/456938__greek555__loop-mix.mp3");

  // CreepySound
  CreepySound = loadSound("sounds/ambience-creepy-wind-a.wav");

  // SnareSound
  SnareSound = loadSound("sounds/456955__uberproduktion__hr-snare.wav");

  // DoorKnocksSound
  DoorKnocksSound = loadSound(
    "sounds/370913__sjturia__door-three-knocks-hard.wav"
  );

  // PingSound
  PingSound = loadSound("sounds/444918__mattix__ping.wav");

  // DubStebSound
  DubStebSound = loadSound(
    "sounds/271576__markovujic92__dubstep-loop-perfect-by-mark-w.mp3"
  );
}

function setup() {
  createCanvas(960, 600);
  frameRate(15);

  CreepySound.loop();
}

function draw() {
  if (HGSound_an == 0) {
    background(int(random(0, 255)));
  } else {
    background(int(random(0, 255)), int(random(0, 255)), int(random(0, 255)));
  }
  // zeigt die großen Buchstaben auf dem Screen
  buchstabenZeigen();
}

function keyPressed() {
  if (key == "W" || key == "w") {
    if (DubStebSound.isPlaying()) {
      DubStebSound.stop();
    } else {
      DubStebSound.loop();
    }
  }

  if (key == "A" || key == "a") {
    if (HGSound.isPlaying()) {
      HGSound.stop();
      HGSound_an = 0;
    } else {
      HGSound.loop();
      HGSound_an = 1;
    }
  }

  if (key == "S" || key == "s") {
    if (PingSound.isPlaying()) {
      PingSound.stop();
    } else {
      PingSound.play();
    }
  }

  if (key == "D" || key == "d") {
    if (SnareSound.isPlaying()) {
      SnareSound.stop();
    } else {
      SnareSound.play();
    }
  }

  if (key == "F" || key == "f") {
    if (DoorKnocksSound.isPlaying()) {
      DoorKnocksSound.stop();
    } else {
      DoorKnocksSound.play();
    }
  }
}

function buchstabenZeigen() {
  textSize(800);
  textAlign(CENTER);
  fill(255, 0, 0);
  var Ukey = key.toUpperCase();
  text(Ukey, width / 2, height / 2 + 290); // Display last key pressed.
}

Wir haben 6 Makey Makey Boards – probiert doch mal aus, was Ihr damit alles machen könnt…