Author: helen

Looking Outwards 06: Randomness

For this blog post, I chose to examine Mozart’s Musikalisches Würfelspiel which was a waltz created by chance. What I found so interesting about this waltz was how it showed that it’s hard to create something from pure chance but that it took some knowledge and methodology on the composers part. Essentially, without the knowledge behind what parts go into a waltz, Mozart’s piece would not have been so successful. The roll of a die was not meant to determine a random note – instead they corresponded to pre-composed portions of a waltz that were then pieced together by the chance of a dice.

Normally, I would not look into music since I have very limited music knowledge. However, I came across an article that “coded” Mozart’s waltz through computer generated chance and I found it really interesting how I was able to see/visualize the waltz through code.

Project 5: Wallpaper

For the wallpaper assignment I drew a pattern of corgi faces and dog treat bones. I was inspired by my puppy who would not let me sit down and do this homework assignment. I was not successful and sketching the faces myself so I used some images linked below as references.

sketch

function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);
  noLoop();
}

function draw() {
    background(230, 188, 191);
    strokeWeight(0);
    
    //columns of 3 corgi faces
    for(x=50; x<300; x+=100){
        for(y=50; y<300; y+=100) {
        push();
        translate(x,y);
        corgiFace(x, y, 100);
        pop();
      }
    }
  
    //columns of 2 corgi faces
    for(x=100; x<300; x+=100) {
      for(y=100; y<300; y+=100) {
        push();
        translate(x,y);
        corgiFace(x, y, 70);
        pop();
      }
    }
  
    //columns of 2 dog bones
    for(x=50; x<300; x+=100) {
        for(y=100; y<300; y+=100) {
          push();
          translate(x,y);
          dogBone(x, y, 20);
          pop();
        }
    }
  
    //columns of 3 dog bones
    for(x=100; x<300; x+=100) {
        for(y=50; y<300; y+=100) {
          push();
          translate(x, y);
          dogBone(x, y, 20);
          pop();
        }
    }
}

function dogBone(x, y, size) {
    strokeWeight(0);
    fill(255);
    rect(x, y, size, size/2);
    circle(x-size/2, y+5, size/2);
    circle(x-size/2, y-5, size/2);
    circle(x+size/2, y+5, size/2);
    circle(x+size/2, y-5, size/2);
}


function corgiFace(x, y, size) {
    fill(245, 191, 120);
    //draws head shape
    ellipse(x, y, size, size+10);
    ellipse(x,y+10, size, size-10);
    //left and right ear, respectively
    triangle(x-size/2, y, x-size*4/7, y-size*5/7, x-size/7, y-size*3/7);
    triangle(x+size/2, y, x + size*4/7, y-size*5/7, x+size/7, y-size*3/7);

    fill(255);
    //inside of ear
    triangle(x-size/2, y - size*2/7, x-size/2, y-size*4.5/7, x-size*2/7, y-size*3/7);
    triangle(x+size/2, y - size*2/7, x+size/2, y-size*4.5/7, x+size*2/7, y-3*size/7);
    //face markings
    ellipse(x,y, size/7, size*3/7);
    ellipse(x, y + size*2/7, size*4/7, size*3/7);

    fill(0);
    //eyes
    circle(x - size*2/7, y, size/7);
    circle(x+size*2/7, y, size/7);
    //nose
    ellipse(x, y + size*15/70, size*2/7, size/7);
    //mouth
    arc(x, y+size*25/70, size/7, size/14, 2*PI, PI);
}

Image I referenced for creating the corgi face

Looking Outwards 5: 3D Modeling

A piece from Iris van Herpen’s Sensory Seas collection

The 3D modeling project I chose to highlight is Iris van Herpen’s portfolio in 3D printed fashion. In 2011, Iris van Herpen created intricate fashion designs through 3D modeling which paved the merge between technology and fashion. Iris van Herpen is known as the Dutch fashion designer that fused technology with traditional couture craftsmanship.

A video that shows the 3D modeling processes. Start at 2:08.

What I admire the most about her and her designs is that mathematical computations are difficult enough as it is – but seeing her being able to bring life to such beautiful 3D designs is a whole other story. Her creativity and intelligence is inspiring. It’s really obvious how the themes behind each of her clothing lines really shine through in the way the clothing looks and makes somebody feel. It’s not just some random patterns – you can see the craftsmanship behind them.

Project 04: String Art

For this project I chose to draw a series of four triangles around a circle that somewhat resembles light emanating from a bright white circle into the dark background.

sketch

//Helen Cheng
//helenc1
//Section C

var numLines = 50;
var canvasX = 400;
var canvasY = 300;

function setup() {
    createCanvas(400, 300);
    background(0);
    strokeWeight(0.5);
}

