Category: SectionC

Project-01-Face cselloun

Here I am, added some interactive qualities to the self portrait as well, if you speak into the microphone it will transfer over to the actual animation.

sketch

var input;
var analyzer;
var volume = 0;

function setup() {
  createCanvas(600, 600);

  // Create an Audio input
  mic = new p5.AudioIn();

  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
}

function draw() {
  colorMode(RGB);
  background(233, 255, 228);
   // Get the overall volume (between 0 and 1.0)
  var v = mic.getLevel();
  // "Smooth" the volume variable with an easing function
  volume += (v - volume) / 3;


  // Draw an ellipse size proportionally to the volume
  var mouthSize = map(volume, 0, 1, 20, 300);
  
   print(mouthSize);
  
  if(mouthSize < 26)
  mouthSize = 0;
  mouthSize = constrain(mouthSize, 0, 300);
  


  noStroke();
    //red pink rotating star in the back
 push();
  fill(255, 70, 231);
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  star(0, 0, mouthSize+290, 180, 30); 
  pop();
  //pink rotating star in the back
 push();
  fill(255, 13, 255);
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  star(0, 0, mouthSize+250, 170, 30); 
  pop();
  //inner rotating star 
  push();
  fill(107, 255, 0);
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  star(0, 0, mouthSize+220, 90, 30); 
  pop();
   //hair
  fill(54,17,17);
  rect(150,270,300,300,20);
  ellipse(300,240,300,300);
  //head
  fill(255, 215, 175);
  ellipse(300, 300, 310, 360);
   //eyebrows
  strokeWeight(15);
  stroke(54,17,17);
  line(230,200,180,200);
  line(420,200,370,200);
  //eyes
  noStroke();
  fill(300);
  ellipse(200, 250, 60, 60);
  ellipse(400, 250, 60, 60);
  //eyepuffs
  fill(255, 215, 175);
  ellipse(200, 325, 150, 100);
  ellipse(400, 325, 150, 100);
  //blush
  fill(255, 108, 155, 70);
  ellipse(200, 320, 90, 90);
  ellipse(400, 320, 90, 90);
  // nose
  noFill();
  stroke(214, 162, 126);
  strokeWeight(3);
  arc(300, 325, 50, 50, PI, 0);
  //lens big
  var eyeX;
  var eyeY;
  var lookUP;
  noStroke();
  fill(232, 134, 206);
  lookUP = map(mouseY, 0, 600, 240, 260);
  lookUP = constrain(lookUP, 240, 260);
  eyeY = map(mouseX, 0, 600, 200 - 10, 200 + 10);
  eyeY = constrain(eyeY, 200 - 10, 200 + 10);
  ellipse(eyeY, lookUP, 50, 50);
  eyeX = map(mouseX, 0, 600, 400 - 10, 400 + 10);
  eyeX = constrain(eyeX, 400 - 10, 400 + 10);
  ellipse(eyeX, lookUP, 50, 50);
  //lens small
  noStroke();
  fill(232, 12, 202);
  ellipse(eyeY, lookUP, 35, 35);
  ellipse(eyeX, lookUP, 35, 35);
  //pupil
  noStroke();
  fill(0);
  ellipse(eyeY, lookUP, 25, 25);
  ellipse(eyeX, lookUP, 25, 25);
  //white in the eye smaller
  noStroke();
  fill(300, 150);
  ellipse(eyeY - 5, lookUP - 10, 15, 15);
  ellipse(eyeX - 5, lookUP - 10, 15, 15);
  //white in the eye stronger
  noStroke();
  fill(300);
  ellipse(eyeX - 5, lookUP - 10, 10, 10);
  ellipse(eyeY - 5, lookUP - 10, 10, 10);
  //cheeks lines
  noFill();
  stroke(166, 39, 76, 70);
  strokeWeight(3);
  arc(400, 320, 94, 90, PI, 0);
   noFill();
  stroke(166, 39, 76, 70);
  strokeWeight(3);
  arc(200, 320, 94, 90, PI, 0);
  
  //blush lines
    strokeWeight(5);
    stroke(255, 70, 231, 70);
  line(180, 290, 185, 320);
  line(200, 290, 205, 320);
  line(220, 290, 225, 320);
     strokeWeight(5);
    stroke(255, 70, 231, 70);
  line(380, 290, 385, 320);
  line(400, 290, 405, 320);
  line(420, 290, 425, 320);
  
  
  
  //eye creases
  stroke(166, 39, 76, 20);
  strokeWeight(3);
  arc(200, 240, 68, 60, PI, 0);
   noFill();
  //eye creases
  stroke(166, 39, 76, 20);
  strokeWeight(3);
  arc(400, 240, 68, 60, PI, 0);
   noFill();
  



  // Get the overall volume (between 0 and 1.0)
  var v = mic.getLevel();
  // "Smooth" the volume variable with an easing function
  volume += (v - volume) / 3;


  // Draw an ellipse size proportionally to the volume
  var mouthSize = map(volume, 0, 1, 10, 300);
  fill(0)
  ellipse(300, 400, mouthSize, mouthSize / 2);

}
function star(x, y, radius1, radius2, npoints) {
  var angle = TWO_PI / npoints;
  var halfAngle = angle/2.0;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius2;
    var sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

Kimberlyn Cho- Looking Outwards- 02

Alan Palomo, the lead singer of Neon Indian, uses self-generative art to digitally project his body movements on the screen during performances. I found this artwork interesting in its innovative nature and promising future of contemporary stage art. As technology continues to progress, generative art such as this would allow for an enhanced stimulating experience at not just concerts, but potentially other events as well.

 

Neon Indian performing “The Glitzy Hive” at Webster Hall;

Palomo engages his audience both visually and auditorily by capturing his movements through a motion camera and projecting the data in different geometric forms on a screen behind the band. He uses a Microsoft device called “Kinect” to capture the movements on stage. Although Kinect hasnt been commonly enjoyed by artists due to its abstracted projection, Palomo shows great appreciation for the symbiotic relationship it provides for his music and performance. In the past, Palomo has attempted incorporating visuals into his performances but has always felt a disconnect between his music and his performance. Hence, he worked with a friend to use audio synthesizers to track audio lines to manipulate various projections. The algorithm of Palomo’s generative art allow for an endless possibility of digital projections based on his music and performance.

Jasmine Lee – Looking Outwards – 02

The project I admire is Silk created by Yuri Vishnevsky in 2012 (with music and sounds by Mat Jarvis). It is an interactive introduction to generative art, in that it allows users of the website to create their own images. The website uses the user’s mouse coordinates to create lines, which is then dictated by the program’s algorithm to manifest in a fractal-like manner. I’ve often used this website to relax in the past, as it is therapeutic to see the colorful lines of light dance across the page.

An image I created using only “black” in Silk, with the rotational symmetry set to “6”.

From what I can understand, the code takes the mouse’s coordinates and then uses them to generate lines from one point to the next. Then, that line is being duplicated and angled in a way that we get “silk” threads coming off of each main line. This produces a tangled effect similar to that of a silk web. The creator’s artistic sensibilities definitely come off in their algorithm, as there were specific choices that were made to create the weave-like effect of dancing light. This website would have given off a very different feeling if the creator had chosen to just use simple straight lines. Furthermore, the addition of rotational symmetry in the algorithm allows users to experience surprising effects as they move their mouse across the screen. Shapes that seem like stars, webs, hexagons, and flowers are prone to appearing as users explore. 

Another image created using Silk, this time with different colors being used.

Timothy Liu — LookingOutwards — 02

Kate Compton is a self-described “crafter of twitching generative bots.” Her work perfectly encapsulates concepts of generative art; it is bright, geometric, whimsical, and most importantly, random. A great example I found of her work is “Flowers,” a generative art piece that randomly spawns a sequence of graphically-generated flowers that sway in the wind. If you click “replant,” you’re able to regenerate the sequence of flowers, and the “evolve” button causes the regeneration to occur rapidly. 

An example snapshot of one of Kate Compton’s sequence of generative flowers (http://www.galaxykate.com/apps/Prototypes/LTrees/).

I thought that this was a fascinating example of generative art because you can almost see the principles in action. According to Free Code Camp, some of the core foundations of generative art is that:

  1. It’s random
  2. It’s based on algorithms
  3. It’s geometric in nature

The “replant” and “evolve” buttons make it clear that there’s an element of randomness to Compton’s work. Further, she’s very upfront in her bio that she works mainly with JavaScript (and very possibly, p5.js!). Thus, it’s likely that Compton wrote an algorithm in JavaScript and allowed it to reign freely over her art. Finally, the graphical style of the flowers is clearly geometric and shape-driven, and this works wonderfully with her work because of how flowy and limber the flowers feel in the wind. 

It’s clear that Compton’s artistic capabilities are embedded in her algorithm because of how she utilizes color palettes and combinations as part of the “random” element. Every time the sequence of flowers evolves, so does the color palette, but Compton’s clear knowledge of color theory keeps the colors vivid, bright, and fun. My guess on how the algorithm functions is that with every mouseClick on “replant,” a random color is selected for each of the different flowers. Not only that, but a new random sequence of shapes is generated as well. Then, for the “evolve” buttons, the algorithm emulates a continuous sequence of mouseClicks to keep the colors and shapes evolving and changing. Kate doesn’t explain the secrets to her work, but it’s that element of randomness and surprise that keeps fans coming back for more.

Kate explaining how she creates generative art with Javascript at the JSConf in Iceland, 2018.

Sources:

https://www.freecodecamp.org/news/an-introduction-to-generative-art-what-it-is-and-how-you-make-it-b0b363b50a70/

http://www.galaxykate.com/apps/Prototypes/LTrees/

http://www.galaxykate.com

Carly Sacco – Self Portrait

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project-01: Self Portrait (Face)

function setup() {
  createCanvas(600, 400);
  background(187,191,223)
  
  stroke('white')
  strokeWeight(15)
  line(20,0, 20,400)
  line(80,0, 80,400)
  line(140,0,140,400)
  line(200,0,200,400)
  line(260,0, 260,400)
  line(320,0, 320,400)
  line(400,0,400,400)
  line(460,0,460,400)
  line(520,0,520,400)
  line(580,0,580,400)
  noStroke();
  
  stroke(197,197,197)
  strokeWeight(5)
  line(25,0,25,400)
  line(85,0,85,400)
  line(145,0,145,400)
  line(205,0,205,400)
  line(265,0, 265,400)
  line(325,0, 325,400)
  line(405,0,405,400)
  line(465,0,465,400)
  line(525,0,525,400)
  line(585,0,585,400)
  noStroke();
}

function draw() {

  //dress
  fill(148,148,148);
  rect(215,220,170,300,90,90,15,15);
  strokeWeight(1);
  
  //right arm
  noFill(148,148,148);
  stroke(1);
  arc(306,335,135,80, 0, 3.14/2);
  arc(306,325,100,60,0, 3.14/2);
  
  //left arm
  noFill();
  stroke(1);
  arc(260,340,60, 30, 3/4, 3.14);
  arc(254,357,70,40, 3/4, 3.14);
  
  //hair
  noStroke();
  fill(93,66,45);
  rect(230,90,140,200,40,40,0,0);
  stroke(1);
  
  //neck
  fill(190, 129, 102);
  rect(280,200,40,40);
      
  //hair on shirt
  noStroke();
  fill(148,148,148);
  rect(280,240,40,50);
  stroke(1);
  
  //head
  fill(194,137,112);
  rect(250,100,100,110,30,30,80,60);
  
  //hair on top of head
  noStroke();
  fill(93,66,45);
  arc(290,115,110, 50, 3.14*.75,0, CHORD);
  
  fill(93,66,45);
  arc(335,115, 60, 30, 160, 20, CHORD);
  stroke(0);
  
  //eyes
  fill('black');
  ellipse(280,150,15,10);
  ellipse(320,150,15,10);
  
  fill('white');
  ellipse(280,150,5,5);
  
  fill('white');
  ellipse(320,150,5,5);
 
  //nose
  noFill(194,137,112);
  stroke(5);
  arc(300,165,10,5, 1.57, 3.14);
  
  //mouth
  noFill();
  strokeWeight(2);
  arc(300,185,40,20, 0, 3.14);
  strokeWeight(1);
  
  //flower stem
  fill('green');
  rect(285,330,10,80);
  
  //flower
  noStroke();
  fill(249, 191, 47);
  rect(267,295,45,45);
  
  quad(288,285,315,320,285,350,260,320);
  
  fill('brown');
  ellipse(287,319,17,17);
  stroke(1);
   
  //hand
  fill(206,160,140);
  rect(270,350,40,30,15,15);
}

Through making this self portrait I learned how useful some of the simple components can be used to create different shapes to represent myself.

Project – 01 – Face


face

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project - 01
*/
function setup() {
    createCanvas(600, 600);
    background(200);

    strokeWeight(0);
    rect(150, 400, 200, 450);

    strokeWeight(1);


    ellipse(300, 300, 360, 440);

    arc(220, 250, 80, 80, 0, PI + QUARTER_PI, CHORD);
    arc(400, 250, 80, 80, 0, PI + QUARTER_PI, CHORD);

    fill(77, 31, 10);
    strokeWeight(0);
    ellipse(230, 270, 25, 25);
    ellipse(414, 270, 25, 25);


    stroke(77, 31, 10)
    noFill();
    strokeWeight(25)
    bezier(180, 140, 250, 50, 350, 150, 380, 100);
    bezier(180, 145, 250, 50, 350, 150, 390, 110);
    bezier(180, 145, 250, 90, 350, 100, 400, 110);
    bezier(150, 180, 250, 90, 350, 100, 400, 110);
    bezier(150, 180, 250, 90, 350, 90, 400, 110);
    bezier(180, 140, 250, 50, 350, 150, 400, 90);
    bezier(180, 140, 250, 50, 350, 150, 400, 90);
    bezier(180, 140, 250, 50, 350, 80, 380, 100);

    strokeWeight(2)
    line(320, 260, 340, 390)

    fill(194, 114, 107)
    ellipse(300, 440, 100, 60);

    strokeWeight(0);
    fill(255);
    ellipse(300, 420, 60, 20);
    ellipse(300, 460, 60, 20);




    //triangle(200, 140, 350, 60, 430, 140);
    //arc(300, 300, 280, 80, 0, HALF_PI);



    /* NOTES FROM CLASS rect(320 - mouseX, 10, 50, 100)
    rect(mouseX, height / 2, 50, 100)  use height / 2 to place in middle
    rect(random(50) + 100, height / 2, 50, 100)

    rect(width - 55, height - 55, 50, 50)    Places rectangle at 55,55 within
    canvas

    CONDITIONALS
    if (expression) {
        statement;
  }

    if (mouseX > 100)
        background("green")

    */



    // x,  y,  w,  h
}

function draw() {

}

Carly Sacco – Looking Outwards – 01

The Cell Phone Disco shows a visual representation of cell phones in the area.

The Cell Phone Disco located in Pittsburgh is an interactive visualization of active mobile phones in the area. This project was created through the collaboration between artists from Informationlab and engineers. There are sixteen antennas that scan and receive the electromagnetic data from cell phones where eight processors then emit lights in the display to give a visual representation on a 16′ by 16′ LED board.

I thought this project was particularly inspiring and interesting because the placement of the installation is in an alley. Therefore, there are not many cell phone signals the art could receive besides the few people interacting closely. I think not only is this a thoughtful move on the artists behalf to have the piece largely exhibit an intimate signal, but that because people would have to go out of their way to find it, the piece holds more significance once found.

Viewer watching the display caused by the electromagnetic field emitted from their cell phone.

SooA Kim – Project 01

project1

//15-104, Section C
//SooA Kim
//sookim@andrew.cmu.edu

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(100, 100, 150);

    //hair
    fill(0);
    ellipse(400, 330, 200, 250);
    ellipse(420, 450, 250, 250);
    ellipse(200, 350, 180, 220);
    ellipse(190, 460, 180, 180);
    ellipse(180, 570, 200, 200);
    ellipse(500, 560, 150, 150);

    //ears
    fill('#F5E0CD');
    ellipse(300, 320, 280, 150);

    //neck
    rect(255, 350, 100, 200);

    //face
    stroke(255, 255, 255);
    strokeWeight(3);
    ellipse(300, 300, 230, 300);

    //eyes
    noStroke();
    fill(0);
    ellipse (252, 280, 35, 35);
    ellipse (357, 280, 35, 35);

    //dot
    ellipse(357, 301, 5, 5);

    //eyelid
    noFill();
    stroke(0);
    strokeWeight(8);
    arc(245, 283, 57, 50, PI, TWO_PI);
    arc(350, 283, 57, 50, PI, TWO_PI);

   //mouth
    stroke('#C69C6D');
    strokeWeight(5);
    arc(300, 320, 50, 50, HALF_PI, PI - QUARTER_PI);

    //lips
    fill('#E55F55');
    noStroke();
    ellipse(310, 400, 40, 20);

    //hair bang
    fill(0);
    push();
    rotate(PI / 5.0);
    ellipse(385, -80, 250, 120);
    pop();
    push();
    rotate(PI / 3.5);
    ellipse(280, -45, 120, 230);
    pop();
    
    //body
    fill(50, 50, 50); 
    rect(150, 480, 320, 200, 50);

    //hair bang2
    push(); 
    fill(0);
    rotate(PI / 3.5);
    ellipse(610, -35, 150, 250);
    ellipse(670, 0, 250, 250);
    pop();
    fill(0);
    ellipse(170, 550, 150, 180);

     //earring
    fill(255)
    ellipse (180, 360, 12, 12);
    fill(255)
    triangle(165, 400, 180, 365, 200, 400); 
}

This was my first time generating an image by writing code. It helped me get familiar with coordinates in my canvas and realize the hierarchy/or lines to identify layers when you code in your text editor.

Nawon Choi— Project 01

nawon-portrait

// Nawon Choi
// Section C
// Project-01 Self-Portrait


function setup() {
    createCanvas(500, 500);
    background(220);    
}

function draw() {
    
    // background
    noStroke();
    fill("#E3CBC8");
    rect(0, 0, 500, 250);
    
    // head
    noStroke();
    fill("#6A6159");
    ellipse(234, 250, 395, 500);

    noStroke();
    fill("#6A6159");
    ellipse(312, 249, 302, 465);

    noStroke();
    fill("#F2E3C2");
    ellipse(255, 236, 356, 423);

    noStroke();
    fill("#6A6159");
    rect(122, 142, 69, 16);

    noStroke();
    fill("#6A6159");
    rect(315, 142, 69, 16);

    noStroke();
    fill("#6A6159");
    quad(128, 61, 303, 30, 200, 125, 54, 182);

    noStroke();
    fill("#6A6159");
    triangle(224, 16, 303, 30, 153, 57);

    // table
    noStroke();
    fill("#AA827C");
    rect(0, 250, 500, 134);

    noStroke();
    fill("#9B736D");
    rect(0, 384, 500, 30);

    noStroke();
    fill("#E1ACA4");
    rect(0, 414, 500, 86);
    
    // rice
    noStroke();
    fill("#F3EEE9");
    rect(163, 250, 175, 80, 29);

    // egg
    noStroke();
    fill("#F2BD39");
    rect(143, 224, 214, 53, 7);

    noStroke();
    fill("#F8D683");
    rect(143, 224, 214, 20, 7);

    // seaweed
    noStroke();
    fill("#424944");
    rect(235, 220, 30, 24);

    noStroke();
    fill("#27312B");
    rect(235, 244, 30, 33);

    noStroke();
    fill("#151916");
    rect(235, 277, 30, 53);

    // eyes
    noStroke();
    fill("#ffffff");
    ellipse(154, 198, 57, 46);

    noStroke();
    fill("#ffffff");
    ellipse(347, 198, 57, 46);
    

    // eyeballs
    let x1, x2, y;
    // let x1 = mouseX+153;
    //     x2 = mouseX
    //     y = mouseY-142;

    // LEFT x range: (142 - 166)
    // RIGHT x range: (335 - 359)
    // y range: (192 - 205)
    if (mouseY < 192 ){
        y = 192;
    } else if (mouseY >= 192 & mouseY <=205) {
        y = mouseY;
    } else {
        y = 205;
    }

    if (mouseX < 142) {
        x1 = 142,
        x2 = 335;
    } else if (mouseX >= 142 & mouseX <= 166) {
        x1 = mouseX,
        x2 = 335;
    } else if (mouseX > 166 & mouseX < 335) {
        x1 = 166,
        x2 = 335;
    } else if (mouseX >= 335 & mouseX <= 359) {
        x1 = 166,
        x2 = mouseX;
    } else {
        x1 = 166,
        x2 = 359;
    }

    noStroke();
    fill("#6A6159");
    ellipse(x1, y, 33, 33);

    noStroke();
    fill("#6A6159");
    ellipse(x2, y, 33, 33);

    noStroke();
    fill("#FAFAFA");
    ellipse(x1-4, y-4, 12, 12);

    noStroke();
    fill("#FAFAFA");
    ellipse(x2-4, y-4, 12, 12);

    
}

I definitely wanted to have an interactive component for my self-portrait, so I made the eyes follow the direction of the mouse. Perhaps the most challenging part of this project was coding the values so that the eyeballs would stay within the range of the eyes. I thought for a while on what I wanted my self-portrait to look like, and ultimately, I decided to focus on my two of my favorite foods—eggs and sushi.

Aaron Lee — Project01 — Face

Aaron

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-01-self portrait
*/

//canvas
function setup() {
   createCanvas(600,600);      
}


function draw() {
//background
    if (mouseX < width*0.33) {
    background("red");
    } else if (mouseX > width*0.66) {
    background("blue");
    } else {
    background("white");
    }

//hat
    fill(255);
    noStroke();
    quad(249,213,355,213,390,284,220,266);
    fill(0);
    triangle(195,266,266,249,390,284);
//eyebrow
    stroke(100);
    line(213,309,231,302);
    line(258,294,292,284);
//nose
    stroke(50);
    strokeWeight(4);
    line(249,277,266,373);
    line(266,373,280,364);
    line(280,364,281,383);
//book
    line(188,367,274,385);
    line(274,385,360,366);
    line(360,366,367,498);
    line(274,385,270,460);
    line(188,367,193,502); 
//sunglasses
    noStroke();
    fill(0)
    quad(208,329,240,314,247,342,225,348);
    quad(263,310,295,300,297,326,272,333);
    quad(242,326,359,293,357,302,245,336);
//hand
    stroke(0);
    strokeWeight(1);
    line(257,564,248,532);
    line(248,532,225,505);
    line(225,505,233,500);
    line(240,507,222,487);
    line(222,487,228,482); 
    line(243,498,221,469); 
    line(221,469,228,461); 
    line(221,469,228,461); 
    line(221,454,248,487); 
    line(221,454,231,447); 
    line(231,447,268,497);
    line(268,497,292,482);  
    line(292,482,300,493);  
    line(300,493,285,508);  
    line(285,508,304,552);  
}

Instead of avoiding rigid curves, I decided to design them intentionally with different lineweights.