Angela – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 11 – Generative Landscape

A ferris wheel standing by the beach:

 //Angela Yang 
 //Section C

 var myFerris;
 var mySeat = [];
 var angle = 0;
 var cloudx=200
 var cloudy=50
 var clouddx = 1;
 var cloudx2 = 100;
 var cloudy2 = 200;
 var clouddx2 = 0.3;


function setup(){
 createCanvas(480, 480);
 angleMode(DEGREES);
 var bc = color(random(0, 255), random(0, 255), random(0, 255));
 myFerris = makeFerris(240+180, 230, 0.3, 330);
 for(var i = 0; i<6; i++){
      var bc = color(random(0, 255), random(0, 255), random(0, 255));
      mySeat[i] = makeSeat(200, 200, 20, bc, i);

 }

}

function updateFerris(){
  this.angle += this.angleSpeed;

}

function ferrisDraw(){
  push();
  noFill();
  strokeWeight(4);
  ellipse(this.x, this.y, this.r, this.r);
  pop();
  push();
  stroke(255);
  strokeWeight(8);
  line(this.x, this.y, this.x-80, height);
  line(this.x, this.y, this.x+80, height);
  pop();

  push();
  translate(this.x, this.y);
  for(var i = 0; i<6; i++){
    push();
    rotate(i*60 + this.angle);
    stroke(255);
    strokeWeight(3);
    line(0, 0, this.r/2, 0);
    pop();

  }

  pop();
}

function makeFerris(wx, wy, as, wr){
  var wheel = {x:wx, y:wy, angleSpeed:as, r:wr, angle:0,
               update: updateFerris,
               draw: ferrisDraw};

  return wheel;
}

function updateSeat(){
  this.x = myFerris.x + myFerris.r/2*cos(this.index*60 + myFerris.angle);
  this.y = myFerris.y + myFerris.r/2*sin(this.index*60 + myFerris.angle);

}

function seatDraw(){
  push();
  stroke(255);
  strokeWeight(2);
  line(this.x, this.y, this.x, this.y+10);
  pop();
  push();
  stroke(255);
  fill(this.c);
  rect(this.x-10, this.y+10, 25, 25);
  pop();



}

function makeSeat(bx, by, br, bc, seatIndex){
  var basket = {x:bx, y:by, r:br, c:bc, index:seatIndex,
               update: updateSeat,
               draw: seatDraw};

  return basket;
}

function draw(){
  background(240,145,110);

  //Ground
  push();
  fill(87,71,70);
  rect(0, 350, width, 130);
  noStroke();
  fill(60,40,20,255);
  rect(0, 350, width, 30);
  pop();

  //Trees
  push();
  noStroke();
  fill(30,63,79);
  triangle(80, 240, 0, 350, 160, 350);
  fill(43,96,119);
  triangle(330, 235, 245, 350, 450, 350);
  fill(61,118,127);
  triangle(240, 235, 220, 360, 350, 360);
  fill(84,149,132);
  triangle(400, 250, 280, 360, 530, 360);
  fill(100,200,200);
  triangle(150, 150, 50, 380, 280, 380);
  pop();


  //Clouds
  push();
  noStroke();
  fill(255);
  ellipse(cloudx, cloudy, 80, 40);
  ellipse(cloudx+20, cloudy+20, 90, 30);
  ellipse(cloudx-35, cloudy+20, 80, 45);

  cloudx+=clouddx;

  if(cloudx-80>=width){
    cloudx = -120;
  }

  ellipse(cloudx2, cloudy2, 90, 30);
  ellipse(cloudx2+30, cloudy2+20, 70, 25);
  ellipse(cloudx2-20, cloudy2+20, 80, 30);

  cloudx2+=clouddx2;

  if(cloudx2-80>=width){
    cloudx2 = -120;
  }

  pop();

  //Lake
  push();
  noStroke();
  fill(150);
  ellipse(0, 530, width+500, 280);
  fill(235, 239, 229);
  ellipse(0, 530, width+400, 250);
  pop(); 

  myFerris.draw();
  myFerris.update();
  for(var i = 0; i<6; i++){
      mySeat[i].draw();
      mySeat[i].update();
  }


}

Looking Outwards 11

