ikrsek@andrew.cmu.edu – Page 2 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

ikrsek-SectionC-Project-07-Curves

http://mathworld.wolfram.com/SphericalSpiral.html

//Isadora Krsek
//Ikrsek@andrew.cmu.edu
//Section C
//Project 07: Curves

var x; 
var y; 
var z; 

function setup() {
    createCanvas(400, 400);
    noStroke();
}
 
function draw() {
    background(0);
    //adjusting placement & size of curves
    translate(width/2, height/2);
    scale(150)
    limit = (map(mouseX, 0, width, 2, 8)); //caps the # of loops
    limit2 = (map(mouseY,0,height,20, 80)) //caps the # of loops
    push();
    scale(3,3)
    rotate(radians(90));
    push();
    rotate(mouseY,0,height,0,360)
    drawLoxoB();
    pop();
    drawLoxo();
    pop();
}


function drawLoxo() {
  //a controls how many strokes there are in terms of representing the loxodrome
    for (var a=.4; a<limit; a+=.2) {  
    //color change mapped to a
      var rValue = (map(a, 0.4, 4, 0, 360))
      fill(rValue);
      beginShape(QUADS);   
      for (var t = -20; t <limit2; t+=.1) {
        x = ((cos(t))/(sqrt(1+pow(a,2)*pow(t,2))));
        y = ((sin(t))/(sqrt(1+pow(a,2)*pow(t,2))));
        vertex(x, y);
      }
      endShape();
    } 
}

function drawLoxoB() {
  for (var a=.4; a<limit; a+=.2) { 
    var rValue = (map(a, 4, 0.4, 0, 360)) 
    fill(rValue);
    beginShape(QUAD_STRIP);   
    for (var t = -20; t <limit2; t+=.1) {
      x = ((cos(t))/(sqrt(1+pow(a,2)*pow(t,2))));
      y = ((sin(t))/(sqrt(1+pow(a,2)*pow(t,2))));
      vertex(x, y);
    }
    endShape();
  } 
}

I was looking at a few different curves but was most inspired by the loxodrome which I decided to try to replicate 2-dimensionally.

I wanted to create something a little haunting, but still somewhat visually exciting in the spirit of October, and as a result this is what I came up with. It brings to mind for me, the headlight of a train as it’s running towards you inside of a tunnel.

ikrsek-Looking Outwards-07

Around the time of the most recent election, the wall street journal released a webpage that displayed examples of conservative and liberal facebook feeds side by side using programming to find such article/data that would apply to either category. To look at the information on each side and compare it brings to mind the power of the news that we find ourselves surrounded by – as well as the delicacy of words and the ability to completely warp our perception of events, or to manipulate an audience into feeling a certain way about a topic of discussion. In a sense it also brings about a sobering realization of the power of corporations like facebook, which are in control of the news that we see. Facebook itself has an immense amount of control and power in filtering the news on our timelines and in that regard also has a frightening amount of control over us and tend to keep us confined in an echo chamber with regards to the idea that the posts our friends or family make or share will tend to retain familiar values/morals. Projects like this, which give you access and understanding to different perspectives are necessity if we ever hope to overcome our differences to work together for the good of ourselves and fellow peers.

Here is a link to the website and a screenshot of the page:

http://graphics.wsj.com/blue-feed-red-feed/

ikrsek-SectionC-Project-06-Abstract Clock

The idea for this project was to try and represent the time of day by paralleling it with the subsequent way someone feels during the day, and match the way they look as a day progresses. The result was a person who looks tired in the morning, starts to liven up around noon and in the afternoon, and then gradually gets tired again and falls asleep. The background also matches the color of the sky as time passes by.

Here are photos of all the different stages:

dawn morning

noon afternoon

evening dusk

sketch

//Isadora Krsek 
//Ikrsek@andrew.cmu.edu
//Section C
//Project 06: Abstract clock

var r = (0);
var g = (0);
var b = (0);

var dawn = (5);
var morning = (7);
var noon = (12);
var afternoon  = (13);
var evening = (18);
var dusk = (22);

skinbaseR = (243);
skinbaseG = (213);
skinbaseB = (202);


function setup() {
    createCanvas(480,415);

}

function draw() {
    var h = hour();
    var m = minute();
    var s = second();
    
    background(r,g,b);
    
    //draw dawn image if it is dawn
    if (dawn <= h  & h < morning){
    dawnImage();
    }
    //draw morning image if it is morning    
    else if (morning <= h & h < noon){
    morningImage();
    }
    
    //draw noon image if it is noon   
    else if (noon <= h & h < afternoon){
    noonImage();
    }

    //draw afternoon image if it is afternoon   
    else if (afternoon <= h & h < evening){
    afternoonImage();
    }
    
    //draw evening image if it is evening  
    else if (evening <= h & h < dusk){
    eveningImage();
    }
    
    //draw dusk image if it is dusk but before midnight 
    else if (dusk <= h & h < 24 ){
    duskImage();
    }
    //draw dusk after midnight before dawn(separated because p5 tracks hours using military time)
    else if (0 <= h < dawn){
    duskImage(); 
    }

}

//dawn 
function dawnImage() {
    r = (159);
    g = (182);
    b = (205);
    
    var m = minute();
    var s = second();
    var ms = millis();
    
      //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28)
    ellipse(252,350,128,75)
   //neck shadow
    fill(239,186,168)
    ellipse(252,318,129,75)
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140)
    ellipse(310,155,45,30)
   //left eyebrow
    ellipse(185,155,45,30)
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,165,55,30)
   //left eyebrow light 
    ellipse(185,165,55,30)
  //EYES
   //eyebag left
    fill(239,186,168,100);
    ellipse(185,185,60,40);
   //eyebag right
    ellipse(310,185,60,40);
   //left eyelid
    fill(239,186,168)
    stroke(207,159,143);
    ellipse(185,183,58,32);
    noStroke();
    ellipse(185,180,58,30);
   //right eyelid
    stroke(207,159,143)
    ellipse(310,183,58,32);
    noStroke();
    ellipse(310,180,58,32);
   //left eye
    fill(255)
    ellipse(185,185,60,0)
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(185,185,27,0)
   //right eye
    fill(255)
    ellipse(310,185,60,0)
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,185,27,0)
  //NOSE
   //nose ball shadow 
    fill(239,186,168)
    ellipse(251,236,30,25)
   //left nostril shadow
    ellipse(238,230,35,20)
   //right nostril shadow
    ellipse(266,230,35,20)
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(242,228,35,20)
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(262,228,35,20)
   //nose ball 
    ellipse(251,230,30,29)
  //CHIN
   //chin dark line
    fill(239,186,168)
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50)
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
  //BLINK
    push();
    noStroke();
    scale(.65,.65);
    translate(27,-10);
    //blink
     if (ms%3===0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop();
    noStroke();
}