function draw() {
    fill(232, 231, 227);
    circle(200, 150, 200);
    line(canvasX/2, 0, 0, canvasY);
    line(canvasX/2, 0, canvasX, canvasY);
    //initilizing spacing for lines drawn
    var dist = canvasX/(numLines);
    for (var i = 0; i <= numLines; i += 1) {
      //upright triangle
      stroke(163, 66, 199)
      line(canvasX/2, 0, dist*i, canvasY);
      //upside down triangle
      stroke(232, 221, 60);
      line(canvasX/2, canvasY, dist*i, 0);
      //left triangle
      stroke(47, 255, 0);
      line(300, 150, 0, dist*i);
      //right triangle
      stroke(255, 0, 0);
      line(100, 150, canvasX, dist*i);  
    }
    noLoop();
}

Looking Outwards 4: Sound Art

The project that I chose to highlight is the “Weather Thingy” created by Adrien Kaeser. Asides from it’s name – I admire how it focuses on an intersection point between science, technology, and music. It’s almost like an embodiment of the BXA program at CMU. The multidisciplinary approach to solving the issue of how weather might distort sound is a concept I’ve never even thought of before. The module also has the capability of simulating sound as if it were in certain inspiring weather condition for the musician.

My knowledge of music is rather limited. I played the piano and the flute for a few years and my computing knowledge is also very limited. The creator didn’t delve into any detail on how the algorithms worked but I would assume that its takes in the weather data and based on for instance, the amount of rain, the midi data would adjust the sound settings to be more crisp despite being muddled by the rain. However, this is just an inference of the creator’s concept. The module itself embodies the creator’s artistic sensibilities as a musician, by showing just how sensitive and receptive he is of even the smallest change in
sound as a result of the weather.

Project 3 – Dynamic Drawing

For this project I created a nautical scene that has many changing/moving elements that simulate the change from sunrise to sunset.

sketch

//Helen Cheng - helenc1
//Section C

var waterLevel=400

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

function draw() {
  strokeWeight(0);
  //sky gradients from dark to light along x
  var skyG = 136-mouseX/6
  var b = 255-mouseX/6
  background(0,skyG,b)
  //sun gradients from red to yellow along x
  var g = 255-(mouseX/6)
  fill(255, g, 10);
  circle(600-mouseX, 200, 100);
  //water level rises and falls along y
  fill(141,206,238);
  rect(0,waterLevel-mouseY/4,600,450);
  //sailboat moves with your cursor along X
  fill(230,62,54);
  arc(mouseX,400,200,100,0,PI);
  //sail
  fill(255);
  triangle(mouseX,375,mouseX,300,mouseX+75,350);
  strokeWeight(5);
  stroke(56,56,56);
  line(mouseX,400,mouseX,300);
}

Looking Outwards 3: Computational Fabrication

Laser cut fabric and wood

The project that I chose to highlight actually belongs to another CMU student –David Perry. It was interesting being able to see his project come to fruition throughout the Lunar Gala preparation process. More recently, I was able to interview him about the details and craftsmanship behind his line. During the interview, David talked about how his background in physics was able to help him develop the algorithms to laser cut the various materials and fabrics he used to construct his clothing line.

David Perry’s Scuba Helmet for Lunar Gala 2020

His most famous piece is this scuba diving helmet shown below. The whole product was visualized in CAD before each piece was individually laser cut and eventually put together (systematically) by hand. What I think is so amazing about this clothing line is how he draws together 2 disciplines to create wearable art inspired by the patterns of sea life.

Project-02: Variable Faces

For this project I created a “Random Minion Generator.” Rather than post my horrific sketches – I decided to include the image I saw on Pinterest that inspired the facial variations.

Click through to see all the Bobs, Kevins, and Stuarts.

sketch

//Helen Cheng
//helenc1
//Section C

var canvasX = 480/6 //canvas split into 6/6 grid
var canvasY = 640/6
var eyeType = 1 
var mouthType = 3
var r = 245
var g = 224
var b = 80
var eyeOffsetY = 10
var eyeOffsetX = 0
var mouthOffsetY = 0
var hair = 5

function setup() {
    createCanvas(480, 640);
}

