computational media

homeworks for wednesday computational media class

Deformed Cube

This visualization project was presented in the ITP winter show 2014.

It consist in a 3d deformed cube which it shapes with the pass of time. There where two presentation of the project, in one the user can zoom in and out the video with the mouse, and the other one is controlled by the background music.

FINAL

I really like rotation and making 3D figures in Processing, so for the final I decided to do a composition with this tools,

The cons I have with this program is that the minim Beat object should allow a threshold input to control the beat detection ( maybe it exist an I don’t know). Also I want next time import a 3D figure made in other software, because the vertex is not 100% friendly.

I had a lot of fun with this project, and find it as a good visual for songs, so people play the visual again and every time the song (normally my songs) goes deeply in the subconscious.heres the video

 

and heres the code:

https://gist.github.com/gandradep/f92ce12235e282b89bfb

getting data

We picked data of death causes in newyork open source page.

and we arrange in a graphic drawing by year as the following video

here’ s the code:

String filename = "death.csv";
String[] rawData;
ArrayList allYears = new ArrayList();

int overallMin, overallMax;
float xSpacer, ySpacer;

int currLevel = 2007;

void setup() {
size(800, 500);
processData();
}

void draw() {

background(40);
drawGUI();
for (Year y : allYears) {
y.display();
}
}
void mouseReleased() {
for (Year y : allYears) {
if (dist(mouseX, mouseY, y.button.x, y.button.y) <y.buttonSize/2) {
currLevel = y.level;
}
}
}

void drawGUI() {
stroke(100);
fill(200);
String[] ethnicity = {
“Asian&Pacific”, “Hispanic”, “NH-Black”, “NH-White”
};
int [] years = {
2007, 2008, 2009, 2010, 2011
};

//x-asis
for (int x=0; x<ethnicity.length; x++) {
float xPos = xSpacer + (xSpacer*x);
line(xPos, height – ySpacer, xPos, ySpacer);
text(ethnicity[x], xPos – 25, height – (ySpacer – 20));
}
//min/max values
text(overallMin,xSpacer-50,height-ySpacer);
text(overallMax,xSpacer-50,ySpacer);

//instructions
text(“Homicides per year:”, 50, 25);

}

void processData() {
rawData = loadStrings(filename);
for (int i =1; i< rawData.length; i +=4) {
Year y = new Year();
String [] firstRow = split(rawData[i], “,”);
y.level = int(firstRow[0]);
for (int j = 0; j<4; j++) {
String[] thisRow = split(rawData[i+j], “,”);
y.number[j] = int(thisRow[3]);
}
y.setMinMax();
allYears.add(y);
}

xSpacer = width / (4+1);
ySpacer = 100;
int [] mins = new int [5];
int [] maxs = new int [5];
for (int i =0; i < allYears.size (); i++) {
Year y = allYears.get(i);
mins[i] = y.min;
maxs[i] = y.max;
}
overallMin = min(mins);
overallMax = max(maxs);

println(overallMin);
println(overallMax);

for (Year y : allYears) {
y.setValues();
}
}

class Year {
//variables
int level;
String[] ethnicity = {
“Asian&Pacific”, “Hispanic”, “NH-Black”, “NH-White”
};
int [] number = new int[4];
int min, max;
PVector[] pos = new PVector[4];

PVector button = new PVector();
int buttonSize = 40;

//constructor
Year() {
}
void display() {

if (currLevel == level) {
stroke(255, 0, 0);
fill(255, 0, 0);
for (int i = 0; i< pos.length; i++) {
fill(255);
text(number[i], pos[i].x, pos[i].y-15);
fill(255, 0, 0);
ellipse(pos[i].x, pos[i].y, 10, 10);
if (i line(pos[i].x, pos[i].y, pos[i+1].x, pos[i+1].y);
}
}
fill(200);
stroke(0);
ellipse(button.x, button.y, buttonSize, buttonSize);
fill(255);
text(level, button.x – 15, button.y+4);
} else {
noFill();
stroke(0);
ellipse(button.x, button.y, buttonSize, buttonSize);
fill(255);
text(level, button.x – 15, button.y+4);
}
}

//function
void setMinMax() {
min = min(number);
max = max(number);
}

void setValues() {
float graphHeight = (height – ySpacer) – ySpacer;
for (int i = 0; i<number.length; i ++) {
float adjVal = map(number[i], overallMin, overallMax, 0, graphHeight);
pos[i] = new PVector();
pos[i].x = xSpacer*(i+1);
pos[i].y = (height – ySpacer) – adjVal;
}

//button stuff
button.y = 25;
button.x = 250+(((level%1000 ) – 6)* 60);
}
}

 