//morning
function morningImage() {
    r = (185);
    g = (211);
    b = (238);
    
    m = minute();
    s = second();
  
  //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28)
    ellipse(252,350,128,75)
   //neck shadow
    fill(239,186,168)
    ellipse(252,318,129,75)
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140)
    ellipse(310,155,45,30)
   //left eyebrow
    ellipse(185,155,45,30)
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,165,55,30)
   //left eyebrow light 
    ellipse(185,165,55,30)
  //EYES
    //eyebag left
    fill(239,186,168,100);
    ellipse(185,185,60,50);
    //eyebag right
    ellipse(310,185,60,50);
   //left eyelid
    fill(239,186,168)
    ellipse(185,183,58,32);
   //right eyelid
    ellipse(310,183,58,32);
   //left eye
    fill(255)
    ellipse(185,185,60,20)
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(185,185,27,20)
   //right eye
    fill(255)
    ellipse(310,185,60,20)
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,185,27,20)
  //NOSE
   //nose ball shadow 
    fill(239,186,168)
    ellipse(251,236,30,25)
   //left nostril shadow
    ellipse(238,230,35,20)
   //right nostril shadow
    ellipse(266,230,35,20)
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(242,228,35,20)
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(262,228,35,20)
   //nose ball 
    ellipse(251,230,30,29)
  //CHIN
   //chin dark line
    fill(239,186,168)
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50)
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
  //BLINK
    push();
    noStroke();
    scale(.65,.65);
    translate(27,-10);
    //sec blink
     if (s%4 === 0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop();
    noStroke();
}


//noon
function noonImage() {
  r = (198);
  g = (226);
  b = (255);
  
  m = minute();
  s = second();
  
    //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28);
    ellipse(252,350,128,75);
   //neck shadow
    fill(239,186,168);
    ellipse(252,318,129,75);
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140);
    ellipse(310,155,45,30);
   //left eyebrow
    ellipse(185,155,45,30);
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,165,55,30);
   //left eyebrow light 
    ellipse(185,165,55,30);
  //EYES
  
   //eyebag left
    fill(239,186,168,100);
    ellipse(185,185,60,50);
   //eyebag right
    ellipse(310,185,60,50);

   //left eyelid
    fill(239,186,168);
    ellipse(185,183,58,32);
   //right eyelid
    ellipse(310,183,58,32);
   //left eye
    fill(255);
    ellipse(185,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(185,185,27,27);
   //right eye
    fill(255);
    ellipse(310,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,185,27,27);
  //NOSE
   //nose ball shadow 
    fill(239,186,168);
    ellipse(251,236,30,25);
   //left nostril shadow
    ellipse(238,230,35,20);
   //right nostril shadow
    ellipse(266,230,35,20);
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(242,228,35,20);
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(262,228,35,20);
   //nose ball 
    ellipse(251,230,30,29);
  //CHIN
   //chin dark line
    fill(239,186,168);
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50);
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
    
    push();
    noStroke();
    scale(0.65,0.65);
    translate(27,-10);
    //sec blink
     if (s%4 === 0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop(); 
    noStroke();  
}


//afternoon
function afternoonImage() {
  r = (176);
  g = (226);
  b = (255);
  
  m = minute();
  s = second();
  
    //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28);
    ellipse(252,350,128,75);
   //neck shadow
    fill(239,186,168);
    ellipse(252,318,129,75);
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140);
    ellipse(310,155,45,30);
   //left eyebrow
    ellipse(185,155,45,30);
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,165,55,30);
   //left eyebrow light 
    ellipse(185,165,55,30);
  //EYES
   //left eyelid
    fill(239,186,168);
    ellipse(185,183,58,32);
   //right eyelid
    ellipse(310,183,58,32);
   //left eye
    fill(255);
    ellipse(185,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(185,185,27,27);
   //right eye
    fill(255);
    ellipse(310,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,185,27,27);
  //NOSE
   //nose ball shadow 
    fill(239,186,168);
    ellipse(251,236,30,25);
   //left nostril shadow
    ellipse(238,230,35,20);
   //right nostril shadow
    ellipse(266,230,35,20);
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(242,228,35,20);
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(262,228,35,20);
   //nose ball 
    ellipse(251,230,30,29);
  //CHIN
   //chin dark line
    fill(239,186,168);
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50);
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
    
    push();
    noStroke();
    scale(0.65,0.65);
    translate(27,-10);
    //sec blink
     if (s%4 === 0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop();
    noStroke();
}


//evening
function eveningImage() {
  r = (102);
  g = (153);
  b = (204);
  
  m = minute();
  s = second();
  
    //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28);
    ellipse(252,350,128,75);
   //neck shadow
    fill(239,186,168);
    ellipse(252,318,129,75);
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140);
    ellipse(310,155,45,30);
   //left eyebrow
    ellipse(185,155,45,30);
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,165,55,30);
   //left eyebrow light 
    ellipse(185,165,55,30);
  //EYES
  //eyebag left
    fill(239,186,168,100);
    ellipse(185,185,60,40);
    //eyebag right
    ellipse(310,185,60,40);
   //left eyelid
    fill(239,186,168);
    ellipse(185,183,58,32);
   //right eyelid
    ellipse(310,183,58,32);
   //left eye
    fill(255);
    ellipse(185,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(185,185,27,27);
   //right eye
    fill(255);
    ellipse(310,185,60,30);
    fill(skinbaseR,skinbaseG,skinbaseB)
    ellipse(310,185,27,27);
  //NOSE
   //nose ball shadow 
    fill(239,186,168);
    ellipse(251,236,30,25);
   //left nostril shadow
    ellipse(238,230,35,20);
   //right nostril shadow
    ellipse(266,230,35,20);
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(242,228,35,20);
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(262,228,35,20);
   //nose ball 
    ellipse(251,230,30,29);
  //CHIN
   //chin dark line
    fill(239,186,168);
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50);
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
    
    
    push();
    noStroke();
    scale(.65,.65);
    translate(27,-10);
    //sec blink
     if (s%4 === 0) {
     fill(239,186,168);
     ellipse(258,290,90,50);
     ellipse(450,290,90,50);
     stroke(207,159,143);
     strokeWeight(4);
     arc(258,290,90,60,0,PI);
     arc(450,290,90,60,0,PI);
     }
    pop();
    noStroke();
    
    
}


//dusk
function duskImage() {
  r = (21);
  g = (44);
  b = (69);
  
    //shirt
    fill(179,179,191);
    rect(70,445,360,80);
    ellipse(255,419,370,150);
  //hair
    fill(226,164,140,90); //brown hair   34,20,15
    ellipse(250, 170, 285, 300);
    rect(104,180,292,154);
  //hairline
    stroke(skinbaseR,skinbaseG,skinbaseB);
    strokeWeight(3.5);
    line(253,40,253,100);
  //NECK
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    rect(188,320,128,28);
    ellipse(252,350,128,75);
   //neck shadow
    fill(239,186,168);
    ellipse(252,318,129,75);
  //HEAD
    noStroke();
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250, 205, 260, 280);
   //right ear
    ellipse(384, 210, 50, 80);
   //left ear
    ellipse(116, 210, 50, 80); 
  //BROWS 
   //right eyebrow
    fill(226,164,140);
    ellipse(310,155,45,30);
   //left eyebrow
    ellipse(185,155,45,30);
   //right eyebrow light
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,165,55,30);
   //left eyebrow light 
    ellipse(185,165,55,30);
  //EYES
