Author: Briley

I really enjoyed the generative portraits and the text-rain assignment the most of everything we learned this semester. I like the idea of a canvas that reacts to what it sees, and so I decided to combine the two and create a generative portrait that responds to the camera on my computer.

For this project, I created a program that generates filled in black and white circles that represent pixels that are bellow a certain threshold and larger open circles in an amplified color that represent pixels above that threshold.  In my original portrait project, I found that I most liked the compositions that involved both lines and circles, and so for this project I implemented both, but put the lines only at extreme light and extreme dark.  Also, I flipped the camera so that it provides a mirror image and created a basic frame to tie all the loose shapes together. I would have liked to be able to determine what type of circle is drawn based on brightness relative to surrounding pixels rather than brightness relative to the whole canvas, but that would have been for() loops inside of for() loops and probably would have made my computer have a heart attack.

var myCaptureDevice;
var brightnessNum = 50; 
var darkestNum = 30; 
var lightestNum = 80; 

function setup() {
  createCanvas(640, 480);
  myCaptureDevice = createCapture(VIDEO);
  myCaptureDevice.size(640, 480);
  myCaptureDevice.hide(); // this hides an unnecessary extra view.
  frameRate(10); 
}

//--------------------------------------------------------------------
function draw() {
  background("white");
  myCaptureDevice.loadPixels();
  reverseCamera(); //makes camera reflect like mirror

  drawLightLines(); //lines from lightest points
  drawCircles(); //circles in mid-range brightness
  drawDarkLines();  //lines from darkest points 
  drawFrame(); //white frame 
}

function drawFrame(){
  stroke("white"); 
  strokeWeight(7); 
  noFill(); 
  rect (20, 20, 600, 440); 
}

function reverseCamera(){
  for (var r = 0; r < myCaptureDevice.width/2; r++){
    for (var t = 0; t < myCaptureDevice.height; t++){
      var rightColor = myCaptureDevice.get(r, t); 
      var leftColor = myCaptureDevice.get(myCaptureDevice.width-1-r, t); 
      myCaptureDevice.set(r, t, leftColor); 
      myCaptureDevice.set(myCaptureDevice.width-r-1, t, rightColor); 
    }
  }
  myCaptureDevice.updatePixels(); //changes image rather than canvas 
}

function drawCircles(){
  //filled circles
  for (var j = 0; j < 4000; j++){
    var w = random(7, width-7); 
    var h = random(7, height-7); 
    var iw = constrain(floor(w), 0, width-1); 
    var ih = constrain(floor(h), 0, height-1); 
    var sSize = random(1, 25); 

    var whColor = myCaptureDevice.get(iw, ih); 
    var whBW = (red(whColor)+green(whColor)+blue(whColor))/2; 
    var whBrightness = brightness(whColor); 

    if (whBrightness < brightnessNum){ //mid-dark range brightness 
      fill(whBW); 
      noStroke(); 
      ellipse(w, h, sSize, sSize); 
    }
  }

  //open circles  
  for (var i = 0; i < 1500; i++){ var x = random(7, width-7); var y = random(7, height-7); var ix = constrain(floor(x), 0, width - 1); var iy = constrain(floor(y), 0, height - 1); var size = random(5, 40); var xyColor = myCaptureDevice.get(ix, iy); var xyBrightness = brightness(xyColor); var brighterColor = color(red(xyColor)*1.4, green(xyColor)*1.4, blue(xyColor)*1.4); //generates new color if (xyBrightness > brightnessNum){ //mid-light range brightness 
      noFill(); 
      stroke(brighterColor); 
      strokeWeight(random(1, 6)); 
      ellipse(x, y, size, size); 
    }
  }
}

function drawLightLines(){
  for(var s = 0; s < 500; s++){ var l = random(width); var m = random(height); var il = constrain(floor(l), 0, width-1); var im = constrain(floor(m), 0, height-1); var el = l + random(-75, 75); var em = m + random(-75, 75); var lmColor = myCaptureDevice.get(il, im); var lmB = (red(lmColor)+green(lmColor)+blue(lmColor))/3; var lmBrightness = brightness(lmColor); if(lmBrightness > lightestNum){
      stroke(0, lmB*1.1, lmB*1.1); 
      strokeWeight(random(1, 10)); 
      line(l, m, el, em); 
    }
  }
}

function drawDarkLines(){
  for(var g = 0; g < 1000; g++){
    var p = random(width);
    var d = random(height); 
    var ip = constrain(floor(p), 0, width-1); 
    var id = constrain(floor(d), 0, height-1);

    var ep = p + random(-50, 50); 
    var ed = d + random(-50, 50); 

    var pdColor = myCaptureDevice.get(ip, id); 
    var pdB = (red(pdColor)+green(pdColor)+blue(pdColor))/3;
    var pdBrightness = brightness(pdColor); 

    if(pdBrightness < darkestNum){
      stroke(0, pdB, pdB*2); 
      strokeWeight(random(1, 10)); 
      line(p, d, ep, ed); 
    }
  }
}