[INTRO2ICM] WK8,9 VIDEO & AUDIO

SKETCH to DATA>>

SKETCH to Video & Audio>>

[DATA]
DATA I used the Quandle to do the Data JSON. The rectangles have Y values from the S&P SKEW in year 1990. I wanted to have the JSON on live stock but it was difficult to find free. So I got this daily value. I used the last two recent value on the sketch.

[VIDEO & AUDIO]
I used the face tracker library. The ellipses are showing the facial points.  I used the size of the ellipses in i which shows the logic of the face tracker. From the small ellipses to the bigger ellipses, you can see how the face tracker is catching one’s face. I used the audio volume which detects the volume of the environment.  If one plays the music as watching the webcam will create nice expression.

[DATA CODE]
var url = “https://www.quandl.com/api/v3/datasets/CBOE/SKEW.json?auth_token=CzqAJysqgpy4iVW1CaK6”
var input;
var a;
var b;
function colorblock(x,y,a,b){
noStroke();
// noFill();
fill(0,255,0);
rect(x,y+40,a+14,b+100);
fill(0,200,255);
rect(x,y,a+10,b+50);
fill(0,0,255);
rect(x+30,y+25,a+10,b+115);
fill(255,20,20);
rect(x+10,y,a+20,b+40);
fill(0,200,255);
rect(x+30,y,a+5,b+30);
fill(100,0,255);
rect(x+14,y+40,a+10,b+100);
fill(0,0,100);
rect(x+20,y+80,a+15,b+60);
fill(255,255,0);
rect(x+35,y,a+20,b+50);
fill(255,50,0);
rect(x+40,y+50,a+15,b+50);
fill(255,50,255);
rect(x+40,y+100,a+15,b+40);
}

function setup() {
createCanvas(windowWidth,windowHeight);
loadJSON(url, gotdata);

}
function gotdata(x){
input = x;
// println(input);

}

function draw() {
background(0,0,50);

if(input){

for(i = 0; i<input.dataset.data.length;i++){
a = input.dataset.data[i];
b = subset(a,1,3);
//text(a,10,i*50);
//text(input.dataset.data[i],10,i*50);
//stroke(255,0,random(0,255));
//strokeWeight(10);
//line(i*.2,windowHeight-b,i*.2,b) ;
//ellipse(windowWidth/2,windowHeight/2,100+b,100+b)
colorblock(i*0.21,b,i*0.21,b);

}
// TODAY SKEW
a = input.dataset.data[0];
b = subset(a, 1,3);

// YESTERDAY SKEW
x = input.dataset.data[1];
y = subset(x, 1,3);

stroke(255,0,0);
strokeWeight(100);
line(windowWidth/4,b,3*windowWidth/4,y);

strokeWeight(50);
stroke(255,100,0);

textSize(50);
fill(0,100,255);
text(b,windowWidth/4,b);
fill(0,100,255);
text(y,3*windowWidth/4 – 100,y);
text(“S&P SKEW” ,windowWidth/2-150,windowHeight/2);

}
}

[VIDEO & AUDIO CODE]

// For more: https://github.com/auduno/clmtrackr
var ctracker;
var input;

function setup() {

//AUDIO SETUO
input = new p5.AudioIn();
input.start();

// setup camera capture
var videoInput = createCapture(VIDEO);
videoInput.size(windowWidth, windowHeight);
videoInput.position(0, 0);
videoInput.hide();

// setup canvas
var cnv = createCanvas(windowWidth, windowHeight);
cnv.position(0, 0);

// setup tracker
ctracker = new clm.tracker();
ctracker.init(pModel);
ctracker.start(videoInput.elt);
noStroke();

}

function draw() {
//VIDEO OFF
clear();

// get array of face marker positions [x, y] format
var positions = ctracker.getCurrentPosition();

//FOR FACE DETECT
for (var i = 0; i < positions.length; i++) {
//CURVES
noFill();
stroke(random(0,255),0,0,50);
strokeWeight(vol * 100);
curve(1000,-1000,0,0, positions[i][0], positions[i][1],1000,1000);
curve(-1000,-1000,0,windowHeight, positions[i][0]-400, positions[i][1],1000,1000);
curve(3000,3000,windowWidth,windowHeight, positions[i][0]+400, positions[i][1],-1000,-1000);

//ELLIPSES
fill(100,0,0,180-i);
strokeWeight(0);
ellipse(positions[i][0], positions[i][1], i + vol * 500, i + vol * 100);
ellipse(positions[i][0]-400, positions[i][1],i + vol * 500, i + vol * 100);
ellipse(positions[i][0]+400, positions[i][1], i + vol * 500, i + vol * 100);
strokeWeight(0);

//AUDIO
var vol = input.getLevel();

//TEXT
strokeWeight(50);
stroke(0,100,255);
fill(255,255,255);
textSize(100 + vol * 100);
text(“GORILLAZ!!”, windowWidth/2-300, windowHeight/4);

//gOrillaz’s O
fill(255,0,0);
noStroke();
ellipse(windowWidth/2-180, windowHeight/3-100, 100 + vol * 800, 100 + vol * 800);
fill(255,255,0);
ellipse(windowWidth/2-180, windowHeight/3-100, 50 + vol * 500, 50 + vol * 500);
}
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s