Author: Elena

Elena Deng-Project 7-Curves

sketch
This project was quite difficult for me to execute. With the link provided I was able to look at different algebraic functions and graphs; however, once I looked at the mathematical
functions themselves I got really confused. Overall, I am not really proud of this project and hope to be able to incorporate mathematical functions into my code in the future.

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-07
}
*/

var nPoints=100

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

function draw() {
    background(0,50,50);
    var mX = mouseX; //establishes mouseX and mouseY function
    var mY = mouseY;
    noFill();
    strokeWeight(1);


//mouse position is constrained to the canvas size
    mouseX=constrain(mX, 0, width);
    mouseY=constrain(mY, 0, height);

    mPos=dist(mX,mY,width/2,height/2);
    a= map(mPos,0,width,0,480);

    eight(); //draws first eight loop
    circleOne(); //draws ellipse

//draws second eight loop
    push();
    rotate(HALF_PI);
      for(var i=0;i<nPoints;i++){
        var r = map(mouseX,0,width,100,255);
        var g = map(mouseX,0,width,100,200);
        var b = map(mouseY,0,height,100,100);
        stroke(r/2,g*3,b)
        // stroke(r,g,b)
          strokeWeight(1.5);

          var t = map(i,0,nPoints,0,TWO_PI);

          x=a*sin(t);
          y=a*sin(t)*cos(t);

          rotate(PI); //rotates figure
          x2=a*sin(t*2)*PI;
          y2=a*sin(t*2)*cos(t)*PI;

        vertex(x2,y2)

      endShape(CLOSE);
    pop();
    }
}
function eight(){ //draws first eight loop
  var r = map(mouseX,0,width,255,100); //changes color based on where mouseX and Y is
  var g = map(mouseX,0,width/10,200,100);
  var b = map(mouseY,0,height,80,100);
  stroke(r,g,b)

    strokeWeight(3);
    // stroke(r,g,b)
    var x;
    var y;

    beginShape();

      translate(width/2,height/2);

      for(var i=0;i<nPoints;i++){
        var t = map(i,0,nPoints,0,TWO_PI);

        x=a*sin(t);
        y=a*sin(t)*cos(t);
      vertex(x,y);

    endShape(CLOSE);
}
}
function circleOne(){ //draws the circle
  strokeWeight(1)
  var r = map(mouseX,0,width/4,100,300);
  var g = map(mouseX,0,width/4,180,200);
  var b = map(mouseY,0,height*6,100,200);
  for(var i=0;i<nPoints;i++){ //draws the loop of ellipse
    ellipse(0,0,a*i,a*i)
  }
}

mouse X and mouse Y at the maximum width/height of canvas
mouse X and mouse Y at the minimum width and height of canvas

Elena Deng-Looking Outwards 07-Section E

Windmap created by Wattenberg and Viegas

This week, I decided to look at the wind map developed by Marten Wattenberg and Fernanda Viegas. Featured in the MOMA as the first web artwork to be a part of the museum’s permanent collection, it is a living portrait of the wind currents over the nation. I decided to go with this project because it only uses HTML and Javascript, using the data from the National Digital Forecast Database.

Windmap in context

This was a really interesting project to me because through the wind map you’re also learning about the climate of the states and why the enivronment/terrain is the way that it is. I appreciate the artists’ choices in making the map monochromatic so the viewer isn’t influenced to believe anything about the terrain that the currents are covering. The idea of the map updating in real time allows the viewer at MOMA to apply what they’re seeing to a larger scale. The map also allows the viewer to see the progress of a natural disaster and serves as a learning experience.

Hurricane Issac on the map in 2012

Elena Deng-Project 6 Abstract Clock

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-06
}
*/

function setup() {
    createCanvas(400, 400);
    // var c=canvas
    // c.rotate(90)
    angleMode (DEGREES);
}

function draw() {

    var H = hour(); //calculates hours
    var M = minute(); //calculates minutes
    var S = second(); //calculates seconds
    var colRatio=2;  //reduces the color gradient each for loop
    noStroke(); //no stroke within the circles

    //does the background
      push();
      translate(200,200); //translates into the middle of the canvas
      background(5,15,53); //sets the background color
      pop();

      //hour hand
      for (var h=0; h<H; h++){
        var r=220; //sets r value
        var g=105; //sets g value
        var b=55; //sets b value
        var colRatio=4; //color value reduces more quickly
          push();
          translate (width/2, height/2);
          rotate((15*h)-.25*360) //24 hour clock
          fill(r+(colRatio*h),g+(colRatio*h),b+(colRatio*h));
          ellipse(35,0,20,20);
          pop();
      }

      //minutes hand
        for(var m =0; m<M; m++){
          var r=250; //sets r value
          var g=175; //sets g value
          var b=65; //sets b value
            push();
            translate (width/2, height/2);
            rotate((6*m)-.25*360); //sets minutes and rotates
            fill(r-(colRatio*m),g-(colRatio*m),b-(colRatio*m));
            ellipse(72,0,15,15);
            pop();
          }


      //seconds hand
        for(var s = 0; s < S; s++) {
        var r=120; //sets r value
        var g=105; //sets g value
        var b=15; //sets b value
        push();
        translate (width/2, height/2); //moves to the middle of canvas
        rotate((6*s)-.25*360); //sets seconds and rotates
        fill(r+(colRatio*s),g+(colRatio*s),b+(colRatio*s)); //sets fill
        ellipse(100,0,10,10);
        pop();
    }


}

