Background Tester - OpenProcessing

mySketch
xxxxxxxxxx
 
var vidSize = 5;
var screen = 2;
var circles = [];
var loaded = false;
var points = [];
var COLORS = ['#000000', '#191919', '#333333', '#4c4c4c'];
var pointsColor = [];
var counter = 0;
var positive = true;
var fps = 60;
var capturer = new CCapture({ format: 'png', framerate: fps });
var startMillis; 
​
//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(1350, 1350);
  initTriang();
  frameRate = fps;
}
​
// 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.div(4);
  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/100 * height/100);
  for(var i = 0; i < mpts; i++){
    points.push(new NewParticle(~~random(width), ~~random(height)));
  }
  print(points.length);
  for(var p = 0; p < points.length; p++){
    pointsColor[p] = (color(random(COLORS)));
  }
  print(pointsColor.length);
}
​
​
function draw() {
  if(frameCount === 1){
    capturer.start();
  }
  
  if (startMillis == null) {
    startMillis = millis();
  }
  var duration = 25000;
  var elapsed = millis() - startMillis;
  var t = map(elapsed, 0, duration, 0, 1);
  
  
  if (t > 1) {
    noLoop();
    console.log('finished recording.');
    capturer.stop();
    capturer.save();
    return;
  }
  
  background(100);
  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(positive){
      counter+=1;
      if(counter === 120){
        positive = false;
      }
    } else{
      counter-=1;
      if(counter === 0){
        positive = true;
      }
    }
    
    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 c1 = pointsColor[Triangles[j]];
      var c2 = pointsColor[Triangles[j+1]];
      var c3 = pointsColor[Triangles[j+2]];
      
      
      let colors = lerpColor(lerpColor(c1, c2, counter/120), c3, counter/120);
    
      fill(colors);
      
      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
      }
    }
  }
  console.log('capturing frame');
  capturer.capture(document.getElementById('defaultCanvas0'));
}
​