hycai@andrew.cmu.edu – Page 3 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Hannah Cai—Looking Outwards—02

GeoSound is an interactive web page that generates sound from analyzing the rotation of geometric objects. Though this generation is, in some ways, directly influenced by the user, the user cannot change the patterns and pitches created by the shapes (except by increasing the “randomness”). This project caught my eye for two reasons, the first being the interactivity that I just mentioned. The second was the use of sound. This project piqued my interest in generative sound, especially combined with abstraction. I don’t believe that music should only be for people who play classical instruments, or for pop stars. Programs like this bring the joy of creating music closer to people who might not have much of a musical background, which I think is something special.

Hannah Cai—Project 2—Variable Faces

/* Hannah Cai
hycai@andrew.cmu.edu
Section C
Project-02-Variable-Face
*/

function setup() {
    createCanvas(640,480);
    background(250);
    rectMode(CENTER);
    ellipseMode(CENTER);
    angleMode(DEGREES);

    // color variables
    bodyR = 251;
    bodyG = 176;
    bodyB = 64;
    finR = 190;
    finG = 30;
    finB = 45;
    scaleR = 255;
    scaleG = 215;
    scaleB = 86;

    size = 1;
    shear = 0;
    gillWeight = (5); 
    showWhiskers = (1);
    whiskerAngle = (0);
    whiskerLength = (33);
    finStyle = 0;
    scaleStyle = 0;
    scaleDot = 0;
    scaleDotSize = 0;
    specimenNumber = 8108;
}

function draw() {
    background(250);
    // label
    textFont('Courier New');
    textStyle(ITALIC);
    textAlign(CENTER);
    textSize(20);
    noStroke();
    fill(0);
    text('Arowana',320,357); //species name
    textSize(14);
    text('Osteoglossidae',320,375); //scientific name
    textSize(10);
    textFont('Courier');
    text('specimen #'+specimenNumber,320,395); //"specimen # x"

    translate(320,240); 
    scale(size);
    shearX(shear);
    translate(-320,-240);

    // tail fins
    fill(finR,finG,finB);
    noStroke();
        // tail
        translate(455,213);
        rotate(-45);
        rect(0,0,112,112,0,40,100,40);
        rotate(45);
        translate(-455,-213);
        // top fin
        ellipse(390,151,71,47);
        // bottom fins
        if (finStyle <= 0.5) { //fin style 1: two short bottom fins
        shearX(35);
        rect(180,270,117,48,0,200,30,200);
        shearX(-35);
        rect(267,274,54,41,0,50,5,50);
        } else { //fin style 2: one long bottom fin
        shearX(35);
        rect(150,270,180,48,0,200,30,200);
        shearX(-35);
        noFill();
        stroke(finR,finG,finB);
        strokeWeight(1);
        arc(266,270,150,70,150,260);
        }

    // whiskers
    if (showWhiskers >= 0.5) { 
    noStroke();
    fill(bodyR,bodyG,bodyB);
    translate(137,151);
    rotate(-whiskerAngle);
    ellipse(-1,-17,4,whiskerLength);
    rotate(whiskerAngle);
    translate(-137,-151);
    }

    // body
    noStroke();
    fill(bodyR,bodyG,bodyB);
    arc(245,150,219,218,0,180); //head
    rect(322,204.5,170,109,0,100,100,0); //tail

    // scales
    strokeWeight(1);
    if (scaleStyle >= 0.5) { //scale style 1: outlines
        noStroke();
        fill(scaleR,scaleG,scaleB);
    } else { //scale style 2: half-circles
        noFill();
        strokeWeight(1);
        stroke(scaleR,scaleG,scaleB);
    }
    arc(223,168,34,34,-90,90); //row 1
    arc(223,204,34,34,-90,90);
    arc(223,240,34,34,-90,90);
    arc(240,185,34,34,-90,90); //row 2
    arc(240,221,34,34,-90,90);
    arc(257,168,34,34,-90,90); //row 3
    arc(257,204,34,34,-90,90);
    arc(257,240,34,34,-90,90);
    arc(274,185,34,34,-90,90); //row 4
    arc(274,221,34,34,-90,90);
    arc(291,168,34,34,-90,90); //row 5
    arc(291,204,34,34,-90,90);
    arc(291,240,34,34,-90,90);
    arc(308,185,34,34,-90,90); //row 6
    arc(308,221,34,34,-90,90);
    arc(325,168,34,34,-90,90); //row 7
    arc(325,204,34,34,-90,90);
    arc(325,240,34,34,-90,90);
    arc(342,185,34,34,-90,90); //row 9
    arc(342,221,34,34,-90,90);
    arc(359,168,34,34,-90,90); //row 10
    arc(359,204,34,34,-90,90);
    arc(359,240,34,34,-90,90);
    arc(376,185,34,34,-90,90); //row 11
    arc(376,221,34,34,-90,90);
    arc(393,204,27,34,-90,90); //row 12

    //scale details
    if (scaleDot >= 0.5) {
    noStroke();
    fill(scaledotR,scaledotG,scaledotB)
    arc(223,168,scaleDotSize,scaleDotSize,-90,90); //row 1
    arc(223,204,scaleDotSize,scaleDotSize,-90,90);
    arc(223,240,scaleDotSize,scaleDotSize,-90,90);
    arc(240,185,scaleDotSize,scaleDotSize,-90,90); //row 2
    arc(240,221,scaleDotSize,scaleDotSize,-90,90);
    arc(257,168,scaleDotSize,scaleDotSize,-90,90); //row 3
    arc(257,204,scaleDotSize,scaleDotSize,-90,90);
    arc(257,240,scaleDotSize,scaleDotSize,-90,90);
    arc(274,185,scaleDotSize,scaleDotSize,-90,90); //row 4
    arc(274,221,scaleDotSize,scaleDotSize,-90,90);
    arc(291,168,scaleDotSize,scaleDotSize,-90,90); //row 5
    arc(291,204,scaleDotSize,scaleDotSize,-90,90);
    arc(291,240,scaleDotSize,scaleDotSize,-90,90);
    arc(308,185,scaleDotSize,scaleDotSize,-90,90); //row 6
    arc(308,221,scaleDotSize,scaleDotSize,-90,90);
    arc(325,168,scaleDotSize,scaleDotSize,-90,90); //row 7
    arc(325,204,scaleDotSize,scaleDotSize,-90,90);
    arc(325,240,scaleDotSize,scaleDotSize,-90,90);
    arc(342,185,scaleDotSize,scaleDotSize,-90,90); //row 9
    arc(342,221,scaleDotSize,scaleDotSize,-90,90);
    arc(359,168,scaleDotSize,scaleDotSize,-90,90); //row 10
    arc(359,204,scaleDotSize,scaleDotSize,-90,90);
    arc(359,240,scaleDotSize,scaleDotSize,-90,90);
    arc(376,185,scaleDotSize,scaleDotSize,-90,90); //row 11
    arc(376,221,scaleDotSize,scaleDotSize,-90,90);
    arc(393,204,scaleDotSize,scaleDotSize,-90,90); //row 12
    }

    // eyes
    noStroke();
    fill(255);
    ellipse(172,165,25,25); //whites
    fill(0);
    ellipse(172,165,21,21); //pupil

    // gills
    noFill();
    stroke(finR,finG,finB);
    strokeWeight(gillWeight);
    arc(179,192,69,69,-40,105);

    // mouth
    strokeWeight(1);
    arc(94,204,138,138,-50,-15);

    // gill fin
    strokeWeight(gillWeight);
    fill(finR,finG,finB);
    ellipse(240,228,67,20);
}