function draw() {
    background(r, g, b);
    strokeWeight(5);
  
    //goggles
    fill(0);
    rect(0,canvasY*2.5+eyeOffsetY, 480, canvasY);
  
    //two eyes or one eye
    if (eyeType < 3) {
      //left eye
      fill(255);
      circle(canvasX*2, canvasY*3 + eyeOffsetY, canvasX*2);
      fill(0);
      circle(canvasX*2+eyeOffsetX, canvasY*3 + eyeOffsetY, canvasX);
      //right eye
      fill(255);
      circle(canvasX*4, canvasY*3 + eyeOffsetY, canvasX*2);
      fill(0);
      circle(canvasX*4+eyeOffsetX, canvasY*3 + eyeOffsetY, canvasX);
  }
    else{
      fill(255);
      circle(canvasX*3, canvasY*3+eyeOffsetY, canvasX*2);
      fill(0);
      circle(canvasX*3+eyeOffsetX, canvasY*3+eyeOffsetY, canvasX);
  }
  
     //eyelids open or half open
    if (eyeType < 2) {
        fill(r,g,b);
        arc(canvasX*4, canvasY*3 +eyeOffsetY, canvasX*2, canvasX*2, PI, 0);
        arc(canvasX*2, canvasY*3 +eyeOffsetY, canvasX*2, canvasX*2, PI, 0);
}
    else if (eyeType > 4) {
        fill(r,g,b);
        arc(canvasX*3, canvasY*3+eyeOffsetY, canvasX*2, canvasX*2, PI, 0);
}
        
    //mouth
    if (mouthType < 2) {
        strokeWeight(5);
        line(canvasX*2, mouthOffsetY+canvasY*4, canvasX*3, mouthOffsetY+canvasY*4)
}
    else {
    // smile
        fill(0);
        strokeWeight(0);
        arc(canvasX*3, canvasY*4 + mouthOffsetY, canvasX*2, canvasY, 0, PI);
    //teeth
        fill(255);
        rect(canvasX*2.7, canvasY*4+ mouthOffsetY, canvasY/5, canvasY/5);
        rect(canvasX*3, canvasY*4+mouthOffsetY, canvasY/5, canvasY/5);
}
      //hair
    strokeWeight(hair); 
    line(canvasX*2,canvasY*2+eyeOffsetY,canvasX*2-abs(eyeOffsetY),canvasY+eyeOffsetY);
    line(canvasX*3,canvasY*2+eyeOffsetY,canvasX*3, canvasY+eyeOffsetY);
    line(canvasX*4,canvasY*2+eyeOffsetY,canvasX*4+abs(eyeOffsetY),canvasY+eyeOffsetY);
}

function mouseClicked() {
    eyeType = random(5);
    mouthType = random(1,3);
    r = random(245,255);
    g = random(224,255);
    b = random(0,80);
    eyeOffsetY = random(-canvasY/2,canvasY/2);
    eyeOffsetX = random (-canvasX/2, canvasX/2);
    mouthOffsetY = eyeOffsetY + random(canvasY/2);
    hair = random(0,10)
}

Inspiration:

Minion faces from Pinterest

Looking Outwards 2: Generative Art

A project I chose to highlight is Robert Hodgin’s Traffic simulation. What I found so interesting about this particular project is how it was able to really capture the human element through a computer program. Typically Hodgin’s work reflects animal phenomenons but the traffic simulation really stood out to me.


Unlike his other portfolio pieces, it captures the unique human aspect of personality. The “drivers” each have their own aggressiveness which is reflected in their driving decisions among the whole simulation. Unlike other visual traffic simulations, the cars aren’t moving in a uniform stream. Some drive faster than others and some cut others off or rush yellow lights.

In his portfolio, Robert Hodgin mentions what went into dictating the algorithm and what traffic rules were taken into account. Apart from the expected traffic lights, some drivers choose to turn left or right and shift lanes. Still what I think is the artistic element of this generative artwork is the aggressiveness factor that drivers have.

Project 01 – My Self-Portrait

My (abstract) self portrait.

myselfportrait

function setup() {
    createCanvas(600, 600);
    background(229, 204, 205) //muted pink
}

function draw() {
    fill(150, 72, 75) //mauve
    strokeWeight(0)
    ellipse (365,330,400,475) //face shape
    noFill();
    strokeWeight(5)
    stroke(207, 230, 145); // neon green line
    bezier(150, 0, 10, 80, 120, 60, 0, 120); // hair
    bezier(250, 0, 10, 80, 120, 60, 0, 220);
    strokeWeight(2);
    bezier(200,250,250,300,300,250,300,250); //eye
    line(210,260,200,270); //eyelashes
    line(230, 270, 225, 285);
    line (250, 272, 250, 290);
    arc(350,450,50,30,PI,0); // left top lip
    arc(400,450,50,30,PI,0); // right top lip
    arc(375,450,100,40,0,PI,CHORD); // bottom lip
    bezier(175,200,375,175,375,250,365,350); // brow bone 
    bezier(365,350,330,360,370,400,390,365); // nose
    bezier(150,150,150,550,280,500,390,540); // jawline
}