PenTimeStories

Aus toolbox_interaktion
Wechseln zu: Navigation, Suche
PenTimeStories

Seite4.png

Teammitglieder: Julia Deines
Astrid Marmann
David Herzig


PenTimeStories ist ein interaktives Kinderbuch, bei dem es die Aufgabe des Spielers ist, die eigene Figur sowie Spielgegenstände selbst zu malen.
Die gemalten Bilder werden von der Webcam abfotografiert und direkt in das Spiel eingefügt.

Verwendete Technik

Software

  • Processing 2.2.1

Hardware

  • Logitech Quickcam PRO 9000
  • 3 Laptops

Betriebssystem

  • OSX 10.10.1

Spielablauf

Es existiert bereits eine vorgefertigte Geschichte. Im Verlauf dieser wird der Spieler wiederholt dazu aufgefordert selbst aktiv zu werden, indem er die Spielfigur und diverse Spielgegenstände mit einem Stift auf ein reales Blatt Papier zeichnet. Anschließend wird das Bild von einer Webcam erfasst und in den aktiven Spielverlauf eingesetzt.

Steuerung

Die Steuerung des Spiels erfolgt durch vorbelegte Tasten.
n = Next (es wird zur nächsten Seite geblättert)
p = Picture (die Webcam macht ein Foto)
b = Back (es wird zur vorherigen Seite geblättert)

Programmentwicklung

Zu Beginn haben wir uns auf eine geeignete Fenstergröße von 1440 x 900px festgelegt.
Im nächsten Schritt galt es eine Kamera anzusteuern, dies haben wir sowohl mit einer internen sowie mit einer externen Kamera umgesetzt. (Dem Spieler bleibt es dabei selbst überlassen für welche Variante er sich entscheidet.)
Um das Rauschen in den Bildern zu entfernen haben wir die Filter „Threshold“ und „Blur“ verwendet, die den Kontrast erhöht und die dadurch entstandenen harten Kanten geglättet haben.
Wir verwenden für die Seitenzahl einen Zähler, der sich durch Drücken der n-Taste um Eins erhöht. Der jeweilige Stand des Zählers beschreibt auch gleichzeitig die aktuelle Seitenzahl.
Die b-Taste verringert den Zähler um Eins, was ein zurückblättern ermöglicht.
Durch das Drücken der p-Taste wird die bereits gestartet Kamera ausgelöst, die Filter und der Zuschneide-Algorithmus automatisch auf das Bild angewendet und dieses dann unter der richtigen Input-Bezeichnung abgespeichert.

Tastenbelegung & Ansteuerung des Webcam

import processing.video.*;
Capture cam;

void setup(){
 size(1440, 900);
 cam = new Capture(this);
 cam.start();
}

void keyPressed(){   
 if (key == 'n') {
   if (imageStoryCount != 15){
   imageStoryCount++;
   page++;
   img = loadImage("seite"+imageStoryCount+".png");
   }
  }
  if (key == 'b') {
    if (imageStoryCount != 1){
   imageStoryCount--;
   page--;
   img = loadImage("seite"+imageStoryCount+".png");
  }
  }
  
  if (key == 'p') {
   if(cam.available()){
    cam.read(); }
   image(cam, img.width/2, img.height/2, 1440, 900);
   saveFrame("input"+imageInputCount+".jpg");
   input = loadImage("input"+imageInputCount+".jpg");
   input.filter(THRESHOLD, 0.55);
   input.filter(BLUR, 0.6);
   image(input, img.width/2, img.height/2, 1440, 900);
   saveFrame("input"+imageInputCount+".jpg");

Spielablauf

Die draw-Methode stellt sicher, dass das richtige Input-Bild auf der aktuellen Seite unter den angegebenen Koordinaten angezeigt wird.

void draw(){
  imageMode(CENTER);
 img = loadImage("seite"+imageStoryCount+".png");
 image(img, img.width/2, img.height/2, 1440, 900);
 
  //PROTAGONIST
    if(imageStoryCount == 3 || imageStoryCount == 5 || imageStoryCount == 6 || imageStoryCount == 8 || imageStoryCount == 9 
      || imageStoryCount == 11 || imageStoryCount == 12 || imageStoryCount == 14 || imageStoryCount == 15){
       input1 = loadImage("input1.jpg");
       image( input1, 200, 400, 300, input1.height/3);    
 } 
 //SCHLOSS KLEIN
     if(imageStoryCount == 8 || imageStoryCount == 9 || imageStoryCount == 11 || imageStoryCount == 12 || imageStoryCount == 14){
       input2 = loadImage("input2.jpg");
       image( input2, 650, 200, 300, input2.height/4);
}
 //WAFFE
     if(imageStoryCount == 11){
     input3 = loadImage("input3.jpg");
     image( input3, 650, 350, 300, input3.height/4);
}
 //STERN
     if(imageStoryCount == 14){
     input4 = loadImage("input4.jpg");
     image( input4, 1130, 337, 30, 30);
}
 //SCHLOSS GROSS
     if(imageStoryCount == 15){
       imageMode(CORNERS);
     image( input2, 900, 0, 1440, 531);
}
}

Ausschnitt des Zuschneide-Algorithmus

Der Zuschneide-Algorithmus geht das Bild von allen Seiten durch und sobald es auf ein Pixel stößt, das „ungleich Weiß“ ist, werden die vorher durchgegangenen Zeilen weggeschnitten.

newimg = loadImage("input"+imageInputCount+".jpg");
for (h = 0; h < newimg.height; h++) {
  if (done2 == 1) break;
 for (b = 0; b < newimg.width; b++) {
   if (done2 == 1) break;
   if (get(b, h) != color ( 255, 255, 255 )) {
     done2 = 1;
     newimg2 = newimg.get(0, h, newimg.width, newimg.height-h);
     newimg2.save("input"+imageInputCount+".jpg");
     break;
    } 
}
 } 
[...]

Vereinfachte Darstellung des Programms

Über Capture cam; steuert die Software automatisch die vom Rechner als "Hauptkamera" erkannte Webcam an.
Durch Drücken der p-Taste wird ein Screenshot des Kamerabildes unter dem Namen „input[Ziffer].jpg“ lokal abgespeichert.
Die draw-Methode greift anschließend auf die jeweiligen inputs zu und fügt diese im Spiel ein.
Pentime hwsw.jpg

Screenshots

Pentimestories 01.png

Pentimestories 02.png

Pentimestories 03.png

Nächste Schritte

  • Optimierung des Zuschneide-Algorithmus
  • Behebung kleiner Fehler beim Seitenzähler

Download

PenTimeStories