Author: hdw@andrew.cmu.edu

hdw – Project 5 – Wallpaper

sketch

//Helen Wu
//Section A
//hdw@andrew.cmu.edu
//Project 5 

function setup() {
    createCanvas(400, 400);
    fill(255)
}

function draw() {
  var x = 10 //x-center for yellow circle
  var y = 10 //y-center for circle
  var r = 5 //radius for all circles
  var spacing = 20 //spacing between each tile
  var lx //pink lines


//draw the lines that divide each column of flowers
for (var lx = 20; lx <=400; lx+=spacing){
  stroke(255,200,241);
  line(lx,0,lx,400);
}

//leaves and leaf lines
for (var b = 1; b<=400; b+=spacing){
  for (var a = 1; a <=400; a+=spacing){
    fill(147,216,140);
    noStroke()
    quad(a,b, a,3+b, 6+a,6+b, 3+a,b);
    stroke(7,89,0)
    strokeWeight(1)
    line(a,b,6+a,6+b)
  }
}


//yellow circles
for (var y = 10; y <= 400; y+=spacing){
  for (var x = 10; x <= 400; x+=spacing){
    fill(255,249,100);
    noStroke();
    ellipse(x,y,r,r);
  }
}

//bottom flower petal
push()
translate(0,5);
for (var y = 10; y <= 400; y+=spacing){
  for (var x = 10; x <= 400; x+=spacing){
    fill(255,0,63);
    stroke(255,200,241);
    strokeWeight(1);
    ellipse(x,y,r,r);
  }
}
pop()

//top flower petal
push()
translate(0,-5);
for (var y = 10; y <= 400; y+=spacing){
  for (var x = 10; x <= 400; x+=spacing){
    fill(255,0,63);
    stroke(255,200,241);
    strokeWeight(1);
    ellipse(x,y,r,r);
  }
}
pop()

//right flower petal
push()
translate(5,0);
for (var y = 10; y <= 400; y+=spacing){
  for (var x = 10; x <= 400; x+=spacing){
    fill(255,0,63);
    stroke(255,200,241);
    strokeWeight(1);
    ellipse(x,y,r,r);
  }
}
pop()

//left flower petal
push()
translate(-5,0);
for (var y = 10; y <= 400; y+=spacing){
  for (var x = 10; x <= 400; x+=spacing){
    fill(255,0,63);
    stroke(255,200,241);
    strokeWeight(1);
    ellipse(x,y,r,r);
  }
}
pop()
}

This week’s project was inspired the small patterns on early settler’s clothes in the west. I guess I kind of miss home. :’)

I drew on the back of a Fuku Tea receipt to plan out the shapes. I struggled with the leaf placement variables but figured it out.

hdw – Looking Outward – 5

Zeitguised is a creative studio that specializes in VR and 3d printing. They believe in combining the physical and digital worlds and like to focus on the intersection between these two planes.

Giest.xyz is a series they did handcrafted algorithmic textiles. Their design concept is a shift from passive to living matter and they use algorithmic models to iterate on form before building it in real life. The concept uses the idea of a synthetic ghost that is able to phase from one thing to another.

These two images are concept models of that were used for the final product.

These three images are some renderings of the final product. You can view the rest here.

hdw – Project 4 – String Art

sketch

//Helen Wu
//Section A
//hdw@andrew.cmu.edu
//Project 4


function setup() {
    createCanvas(400, 300);
    background(255);
  }