In the fields of CG and AI, unintentional bias exists in virtual human portraits. The author believes that computer programmers and artists must think thoroughly about every detail in their design process to diminish any potential harm to a specific group of people. An example the author provided in the article is the glowing effect that was virtually generated on portraits by Johannes Vermeer and other contemporary artworks. Though the glow effect works effectively on white skin, it is not a dominant quality of black skin, which automatically creates a difference in presentations. The solution to this issue is based upon the artists’ realization of creating a diverse range of options for these qualities and refining those options to match reality accurately.

Gaskins, Nettrice. “Ai & Creativity: Addressing Racial Bias in Computer Graphics.” Medium, Medium, 11 Aug. 2021, https://nettricegaskins.medium.com/ai-creativity-addressing-racial-bias-in-computer-graphics-f5fc0c255e7.

Johannes Vermeer. “Girl With a Pearl Earring (detail),” dated c. 1665

Google search results for “skin shaders”

Looking Outwards 09

Work Title: Skataviz

Artist: Emily Gobeille, creator of high-end interactive installations for children

https://www.design-io.com/projects/skataviz

Emily is an artist and designer who specializes in the disciplines of installations, motion graphics, and web design. She is enthusiastic about employing technology and art combined to tell stories and create playful moments for people. As a designer for a segmented group, Emily has to spend a lot of time studying that user group’s behavioral characteristics and preferences in order to make effective designs. The Skataviz is an experimental project by Design I/O that uses interactive elements of an iPhone/iPod to record the motion of a skateboard. The motion is then visualized in 3D presentation through a video. The designer applies features of the gyroscope and accelerometer sensors of the mobile device to construct data on rotation, velocity changes, angles, and the board’s movement. In this project, openFrameworks is the primary tool used for both sensor recording and desktop visualization.

Looking Outwards 08: The Creative Practice of an Individual

Hyphen-Labs is an international community of women of color who are involved in the fields of design, art, and technology to produce works together. The interdisciplinary nature of the group allows them to focus on design processes through evolving discussions and the collective consciousness of social challenges in the community.

Work title: Prismatic_NYC

Link: http://hyphen-labs.com/prismatic.html

The Prismatic project is a kinetic sculpture located above the high line in NYC. The sculpture is constructed with 66 individual prisms that have integrated LED lights to create interesting forms of light beams. The rotation and translation of the prisms ‘design’ the behavior of lightning through space. I am amazed by this project because the designers are able to handle each prism’s rotation/speed/form differently to create a cohesive artwork. This requires meticulous planning beforehand in determining the algorithm of each prism, the direction of their rotations, and the interaction between every prism altogether. The team reimagined a new system to create this unique experience: tapering each prism and alternating their orientation. This strategy lets them control the visual vertices of one pair of prisms. The final product is an animated undulating wave of light concurrently achieving lateral translations of the 2D curve, which flows volumetrically through the space.

Looking Outwards 07 – Information Visualization

Work Title: The Atlas of Emotions for the Dalai Lama & Paul Ekman — Visualizing the science of emotions

Artist: Stamen Design

http://atlasofemotions.org/#introduction/ (Live data)

This project intrigues me in its aspect of collecting and visualizing relatively intangible data, which are represented by feelings and emotions. In collaboration with social scientists and data designers, the initial idea of creating a single map grew into a collection of maps that analyze different emotions individually (anger, fear, sadness, disgust, and enjoyment). Because there are no preexisting data models of emotions, researchers and designers worked together to draw out many rounds of visualizations on paper first and translated those onto the actual model.

This project’s primary goal was to resolve the gap between academic findings and personal experiences. The methodology of solving these questions is through data visualization that first had to begin with sketching discussions and first-hand data collection.

Project 06 – Abstract clock

For my abstract clock, I wanted to deconstruct the clock in hours, minutes and seconds, so I created three separate motions of the clock to illustrate the time in 24 hours.

sketch

//Angela Yang
//Section C

function setup() {
  createCanvas(450, 440);
  angleMode(DEGREES);
}

