Month: March 2018

While listening to Ross’s thunderous snore on our 7 hour flight to Amsterdam, I decided that I might as well start working on my IM project since sleeping was already out of the question.

My portrait begins with a black background that sort of resembles a dark room. Once you click the switch, the “lights” turn on and the actual portrait is revealed. I added some interactions to my portrait to make things a bit more interesting.

Here’s a video demonstrating how it works:

My code:

int clickedX;
int clickedY;
PImage img;

void setup(){
size(800, 800);
background(0, 0, 0);
img = loadImage(“switch.jpg”);
image(img, 300, 300, 200, 200);
}

void draw(){
if(clickedX > 300 && clickedX < 500 && clickedY > 300 && clickedY < 500){
background(255, 150, 150);
noStroke();

//face
fill(224, 172, 105);
rect(200, 150, 400, 500, 70);

//eyebrows
strokeWeight(20);
stroke(0, 0, 0);
line(250, 250, 290, 230);
line(290, 230, 380, 250);
line(420, 250, 510, 230);
line(510, 230, 550, 250);

//eyes
noStroke();
fill(255);
arc(320, 300, 100, 70, 0, 2*PI);
arc(480, 300, 100, 70, 0, 2*PI);
fill(25, 51, 0);
arc(322, 300, 60, 60, 0, 2*PI);
arc(482, 300, 60, 60, 0, 2*PI);
fill(0, 0, 0);
arc(322.5, 300, 40, 40, 0, 2*PI);
arc(482.5, 300, 40, 40, 0, 2*PI);

//sunglasses
if(mouseX > 250 && mouseX < 550 && mouseY > 250 && mouseY < 340){
noStroke();
fill(0, 0, 0);
rect(250, 255, 140, 100, 30);
rect(410, 255, 140, 100, 30);
rect(300, 280, 150, 20, 30);
rect(200, 280, 150, 20, 30);
rect(540, 280, 60, 20, 30);
}

//nose
strokeWeight(8);
stroke(25, 51, 0);
line(400, 350, 430, 450);
line(400, 450, 430, 450);

//mouth
strokeWeight(12);
stroke(139, 0, 0);
bezier(375, 550, 390, 555, 400, 560, 425, 560);

//ears
noStroke();
fill(224, 172, 105);
arc(200, 350, 80, 100, PI/2, 3*PI/2);
arc(600, 350, 80, 100, -PI/2, PI/2);
fill(25, 51, 0);
arc(200, 350, 40, 60, PI/2, 3*PI/2);
arc(600, 350, 40, 60, -PI/2, PI/2);

//hair
strokeWeight(8);
stroke(0, 0, 0);
bezier(210, 170, 213, 150, 217, 130, 240, 80);
bezier(240, 170, 243, 150, 247, 130, 270, 80);
bezier(270, 170, 273, 150, 277, 130, 300, 80);
bezier(300, 170, 303, 150, 307, 130, 330, 80);
bezier(330, 170, 333, 150, 337, 130, 360, 80);
bezier(360, 170, 363, 150, 367, 130, 390, 80);
bezier(390, 170, 393, 150, 397, 130, 420, 80);
bezier(420, 170, 423, 150, 427, 130, 450, 80);
bezier(450, 170, 453, 150, 457, 130, 480, 80);
bezier(480, 170, 483, 150, 487, 130, 510, 80);
bezier(510, 170, 513, 150, 517, 130, 540, 80);
bezier(540, 170, 543, 150, 547, 130, 570, 80);
bezier(570, 170, 573, 150, 577, 130, 600, 80);

//chin
strokeWeight(4);
stroke(25, 51, 0);
noFill();
bezier(360, 635, 375, 660, 385, 660, 400, 635);
bezier(400, 635, 415, 660, 425, 660, 440, 635);
}

//mustache
if(mouseX > 370 && mouseX < 430 && mouseY > 545 && mouseY < 565){
//noStroke();
//fill(0, 0, 0);
//rect(350, 500, 100, 20);
strokeWeight(10);
stroke(0, 0, 0);
noFill();
bezier(300, 480, 310, 505, 370, 508, 380, 510);
bezier(420, 510, 430, 508, 490, 505, 500, 480);
}

//ears
//noStroke();
//fill(224, 172, 105);
//arc(200, 350, 80, 100, PI/2, 3*PI/2);
//arc(600, 350, 80, 100, -PI/2, PI/2);
//fill(25, 51, 0);
//arc(200, 350, 40, 60, PI/2, 3*PI/2);
//arc(600, 350, 40, 60, -PI/2, PI/2);

//left airpod
if(mouseX > 120 && mouseX < 200 && mouseY > 350 && mouseY < 430){
noStroke();
fill(255, 255, 255);
rect(180, 340, 15, 70, 6);
rect(185, 340, 15, 20, 6);
rect(605, 340, 15, 70, 6);
rect(600, 340, 15, 20, 6);
}

//right airpod
if(mouseX > 600 && mouseX < 680 && mouseY > 350 && mouseY < 430){
noStroke();
fill(255, 255, 255);
rect(180, 340, 15, 70, 6);
rect(185, 340, 15, 20, 6);
rect(605, 340, 15, 70, 6);
rect(600, 340, 15, 20, 6);
}

//moving eyebrows left
if(mouseX > 250 && mouseX < 550 && mouseY > 230 && mouseY < 250){
strokeWeight(22);
stroke(224, 172, 105);
line(250, 250, 290, 230);
line(290, 230, 380, 250);
line(420, 250, 510, 230);
line(510, 230, 550, 250);
strokeWeight(20);
stroke(0, 0, 0);
line(250, 220, 290, 200);
line(290, 200, 380, 220);
line(420, 220, 510, 200);
line(510, 200, 550, 220);
}
}