//eyebag left
    fill(239,186,168,100);
    ellipse(185,190,60,45);
    //eyebag right
    ellipse(310,190,60,45);
  
   //left eyelid
    fill(239,186,168);
    stroke(207,159,143);
    ellipse(185,183,58,32);
    noStroke();
    ellipse(185,180,58,30);
    
   //right eyelid
    stroke(207,159,143);
    ellipse(310,183,58,32);
    noStroke();
    ellipse(310,180,58,32);
    
   //left eye
    fill(255)
    ellipse(185,185,60,0);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(185,185,27,0);
   //right eye
    fill(255);
    ellipse(310,185,60,0);
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(310,185,27,0);
    
    
    
  //NOSE
   //nose ball shadow 
    fill(239,186,168);
    ellipse(251,236,30,25);
   //left nostril shadow
    ellipse(238,230,35,20);
   //right nostril shadow
    ellipse(266,230,35,20);
   //left nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(242,228,35,20);
   //right nostril
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(262,228,35,20);
   //nose ball 
    ellipse(251,230,30,29);
  //CHIN
   //chin dark line
    fill(239,186,168);
    ellipse(250,330,34,23);
   //chin
    fill(skinbaseR,skinbaseG,skinbaseB);
    ellipse(250,333,36,23);
  //LIPS
   //lower lip
    push();
    translate(-52,50);
    scale(1.2,1.2);
    beginShape();
    fill(238,191,173);
    noStroke();
    curveVertex(226,190);
    vertex(276,189);
    curveVertex(262,202);
    curveVertex(241,202);
    endShape(CLOSE);
      beginShape();
   //upper lip 
     fill(226,164,140);
     noStroke();
     strokeWeight(1);
     curveVertex(224,190);
     curveVertex(242,180);
     curveVertex(251,183);
     curveVertex(261,180);
     vertex(278,190);
    endShape(CLOSE);
    pop();
    push();
    noStroke();
    scale(.65,.65);
    translate(27,-10);
}

ikrsek-Looking Outwards-06

Randomness

The piece that I am choosing to write about for this week’s looking outwards is one which adheres to a more visual randomness, than randomness in regards to intention. The artist of this work is Casey Reas, and this work is an amalgamation of video, photography, and computation which results in seemingly randomized but stunning visual dissonance. Specifically his work in his semi-recent show of about a year, ULTRACONCENTRATED, seems to revel in visuals like these. The pieces however, are not just skin deep – they are meant to be representations of the body through media – each small rectangle a screen snatched from terrestrial television broadcasts. Reas created custom software to pickup on and distort/visualize the signals that flow through the air, and inherently through our bodies – signals which we use to communicate, share, and in doing so plays with our perception of technology and mass media.

ikrsek-Looking Outwards-05

This week for the topic of Computer Graphics, one of the most compelling artists that utilizes CG for their work would be Hayden Zezula. He works primarily as an animator doing designs and such for brands like Adidas, HBO, or Adultswim – and mucho of his portfolio work comes in the form of gifs or video. Overall, the reason why I chose him is because of his experimentation with representing texture and form in a 3D style on a 2d screen. His work is extremely visually captivating, both because of the bizarre content that is displayed and the sheer technical ability he diplays. There is not a lot to be said for his work that isn’t said by the work itself, and unfortunately I can only post photos of it since gifs don’t seem to play when you post them here, so here are a few screenshots – though I highly recommend you visit his website or instagram and view the work as it is meant to be seen.

Websites:

http://zolloc.com/work/

https://www.instagram.com/zolloc/

ikrsek-SectionC-Project-05-Wallpaper

sketch

//Isadora Krsek 
//Section C
//IKrsek@andrew.cmu.edu
//Project 05: Wallpaper Pattern
//"Snowflakes"


function setup() {
    createCanvas(500,500)
    background(102,137,144)
}
  
  
function draw() {
    noStroke();
    push();
    scale(0.5,0.5)
    translate(450,-580);
    rotate(radians(45));
    snowflakeType2();
    pop();
    snowflakeType1();
    
    noLoop();
}

function snowflakeType1(){
    for (var row=0; row<=width*8; row=row+200) {
	  for (var col=0; col <=height*8; col=col+200) { 
    push();
    scale(0.25,0.25);
    translate(765,-1660)
    rotate(radians(45));
  //hexagon base of pattern 
    noFill();
    stroke(135,187,162,140);
    beginShape();
    strokeWeight(1);
    vertex(38+row,25+col);
    vertex(63+row,25+col);
    vertex(75+row,48+col);
    vertex(63+row,70+col);
    vertex(38+row,70+col);
    vertex(25+row,48+col);
    endShape(CLOSE);
  //circle inception
    noFill();
    strokeWeight(2);
    stroke(135,187,162,140);
    ellipse(50+row,48+col,16,16);
    fill(135,187,162);
    noStroke();
    ellipse(50+row,48+col,4,4);
  //triangles surrounding hexagon
    noStroke;
    fill(201,228,202,140);
    triangle(48+row,25+col,51+row,13+col,54+row,25+col);//top triangle
    triangle(68+row,35+col,82+row,32+col,71+row,40+col);//right  top triangle
    triangle(67.35+row,62+col,82+row,66+col,70+row,56+col);//bottom right triangle
    triangle(48+row,70+col,51+row,83+col,54+row,70+col);//bottom triangle
    triangle(20+row,68+col,34+row,62+col,30+row,56+col);//bottom left triange
    triangle(20+row,32+col,33+row,34+col,30+row,40+col);//top left triangle
  //diamonds
    fill(54,73,88,140);
    noStroke();
    ellipse(42+row,33+col,3,3);//left top dot
    ellipse(58+row,33+col,3,3);//right top dot
    ellipse(66+row,48+col,3,3);//right middle dot
    ellipse(58+row,62+col,3,3);//right bottom dot
    ellipse(42+row,62+col,3,3);//left bottom dot
    ellipse(34+row,48+col,3,3);//left middle dot
  //lines around hexagon
    noFill();
    stroke(255,140);
    strokeWeight(2);
    strokeJoin(BEVEL);
    //top left
    beginShape();
    vertex(30+row,26+col);
    vertex(34+row,20+col);
    vertex(40+row,20+col);
    endShape();
    
    //middle right
     beginShape();
     vertex(78+row,40+col);
     vertex(82+row,48+col);
     vertex(78+row,56+col);
     endShape();
    
    //top right
    beginShape();
    vertex(60+row,20+col);
    vertex(67+row,20+col);
    vertex(70+row,26+col);
    endShape();
    
    //middle left
    beginShape();
    vertex(22+row,40+col);
    vertex(17+row,48+col);
    vertex(22+row,56+col);
    endShape();
    
    //bottom left
    beginShape();
    vertex(29+row,70+col);
    vertex(34+row,78+col);
    vertex(40+row,78+col);
    endShape();
    
    //bottom right
    beginShape();
    vertex(60+row,78+col);
    vertex(67+row,78+col);
    vertex(72+row,70+col);
    endShape();
  //lines above triangles
    stroke(75,101,121,140);
    strokeWeight(1);
    beginShape();
    vertex(42+row,33+col);
    vertex(10+row,27+col);
    vertex(34+row,48+col);
    endShape();
    
    beginShape();
    vertex(58+row,33+col);
    vertex(92+row,28+col);
    vertex(66+row,48+col);
    endShape();
    
    beginShape();
    vertex(58.5+row,62+col);
    vertex(51+row,94+col);
    vertex(42+row,62+col);
    endShape();
    
    pop();
    
  }
  }
}