function draw() {
  //Default side bar
  background(0);
  push();
  translate(225, 285);
  rotate(-90);

  //Clock face
  fill("white");
  ellipse(0, -12, 5, 5);
  ellipse(0, 12, 5, 5);
  stroke("white");
  strokeWeight(3);
  line(-18, -5, -18, 3);

  let hours = hour();
  let minutes = minute();
  let seconds = second();

  stroke(255, 100, 150);
  noFill();
  strokeWeight(5);
  let end = map(seconds, 0, 60, 0, 360);
  arc(0, 0, 100, 100, 0, end);

  stroke("#0BDA51");
  let end2 = map(minutes, 0, 60, 0, 360);
  arc(0, 0, 80, 80, 0, end2);

  stroke("yellow");
  let end3 = map(hours, 0, 24, 0, 360);
  arc(0, 0, 60, 60, 0, end3);
  pop();

  fill(255);
  noStroke();
  text(hours + ":" + minutes + ":" + seconds, 390, 20);

  // stroke()
  push();
  translate(112.5, 112.5);
  noFill();
  stroke(255);
  ellipse(0, 0, 70);
  noStroke();

  rotate(-90);
  
  //Hour clock on the left corner 
  for (let i = 0; i < 12; i++) {
    if (i == hours % 12) {
      fill("yellow");
      ellipse(50, 0, 15);
    } else {
      fill(255);
      ellipse(50, 0, 10);
    }
    rotate(360 / 12);
  }
  pop();

  push();
    translate(225 + 112.5, 112.5);
    rotate(-90);
    noFill();
    stroke(255);
    ellipse(0, 0, 110);
    noStroke();
    rotate(-90);
  
  //Minute clock on the right corner 
  for (let i = 0; i < 60; i++) {
    if (i == minutes % 60) {
      fill("#0BDA51"); //Draws the indicator circle 
      ellipse(70, 0, 8);
    } else {
      fill(255);
      ellipse(70, 0, 4);
    }
    rotate(360 / 60);
  }
  pop();
  
  //Second clock in the middle 
  push();
   translate(225, 112.5 + 170);
   noFill();
   stroke(255);
   ellipse(0, 0, 160);
   noStroke();
   rotate(-90);

  for (let i = 0; i < 60; i++) {
    if (i == seconds % 60) {
      fill(255, 100, 150);
      ellipse(100, 0, 10);
    } else {
      fill(255);
      ellipse(100, 0, 6);
    }
    rotate(360 / 60);
  }
  pop();

}

Looking outwards 06: Randomness

Work title: Generative Illustrations of the Human Form [Papilarnie II]

Designer: Janusz Jurek

Work Link: https://www.behance.net/januszjurek

Jurek is a Polish designer who focuses on transforming human forms into 3D generative art that is constructed with entangling strings. After creating this series of works, he stated, “Human body has always been the most popular subject in a drawing. Generative art is about motion, and the human body is about motion, even motionless. It has a complicated nervous system and blood vessels, which work all the time like wires. The way it works is the greatest wonder of nature.” In his works, there are no specific rules for how the wires are displayed on canvas. Instead, it is through a more randomized layering of these wires that creates depth and tension. In programming wise, I assume there is a primary path set for the computer to draw over many times (the densest layer), and all other lines are generated randomly on the canvas either by controlling the mouse or not. I also like how the artist is portraying only a partial body on the canvas because this allows the viewer to imagine the narrative of the drawing differently through blank spaces.

Project 05-Wallpaper

A wallpaper design inspired by Marimekko Unikko!

sketch

//Angela Yang
//Section C

function setup() {
  createCanvas(600, 700);
  noLoop();
  //frameRate(1);
}