void mouseClicked(){
clickedX = mouseX;
clickedY = mouseY;
}

I wanted to go for a more interactive self portrait which resulted in me focusing more on the interactivity rather than the visual detail of my face. I used the keyPressed function to trigger the movement of my character using the TAB key, the ‘q’ key for closing/opening my eyes and the ‘w’ key for changing directions of the character’s movement. I added a background image of our campus and used an image for my hair.

The code is pasted below:

int faceWidth=200;//150
int faceHeight=200;
int faceCenterX=0;
int faceCenterY=220;
boolean moveFront=true;
int moveFrontVal=5;
boolean eyesOpen=true;
//int pos=0;
int pos=0;
int mouseXPrev=0;
float[] colors=new float[]{random(255),random(255),random(255)};
int sWidth=1000;
int sHeight=600;
int ground=600;
boolean light=true;
PImage bg;
PImage hair;
int changeDirFace=0;
int opacity=0;
int maxY=faceCenterY;
boolean stayStill=true;
void setup() {
size(1000,600);
bg = loadImage("nyu.jpg");
bg.resize(1000, 600);
rotate(PI/6);
hair = loadImage("hair.png");
hair.resize(200,100);
}
void draw() {
  background(bg);
  /*if(light) {
  background(255);
  } else {
  background(0);
  }*/
  fill(0);
  //arc(faceCenterX-40, faceCenterY-((faceHeight/2))-25, 85, 50, PI, 0);
  image(hair, faceCenterX-changeDirFace-95,faceCenterY-130);
  //rect(faceCenterX-70-changeDirFace,faceCenterY-((faceHeight/2))-15,135,40);

fill(192,192,192);
if(moveFront) {
changeDirFace=-10;
} else {
changeDirFace=10;
}
rect(faceCenterX-130,faceCenterY+(faceHeight/2)-10,230,10);
ellipse(faceCenterX-changeDirFace,faceCenterY+100,faceWidth-55,faceHeight);
fill(215,159,102);
stroke(0);
ellipse(faceCenterX-changeDirFace,faceCenterY,faceWidth,faceHeight);
noStroke();
fill(0);
ellipse(faceCenterX-40,faceCenterY-50,50,50);
ellipse(faceCenterX+30,faceCenterY-50,50,50);
if(eyesOpen) {
fill(255);
}
ellipse(faceCenterX-30,faceCenterY-50,20,20);
ellipse(faceCenterX+45,faceCenterY-50,20,20);
fill(0);
//rect(faceCenterX-60,faceCenterY+35,pos,6);
fill(192,192,192);
rect(faceCenterX-130,faceCenterY+(faceHeight/2),230,200);

//rect(faceCenterX-130,faceCenterY+(faceHeight/2),400,35);

fill(colors[0],colors[1],colors[2]);
rect(faceCenterX-100,faceCenterY+(faceHeight/2),170,200);
fill(0);
arc(faceCenterX, faceCenterY+35, 100, 50, 0, PI);
fill(215,159,102);

arc(faceCenterX-changeDirFace, faceCenterY+(faceHeight/2), 85, 50, 0, PI);
if(mouseX!=mouseXPrev) {
if(pos<140) {
pos+=10;
} else {
pos=0;
} 



}
if(stayStill==false) {
faceCenterX+=moveFrontVal;
if((faceCenterX>(sWidth+(faceWidth/2))) && (moveFrontVal==5)) {
faceCenterX=-(faceWidth/2);
}

if((faceCenterX<(0-(faceWidth/2))) && (moveFrontVal==-5)) {
faceCenterX=(sWidth+(faceWidth/2));
}
mouseXPrev=mouseX;


}
if (faceCenterY+280>ground) { //+200
faceCenterY=280;
}

faceCenterY+=2;
}
void keyPressed() {
  if (key==TAB){
stayStill=!stayStill;} 
if (key=='q'){
  eyesOpen= !eyesOpen;
}
if(key=='w'){
  colors[0]=random(255);
colors[1]=random(255);
colors[2]=random(255);
  //eyesOpen= !eyesOpen;
  if(faceCenterY>maxY) {
faceCenterY-=50;
  }
if (moveFront==false) {
moveFrontVal=-5;
} else {
moveFrontVal=5;
}
moveFront=!moveFront;

if(((faceCenterX-100)<mouseX) && (mouseX<(faceCenterX+70))&& ((faceCenterY+(faceHeight/2)+200)<mouseY) && (mouseY<(faceCenterY+(faceHeight/2)))) {
  light= !light;
}
}
}
void mousePressed() {


}