function snowflakeType2(){
  for (var row=0; row<=width*3; row=row+100) {
	  for (var col=0; col <=height*4; col=col+100) { 
  //hexagon base of pattern 
    noFill();
    stroke(255,80);
    beginShape();
    strokeWeight(1);
    vertex(38+row,25+col);
    vertex(63+row,25+col);
    vertex(75+row,48+col);
    vertex(63+row,70+col);
    vertex(38+row,70+col);
    vertex(25+row,48+col);
    endShape(CLOSE);
  //circle inception
    noFill();
    strokeWeight(2);
    stroke(255,80);
    ellipse(50+row,48+col,16,16);
    fill(250,80);
    noStroke();
    ellipse(50+row,48+col,4,4);
  //triangles surrounding hexagon
    noStroke;
    fill(255,80);
    triangle(48+row,25+col,51+row,13+col,54+row,25+col);//top triangle
    triangle(68+row,35+col,82+row,32+col,71+row,40+col);//right  top triangle
    triangle(67.35+row,62+col,82+row,66+col,70+row,56+col);//bottom right triangle
    triangle(48+row,70+col,51+row,83+col,54+row,70+col);//bottom triangle
    triangle(20+row,68+col,34+row,62+col,30+row,56+col);//bottom left triange
    triangle(20+row,32+col,33+row,34+col,30+row,40+col);//top left triangle
  //diamonds
    fill(255,80);
    noStroke();
    ellipse(42+row,33+col,3,3);//left top dot
    ellipse(58+row,33+col,3,3);//right top dot
    ellipse(66+row,48+col,3,3);//right middle dot
    ellipse(58+row,62+col,3,3);//right bottom dot
    ellipse(42+row,62+col,3,3);//left bottom dot
    ellipse(34+row,48+col,3,3);//left middle dot
  //lines around hexagon
    noFill();
    stroke(255,80);
    strokeWeight(2);
    strokeJoin(BEVEL);
    //top left
    beginShape();
    vertex(30+row,26+col);
    vertex(34+row,20+col);
    vertex(40+row,20+col);
    endShape();
    
    //middle right
     beginShape();
     vertex(78+row,40+col);
     vertex(82+row,48+col);
     vertex(78+row,56+col);
     endShape();
    
    //top right
    beginShape();
    vertex(60+row,20+col);
    vertex(67+row,20+col);
    vertex(70+row,26+col);
    endShape();
    
    //middle left
    beginShape();
    vertex(22+row,40+col);
    vertex(17+row,48+col);
    vertex(22+row,56+col);
    endShape();
    
    //bottom left
    beginShape();
    vertex(29+row,70+col);
    vertex(34+row,78+col);
    vertex(40+row,78+col);
    endShape();
    
    //bottom right
    beginShape();
    vertex(60+row,78+col);
    vertex(67+row,78+col);
    vertex(72+row,70+col);
    endShape();
  //lines above triangles
    stroke(255,100);
    strokeWeight(1);
    beginShape();
    vertex(42+row,33+col);
    vertex(10+row,27+col);
    vertex(34+row,48+col);
    endShape();
    
    beginShape();
    vertex(58+row,33+col);
    vertex(92+row,28+col);
    vertex(66+row,48+col);
    endShape();
    
    beginShape();
    vertex(58.5+row,62+col);
    vertex(51+row,94+col);
    vertex(42+row,62+col);
    endShape();
  }
   }
}

Ikrsek-Looking Outwards-04

“Our Time” is a piece commissioned by the MONA (Museum of Old and New Art) which was intended to take you on an ethereal sensory journey, warping the way you view and think of time. Using sound, light and motion to convey the passing of time. 21 large pendulums swing in midair in different directions as lights brighten and dim at their own pace. Each pendulum arm has a speaker which emits a barely audible echo, creating an eerily unfamiliar sensation speaking to the passage of time. They swing without seeming to adhere to any laws of nature, yet regardless seem to make the passage of time more palpable. Time exists among many frequencies in this room, and when you’re in there, experiencing it – that becomes obvious.
The amount of effort put into immersion in this is remarkable, and the piece utilizes our most basic senses to warp our perceptions of human constructs.

below is a video of the hauntingly beautiful piece…

ikrsek-Section C-Project-03-Dynamic Drawing

“Broken Telly”

(Note:If you expand your browser to fit your computer screen, you should be able to see the whole program)

sketch

//Isadora Krsek 
//Section C
//IKrsek@andrew.cmu.edu
//Project 03: Dynamic Drawings 
//Title: "Broken Telly"
   
//global variables
    var rotX = (453); //center of rotation for red ball (x-coordinate)
    var rotY = (390); //center of rotation for red ball (y-coordinate)
    var row = (50);
    var turnOffX = 1;
    var turnOffY = 1;
    var RB; //stands for "red-bit" as in the metal dial's indicator 
    var antLength = (166);
    var antX; 
    var antY; 
    var antX2;
    var antY2;
    var angle1;
    var angle2;
    var Bri;
    var ThiccThin;
    var Ang; 
    var Spacing; 
    var staticX = (0);
    var staticY = (0);
    var staticX2 = (0); 
    var staticY2 = (0);
    var staticX3 = (0); 
    var staticY3 = (0);
    var staticX4 = (0); 
    var staticY4 = (0);
    var staticX5 = (0); 
    var staticY5 = (0);
    var staticX6 = (0); 
    var staticY6 = (0);
    var last = -1; 
    var current; 
    
    
function setup() {
    createCanvas (640, 480);
    background(51,52,44);
    RB = new RedBit(rotX, rotY, 16); // (x,y,diameter) --> x,y represent the center of rotation
    antX = width/2-30;//origin point of left antennae's x
    antY = height/2-55;//origin point of left antennae's y
    antX2 = width/2-30;//origin point of right antennae's x
    antY2 = height/2-55;//origin point of right antennae's y
}

function tvFrame() {
    stroke(135,77,32); //the color of wood edge
    strokeWeight(16);
    line(600,400,600,0); //vertical right wood line
    line(0,0,600,0); //horizontal top wood line
    line(0,0,0,400); //vertical left wood line
    line(0,400,600,400); //horizontal bottom wood line
  //beggining of white OUTER plastic part ...  subtract each x/y value by 14
    strokeCap(PROJECT);
    stroke(236,221,188);
    strokeWeight(12);
    line(586,386,586,14); //vertical right white plastic line 
    line(14,14,586,14); //horizontal top white line
    line(14,14,14,386); //vertical left white line
    line(14,386,586,386); //horizontal bottom white line
  //beggining of black plastic part (no stroke) ... subtract each x/y value by 
    stroke(7,7,7);
    strokeWeight(150);
    line(505,225,505,95); // right side black big panel
    strokeWeight(22);
    line(31,31,564,31); // top black plastic line
    strokeWeight(20);
    line(31,31,31,290); // vertical left black plastic line
  //big plastic white part alternating with black (below)
    stroke(178,163,134);
    strokeWeight(80);
    line(60,340,540,340);
  //control panel
    stroke(208,207,187); 
    strokeWeight(4); // metal panel frame
    fill(166,162,150); // metal panel color
    rect(455,30,100,330); // metal panel 
    //sound holes 
    noStroke();
    fill(60);
    rect(468,row+10,75,5);
    rect(468,row+20,75,5);
    rect(468,row+30,75,5);
    rect(468,row+40,75,5);
    rect(468,row+50,75,5);
    rect(468,row+60,75,5);
    rect(468,row+70,75,5);
    rect(468,row+80,75,5);
    rect(468,row+90,75,5);
    rect(468,row+100,75,5);
    rect(468,row+110,75,5);
    rect(468,row+120,75,5);
    rect(468,row+130,75,5);
    rect(468,row+140,75,5);
    rect(468,row+150,75,5);
    rect(468,row+160,75,5);
    rect(468,row+170,75,5);
    rect(468,row+180,75,5);
    rect(468,row+190,75,5);
    rect(468,row+200,75,5);
    //back to the rest of the dial 
    stroke(208,207,187);
    fill(199,197,193); // metal dial color
    strokeWeight(3);
    ellipse(504,300,50,50); // metal dial
    rect(492,336,25,10); // small metal button 
  //beginning of inner white plastic part 
    noFill();
    stroke(200,188,166);
    strokeWeight(20);
    rect(51,51,370,264);
  //round rect frame for TV should have no fill but should have frame (add stroke back) 
    strokeWeight(10);
    stroke(0);
    rect(66,60,340,244,2);
}