video in processing

 

For this project I did exercise  16-2 from the book “Learning Processing”of Daniel Schiffman,,, and instead of drawing the image shown with ellipse i change it for squares.

here’s the video.

 

and here’s the code:

import processing.video.*;

Capture video;

void setup(){
size (320,240);

video = new Capture(this,320,240,15);
video.start();
background(0);
}

void draw(){
if (video.available()){
video.read();
}
loadPixels();
video.loadPixels();
// for (int x = 0; x<video.width; x++){
// for (int y = 0; y < video.height; y ++){
int x = int(random(video.width));
int y= int(random(video.height));
int loc = x + y*video.width;

float r,g,b;

r = red(video.pixels[loc]);
g = green(video.pixels[loc]);
b = blue(video.pixels[loc]);
noStroke();

fill(r,g,b,100);
rect(x,y,13,13);

}

objects

Here ‘s the code of the program,

//declaring my objects
Car myCar1;
Car myCar2;
Car myCar3;
Meteor myMeteor;

void setup() {
size (400, 300);
// initializing objects
myCar1 = new Car(color(255, 100, 0), 0, 100, 2, 0);
myCar2 = new Car(color (200, 255, 30), 0, 200, 1.5, 0);
myCar3 = new Car(color(10, 200, 200), 0, 150, 2.3, 0);
myMeteor = new Meteor();
}

void draw() {
// background
background(100, 200, 155);
rectMode(CORNER);
fill(150);
rect(0, height/4, width, height/2);
// using objects
myCar1.move();
myCar1.display();
myCar2.move();
myCar2.display();
myCar3.move();
myCar3.display();
myMeteor.move();
myMeteor.display();
}

class Meteor {
color c1;
color c2;
float xpos;
float ypos;
float xspeed;
float yspeed;
int savedTime;
int totalTime;

Meteor() {
c1 = color(255, 255, 0);
c2 = color (255, 100, 0);
xpos = random(width – 30, width);
ypos = 0;
xspeed = 10;
yspeed = 10;
savedTime = millis();
totalTime = 2000;
}

void display() {

ellipseMode(CENTER);
noStroke();
fill(c1);
ellipse(xpos, ypos, 18, 18);
fill(c2);
ellipse(xpos, ypos, 10, 10);
}
void move() {
int passedTime = millis()- savedTime;
if (passedTime > totalTime) {
xpos = xpos – xspeed;
ypos = ypos + yspeed;
savedTime = millis();
}
if (ypos > height) {
ypos = 0;
xpos = width;
}
}
}
class Car {
color c;
float xpos;
float ypos;
float xspeed;
float yspeed;

Car(color tempC, float tempXpos, float tempYpos, float tempXspeed, float tempYspeed) {
c = tempC;
xpos = tempXpos;
ypos = tempYpos;
xspeed = tempXspeed;
yspeed = tempYspeed;
}
void display () {

rectMode(CENTER);
fill (c);
rect (xpos, ypos, 40, 20);
fill (0);
// wheels
rect (xpos – 10, ypos – 10, 15, 10);
rect (xpos + 10, ypos – 10, 15, 10);
rect (xpos – 10, ypos + 10, 15, 10);
rect (xpos + 10, ypos + 10, 15, 10);
}

void move () {
xpos = xpos + xspeed;
ypos = ypos + yspeed;
if (xpos > width) {
xpos = 0;
}
if (ypos > height) {
ypos = 0;
}
}
}

 

functions in processing

For this assignment i divided the draw part of last “egg program” into functions. The variables that you can change in draw are the color of the sperms and the maximum size that the egg grows when mouse is inside.

here s the new code

// egg position
int x = 400;
int y = 300;
float radius = 20; // radius of egg
float angle = 0.0;
float anglevel = 0.1;//velocity of the tail
float amplitude = 10; // amplitud of the tail sine wave
// heads of the sperms
Float headRadius = amplitude*1.8;
float headx= 200;

int a=10;
void setup() {
size(800, 600);
smooth();
ellipseMode(RADIUS);
}
void draw() {
background(216, 80, 132);
tail(200,255,200); // three numbers to control color
spermHead();
egg();
mouseInEgg(200); // you can tell maximum radius of the egg.
}

void egg() {
noStroke();
fill(193, 30, 90);
ellipse(x, y, radius, radius);
}