For my self-portrait, I wanted something simple, something that kind of looks like/resembles my Bitmoji character.

The first difference that I wanted to change from my Bitmoji character was the hair length though. Because my hair had grown out, I wanted my self-portrait to resemble this change and so had longer hair. I tried to keep everything relatively similar to my Bitmoji but decided for my portrait to only be just below shoulder length. The result was this:

Okay – very different portraits of me but similar vibes perhaps?

I then decided to incorporate something fancy that we experimented in class and thought that hey! I should change the colour of the shirt that I’m wearing to make the portrait more Harry Potter-esque and to show other people that I do change and wash my clothes. I used the mousereleased function that would change the colour of the shirt to a random colour every time the mouse is released. It’s random because we all need a bit of colour in our lives. Changes in shirt colour could be seen here:

Here is the code that I used:

int r,g,b;

void setup() {
size(600, 600);
smooth();
}

void draw() {
background(192, 195, 242);

fill(r,g,b);

//hair
noStroke();
fill(92, 73, 47);
ellipse(300, 220, 336, 300);
rect(132, 220, 336, 500);

//head
noStroke();
fill(255, 225, 190);
ellipse(300, 300, 275, 375);

//hair fringe part
noStroke();
fill(92, 73, 47);
arc(300, 180, 300, 180, PI, TWO_PI);
arc(255, 175, 225, 120, 0, HALF_PI+QUARTER_PI+THIRD_PI);

//ears
noStroke();
fill(255, 225, 190);
ellipse(160, 300, 35, 55);
ellipse(440, 300, 35, 55);
// earrings
noStroke();
fill(0);
ellipse(158, 320, 9, 9);
ellipse(442, 320, 9, 9);

//brows
noFill();
strokeWeight(5);
stroke(150, 105, 60);
arc(235, 270, 80, 35, PI, QUARTER_PI+HALF_PI+PI);
arc(365, 270, 80, 35, QUARTER_PI+PI, TWO_PI);

//eyes
stroke(0);
strokeWeight(0.5);
fill(255);
ellipse(240, 300, 65, 50);
ellipse(360, 300, 65, 50);
noStroke();
fill(100, 78, 49);
ellipse(240, 300, 33, 43);
ellipse(360, 300, 33, 43);
noStroke();
fill(0);
ellipse(240, 300, 17, 17);
ellipse(360, 300, 17, 17);

//nose
noFill();
stroke(211, 154, 100, 100);
strokeWeight(3);
arc(300, 350, 29, 30, 0, PI);
line(312, 323, 314, 347);
line(288, 323, 285, 347);

//mouth
noFill();
strokeWeight(5);
stroke(255, 170, 150);
arc(300, 400, 75, 45, 0, PI);

//neck
noStroke();
fill(255, 225, 190);
rect(240, 445, 120, 155);

//shirt
noStroke();
//fill(236, 169, 216);
fill (r,g,b);
arc(300, 600, 420, 200, PI, TWO_PI);
fill(255, 225, 190);
ellipse(300, 500, 120, 140);

}
void mouseReleased (){
if ((mouseX > 100 && mouseX < 500) &&
mouseY > 500) {
r=int(random(255));
g=int(random(255));
b=int(random(255));
}
fill(153);

}