//for left antennae movement 
function dragAntLeft(i, xin, yin) {
    if (mouseX<width/2-60 & mouseY<150 && mouseX>100){
        dx = mouseX - antX;
        dy = mouseY - antY;
        angle1 = atan2(dy, dx); //controls how the antennae moves 
      }
    ant(antX, antY, angle1); //the left antennae is born 
}

//for right antennae movement
function dragAntRight(iz, xin, yin) {
    if (mouseX>width/2+10 & mouseY<150 && mouseX<460){
        dx2 = mouseX - antX2;
        dy2 = mouseY - antY2;
        angle2 = atan2(dy2, dx2); //controls how the antennae moves 
          
        
      }
    ant2(antX2, antY2, angle2); //the left antennae is born 
    
}

//for left antennae configuration
function ant(x, y, a) {
    push();
    translate(x, y);
    rotate(a);
    line(0, 0, antLength, 0); // first two numbers are the starting point, lenght , and 
    pop();
}

//for right antennae configuration
function ant2(x, y, b) {
    push();
    translate(x, y);
    rotate(b);
    line(0, 0, antLength, 0); // first two numbers are the starting point, lenght , and 
    pop();
}

//other controls that change image 
function TVonoff (){
//tv power off black screen
    fill(51,52,44);
    noStroke();
    push();
    rectMode(CENTER);
    rect(width/2-60,290,turnOffX,turnOffY);//the size that it increases to when hovering over area that the metal button is in 
//the rect will increase to size (width/2-60,290,300,210)
    pop();
    if (dist(mouseX,mouseY,450,414)<8){
      turnOffX = 300;
      turnOffY = 210;
    }    else if(dist(mouseX,mouseY,450,425)>10){ //when mouse not near, TV powered ON 
           turnOffX = 1;
           turnOffY = 1;
          }
}

//specifics for the red circle/dial thigny
function RedBit(tx, ty, ts) {
    this.x = tx; //x-value of point you want ball to rotate around
    this.y = ty; //y-value of point you want ball to rotate around
    this.size = ts; //balls's diameter
    this.angle = 0; 
    this.update = function (mx, my) {
      this.angle = atan2(my - this.y, mx - this.x);
    }
    this.display = function () {
      push();
      translate(this.x, this.y);
      rotate(this.angle);
      fill(255, 0, 0);
      ellipse(this.size/1.4, 0, this.size / 2, this.size / 2); //control the diamete that the circle travels by dividing this.size by something
      pop();
    }
}

//mapping values for controls stuff
function Mapping(){
    //mapping strokeweight
    if (mouseX>width/2+10 & mouseY<150 && mouseX<460){
    ThiccThin = map(mouseX,300,510,2,20);
    }
    //mapping angle of static
    if(mouseX>width/2+10 & mouseY<150 && mouseX<460 && mouseY>30){
    Ang = map(mouseY,20,150,.01,.05);
    }
    //mapping position of static (space between)
    if (mouseX<width/2-60 & mouseY<150 && mouseX>100){
    Spacing = map(mouseX,100,260,200,400);
    }
    //mapping color brightness to dial 
    if(dist(mouseX,mouseY,453,390)<25){
    Bri= map(mouseY,375,423,0,180);
    }
}