function draw() {

//curve one and two
for (var a = 0; a <= 41; a += 3) {
  strokeWeight(1);
  stroke(210);
  line(a, 0, 3*a, height-a);
  line(3*a, height-a, 5*a,300);

  line(width-a, height, width-3*a, a-height);
  line(width-3*a, a-height, -5*a, 0);
}


//three and four
for (var a = 3; a <= 500; a+=5) {
  strokeWeight(1);
  stroke(240,190,190);
  line(30,0,3*a,height-a);
  line(3*a,height-a,0,30);

  line(width-30,height,width-3*a,-a);
  line(width-3*a,-a,height,width-30);
}

//curve five and six
for (var a = 0; a <= 130; a += 3) {
  strokeWeight(1);
  stroke(245);
  fill(170,210,240);
  line (width-3*a, height-a, 5*a, 300);
  curve(width-a, width, width-3*a, height-a, width-3*a, height-a, 5*a, 300);
}

//curve seven + eight
for (var a = 0; a <= 130; a += 3) {
  strokeWeight(1);
  stroke(245);
  fill(170,210,240);
  line (3*a, a, width-5*a,height-300);
  curve(width-a, width, width-3*a, height-a, width-3*a, height-a, 5*a, 300);
}

//curve nine
for (var b = 3; b <=90; b += 5) {
  strokeWeight(1);
  stroke(160,210,230);
  fill(255,255,255,0);
  curve(0,0,b,b,b*4,b+5,400,400)
}

}

I struggled a bit on this week’s project. It’s hard to predict where the curves and lines will end up, so I went with a more experimental approach with my project. I do like the way the colors interact with each other, and the interesting texture created by the criss cross. However, I wish I could have the lines behave more uniformly.

hdw – Looking Outwards 4

“77 Million Paintings” is a sound and art digital software by Brian Eno. This artwork was made by compiling Eno’s past 296 works into a generative code that not only combines up to 4 of them visually at a time, but also generatively pairs music with his artwork. The title was named after the different number of artworks that could be made with said code, 77 million. This work is supposed to highlight Eno’s work with experimenting with light and generative music. Eno also shows this work through art installations at vaarious museums around the world. His work was inspired by minimalist musicians such as Phillip Glass and Steve Reich.

https://vimeo.com/638631
Example of some of his works.

Brian Eno’s work comes in a CD format with 2 disks, the first containing a software of randomized music and images, the second of which containing an interview.

Randomly generated images of his code.

hdw – Looking Outwards 3

Manfred Mohr is a generative artist who was first making generative art in the 1960’s. He was one of the earliest adopters of this field.

“Artificia II ” is a artwork based on the book Artificia he published in 1969. The artwork itself came out in 2012. He was inspired by the rhythm of the work and felt it was complimentary to the book he wrote.

The algorithm is made up of segmented lines that cross and change directions on a 11 and 15 dimension cute. The colors are calculated based on the x-vertext. The baseline algorithm gives the artwork its rhythm. You can read more about it here.

Some works in his collection. You can view the rest here.

hdw – Project 3 – Dynamic Drawing

Press any key to interact.

sketch

var x = 180
var r = 30;
var ellipseX;//ellipse's x position
var ellipseY;
var z = 0 //distance from center + opacity
var canBig = 1;

function setup() {
    background(255, 255, 255);
    createCanvas(640, 480);
    ellipseY = .5*height;
    ellipseX = .5*width;

}

function keyPressed() {
  if(canBig == 1){
    r=r+5;
    x=x-5;
    z=z+1;
  }
  if(r>320 & canBig == 1){
    canBig = 0;
    print(boundary);
  }
  if(canBig == 0){
    r=r-5;
    x=x+5;
    z=z-1;
  }
  if(r < 5 & canBig == 0){
    canBig = 1;
  }
}

function draw() {

    background(255, 255, 255, 200);
    noStroke();
    fill(0);

//middle flower
    //outer right
    fill(255,0,x,30+z*.15)
    ellipse(ellipseX+z, ellipseY, r, r);

    //white
    fill(255,255,255,30)
    ellipse(ellipseX, ellipseY, r, r);

    //outer left
    fill(255,0,x,30+z*.15)
    ellipse(ellipseX-z, ellipseY, r, r);

    //outer bottom
    fill(255,0,x,30+z*.15)
    ellipse(ellipseX, ellipseY+z, r, r);

    //white
    fill(255,255,255,30)
    ellipse(ellipseX, ellipseY, r, r);

    //outer top
    fill(255,0,x,30+z*.15)
    ellipse(ellipseX, ellipseY-z, r, r);

    //white center
    fill(255,255,255,5+.25*z)
    ellipse(ellipseX-0.7,ellipseY,2*z,2*z)
    ellipse(ellipseX+0.7,ellipseY,2*z,2*z)
    ellipse(ellipseX,ellipseY-0.7,2*z,2*z)
    ellipse(ellipseX,ellipseY+0.7,2*z,2*z)

    //center ellipses
    fill(255,0,x,30+z*.15)
    ellipse(ellipseX,ellipseY,2*z,z)
    ellipse(ellipseX,ellipseY,z,2*z)

    //magenta center
    fill(255,0,x+3*z,30+z*.15)
    ellipse(ellipseX,ellipseY,1.3*z,z)
    ellipse(ellipseX,ellipseY,z,1.3*z)

    //white center bud
    fill(255,255,255)
    ellipse(ellipseX,ellipseY,z*.1,z*.1)
  }