One thing I had to mess around with was the ordering of the different body parts to make sure that one is on top of the other or under another. As well, I had to mess around with the x and y variables to make sure that the face is proportionate. The thing I got most frustrated with though was working with the arc function. The degrees radian part took so much trial and error that I was on the verge of giving up multiple times and wanted to go with a straight line instead – good thing I didn’t though.

I will admit, I find this almost painful to read. The author is extraordinarily dramatic about points that seems far less relevant to me. Begging with his short history of new media, I find that the relationship between the development of computers and new media is far more mundane than he makes out. It seems to me that it is simply one instance of the development of computing, which is a fundamentally universal function, enveloping another discipline. New media was certainly revolutionized, and at the time it was a significant breakthrough for computing, but no task a computer performs should be surprising in type, the only surprise is when the developers figure out the software to achieve some particular degree- this is the nature of a universal process.

I also find that the distinction between new and old media he makes in the very first principle is misleading. Specifically, what is new about new media is not that it can be described mathematically, but that the media was created with this knowledge in mind. Photography and sculpture are far from continuous, but this knowledge is not relevant from the majority of people who use it. However, I have experience with a realm of photography where light levels are so low that the image is considered in terms of individual photon counts: astronomy.

What I am basically getting at is that I strongly disagree with the implication made that new media is fundamentally new- it is our understanding of media that is new, the tools and processes differ only superficially. (I could go on, this response has only responded to the first couple pages, but I think I have made my point)

So when I started this assignment, I was definetely going for a badly animated weird-looking version of myself: this is my disclaimer.

I basically just used a combination of very simple shapes and lines in a specific order to create a face. I struggled the most with the arc, because it took me so long to figure out the numbers. In the beginning, I think trying to estimate the coordinate points and figure out what goes where in regards to numbers was the most challenging. But after a base is set up and parameters are set, it makes things easier. This is how my project ended up looking with my code:

While this talk contained a large number of very interesting random based artworks, I felt that it lacked a point. While it was stated that different balances of randomness and control explore different concepts, there was little analysis of this point. I would like to do this analysis myself, but the reason it is so difficult is because fundamentally what was described is a tool, and the primary purpose of of the talk seems to be to emphasize what the randomness itself brings to art, even when done with simple graphics. I personally felt that the most interesting and aesthetic pieces were where the algorithms were the most sophisticated, as the results had a geometric appearance at each static moment but moved very organically. However, as I mentioned this juxtaposition was under-analyzed, and mostly this was just a series of very cool images and some hint of the underlying algorithms, at least to me.

As someone who doesn’t like to read the manual and jumps straight into pressing all the different buttons on a new gadget that I buy, it was really interesting for me to read how the author says that in designing an interactive artwork, one would give the audience the basic context, then get out of their way. This made me realise that my interaction with any device was probably planned to guide based on this idea.

Throughout this course, I had assumed that I have to produce something original – original being something that never existed. This made me stress so much at the planning stage, leaving no cognitive resources for the actual building and programming stage. From this reading, I have learnt that just because something has been done before, doesn’t mean it isn’t original and I will try to incorporate this into my future projects by adding a new component to something that may have been created before to create a new story.

1. 
2. My plan for the project was to create a spinning ballerina. I tried to wire up two DC motors to the Arduino board, but only one would work successfully. Adham helped me figure out that the Arduino probably doesn’t have enough energy to power two DC motors, so he let me borrow his motor shield.
3. 
4. The motor shield was able to successfully power two DC motors. It was really easy and straightforward to work with it.
5. 
6. When I used plain paper and stuck them on the DC motor, they would be too flimsy and easily fly off. Instead, I pasted an A4 image of a ballerina on the back and front side of the tissue-box cardboard material as opposed to normal cardboard, which was too thick. I used electrical tape so the cardboard wouldn’t fly off as the DC motors are quite powerful. I lowered down the speed from 20 to 80, as a speed of 150-180 appeared quite unnatural for a spinning ballerina and was too fast for the material to stay on properly.

Sometimes, the motors wouldn’t be in sync so the lower and upper part of the ballerina can appear unnatural. Also, the gap of motors between the ballerina’s upper and lower body again appears unnatural, but I couldn’t think of any other alternative to solve this issue. Lastly, if I had more time, I would have liked to create a strong holder for the spinning ballerina, so I don’t have to use my hand to hold it together (which appears unprofessional and can create unreliable outcomes).