//The Tv static     
  function drawStatic(){
  noFill();
  //row 0 of static shit 
  beginShape();
  vertex(150,200);
  vertex(160,180);
  vertex(170,200);
  vertex(180,180);
  vertex(190,200);
  vertex(200,180);
  vertex(210,200);
  vertex(220,180);
  vertex(230,200);
  vertex(240,180);
  vertex(250,200);
  vertex(260,180);
  vertex(270,200);
  vertex(280,180);
  vertex(290,200);
  vertex(300,180);
  vertex(310,200);
  vertex(320,180);
  vertex(330,200);
  vertex(340,180);
  vertex(350,200);
  vertex(360,180);
  vertex(370,200);
  vertex(380,180);
  vertex(390,200);
  vertex(400,180);
  vertex(410,200);
  vertex(420,180);
  vertex(430,200);
  vertex(440,180);
  vertex(450,200);
  vertex(460,180);
  vertex(470,200);
  vertex(480,180);
  vertex(490,200);
  vertex(500,180);
  vertex(510,200);
  vertex(520,180);
  vertex(530,200);
  vertex(540,180);
  vertex(550,200);
  vertex(560,180);
  vertex(570,200);
  vertex(580,180);
  vertex(590,200);
  vertex(600,180);
  endShape();
  //row 1 of static shit 
  beginShape();
  vertex(150,240);
  vertex(160,220);
  vertex(170,240);
  vertex(180,220);
  vertex(190,240);
  vertex(200,220);
  vertex(210,240);
  vertex(220,220);
  vertex(230,240);
  vertex(240,220);
  vertex(250,240);
  vertex(260,220);
  vertex(270,240);
  vertex(280,220);
  vertex(290,240);
  vertex(300,220);
  vertex(310,240);
  vertex(320,220);
  vertex(330,240);
  vertex(340,220);
  vertex(350,240);
  vertex(360,220);
  vertex(370,240);
  vertex(380,220);
  vertex(390,240);
  vertex(400,220);
  vertex(410,240);
  vertex(420,220);
  vertex(430,240);
  vertex(440,220);
  vertex(450,240);
  vertex(460,220);
  vertex(470,240);
  vertex(480,220);
  vertex(490,240);
  vertex(500,220);
  vertex(510,240);
  vertex(520,220);
  vertex(530,240);
  vertex(540,220);
  vertex(550,240);
  vertex(560,220);
  vertex(570,240);
  vertex(580,220);
  vertex(590,240);
  vertex(600,220);
  endShape();
  //row 2 of static shit 
  beginShape();
  vertex(150,280);
  vertex(160,260);
  vertex(170,280);
  vertex(180,260);
  vertex(190,280);
  vertex(200,260);
  vertex(210,280);
  vertex(220,260);
  vertex(230,280);
  vertex(240,260);
  vertex(250,280);
  vertex(260,260);
  vertex(270,280);
  vertex(280,260);
  vertex(290,280);
  vertex(300,260);
  vertex(310,280);
  vertex(320,260);
  vertex(330,280);
  vertex(340,260);
  vertex(350,280);
  vertex(360,260);
  vertex(370,280);
  vertex(380,260);
  vertex(390,280);
  vertex(400,260);
  vertex(410,280);
  vertex(420,260);
  vertex(430,280);
  vertex(440,260);
  vertex(450,280);
  vertex(460,260);
  vertex(470,280);
  vertex(480,260);
  vertex(490,280);
  vertex(500,260);
  vertex(510,280);
  vertex(520,260);
  vertex(530,280);
  vertex(540,260);
  vertex(550,280);
  vertex(560,260);
  vertex(570,280);
  vertex(580,260);
  vertex(590,280);
  vertex(600,260);  
  endShape();
  //row 3 of static shit 
  beginShape();
  vertex(150,320);
  vertex(160,300);
  vertex(170,320);
  vertex(180,300);
  vertex(190,320);
  vertex(200,300);
  vertex(210,320);
  vertex(220,300);
  vertex(230,320);
  vertex(240,300);
  vertex(250,320);
  vertex(260,300);
  vertex(270,320);
  vertex(280,300);
  vertex(290,320);
  vertex(300,300);
  vertex(310,320);
  vertex(320,300);
  vertex(330,320);
  vertex(340,300);
  vertex(350,320);
  vertex(360,300);
  vertex(370,320);
  vertex(380,300);
  vertex(390,320);
  vertex(400,300);
  vertex(410,320);
  vertex(420,300);
  vertex(430,320);
  vertex(440,300);
  vertex(450,320);
  vertex(460,300);
  vertex(470,320);
  vertex(480,300);
  vertex(490,320);
  vertex(500,300);
  vertex(510,320);
  vertex(520,300);
  vertex(530,320);
  vertex(540,300);
  vertex(550,320);
  vertex(560,300);
  vertex(570,320);
  vertex(580,300);
  vertex(590,320);
  vertex(600,300);
  endShape();
  //row 4 of static shit 
  beginShape();
  vertex(150,360);
  vertex(160,340);
  vertex(170,360);
  vertex(180,340);
  vertex(190,360);
  vertex(200,340);
  vertex(210,360);
  vertex(220,340);
  vertex(230,360);
  vertex(240,340);
  vertex(250,360);
  vertex(260,340);
  vertex(270,360);
  vertex(280,340);
  vertex(290,360);
  vertex(300,340);
  vertex(310,360);
  vertex(320,340);
  vertex(330,360);
  vertex(340,340);
  vertex(350,360);
  vertex(360,340);
  vertex(370,360);
  vertex(380,340);
  vertex(390,360);
  vertex(400,340);
  vertex(410,360);
  vertex(420,340);
  vertex(430,360);
  vertex(440,340);
  vertex(450,360);
  vertex(460,340);
  vertex(470,360);
  vertex(480,340);
  vertex(490,360);
  vertex(500,340);
  vertex(510,360);
  vertex(520,340);
  vertex(530,360);
  vertex(540,340);
  vertex(550,360);
  vertex(560,340);
  vertex(570,360);
  vertex(580,340);
  vertex(590,360);
  vertex(600,340);
  endShape();
  //row 5 of static shit 
  beginShape();
  vertex(150,400);
  vertex(160,380);
  vertex(170,400);
  vertex(180,380);
  vertex(190,400);
  vertex(200,380);
  vertex(210,400);
  vertex(220,380);
  vertex(230,400);
  vertex(240,380);
  vertex(250,400);
  vertex(260,380);
  vertex(270,400);
  vertex(280,380);
  vertex(290,400);
  vertex(300,380);
  vertex(310,400);
  vertex(320,380);
  vertex(330,400);
  vertex(340,380);
  vertex(350,400);
  vertex(360,380);
  vertex(370,400);
  vertex(380,380);
  vertex(390,400);
  vertex(400,380);
  vertex(410,400);
  vertex(420,380);
  vertex(430,400);
  vertex(440,380);
  vertex(450,400);
  vertex(460,380);
  vertex(470,400);
  vertex(480,380);
  vertex(490,400);
  vertex(500,380);
  vertex(510,400);
  vertex(520,380);
  vertex(530,400);
  vertex(540,380);
  vertex(550,400);
  vertex(560,380);
  vertex(570,400);
  vertex(580,380);
  vertex(590,400);
  vertex(600,380);
  endShape();
  }











function draw() {
  background(245);  
  Mapping();
    
    push();
    strokeWeight(1+ThiccThin);
    stroke(Bri+40)
    translate(200-Spacing,0)
    rotate(Ang);
    drawStatic()
    pop();
  
//blocks to cover movement of the static behind TV 
    fill(245)
    push();
    noStroke();
    rectMode(CORNER);
    rect(0,170,140,280);
    rect(520,180,200,280);
    rect(0,140,width,50)
    pop();
    
//antennae shit (movement & base)
    fill(10);
    noStroke();
    ellipse(width/2-30,height/2-55,100,70); //antennae base
    strokeWeight(4.2);
    stroke(10);
  //left antennae
    dragAntLeft(0, mouseX, mouseY);
    for( var i=0; i<antX.length-1; i++) {
    dragAntLeft(i+1, antX[i], antY[i]);
    }
  //right antennae
     dragAntRight(0, mouseX, mouseY);
    for( var iz=0; iz<antX2.length-1; iz++) {
    dragAntRight(iz+1, antX2[iz], antY2[iz]);
    }
    
//turns tv on and off 
  TVonoff();
    
//TV frame/illustration 
    push();
    translate(100,180); 
    scale(0.7,0.7); //scaling down the size of the TV so that antennae can fit on screen 
    tvFrame();
    pop();
  
//the red dial will only spin if the mouse gets close to it
    noStroke();
    if(dist(mouseX,mouseY,453,390)<25){
    RB.update(mouseX, mouseY);
    }
    RB.display();
    fill(255,0,0);
    ellipse(164,185,1,1);
  
}

*the left and right antennae do not appear until they are in vicinity of the mouse
The left antennae controls the position of the static, and moving it appears to animate it
the right antennae controls both the rotation and the thickness of the static
The little red-studded dial controls the brightness/color
and the button below the dial controls the size of a minuscule black square in the middle of the screen which gets large when you hover over it, simulating the tv turning off.

(Explanation coming soon)

Ikrsek-Looking Outwards-03

Recently, Iris van Herpen had a show in the Carnegie Museum of art featuring a variety of futuristic looking, digitally fabricated fashion.
She is a fashion designer that wishes to marry code and fashion to create non-traditional clothing that seems to combat how we feel clothing should act and look in a wonderfully sci-fi way. She utilizes programming and code to 3-d print designs that seem to defy gravity and what we generally believe to be achievable in terms of physical form. The flexibility of the clothing itself comes from how it is printed; Iris used Stratasy’s Object Connex multi-material 3-d printer which allows for many different physical properties such as hardness/softness and movability to be built into the clothing item. Code controls what would otherwise be carefully carried out hand-embroidery and weaving/needlework, speaking to the endless possibilities ahead. Much of the pieces also completely eliminate seams and cuts, creating smooth, form-fitting architectural pieces of clothing through the delicate weaving and layering commanded by the code. The pictures really speak for themselves in this case, and it’s much more clear/easy to just show as opposed to trying to explain the strange phenomenon she creates visually with her coded clothing…

ikrsek-Section C-Project-02-Variable-Face

sketch

//Isadora Krsek
//Section B
//Ikrsek@andrew.cmu.edu
//Project-2