This project was pretty fun to do! My favorite part of the result was the color palette as well as the overall effect of the circles. I decided to make it a 24 hour clock so that it can tell the difference between AM and PM.

ideation for Clock (didn’t end up going with these ideas)

Elena Deng-Looking Outwards 06

Andrej Bauer’s Random Art

This week I decided to take a look at Andrej Bauer’s random art. Within the image, the mathematical formula determines the color of each pixel in the image. Within the code, there is a list of operators referring to the other operators in the list. The idea of the image is to generate expression trees to describe an image. For each point of the image (x,y) we will evaluate the expression and get a color. The colors are determined by (r, g, b) which are numbers between -1 and 1. The image displayed is a large number of rectangles (pixels) on the canvas. The program uses a RGB color model. The model uses Python and it can be changed by introducing new operators.

Elena Deng Project 5 Wallpaper

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-05
}
*/

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

function draw() {
    background("pink");

//draws background lines (light pink)
    for(var i=-20; i<width; i+=30){
      rect(i,0,20,height);
      fill(250,171,206);
    }

    //draws circles (dough)
    for (var y = 20; y < height; y += 80) {
        for (var x = 20; x < width; x += 70) {
            fill(200,164,118);
            ellipse(x, y, 60, 60);
        }
    }
//draws icing (chocolate)
    for (var y=20;y<height;y+=80){
      for (var x = 10;x<width;x+=70){
        fill(126,87,49);
        ellipse(x+10, y, 48, 48);
      }
    }

//draws donut hole
    for (var y=20;y<height;y+=80){
      for (var x = 10;x<width;x+=70){
        fill("pink");
        ellipse(x+10, y, 15, 15);
      }
    }
//sprinkles (yellow and blue)
    for(var y=10;y<height;y+=80){
    for(var x=10;x<width;x+=70){
      stroke("yellow");
      strokeWeight(2.5);
      line(x,y,x+3,y+3);
      line(x+5,y+20,x,y+23);
      line(x+25,y+10,x+28,y+14);
      line(x+10,y-5,x+14,y-2);
      stroke(126,211,247);
      line(x+22,y+2,x+19,y+6);
      line(x-9,y+13,x-5,y+15);
      line(x+14,y+22,x+20,y+25);

    }
    }
    noLoop();
}

I’m not completely satisfied with this iteration but I’m proud of the overall visual result. As you can see in my sketchbook (will upload soon), I originally wanted to attempt a more complex shape, however after trying multiple times to create Shrek, I was unable to get it to how I wanted it to look, so I changed my idea.

Out of all the projects we’ve done thus far, I am not as proud of this assignment compared to the other ones, I hope in the future I can improve on the skills that can be used through nested functions. I hope by the end of this class I will be able to create Shrek.

Elena Deng-Looking Outwards 05

I chose to look at the snow in the movie Frozen. I have always admired how the creators were able to brave the task of creating a realistic looking snow. In high school, my teacher was involved with this project and since watching the movie it became apparent how real the snow looked and acted compared to the snow animations in other movies. The animators explain that they used a method where they created very small particles of snow and assign them a random volume and size. After factoring velocities as well as collision variables for each of those particles, the grain of snow is then able to move. Another amazing spect that was taken into consideration was the different consistences of snow in different situations and temperatures. With the snow they were able to use it as a narrative cue within the movie—much of Elsa’s emotions are manifested through the snows’s velocity and color.

Story Credit: geek.com

Elena Deng-Project 04-String Art

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-04
}
*/
function setup() {
    createCanvas(400, 300);
    background(70);
}

function draw() {
  var x = 0;
  var y = 0;
  var x1 = width/6;
  var x2 = width/2;
  var y1 = height/6;
  var y2 = height/2;


  for (var i=0;i<54;i++){
      strokeWeight(3);
      stroke(90,120,180);
      line(width-x2, height, x2, height - y2);
      line(x2, height-y2, width+x2, height);

      x2+=12;
      y2+=12;
  }

  for (var i = 0; i < 60; i++) {
        strokeWeight(1);
        stroke(255,255,255,10);
        line(width-x1, height, 0, height - y1);
        line(x1, height, width, height - y1);
        line(width-x1, 0, 0, 0+y1);
        line(x1, 0, width, 0+y1);

        x1 += 10;
        y1 += 10;
     }

}

This project was interesting to do! Excited to discover new ways to implement the new skills I learned through this exercise. I hope to be able to create actual shapes in the future.

Elena Deng-Looking Outwards-04

