Startseite Skripte für das Wintersemester 2017/18 Interaction Design P5, Teil 3 Computer-Kamera


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