Camera Manipulation

var video;

var vidSize = 5;

var screen = 1;

var circles = [];

var loaded = false;

var points = [];

​

//Preloading the Delaunay Script

function preload(){

  var script = document.createElement( 'script' );

  script.src = 'https://cdn.rawgit.com/ironwallaby/delaunay/master/delaunay.js';

  script.onload = function(){

    loaded = true;

    initTriang();

    }

    document.body.appendChild( script );

}

​

// Creating the canvas as well as gathering input from the Video Input source and setting up the various screens

function setup() {

  createCanvas(680, 480);

  pixelDensity(1);

  video = createCapture(VIDEO);

  video.size(width/vidSize,height/vidSize);

  video.hide();

    while(circles.length < 1000){

    var circle = {

      x: random(width),

      y: random(height),

      r: random(5, 30)

    }

    circles.push(circle);

  }

  initTriang();

}

​

// creating partice positions for the Triangulation sketch. Each time the drawing is reloaded creates a different traingulation pattern.

function NewParticle(Xpos, Ypos){

  this.life = 0;

  this.pos= new p5.Vector(Xpos,Ypos);

  this.vel = p5.Vector.random2D();

  this.vel.mult(map(this.Level, 0, 5, 5, 2));

  this.move = function(){

    this.life++;

    this.vel.mult(1.0);

    this.pos.add(this.vel);

  }

}

​

//Creating the 4 non-movable points aka the corners

function InitParticle(Xpos, Ypos){

  this.life = 0;

  this.pos= new p5.Vector(Xpos,Ypos);

  this.vel = p5.Vector.random2D();

  this.vel.mult(map(this.Level, 0, 5, 5, 2));

  this.move = function(){

    this.life++;

  }

}

​

// feeding the data into the 2 functions to generate points

function initTriang(){

  if( !loaded) return;

    points.push(new InitParticle(0, 0));

    points.push(new InitParticle(0, height));

    points.push(new InitParticle(width, 0));

    points.push(new InitParticle(width, height));

  var mpts = round(width/25 * height/25);

  for(var i = 0; i < mpts; i++){

    points.push(new NewParticle(~~random(width), ~~random(height)));

  }

}

​

​

function draw() {

  background(0);

  video.loadPixels();

  loadPixels();

  // rectangular screen created mapping points and drawing from color inputs of the video 

  if(screen == 1){

    for (var y = 0; y < video.height; y++) {

      for (var x = 0; x < video.width; x++) { 

        var index = (x + y * video.width) * 4;

        var r = video.pixels[index+0];

        var g = video.pixels[index+1];

        var b = video.pixels[index+2];

        var bright = ((r+g+b)/3) / 255;

        fill(r, g, b);

        rect(x*vidSize,y*vidSize, vidSize*bright*2, vidSize*bright*2);

      }

    }

  } else if(screen == 2){ //traingulation screen. creates the triangles, determines locations and redirects velocity if needed.

    for( var rr = points.length-1; rr > -1; rr--){

    points[rr].move();

    if(points[rr].pos.x < 0){

      points[rr].vel.x = points[rr].vel.x * -1;

    }

    if(points[rr].pos.y < 0){

      points[rr].vel.y = points[rr].vel.y * -1;

    }

    if(points[rr].pos.x > width){

      points[rr].vel.x = points[rr].vel.x * -1;

    }

    if(points[rr].pos.y > height){

      points[rr].vel.y = points[rr].vel * -1;

    }

  }

    if(points.length > 0){

      var Triangles = Delaunay.triangulate( points.map( function( pt ){

          return [ pt.pos.x, pt.pos.y ];

       } ) );

    for( var j = 0; j < Triangles.length; j += 3 ){

      var p1 = points[Triangles[j]];

      var p2 = points[Triangles[j+1]];

      var p3 = points[Triangles[j+2]]; 

      var newx = round( ((p1.pos.x + p2.pos.x + p3.pos.x)/3)/vidSize);

      var newy = round( ((p1.pos.y + p2.pos.y + p3.pos.y)/3)/vidSize);

      var index3 = (newx + (newy * video.width)) * 4;

      var _r = video.pixels[index3+0];

      var _g = video.pixels[index3+1];

      var _b = video.pixels[index3+2];

      fill(_r, _g, _b);

      triangle(p1.pos.x, p1.pos.y, p2.pos.x, p2.pos.y, p3.pos.x, p3.pos.y); // draw each triangle with its corresponding color

      }

    }

  } else if(screen == 3){

      //creating circular drawing screen. generating cirlces and again filling with corrisponding color from the video input.

      for (var i = 0; i < circles.length; i++) {

      var xval = round(circles[i].x/5);

      var yval = round(circles[i].y/5);

      var index2 = (xval + yval * video.width) * 4;

      var red = video.pixels[index2+0];

      var green = video.pixels[index2+1];

      var blue = video.pixels[index2+2];

      fill(red, green, blue);

      noStroke();

      ellipse(circles[i].x, circles[i].y, circles[i].r*2,circles[i].r*2);

    } 

  }

}

​

//changes what screen if being displayed.

function keyPressed() {

  if(keyCode === LEFT_ARROW){

    if(screen <= 1){

      screen = 3;

    } else {

      screen-=1;

    }

  }

  if(keyCode ===RIGHT_ARROW){

    if(screen >= 3){

      screen = 1;

    } else {

      screen+=1;

    }

  }

}