//face variables
var headWidth = 120
var headHeight = 140
var skinR = 230
var skinG = 168
var skinB = 150
var eyeR = (30);
var eyeG = (5);
var eyeB = (0);
var earR = (210);
var earG = (160);
var earB = (133);
var earWidth = (26);
var earHeight = (50);
var eyeWidth = (30);
var eyeHeight = (20);
var irisR = (35);
var irisG = (27);
var irisB = (40);
var irisWidth = (15);
var irisHeight = (18);
var blushR = (188);
var blushG = (119);
var blushB = (187);
var blushSize = (20);
var blushOpa = (150);
var noseR = (140);
var noseG = (90);
var noseB = (80);
var upLipR = (170);
var upLipG = (86);
var upLipB = (80);
var loLipR = (189);
var loLipG = (100);
var loLipB = (103);
var browR = (30);
var browG = (20);
var browB = (20);
//nose variables
var noseVertX3 = (2);
var noseVertX4 = (4);
var noseVertX6 = (4);
var noseVertY2 = (30)
var noseVertY3 = (6);
var noseVertY4 = (4);
var noseVertY6 = (6);
var noseVertY7 = (0);
//lip variables
//upper & lower
var v2 = (8);
var v3 = (6);
var v4 = (6);
var v5 = (8);
var v1andv4 = (4);
var v2andv3 = (1);
//just lower
var loLipY = (6);
//brow variables
var browVX2and4 = (10);
var browVX3 = (22);
var browVY2 = (10);
var browVY4 = (4);

function setup() {
    createCanvas(640,480);
    background(188,216,220);
}

function mom() {
    noStroke();
    angleMode(DEGREES);
  //hair back
    fill(23,21,28);
    ellipse(518,150,150,210);
    fill(188,216,220);
    rect(420,155,210,200);
  //ears
    fill(205,174,156);
    ellipse(462,142,25,45);
    ellipse(575,142,25,45);
  //complexion
    fill(220,191,168);
  //head
    ellipse(518,136,113,167);
  //hair bangs
    fill(255);
    stroke(255);
    //ellipse(500,50,5,5);
    //ellipse(518,85,5,5);
    
    stroke(23,21,28)
    fill(23,21,28);
    beginShape();
      curveVertex(500,55);
      curveVertex(514,85);
      curveVertex(533,96);
      curveVertex(570,98);
      curveVertex(540,52);
    
    endShape(CLOSE);
    noStroke();
  //blush 
    fill(233,208,187,172);
    ellipse(482,160,20,20);
    ellipse(552,160,20,20);
  //eye bags 
    fill(197,153,145);
    push();
    translate(487,132);
    rotate(176);
    ellipse(0,0,39,32);
    pop();
    push();
    translate(549,132);
    rotate(8);
    ellipse(0,0,39,32);
     pop();
  //eyes
    fill(240,220,216);
    push();
    translate(488,129);
    rotate(176);
    ellipse(0,0,30,18);
    pop();
    push();
    translate(548,129);
    rotate(8);
    ellipse(0,0,30,18);
    pop();
  //iris
    fill(35,7,0);
    ellipse(488,126,20,14);
    ellipse(548,126,20,15);
  //eyebrows: left, then right 
    beginShape();
     fill(23,21,28);
     stroke(23,21,28);
     strokeWeight(1);
     vertex(473,111); //outer base
     curveVertex(480,106); //triangle peak 
     curveVertex(502,112); // innermost point
     curveVertex(480,109)  //under-arch 
    endShape(CLOSE);
    beginShape();
     fill(23,21,28);
     stroke(23,21,28);
     strokeWeight(1);
     vertex(560,111);
     curveVertex(550,106);
     curveVertex(528,112);
     curveVertex(550,109);
    endShape(CLOSE);
  //nose
    beginShape();
     noFill();
     stroke(135,80,46);
     strokeWeight(3.2);
     vertex(508,130);
     vertex(508,170);
     vertex(514,176);
     vertex(520,172);
     vertex(523,170);
     vertex(523,165);
    endShape();
  //lips
    //upper
    beginShape();
     fill(164,98,76);
     stroke(164,98,76);
     strokeWeight(1);
     curveVertex(500,190);
     curveVertex(507,186);
     curveVertex(515,189);
     curveVertex(523,186);
     vertex(532,190);
    endShape(CLOSE);
    //lower
    beginShape();
     fill(194,115,95);
     stroke(194,115,95);
     strokeWeight(1);
     curveVertex(500,190);
     vertex(532,190);
     curveVertex(515,194);
    endShape(CLOSE);
}

function dad(){
    noStroke();
    //ears
    fill(212,152,133);
    ellipse(75,148,35,50);
    ellipse(226,148,35,50);
    //complexion
    fill(221,167,148);
    //head
    ellipseMode(CENTER);
    ellipse(150,150,152,170);
    //blush
    fill(188,119,112,150)
    ellipse(102,168,40,40);
    ellipse(192,168,40,40);
    //eyes
    fill(240,220,216);
    push();
    translate(112,135);
    rotate(4);
    ellipse(0,0,31,22);
    pop();
    push();
    translate(182,135);
    rotate(174);
    ellipse(0,0,31,22);
    pop();
    //iris
    fill(44,27,40);
    ellipse(182,133,15,18);
    ellipse(112,133,15,18);
    //eyebrows
    beginShape();
     fill(33,6,2);
     stroke(33,6,2);
     strokeWeight(1);
     vertex(93,123); //outer base
     curveVertex(105,106); //triangle peak 
     curveVertex(123,123); // innermost point
     curveVertex(105,120)  //under-arch 
    endShape(CLOSE);
    beginShape();
     fill(33,6,2);
     stroke(33,6,2);
     strokeWeight(1);
     vertex(200,123);
     curveVertex(185,106);
     curveVertex(170,123);
     curveVertex(185,120);
    endShape(CLOSE);
    //nose
    beginShape();
     noFill();
     stroke(164,93,83);
     strokeWeight(3.2);
     vertex(134,130);
     vertex(134,160);
     vertex(132,165);
     vertex(144,171);
     vertex(160,167);
     vertex(163,165);
     vertex(163,160);
    endShape();
    //lips
      //upper
    beginShape();
     fill(180,80,91);
     stroke(180,80,91);
     strokeWeight(1);
     curveVertex(130,190);
     curveVertex(137,182);
     curveVertex(145,185);
     curveVertex(153,182);
     vertex(162,190);
    endShape(CLOSE);
      //lower
    beginShape();
     fill(189,93,103);
     stroke(189,93,103);
     strokeWeight(1);
     curveVertex(130,190);
     vertex(163,190);
     curveVertex(155,200);
     curveVertex(139,200);
    endShape(CLOSE);
    //butt chin 
    stroke(164,93,83);
    strokeWeight(2);
    line(148,220,148,228);
    //glasses
    noFill();
    stroke(56);
    strokeWeight(3.1);
    ellipse(108,142,50,50);
    ellipse(185,142,50,50);
    curve(110,142,131,132,160,132,155,142);
      
    
}

function words(){
  textSize(30);
  fill(255)
  noStroke();
  text("Dad",122,275);
  text("Mom",490,270);
  textSize(24);
  text("..what I could've looked like...",180,474)
  
  
}