function mousePressed() {
    size = random(.5,1.2);
    shear = random(0,15); //horizontal stretch
    showWhiskers = random(0,1);
    finStyle = random(0,1);
    scaleStyle = random(0,1);
    scaleDot = random(0,1);
    scaleDotSize = random(0,30);
    // color variables
    bodyR = random(100,250);
    bodyG = random(100,250);
    bodyB = random(100,250);
    finR = bodyR - random(50,150);
    finG = bodyG - random(50,150);
    finB = bodyB - random(50,150);
    scaleR = bodyR + random(50,100);
    scaleG = bodyG + random(50,100);
    scaleB = bodyB + random(50,100);
    scaledotR = scaleR - random(30,50)
    scaledotG = scaleG - random(30,50)
    scaledotB = scaleB - random(30,50)

    gillWeight = random(1,5);
    whiskerAngle = random(0,90);
    whiskerLength = random(30,50);
    specimenNumber = random(0,9999);
    specimenNumber = round(specimenNumber); //rounds specimen# to whole number
}

real arowana look like this:

a closer look at the whiskers

initial sketches with ideas for variations

/////

some variations from the final code

I wanted to take a more scientific approach to the idea of generated variations, so I decided to focus my project on variations of an animal species. I chose the arowana because it’s one of my favorite animals, and because I wanted to try and capture its distinctive shape. Overall, I had a lot of fun with this project!

Hannah Cai—Project-01-Face

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-01-Face
*/

function setup() {
  createCanvas(600,600);
  a = width / 2;
  b = width / 2;
  c = width / 2;
}

