Eyeo2012 – Casey Reas – Response

“It means that each performance of such music piece is unique, as interesting to its composer as to others listening”  — John Cage

I enjoyed his talk primarily because I got the chance to see so many different projects using the same concept of balancing chaos and order in coding. The biggest takeaway I had was how certain controlled randomness can make a project predictably unpredictable. I will certainly use this concept in my own project this coming weekend.

I was particularly intrigued by the grid project, in which each dot on the grid is off by an arbitrary amount of pixels. But at what point does the grid stop being a grid? At what point does the randomness outweighs the order and render the whole thing complete chaos and useless? All of this are very subjective and even the randomness can tell a lot about the designer him/herself

Self Portrait

Here is the self-portrait:

code:

fill (#F5D8B2);
rect (150, 100, 300, 200);

stroke (#F5D8B2);
ellipse (300, 300, 310, 400);

stroke(0, 0, 0);
fill(#FFFEFC);
ellipse(230, 250, 75, 25);
ellipse(375, 250, 75, 25);

stroke(0, 0, 0);
fill(0, 0, 0);
ellipse(230, 250, 25, 25);
ellipse(375, 250, 25, 25);

line(300, 325, 300, 300);
line (300, 325, 320, 330);

stroke (0,0,0);
fill (#FCE3FA);
ellipse(300, 400, 75, 50);
stroke(#C90003);
fill(#C90003);
ellipse( 300, 415, 50,25);

stroke(#3B2512);
fill(#3B2512);
rect(190, 200, 90, 20);
rect(330, 200, 90, 20);

stroke (#BC2427);
fill(#BC2427);
ellipse (250,100,400,100);

stroke (#7C1517);
line (100, 150, 100, 600);
line (400, 500, 400, 600);
line (530, 100, 530, 400);
stroke(#E54346);
line(500, 150, 500, 500);
line (130,100, 130, 600);
line (230, 500, 230, 600);

I did a lot of layering on simple shapes and tried to make the overall shape of each element slightly more complex, for example my face is a square followed by an ellipse to form the slightly awkward cheeks. One of the bigger struggles I had was with the eyebrows and nose as I found it hard to figure out the angles of each line. Other than that it was just time consuming, but relatively fun, work.

Self Portrait

For my selfportrait, I wanted to go a bit more abstract in my design. It is truly, Picasso inspired.

This was a lot of fun to make, as I went really colorful and used a lot of abstract shapes.

Here is a photo that inspired me.

 

And so, my picture looks like this:

Here is my code:

void setup(){
fullScreen();
}
void draw(){

//peach color of skin with full opacity
//fill(240,220,200,255);
//yellow color face
fill(255, 204, 0, 20);

//draw the face outline
ellipse(660,425, 560, 620);

//forhead color
fill(255, 92, 51, 20);
//draw forehead
rect(397, 110, 528, 200);

//get rid of the color
noFill();

//top outline eye
bezier(488, 348, 518, 318, 548, 298, 600, 373);
//bottom outline eye
bezier(490, 352, 522, 387, 552, 377, 602, 377);

//get rid of the lines
//——————————–EVERYTHING PAST THIS WILL HAVE NO OUTLINE——————————————————
noStroke();

//idk what color this is
// fill(0,220,200,20);

//white color for eyes with full opacity
fill(255,255,255,255);

//inner eyeball that is now white; top part
bezier(490, 350, 520, 320, 550, 300, 600, 375);
//inner eyeball that is now white; bottom part
bezier(490, 350, 520, 385, 550, 375, 600, 375);

//color for the iris as dark purple
fill(102,0,102,220);

//draw the iris
ellipse(543, 350, 52, 48);

//(for the eyeball/pupil) black with full transparency
fill(0,0,0,255);

//draw the pupil
ellipse(543, 348, 20, 20);

//——————————–OUTLINE——————————————————
//sets the stroke to black /line for the iris details and iris outline
stroke(0);
noFill();

//outline for the iris
ellipse(543, 350, 53.5, 48);

noStroke();
//——————————–EVERYTHING PAST THIS WILL HAVE NO OUTLINE——————————————————

//sets the color to white for glare
fill(255,255,255,255);

//draw glare
ellipse(551, 342, 14, 11);

//sets color for eyebrows
fill(77, 25, 51);

//draws the left eyebrow
bezier(445,290, 490, 275, 570, 265, 625, 310);

//sets the red ellipse shadow for eye under brow
fill(204, 0 ,0, 50);

//draws the ellipse under the eye
ellipse(518, 352, 245, 150);

//sets the color for the nose
fill(255, 102, 102, 255);

//draws the triangle for the nose
//rect(635, 395, 55, 80, 3, 6, 12, 18);
triangle(600, 500, 720, 500, 665, 340);

//nose tip color
fill(255, 179, 128, 200);

//draw the nose tip
ellipse(663,485, 60,60);

//left nostril color
fill(230, 92, 0, 50);

//draw left nostril
ellipse(630, 500, 60,60);

//draw right nostril
ellipse(690, 500, 60, 60);

//nose hole
fill(0,0,0, 100);

//draw the holes
ellipse(630, 502, 20,18);
ellipse(690, 502, 20,18);

//lip color
fill(153, 0, 153, 100);

//draw the top lip
bezier(662, 570, 700, 545, 710, 545, 740, 570);
bezier(585, 570, 615, 545, 625, 545, 662, 570);

//draw the bottom of the lip
bezier(585, 570, 640, 630, 690,630, 740, 570);

//——————————–OUTLINE——————————————————
stroke(0);

//part of the mouth
line(585, 570, 740, 570);

noFill();

noStroke();
//——————————–EVERYTHING PAST THIS WILL HAVE NO OUTLINE——————————————————

//color for the hair
fill(102, 0, 41, 120);

//begin the hair
bezier(670, 150, 740, 250, 950, 380, 810, 470);

bezier(770, 150, 840, 250, 1050, 380, 910, 470);

//contrast color hair
fill(204, 0, 204, 90);

//hair multistrand1
bezier(670, 150, 700, 350, 1050, 380, 910, 470);

//hair multistrand2
bezier(700, 150, 770, 250, 980, 380, 840, 470);

//color for the hair (again)
fill(102, 0, 41, 120);

bezier(720, 150, 790, 250, 1000, 380, 860, 470);

//contrast color hair
fill(204, 0, 204, 90);

bezier(740, 150, 910, 350, 1000, 380, 860, 470);

//color for the hair
fill(102, 0, 41, 120);

//begin the hair
bezier(420, 250, 500, 80, 800, 70, 900, 250);

//contrast color hair
fill(204, 0, 204, 90);
bezier(440, 250, 500, 100, 800, 120, 900, 250);

//color for the hair
fill(102, 0, 41, 120);

//hair multistrand3
bezier(700, 150, 780, 350, 800, 380, 910, 470);

ellipse(880, 270, 50,50);
ellipse(880, 270, 50,50);

//background fill
fill(255, 255, 204, 5);
ellipse(1,1,500,500);
rect(100, 100, 500,500);
ellipse(900,900, 700, 400);
rect(40, 550, 400,300);

fill(255, 153, 255, 5);
ellipse(800,800,700,500);
rect(900, 100, 500,500);
rect(5, 550, 800,800);

fill(153, 153, 255,5);
ellipse(660,20, 700, 600);
rect(300,50, 100, 300);
rect(3, 300, 200, 400);
ellipse(1250, 450, 600, 700);

fill(153, 255, 204, 5);
rect(1000,3,700, 300);
ellipse(120, 80, 400, 600);
ellipse(1300, 800, 500, 500);

fill(204, 255, 153, 5);
rect(50, 1000, 500, 500);
}

Self portrait

My artistic abilities are, let’s just say extremely lacking. So I drew the best cartoon-looking me and decided to add some interactivity to make up for it.

To make the eyes track the cursor, I used the arctan example from processing. It uses the arctan function to calculate the angle for each eye and rotates it accordingly. And in continuation of the trend of my previous projects, there’s a scream incorporated into it when you click on the face.

code:

import ddf.minim.*;

Minim minim;
AudioPlayer player;
Eye left, right;

void setup() {
  size(400, 400);
  noStroke();
  left = new Eye(135, 150, 40);
  right = new Eye(265, 150, 40);
  minim = new Minim(this);
  player = minim.loadFile("screaming.mp3");
}

void draw() {
  background(100, 100, 100);
  fill(206, 150, 124);
  strokeWeight(1);

  ellipse(200, 200, 280, 350);

  //Hair
  line(200, 10, 200, 30);
  line(190, 10, 200, 30);
  line(180, 10, 200, 30);
  line(170, 10, 200, 30);

  //nose:
  ellipse(200, 210, 30, 30);

  // smile/frown
  if (player.isPlaying()) {
    fill(0, 0, 0);
    ellipse(200, 290, 80, 80);
    fill(204, 71, 71);
    ellipse(200, 305, 40, 40);
  } else {
    arc(200, 270, 80, 80, 0, PI);
  }
  noFill();
  //arc(200, 290, 80, 80, PI, TWO_PI);


  //glasses:
  stroke(0, 0, 0);
  strokeWeight(4);
  rect(100, 115, 70, 70);
  rect(230, 115, 70, 70);
  line(170, 150, 230, 150);
  line(100, 150, 73, 130);
  line(300, 150, 327, 130);

  //new eyes:
  left.update(mouseX, mouseY);
  right.update(mouseX, mouseY);
  left.display();
  right.display();
}

void mousePressed() {
  float x = sqrt(sq(mouseX-200)+sq(mouseY-200));
  if (x<=173) {
    player.rewind();
    player.play();
  }
}

class Eye {
  int x, y;
  int size;
  float angle = 0.0;

  Eye(int tx, int ty, int ts) {
    x = tx;
    y = ty;
    size = ts;
  }

  void update(int mx, int my) {
    angle = atan2(my-y, mx-x);
  }

  void display() {
    pushMatrix();
    translate(x, y);
    fill(255);
    ellipse(0, 0, size, size);
    rotate(angle);
    fill(0);
    ellipse(size/4, 0, size/2, size/2);
    popMatrix();
  }
}

and the screaming file:

Self Portrait Documentation

For this project I was rather unexcited by the idea of drawing a very low resolution image poorly, and to produce something actually interesting would require a lot of tedious measuring, or so I thought …

import java.io.File;
import java.io.IOException;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
PImage img;
BufferedImage bimage;
File f;
int[][] data= new int[1367][1367];
int[][] rdata= new int[1367][1367];
int[][] gdata= new int[1367][1367];
int[][] bdata= new int[1367][1367];
void setup(){
  size(456,456);
  img= loadImage("img.jpg");
  bimage= null;
  f= null;
  convertImage();
  noStroke();
}
void convertImage(){
  try{
    
    f = new File("img.jpg");
    System.out.println(f);
    bimage = new BufferedImage(img.width, img.height, BufferedImage.TYPE_INT_ARGB);
    bimage = ImageIO.read(f);
    for(int x= 0; x< img.width; x++){
      for(int y= 0; y< img.height; y++){
        int rgb= bimage.getRGB(x,y);
        int red = (rgb >> 16) & 0xFF;
        int green = (rgb >> 8) & 0xFF;
        int blue = rgb & 0xFF;
        data[x][y]=rgb;
        rdata[x][y]=red;
        gdata[x][y]=green;
        bdata[x][y]=blue;
      }
    }
  }
  catch(IOException e){
  }
}
void draw(){
  int param= 18;//for best results this is a multiple of 3
  for(int x= 0; x<img.width; x+=param){
    for(int y=0; y<img.height; y+=param){
      int red= 0;
      int green= 0;
      int blue= 0;
      for(int xacc= x; xacc<img.width&&xacc<(param+x); xacc++){
        for(int yacc= y; yacc<img.height&&yacc<(param+y); yacc++){
          red+=rdata[xacc][yacc];
          green+=gdata[xacc][yacc];
          blue+=bdata[xacc][yacc];
        }
      }
      fill(red/(param*param),green/(param*param),blue/(param*param));
      rect(x/3,y/3,(x+param)/3,(y+param)/3);
    }
  }
      
        
}

What I did instead was read in my profile picture from facebook, convert it into arrays of the rgb values, and draw squares with the average value of certain blocks. I can manipulate the block sizes to change the level of pixilation …(side lengths of 3,6,and 10)

And make even more fun changes, like negative and swapping colors(blue and green in this case)

Self Portrait

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;
}

Romeno’s Self Portrait

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() {


}

 

Self Portrait with Simple Interactions

For this project I wanted an icon that represent me rather than a detailed drawing of myself. I was inspired by a cool project I found online:https://www.openprocessing.org/sketch/7639#

I hope that I can use this on the personal website that I am going to design for Communications Lab in the end of the semester. I have a few simple interactions: hair disappears, ear enlarges and glasses to sunglasses when hovered upon, and nose changes randomly when clicked on. Below is the code I used:

boolean hair = true;
//boolean sunGlasses = false;
int x1 = 290; //varialbes to change the mouth shape
int x2 = 325;
int counter = 0; //how many times nose is clicked
int earRadius1 = 30;
int earRadius2 = 50;

void setup(){
size(600,550);
rectMode(CENTER);
}

void draw(){

background(135,206,250);

//ear
if((mouseX>120 && mouseX<145)||(mouseX>420 && mouseX<445) &&(mouseY>220 &&mouseY<320)){
earRadius1 = 60;
earRadius2 = 100;
} else{
earRadius1 = 30;
earRadius2 = 50;
}
noStroke();
fill(241,194,125);
ellipse(170, 270, earRadius2, earRadius2);
ellipse(430, 270,earRadius2, earRadius2);
fill(255, 170, 150);
ellipse(170, 270, earRadius1, earRadius1);
ellipse(430, 270, earRadius1, earRadius1);

//face
noStroke();
fill(241,194,125);
rect(300, 255, 260,290,60);

//hair

if(mouseX>180 && mouseX<440 && mouseY>80 && mouseY<115){

hair = false;

}else{
hair = true;
}

if(hair){

stroke(9,8,6);
strokeWeight(10);
line(180, 115, 200, 80);
line(200, 115, 220, 80);
line(220, 115, 240, 80);
line(240, 115, 260, 80);
line(260, 115, 280, 80);
line(280, 115, 300, 80);
line(300, 115, 320, 80);
line(320, 115, 340, 80);
line(340, 115, 360, 80);
line(360, 115, 380, 80);
line(380, 115, 400, 80);
line(400, 115, 420, 80);
line(420, 115, 440, 80);

}

//eyes
noStroke();
fill(255);
ellipse(240, 210, 40, 40);
ellipse(360, 210, 40, 40);
fill(139,69,19);
ellipse(240, 210, 15, 15);
ellipse(360, 210, 15, 15);

//glasses

if(mouseX>170 && mouseX<430 && mouseY>170 && mouseY<250){
fill(125,56,78);
}else{
noFill();
}
strokeWeight(10);
stroke(0,0,0);
ellipse(240,210,80,80);
ellipse(360,210,80,80);
line(280,210,320,210);
line(200,210, 170,185);
line(400,210, 430,185);

//nose

stroke(50,205,50);
noFill();
bezier(x1, 280, 305, 295, x2, 275, 310, 260);

if(mouseX>290 && mouseX<325 && mouseY>260&& mouseY<295){
stroke(200,0,0);
line(330,290,450,310);
line(330,290,335,305);
line(330,290,340,280);
}

//mouth

if(hair){
strokeWeight(11);
stroke(205, 115, 115);
bezier(250, 310, 250, 370, 350, 370, 350, 310);

}else{
stroke(205, 115, 115);
bezier(350, 370, 350, 310, 250, 310, 250, 370);
}

}

void mouseClicked(){
if(mouseX>290 && mouseX<325 && mouseY>260&& mouseY<295){
x1 = int(random(0,600));
x2 = int(random(0,600));
counter++;
}
if(counter%3==0){
x1= 290;
x2 =325;
}
}

// inspired by: https://www.openprocessing.org/sketch/7639#

Self-Portrait

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.

Lev Manovich Response

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)