function draw() {
    var noseStartX = (width/2-5);
    var noseStartY = (height/1.3 - headHeight/7);
    var LipStartX = (width/2-15);
    var LipStartY = (height/1.3 + headHeight/4);
    var LeftBrowStartX = (width/2-46);
    var LeftBrowStartY = (height/1.4-headHeight/12);
    var RightBrowStartX = (width/2+46);
    var RightBrowStartY = (height/1.4-headHeight/12);
    
    mom();
    dad();
    noStroke();
    
    //OFFSPRING TIME
     //baby's ears
    fill(earR,earG,earB);
    ellipse(width/2-(headWidth/2),height/1.3,earWidth,earHeight); //left ear
    ellipse(width/2+(headWidth/2),height/1.3,earWidth,earHeight); //right ear 
     //baby's head
    fill(skinR,skinG,skinB);
    ellipse(width/2,height/1.3,headWidth,headHeight);
     //eyes 
    fill(240,220,216); //whites of the eyes
    ellipse(width/2-(headWidth/5),(height/1.3 - headHeight/7),eyeWidth,eyeHeight); //left whites of the eyes
    ellipse(width/2+(headWidth/5),(height/1.3 - (headHeight/7)),eyeWidth,eyeHeight); //right whites of the eyes 
    fill(irisR,irisG,irisB); //iris color
    ellipse(width/2-(headWidth/5),(height/1.3 - headHeight/7),irisWidth,irisHeight);
    ellipse(width/2+(headWidth/5),(height/1.3 - headHeight/7),irisWidth,irisHeight);
     //baby's cheeks
    fill(blushR,blushG,blushB,blushOpa);
    ellipse(width/2-(headWidth/5)-20,(height/1.3 - headHeight/7)+30,blushSize,blushSize); //left cheek 
    ellipse(width/2+(headWidth/5)+20,(height/1.3 - headHeight/7)+30,blushSize,blushSize); //right cheek 
     //baby's nose
    beginShape();
     noFill();
     stroke(noseR,noseG,noseB);
     strokeWeight(3.2);
     vertex(noseStartX,noseStartY);
     vertex(noseStartX,noseStartY+noseVertY2);
     vertex(noseStartX-noseVertX3,noseStartY+noseVertY3+noseVertY2);
     vertex(noseStartX+noseVertX4,noseStartY+noseVertY3+noseVertY4+noseVertY2);
     vertex(noseStartX+noseVertX4+noseVertX3,noseStartY+noseVertY3+noseVertY2);
     vertex(noseStartX+noseVertX4+noseVertX6,noseStartY+noseVertY2);
    endShape();
     //baby's mouth
       //upper
    beginShape();
      fill(upLipR,upLipG,upLipB);
      stroke(upLipR,upLipG,upLipB);
      strokeWeight(1);
      vertex(LipStartX,LipStartY);
      curveVertex(LipStartX+v2,LipStartY-v1andv4);
      curveVertex(LipStartX+v2+v3,LipStartY+v2andv3);
      curveVertex(LipStartX+v2+v3+v4,LipStartY-v1andv4);
      curveVertex(LipStartX+v2+v3+v4+v5,LipStartY);
    endShape(CLOSE)
       //lower
    beginShape();
      fill(loLipR,loLipG,loLipB);
      stroke(loLipR,loLipG,loLipB);
      strokeWeight(1);
      vertex(LipStartX,LipStartY);
      vertex(LipStartX+v2+v3+v4+v5,LipStartY)
      curveVertex(LipStartX+v2+v3+v4,LipStartY+loLipY);
      curveVertex(LipStartX+v2,LipStartY+loLipY);
    endShape(CLOSE)
     //baby's eyebrows
       //left
    beginShape();
     fill(browR,browG,browB)
     stroke(browR,browG,browB);
     strokeWeight(2);
     vertex(LeftBrowStartX,LeftBrowStartY);
     vertex(LeftBrowStartX+browVX2and4,LeftBrowStartY-browVY2);
     curveVertex(LeftBrowStartX+browVX2and4+browVX3,LeftBrowStartY);
     curveVertex(LeftBrowStartX+browVX2and4,LeftBrowStartY-browVY4);
    endShape(CLOSE);
      //right
    beginShape();
     fill(browR,browG,browB)
     stroke(browR,browG,browB);
     strokeWeight(2);
     vertex(RightBrowStartX,RightBrowStartY);
     vertex(RightBrowStartX-browVX2and4,RightBrowStartY-browVY2);
     curveVertex(RightBrowStartX-browVX2and4-browVX3,RightBrowStartY);
     curveVertex(RightBrowStartX-browVX2and4,RightBrowStartY-browVY4);
    endShape(CLOSE);
  
    words();
}

function mousePressed(){
/*each of the ranges are based on the proportions/tones of 
the parents who bestow similarities to themselves onto their children*/
    background(188,216,220);
    headWidth = random(113,162);
    headHeight = random(137,170);
    //range for skin color
    skinR = random(220,221);
    skinG = random(167,191);
    skinB = random(148,170);
    //range for eye color
    eyeR = random(35-44);
    eyeG = random(7-27);
    eyeB = random(0-48);
    //range for ear color
    earR = random(205,212);
    earG = random(152,174);
    earB = random(133,156);
    //range for ear size
    earHeight = random(45,50);
    earWidth = random(25,35);
    eyeWidth = random(20,31);
    eyeHeight = random(18,22);
    //range for iris color
    irisR = random(35,80);
    irisG = random(7,27);
    irisB = random(0,40);
    //range for iris size 
    irisWidth = random(8,20);
    irisHeight = random(8,18);
    //range for blush color
    blushR = random(188,233);
    blushG = random(119,208);
    blushB = random(112,187);
    //range for blush size (the value will be the same for width and height bc it is a circle)
    blushSize = random(20,40);
    //range for opacity 
    blushOpa = random(140,172);
    //range for nose colors
    noseR = random(135,164);
    noseG = random(80,93);
    noseB = random(46,83);
    //range for nose sizes
    noseVertX3 = random(0,12);
    noseVertX4 = random(0,10);
    noseVertX6 = random(3,8);
    noseVertY2 = random(30,40)
    noseVertY3 = random(5,6) // + you add to vert y2
    noseVertY4 = random(0,6) // + you add to vert y3
    noseVertY6 = random(22,48)
    noseVertY7 = random(0,5)
    //range for upper lip colors 
    upLipR = random(164,180); 
    upLipG = random(80,98);
    upLipB = random(76,91);
    //ranger for upper lip sizes
    v1andv4 = random(1,8);
    v2andv3 = (.15,.5)
    //range for lower lip colors
    loLipR = random(189,194);
    loLipG = random(93,115);
    loLipB = random(95,103);
    //ranger for lower lip sizes
    loLipY = random(3,10);
    //range for brow colors 
    browR = random(23,80);
    browG = random(6,2);
    browB = random(2,28);
    //range for brow sizes
    browVX2and4 = random(7,22);
    browVX3 = random(18,22);
    browVY2 = random(5,17);
    browVY4 = random(3,4);
}

I’ve always wondered about different ways I could’ve looked based on my parent’s appearances, and so I took the opportunity to simulate something like that in this project. I first took the time to draw out each of my parents in p5.js and then randomized the measurements of those characteristics so that everytime you click the mouse, another possibility appeared. Overall, I am mostly glad I don’t look like most of the “offspring” possibilities.