After looking through the websites given to us, I wanted to analyze my favorite example of sound art. The piece I am going to describing today is Sonic Playground by Yuri Suzuki. I admire how it plays upon the idea of childhood wonder as well as transforming the space it into a playground. As a kid, my favorite part of a playground was the different forms could transport noises to the opposite side of the playground. I enjoy how the project focuses on the mechanisms of that same design in playgrounds and yet still add a different technical side to a childhood toy.

sonic playground in atlanta

From the diagram given, it seems as if the different installations are connected. According to the article, the designer uses Grasshopper and Rhinoceros which are 3D geometrical software. It uses ray tracing techniques for specific frequencies which allows for acoustic applications. It was also stated that the plug is a 3D raytracing tool that can allow the selection of a specific sound in a particular direction.

mechanisms within the art installation

According to the artist, he wanted these pieces to animate the outdoor space and allow visitors/passersby to look and interact with the art experiences.

Elena-Deng-Project-03-Dynamic-Drawing

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-03
}
*/

var x=68; //position (X)
var y=240; // position (Y)





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

}

function draw() {
  background(30); //background color
  noStroke();
  rectMode(CENTER);

  if (mouseIsPressed) {
    background(255); //changes background color when mouse is pressed
  }



  fill(121,114,map(mouseY,0,height,170,190)); //changing the B value of the rectangle
  rect(x,map(mouseX,0,width,y-10,y+10),23,map(mouseY,0,height,50,80)); //(map(n,a,b,x,y))can set the range at which something changes


  fill(map(mouseY,0,height,230,250),147,map(mouseX,0,width,50,map(mouseY,0,height,90,150)));
  rect(x+28,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,200,100));


  fill(93,map(mouseX,0,width,80,110),166);
  rect(x+56,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,180,250));


  fill(map(mouseY,0,height,180,220),90,69);
  rect(x+84,y,23,map(mouseY,0,height,100,300));

  fill(map(mouseY,0,height,220,265),218,map(mouseX,0,width,115,130));
  rect(x+112,map(mouseX,0,width,y-30,y+30),23,map(mouseY,0,height,280,120));

  fill(196,map(mouseX,0,width,20,50),56); //changing the G value of the rectangle color
  rect(208,y,23,map(mouseY,0,height,10,300));

  fill(121,114,map(mouseY,0,height,150,240));
  rect(236,y,23,map(mouseY,0,height,170,300));

  fill(map(mouseY,0,height,180,220),95,map(mouseX,0,width,10,60));
  rect(264,map(mouseX,0,width,y-10,y+10),23,map(mouseY,0,height,80,150));

  fill(map(mouseX,0,width,120,150),148,186);
  rect(292,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,300,150));

  fill(map(mouseY,0,height,150,240),75,62);
  rect(320,y,23,map(mouseY,0,height,100,350));

  fill(map(mouseY,0,height,230,250),147,map(mouseX,0,width,40,90));
  rect(348,map(mouseX,0,width,y-30,y+30),23,map(mouseY,0,height,50,250));

  fill(93,map(mouseX,0,width,60,100),166);
  rect(376,y,23,map(mouseY,0,height,200,100));

  fill(map(mouseY,0,height,240,265),218,123);
  rect(404,map(mouseX,0,width,y-40,y+40),23,map(mouseY,0,height,100,300));

  fill(map(mouseY,0,height,180,200),map(mouseX,0,width,30,60),56);
  rect(432,y,23,map(mouseY,0,height,250,100));

  fill(209,90,map(mouseX,0,width,50,80));
  rect(460,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,100,200));

  fill(map(mouseX,0,width,120,140),147,186);
  rect(488,y,23,map(mouseY,0,height,250,100));

  fill(map(mouseY,0,height,195,215),95,(map(mouseX,0,width,30,50)));
  rect(516,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,150,50));

  fill(map(mouseY,0,height,235,255),147,69);
  rect(544,map(mouseX,0,width,y-15,y+15),23,map(mouseY,0,height,40,80));
//used the map tool to change y position
//used map tool to change Y size of rectangle
//used map tool to change various R,G,B values to make a sort of variation between colors
}

This project was really fun! At first I got a slow start because I didn’t know what my four variations would be, but I had the general idea of what I wanted the end result to be. I really like the color palette I chose and my idea to change the mouse pressed came from what I learned about color theory lately.

Elena Deng-Looking Outwards-03

The project I’m analyzing is Polymorph by Jenny Sabin. I admire the details within the structure as well as the simplicity of color. Through the use of generative computer concepts, she was able to create a format for the arrangement of various ceramic units. Based purely on the appearance, it reminds of me of the inner biological makings of a human body, however she refers to it as “feedback derived from material constraints.”
Judging by the appearance of the project, I can assume that the project was made using a mold in order to create the textured ceramic finish of the sculpture. I don’t know how she was able to get the shape, however in her overview of the project she states she used novel applications of ceramic components in order to create a 3D prototype. The final product shows the artists sense of simplicity as well as craftsmanship that was able to be manifested through computer aided technology.

Polymorph by Jenny Sabin

(Didn’t know about applied algorithms)