This week’s drawing is a blooming flower. I had originally wanted to do something more complicated but struggled with the code as is. I had Stella Han help me figure out how to create boundaries so that when it hit a certain height it would shrink again. I also had Shovik Mani help me figure out a bug in my code. Originally I had posted the function for keyPress inside the drawing function and couldn’t figure out why it wouldn’t draw.

hdw – Looking Outwards 2

Matthieu Regout is a designer who proposed an identity redesign for the city of Brussels. He wrote generative code to create a blue polygon and a red polygon, overlapped as a series of forms to show the hybrid nature of the city.

The algorithm that generated the work was built on a series of rotated views of a perspective pyramid. Regout took two perspectives of the generated forms from complimentary angles, and used opposing colors to show the duality. The final product created a clean and simple series of designs, which is appropriate for the branding system the image exists in. The series of two forms coming together to create a single image served to emphasize the hybrid nature of which Regout meant to bring out. The simplicity of the forms acted together to form a system of the printed posters and booklets for the city’s visual identity.

Matthieu’s process work:

Final poster:

Identity system:

Matthieu posted his project, “Brussels – The Hybrid City” on Behance in December, 2013.

hdw – Project 2 – Variable Face

sketch

var picker = 1
var types = [1, 2, 3, 4, 5];
var backgroundR = 255
var backgroundG = 255
var backgroundB = 255

function setup() {
    createCanvas(500, 500);
    angleMode(DEGREES);
}

function draw(){
    background(255);
    fill(backgroundR-30,backgroundG-30,backgroundB,100);
    noStroke();
    rect(0,0,height,width);

  var head = width * 2/5;
  var eyes = width * 1/10;
  var lips = width * 1/30;

  //shadow
  noStroke();
  fill(backgroundR+10,backgroundG+10,backgroundB+10);
  ellipse(width*.4,height*.6,head,head);


  if(picker == 1){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    arc(width*3/5,height*.5,eyes,eyes,0,180);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5,height*.6,lips,lips);
    ellipse(width*.5,height*.6+lips,lips,lips);
    }

  if (picker == 2){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,340,160);
    arc(width*3/5,height*.5,eyes,eyes,340,160);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5+5,height*.6+1+10,.7*lips,.7*lips);
    ellipse(width*.5,height*.6+lips*.7*.5+lips*.5+10,lips,lips);
    }

  if (picker == 3){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,20,200);
    arc(width*3/5,height*.5,eyes,eyes,20,200);
    //lips
    stroke(250,0,0);
    arc(width*.5-5,height*.6+10,lips,lips,210,60);
    }

  if (picker == 4){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,180,0);
    arc(width*3/5,height*.5,eyes,eyes,180,0);
    //lips
    noFill();
    stroke(255,0,0);
    strokeWeight(10);
    arc(width*.5,height*.6,2*lips,2*lips,0,180);
    //ellipse(width*.5,height*.6+lips,lips,lips);
  }

  if(picker == 5){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    ellipse(width*3/5,height*.5,eyes,eyes);
    //lips
    stroke(255,0,0);
    strokeWeight(10);
    noFill();
    ellipse(width*.5,height*.6+.5*lips,lips,lips);
    }

  //blush
  fill(255,backgroundG,backgroundB);
  noStroke();
  ellipse(width*2/5,height*.6, 2*lips, 2*lips);
  ellipse(width*3/5,height*.6, 2*lips, 2*lips);
}