void mouseInEgg(float maxEggSize) {
float d = dist(mouseX, mouseY, x, y);
if ((d < radius) && (radius <= maxEggSize)) { fill(213, 49, 100); text(“GET OUT!!”, 310, 300); radius = radius * 1.09; textSize(40); headx = 100; } // conditional to grow till maxEggSize radius if (radius >= maxEggSize) {
radius = maxEggSize;
}
// if mouse out from ovary return to normal
if (d > radius && radius > 20) {
radius = radius – 5;
headx = 200;
}
}
void tail(int red, int green, int blue) {
for ( int x = 100; x<=200; x +=4) {//the length of the sperm tail
fill(red, green, blue);
// 3 tails
float y4 = amplitude *sin(angle);
angle += anglevel;
ellipse(x, y4+height/4, 2, 2);
ellipse(x+100, y4+height/2, 2, 2);
ellipse(x, y4+height*3/4, 2, 2);
}
}
void spermHead() {
ellipse(headx, height/4, headRadius, headRadius);
ellipse(headx + 100, height/2, headRadius, headRadius);
ellipse(headx, height*3/4, headRadius, headRadius);
}

 

 

using loops in processing

This project i did together with Hugo de Lucena (www.hugoluc.com),,

we decided to use sine function to code sperms trying to reach a ovary, and to make it more interactive something happen when you put the mouse inside the ovary.

The following examples help us to develop this code:

Daniel Schiffman sine wave (http://processing.org/examples/sinewave.html)

and example 5-16 (page 66)  “The bounds of a Circle” from the first edition of the book Getting Started with Processing of Casey Reas & Ben Fry

Here is the processing code :


// ovary position
int x = 400;
int y = 300;

float radius = 20; // radius of the tail circles
float angle = 0.0;
float anglevel = 0.2;
float amplitude = 10; // amplitud of the tail sine wave
// heads of the sperms
float headx= 200;
float headx2= 300;
int a=10;
void setup() {
size(800, 600);
smooth();
ellipseMode(RADIUS);
}
void draw() {
background(216, 80, 132);
//——————-sperm———————-
for (int y4 = 300; y4<=height-101; y4+=5) {// a for loop to make a delay of the tale
angle += anglevel;
}
for ( int x = 100; x<=200; x +=5) {//the length of the sperm tail
fill(255, 255, 255);

// 3 tails
float y4 = amplitude *sin(angle);
float y1 = amplitude *cos(angle);
float y2 = amplitude *sin(angle+0.2);
angle += anglevel;
ellipse(x, y4+height/4, 2, 2);
ellipse(x+100, y1+height/2, 2, 2);
ellipse(x, y2+height*3/4, 2, 2);
}

ellipse(headx, height/4, 15, 15);
ellipse(headx2, height/2, 15, 15);
ellipse(headx, height*3/4, 15, 15);

//—————–ovary————————
float circlecolor = map(radius, 20, 300, 0, 10);
float d = dist(mouseX, mouseY, x, y);
noStroke();
fill(193, 30, 90);
ellipse(x, y, radius, radius);
// conditional if mouse inside the circle
if ((d < radius) && (radius <= 350)) {
fill(213, 49, 100);
text(“GET OUT!!”, 310, 300);
radius = radius * 1.09;
fill(193, 39, 90-circlecolor);
textSize(40);
headx = 100;
headx2 = 200;
}
// conditional to grow till 350 radius
if (radius >= 350) {
radius = 350;
}
// if mouse out from ovary return to normal
if (d > radius && radius > 20) {
radius = radius – 5;
fill(193, 39, 90-circlecolor);
headx = 200;
headx2 = 300;
}
}

 

the dude animation

For the second ICM project, i decided to animate my first project, the dude,…. so you can interact with the cartoon using the mouse (Y position, up and down).
Also while time pass there are stars appearing in the background.

heres the link to see the animation.

here’s the code:
float faceX=356;
float faceY=155;
float faceW=400;
float faceH=200;

float mouthX=faceX;
float mouthY=faceY+205;
float mouthW=faceW;
float mouthH=faceH-50;

float eyeX=290;
float eyeY=155;
float eyeW=70;
float eyeH=80;

//variables for the stars in background
float c;
float a;
float w;
float h;
float x;
float y;

//eyelids points
float eyeul=5*QUARTER_PI;
float eyeur=7*QUARTER_PI;
float eyedl=3*QUARTER_PI;
float eyedr=QUARTER_PI;
float addeye;

float aeyes=10;
void setup() {
size(720, 600);
smooth();
ellipseMode(RADIUS);
rectMode(CENTER);
fill(0);
rect(width/2, height/2, width, height);
}

void draw() {
// background(255);
// fill(137);
// ellipse(c,100,10,10);
// c++;

c=random(0, 2);
a = random(255);
w= random(1);
h= random(1);
x = random(width);
y = random(height*2/3);
// Use values to draw an ellipse
noStroke();
fill(255, a);
ellipse(x, y, w, h);
//background
fill(10, 200, 10);
rect(width/2, height*5/6, width, height/3);

//face and mouth rects
fill(255, 255, 90);
stroke(0);
strokeWeight(8);
strokeJoin(ROUND);
rect(faceX, faceY, faceW, faceH);
rect(mouthX, mouthY, mouthW, mouthH);
strokeWeight(6);
//triangles to draw a tongue and
fill(230, 100, 0);
triangle(mouthX-16, mouthY-75, mouthX+144, mouthY-75, mouthX+114, mouthY-35);
fill(0, 150);
triangle(mouthX+4, mouthY+50, mouthX-36, mouthY+10, mouthX+44, mouthY+10);
stroke(0, 150);

stroke(0);//line blck
strokeWeight(2);
fill(200, 100, 0);
ellipse(eyeX-14, eyeY, eyeW, eyeH);
ellipse(eyeX+146, eyeY, eyeW, eyeH);

fill(255);// INNER EYES
ellipse(eyeX, eyeY, eyeW, eyeH);
ellipse(eyeX+160, eyeY, eyeW, eyeH);
fill(255, 0, 0, aeyes);// INNER EYES
ellipse(eyeX, eyeY, eyeW, eyeH);
ellipse(eyeX+160, eyeY, eyeW, eyeH);

noStroke();//pupils
fill(10, 40, 200);
ellipse(eyeX+17+c, eyeY+3, eyeW-25, eyeH-30);
ellipse(eyeX+157+c, eyeY+3, eyeW-25, eyeH-30);

//eyelids
stroke(0);//line blck
fill(200, 100, 0);
arc(eyeX, eyeY, eyeW, eyeH, eyeul, eyeur,CHORD);
arc(eyeX, eyeY, eyeW, eyeH, eyedr, eyedl, CHORD);
arc(eyeX+160, eyeY, eyeW, eyeH, eyeul, eyeur, CHORD);
arc(eyeX+160, eyeY, eyeW, eyeH, eyedr, eyedl, CHORD);

addeye=map(1, 0, 40, 0, QUARTER_PI);//calculates the value to be added for the eyelids to close at same time as the mouth is moves.

//opening mouth, close lids, make eyes red when mouse goes down and stopping at a point even if mouse keeps going down.
if (mouthY>=399) {
mouthY=399;
eyeul=PI;
eyeur=2*PI;
eyedl=PI;
eyedr=0;
aeyes=120;
} else if (mouseY>pmouseY) {
mouthY=mouthY+1;
aeyes=aeyes+3;
eyeul=eyeul-addeye;
eyeur=eyeur+addeye;
eyedl=eyedl+addeye;
eyedr=eyedr-addeye;
}
//closing mouth, open lids, making eyes white when mouse goes up and stopping at a point even if mouse keeps going up.
if (mouthY<=360) { mouthY=360; eyeul=5*QUARTER_PI; eyeur=7*QUARTER_PI; eyedl=3*QUARTER_PI; eyedr=QUARTER_PI; aeyes=0; } else if (mouseY < pmouseY) { mouthY=mouthY-1; aeyes=aeyes-3; eyeul=eyeul+addeye; eyeur=eyeur-addeye; eyedl=eyedl-addeye; eyedr=eyedr+addeye; } }

ITP studying hard….

After been told that this master program is really hard,, and a lot of people forgets the meaning of the word “sleep”I decided to create my 2D alter ego……. still looking for a name 🙂

icm

Here s the code.

size(720,600);
smooth();
background(200);

ellipseMode(RADIUS);
rectMode(CENTER);

fill(255,255,0,150);//body
stroke(0);
strokeWeight(8);
strokeJoin(ROUND);
rect(356,155,400,200);
rect(356,370,400,150);

strokeWeight(6);

fill(230,100,0);
triangle(340,295,500,295,470,340);//tongue
fill(0,150);
triangle(360,420,320,380,400,380);//goatee
stroke(0,150);

stroke(0);//line blck
strokeWeight(2);
fill(200,100,0);
ellipse(276, 155, 70,80);
ellipse(436, 155, 70,80);

fill(255,200,200);// INNER EYES
ellipse(290, 155, 70,80);
ellipse(450, 155, 70,80);

noStroke();//pupils
fill(10,40,200);
ellipse(307,158,45,50);
ellipse(447,158,45,50);

//eyelids
stroke(0);//line blck
fill(200,100,0);
arc(290,155,70,80,radians(200),radians(330),CHORD);
arc(290,155,70,80,radians(30),radians(130),CHORD);
arc(450,155,70,80,radians(210),radians(340),CHORD);
arc(450,155,70,80,radians(50),radians(150),CHORD);