function draw() {
  background("#ddd9c8");
  scale(0.6);
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 6; j++) {
      switch (parseInt(random(3))) {
        case 0:
          mikkoflower1(190 * j, 215 * i, color(36, 28, 85));
          break;
        case 1:
          mikkoflower2(190 * j, 215 * i, color(36, random(100), 85));
          break;
        case 2:
          scale(1);
          mikkoflower3(190 * j, 215 * i, color(36, random(100), 85));
          break;
      }
    }
  }

  //Flower 1
  function mikkoflower1(x, y, fillcolor) {
    push();

    // petals
    fill("#b8172a");
    translate(x, y);
    noStroke();
    for (let i = 0; i < 20; i++) {
      ellipse(15, 10, 90, 5);
      // ellipse(0, 50, 30, 60);
      ellipse(0, 0, 20, 90);
      scale(1.02);
      rotate(radians(60));
    }

    // center
    fill("#ddd9c8");
    ellipse(1, 3, 50, 70);
    ellipse(2, 5, 60, 70);
    fill(fillcolor);
    rect(-8, -10, 25, 25);

    pop();
  }

  //Flower 2
  function mikkoflower2(x, y, fillcolor) {
    push();

    // petals
    fill(fillcolor);
    translate(x, y);
    noStroke();
    for (let i = 0; i < 20; i++) {
      ellipse(0, 8, 70, 10);
      ellipse(20, 50, 40, 90);
      ellipse(0, 0, 20, 100);
      rotate(radians(150));
    }

    // center
    fill("#ddd9c8");
    ellipse(1, 3, 50, 70);
    ellipse(2, 5, 60, 70);
    fill(fillcolor);
    ellipse(2, 5, 25, 40);

    // // stem
    // rotate(radians(80));
    // strokeWeight(10);
    // stroke(fillcolor);
    // line(30, 90, 55, 150);
    pop();
  }

  //Flower 3
  function mikkoflower3(x, y, fillcolor) {
    push();

    // petals
    fill(fillcolor);
    translate(x, y);
    noStroke();
    for (let i = 0; i < 20; i++) {
      ellipse(15, 10, 100, 80);
      ellipse(0, 50, 40, 90);
      ellipse(20, 0, 20, 100);
      rotate(radians(230));
      scale(1.01);
    }

    // center
    fill("#ddd9c8");
    ellipse(1, 3, 50, 70);
    ellipse(2, 5, 60, 70);
    fill(fillcolor);
    ellipse(2, 5, 30, 40);

    //     // // stem
    //     rotate(radians(80));
    //     strokeWeight(15);
    //     stroke(fillcolor);
    //     line(30, 90, 55, 150);
    pop();
  }
}

Looking Outwards 05: 3D Computer Graphics

Work Title: “WAVE” with Anamorphic illusion

Artist: D’strict, South Korea

The LED display located in COEX K-pop square simulates the motion of a wave through virtual reality. The design took about three months to develop; the display screen size is superb and can fit four basketball courts. This interaction of waves splashing down is made using an anamorphic illusion through the curved screen. When we begin to design 3-dimensionally, we also need to consider all x, y, and z planes and how the shapes/forms of design construct through those planes. In this work, the plane is transformed into a curved surface, allowing visual illusion as well as depth. Because of its color and lively motion, the plaza is filled with energy and enthusiasm for people to learn more about the artwork. Lee Sung-ho, CEO of d’strict explained: “We plan to get motives from nature moving forward so people can also experience a healing within the city.”

Project 04: String Art

Move your mouse to create different forms!

sketch

//Angela Yang
//Section C

var numLines = 100;
var r;
var g; 
var b;

function setup() {
    createCanvas(300, 400);
    r = random (0, 255); 
    g = random (20, 255);
    b = random (100, 255);
}

function draw() {
    background("#F6F4D8");
    //The mouse controls the motion of the strings on canvas. 
    var x = constrain(mouseX, 50, width);
    var y = constrain(mouseY, 50, height);
  
    //Mirror x and y coordinates. 
    var x2 = width - x;
    var y2 = height - y;

  
    // First set
    //The string is incremeting by 5 for each line that is drawn on canvas.
    for (var i = 0; i <=numLines; i += 5) {
        stroke(r, g, b);
          line(i, y2, x2, height + i);
          line(width + i, y, x, i);
          line(width + i, y2, x, height + i);
          line(i, y, x2, i);
    }
    
    //Second Set
    for (var i = 0; i <=numLines; i += 10) {
        stroke(0, 204, 204);
           line(width - i, y, x2, height);
           line(i, y2, x, i);
           line(width - i, y2, x2, i);
           line(i, y, x, height);
      
    //Third Set
    for (var i = 0; i <=numLines; i += 5) {
        stroke(0, 160, 150);
           line(width - i, y, x2, height+i);
           line(i, y2, x2, i);
           line(width - i, y, x2, i);
           line(i, y, x, height+i);
    }
  
   }
}