function mousePressed(){
    picker = random(types);
    backgroundR = random(0,250);
    backgroundG = random(0,250);
    backgroundB = random(0,250);
}

Process:

Made some initial concept sketches. Used mmiller5’s project 02 as a reference for the use of variables and commands of the five fixed variable faces. Stella Han helped me figure out where to put the variables for var types and var picker, because I initially posted them in the draw function and not as a global variable. Soonho Kwon helped me figure out how to get the background and shadow opacity to behave. Initially the shadow didn’t show up because I had it set to a variable opacity in the same colors as the background. I reversed the opacity so that the background had less intensity and created a white filler first so the color would show.

hdw – Looking Outwards – Week 1

Material Equilibria is an installation by Sean Ahlquist in collaboration with Achim Menges, Bum Suk Ko, Ali Tabatbai, Bettina Woerner, Helene Jensen, Vibeke Riisberg, and Mette Ramsgard Thomsen. The artists used a spring-based environment coded with processing. The creators did not cite any work for inspiration, but it is based on Alquist’s research on articulated material behavior and differentiated structural forms. The techniques used can be applied to clothing, product, interiors, or other industrial designs in the future. Their work can be viewed here, on an article written called “Material Equilibria: Variegated Surface Structures” by the University of Stuttgart.

hdw – Project 1 – Face

helen’s-face

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

function draw() {
    background(255);

    //hair
    fill(0);
    noStroke();
    //arc(250,250,200,260,150,360);
    ellipse(250,250,202,250,150);

    //right hair
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(399,265,100,190,100,180);
    arc(330,320,60,120,280,40);

    //face
    fill(255,232,200);
    noStroke();
    //ellipseMode(center)
    arc(250,250,200,210,180,360);
    arc(250,250,200,270,360,180);

    angleMode(DEGREES);

    //left hair cont
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(130,180,100,150,340,100);
    arc(130,180,133,200,340,100);

    //blush
    if (mouseIsPressed) {
      fill(255,167,151,255);
      noStroke();
      ellipse(310,300,50,50);
      ellipse(190,300,50,50);
    } else {
      fill(255,167,151,150);
      noStroke();
      ellipse(310,300,50,50);
      ellipse(190,300,50,50);
    }

    //glasses
    fill(255,232,200,0);
    stroke(0);
    strokeWeight(1);
    ellipse(200,260,76,76);

    stroke(0);
    strokeWeight(1);
    arc(250,260,24,15,180,360);

    stroke(0);
    strokeWeight(1);
    ellipse(300,260,76,76);

    line(150,260,161,260);
    line(349,260,338,260);

    //eyes
    if (mouseIsPressed) {
      noFill();
      stroke(0);
      strokeWeight(2);
      arc(200,260,30,30,160,340);
      arc(300,260,30,30,200,20);
    } else {
      noFill();
      stroke(0);
      strokeWeight(2);
      arc(200,260,30,30,200,0);
      arc(300,260,30,30,180,340);
    }

    //nose
    noFill()
    stroke(255,131,122);
    strokeWeight(1);
    arc(250,300,30,30,20,160);

    //mouth
    if (mouseIsPressed) {
      fill(255,167,151);
      noStroke();
      ellipse(250,343,25,13);

      noFill();
      stroke(255,131,122,200);
      strokeWeight(2);
      arc(250, 325, 50, 36, 0, 180);

    } else {
      fill(255,167,151);
      noStroke();
      ellipse(250,343,25,13);

      noFill();
      stroke(255,131,122,200);
      strokeWeight(2);
      arc(250, 325, 50, 36, 20, 160);

    }

}

I’ve never coded before this class so I was worried about the project going in. After the preliminary Mondrian exercise, I was comfortable with playing around with code. I started by making some sketches on my sketchbook before I settled on a form I enjoyed, then changed some of it when I coded it.

I had a lot of fun making it, so after I finished I played around with it some more. After Wednesday’s lecture, I added a clickable function.