function draw() {
  scale(0.5, 0.5);

  background(202,248,255);

  // clouds
  strokeWeight(0);
  fill(255,255,255);
  rectMode(CENTER);
  rect(324 - a,250,500,222,111,111,111,111);
  a = a - 2.5;
  if (a < -1150) {
  a = 600;
  }
  rect(1117 - b,866,316,175,87,87,87,87);
    b = b - 4;
  if (b < -400) {
  b = 1500;
  }
  rect(955 - c,623,194,71,35,35,35,35);
    c = c - 3;
  if (c < -350) {
  c = 1200;
  }

  // hair
  strokeWeight(0);
  fill(35,36,40);
  rectMode(CENTER);
  rect(553,595,529,812,209,144,144,144);

  // shirt
  fill(255,214,174);
  rect(582,1153,729,542,187,187);
  noFill();
  stroke(255,159,159);
  strokeWeight(5)
  angleMode(DEGREES)
  arc(579,884,153,150,360,180);

  // face base
  strokeWeight(0);
  fill(255,240,202);
  rectMode(CENTER);
  rect(547,479,394,456,119,117,197,197);
  rect(578,764,121,237);
  ellipse(578,878,120,120)

  // hair 2
  strokeWeight(0);
  fill(35,36,40);
  ellipse(359,294,71,71);
  quad(433,229,748,247,758,432,391,279);

  // face details
    // nose, ears
  noFill();
  stroke(255,159,159);
  strokeWeight(5);
  angleMode(RADIANS)
  arc(644,465,152,152,PI + HALF_PI,HALF_PI);
  arc(656,448,74,75,PI + HALF_PI,HALF_PI);
  arc(657,500,30,29,HALF_PI,PI + HALF_PI);
  arc(392,519.5,49,49,HALF_PI,PI + HALF_PI);
  angleMode(DEGREES)
  arc(380,434,125,124,270,80);
    // eyes
  strokeWeight(0);
  fill(255,255,255);
  rect(525,436,75,40,20,20,20,20);
  rect(374,439,47,40,20,20,20,20);
  fill(35,36,40);
  rect(532,421,70,11,5,5,5,5);
  rect(378,424,40,11,5,5,5,5);
  ellipse(502,438,33,44);
  ellipse(361,439,23,40);
    // eyebrows
  rect(555,371,104,19,10,10,10,10);
  rect(359,374,49,19,10,10,10,10);
    // cheek
  fill(255,221,197);
  ellipse(543,563,145,145);
    // mouth
  fill(255,159,159);
  triangle(405,607,421,621,399,621);
  strokeCap(ROUND);
  stroke(255,159,159);
  strokeWeight(10);
  line(405,607,421,621);
  line(421,621,399,621);
  line(399,621,405,607);

    // moles
  strokeWeight(0)
  fill(35,36,40);
  ellipse(503,623,5,5);
  ellipse(586,533,2.5,2.5);
  ellipse(452,626,2.5,2.5);

  // fin!
}

process:
1. tried sketching in p5, it was too slow and quite confusing so I stopped after a while
2. made a sketch in Illustrator instead
3. started sketching in p5, referencing my Illustrator sketch
4. learned that I could view coordinates, W/H, and even corner radius in Illustrator
5. filled out all the data in p5
6. I wanted to make something interactive/live, so I added some movement in the clouds (had to research and do a lot of trial and error with this)

I had a lot of fun with the entire process of making this! It was definitely out of my comfort zone, and I got stuck in many areas, but that just makes me feel more satisfied now that I’ve finally gotten my project the way I want it to be. I can’t believe I’m actually writing code, I was always really intimidated by the idea of coding. I feel like I’ve become a lot more comfortable with p5/coding already though, even though this is just the first project.

Hannah Cai—Looking Outwards—01

Example of a space from the “Plastic Rain” project.

“Plastic Rain is a serie of non-standard retail spaces. Each zone presents vividly different stories and objects.Visitors can immerse themselves the installation aesthetic in dramatic totality. Spaces that offers time for meditation. A gentle inside/out travel.” https://www.behance.net/gallery/69244661/Plastic-Rain

As a person and artist, I have always been fascinated with surrealism, particularly the creation of worlds/spaces that you would never encounter in everyday life. I really like this project in particular because it brings the surreal into reality (or at least allegedly aims to). The idea of being able to explore and live in what’s basically a huge installation is really attractive to me. Fusing art with living spaces, rather than having art as a separate thing to hang on the wall. Not to mention that there are a lot of opportunities with this kind of project; it could be rented out for people to stay in for a day, or even for a few hours, and sold as an experience.

I think the images in the gallery are rendered in a program like Cinema 4D—the sky doesn’t look believable enough to me. This ties into why I’m interested in 3D modeling; as stated before, I’m interested in creating unique spaces. I don’t really know if p5 has good 3D modeling functions, but I do know that 3D tools are available in processing in general. Hopefully I’ll be able to learn more about those in the future.

(Disclaimer: though I’ve mostly only talked about 3D modeling/design in this post, there are a lot of other things about p5/processing that I’m interested in as well, especially the interactive nature of it and how it can tie into web and app design!)