Author: Jenni

Jenni Lee — Looking outwards — 07

For this week’s Looking Outwards, I chose “The Creatures of Prometheus – Generative visualisation of Beethoven’s ballet with Houdini” by Simon Russell. This project visualizes the audio of Bethoven’s 1801 Ballet. The Houdini setup reads the notation and emits particles using the pitch to derive their height and amplitude to derive their speed. As the volume of each note increases it also effects the color emitted. This creates a futuristic, fresh feel. I was initially drawn to the colors and aesthetic of this piece– I love how the colors almost glow while floating in space. Although this piece was computer-generated and more related to information/data visualization, Russel still manages to incorporate his artistic sensibilities through usage of color and movement. The differentiation in colors of each section of the orchestra makes the music easier to dissect/understand. As a former violin player with background in music composition and orchestras, this generative visualization was very nostalgic and intriguing for me. It blends my 4 favorite disciplines together: design, art, music, and technology. As a design major, understanding this computational information visualization will inspire me to combine my knowledge in various disciplines together in order to create unique designs.

Click here to view more about the project.

Jenni Lee — Project 07 — Curves

sketch

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project - 07
*/


var a = 60;

var r = 255,
  g = 0,
  b = 0;

var curveType = 0; // draw different curve type depending on mouse click

function setup() {
  createCanvas(480, 480);
  frameRate(15);
  angleMode(RADIANS);
}

function draw() {

  background(255);
  if (curveType == 0) {
    drawEpitrochoidCurves();
  } else {
    drawHypocycloidPedalCurve();
  }
}

function drawEpitrochoidCurves() {

  a = map(mouseX, 0, width, 20, 120); // a is the radius of the inner circle
  a = constrain(a, 20, 120);
  var ratioB = floor(map(mouseY, 0, height, 2, 20)); // randomize ratioB to get 
  //inner circle radius when mouse pressed
  var ratioH = floor(map(mouseY, 0, height, 1, 6)); // randomize ratioH to get 
  //crossing radius when mouse pressed

  var b = a / ratioB;
  var h = ratioH * b;

  var t = 0.0;
  stroke(r, g, b);
  strokeWeight(2);
  beginShape(LINES);
  for (var i = 0; i < 1600; i++) {
    var x = (a + b) * cos(t) - h * cos((a + b) * t / b);
    var y = (a + b) * sin(t) - h * sin((a + b) * t / b);
    vertex(x + width / 2, y + height / 2);
    t += 0.008;
  }
  endShape();
}

function drawHypocycloidPedalCurve() {
  a = map(mouseX, 0, width, 20, 240); // a is the radius of the inner circle, 
  //depending on mouseX position  
  a = constrain(a, 20, 240);
  var t = 0.0;
  var n = floor(map(mouseY, 0, height, 3, 24)); // # of paddles, from 3 to 24 
  //depending on mouseY position
  n = constrain (n, 3, 24);
  beginShape(LINES);
  stroke(0, 0, 0);
  strokeWeight(2);
  for (var i = 0; i < 1600; i++) {
    var x = a * ((n - 1) * cos(t) + cos((n - 1) * t)) / n;
    var y = a * ((n - 1) * sin(t) - sin((n - 1) * t)) / n;
    vertex(x + width / 2, y + height / 2);
    t += 0.008;
  }
  endShape();

  stroke(r, g, b);
  strokeWeight(2);
  beginShape(LINES);
  for (var i = 0; i < 2000; i++) {
    var x = a * (n - 2) * (cos(t) - cos((1 - n) * t)) / (2 * n);
    var y = a * (n - 2) * cos(t * (1 - n / 2)) * sin(n * t / 2) / n;
    vertex(x + width / 2, y + height / 2);
    t += 0.008;
  }
  endShape();
}

function mousePressed() {
  curveType = 1 - curveType;
  r = random(0, 255);
  g = random(0, 255);
  b = random(0, 255);
}

// first curve: 
// Epitrochoid curves/equation
// http://mathworld.wolfram.com/Epitrochoid.html
// x	=	(a+b)cos(t)-h*cos((a+b)/b*t)	
// y	=	(a+b)sin(t)-h*sin((a+b)/b*t)

// second curve:
// Hypocycloid Pedal Curve
// http://mathworld.wolfram.com/HypocycloidPedalCurve.html
/*
The pedal curve for an n-cusped hypocycloid

x	=	a((n-1)cost+cos[(n-1)t])/n	
y	=	a((n-1)sint-sin[(n-1)t])/n	

with pedal point at the origin is the curve

x_p	=	a((n-2){cost-cos[(1-n)t]})/(2n)	
y_p	=	a((n-2)cos[t(1-1/2n)]sin(1/2nt))/n.
*/

This project was entertaining for me because I enjoy browsing/analyzing the artwork of other artists/designers, so implementing different curves created by others was really fun. I used the curves/equation for the epitrochoid and the hypocloid pedal curve. This project required a bit of math, so it was a nice memory-refresher of high school math.

Jenni Lee — Looking Outwards 06

Mark Wilson - 'e4708'Mark Wilson’s Piece titled “e4708”

For this week’s looking outwards, I chose one of Mark Wilson’s generative art pieces titled “e4708.” I found the history of this piece to be particularly intriguing– Wilson began learning programming in order to create computer-generated artwork. With his distinct technological flavor to this unique, bright, colorful imagery, his computer-generated work quickly rose to fame. I found this piece to not only be visually engaging and hypnotizing, but also intellectually stimulating, as this was computer-generated with complex, technological layers.

Read more about it here

Jenni Lee — Project 06 — Abstract Clock

sketch

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project - 06
*/

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

function draw() {
  var H = hour(); // brightness of the background is controlled by the hour
  var bgr = 174 * (24 - H) / 24; // range of r is 42 to 216
  var bgg = 166 * (24 - H) / 24; // range of g is 73 to 239
  var bgb = 167 * (24 - H) / 24; // range of b is 73 to 240
  background(bgr + 42, bgg + 73, bgb + 73); 
 
 // brightness of grass is controlled by color
  bgr = 173 * (24 - H) / 24; // range of r is 57 to 230
  bgg = 156 * (24 - H) / 24; // range of g is 81 to 237
  bgb = 125 * (24 - H) / 24; // range of b is 51 to 176
  noStroke();
  fill (bgr + 57, bgg + 81, bgb + 51);
  rect (0, 600, 600, 200);

  // tail
  push();
  translate(400, 510);
  var S = second() % 2;
  if (S == 0) { // tail points to different direction depending on even or odd second number
    rotate(60 / PI + PI);
  } else {
    rotate(120 / PI + PI);
  }
  noStroke();
  ellipseMode(CORNER);
  fill (247, 202, 201);
  ellipse(0, 0, 40, 140);
  pop();

  // body
  push();
  translate(300, 570);
  noStroke();
  fill(229, 196, 168);
  ellipse(0, 0, 250, 200);
  pop();

  // face
  push();
  translate(200, 580);
  noStroke();
  fill(239, 208, 172);
  ellipse(0, 0, 200, 150);
  pop();

  //ears
  push ();
  noStroke();
  fill(239, 208, 172); // left ear
  triangle(100, 572, 102, 490, 150, 515); 
  fill (252, 217, 224); // left inner ear
  triangle(108, 561, 110, 510, 138, 528); 

  //right ear
  fill(239, 208, 172); // right ear
  triangle(240, 512, 290, 490, 295, 560); 
  fill (252, 217, 224); // right inner ear
  triangle(250, 521, 282, 506, 285, 553); 
  pop ();

  // eyes. the posiiton of the eye ball is decided by 
  // the minutes, and it circles one round in 60 minutes
  push(); 
  translate(140, 570);
  noStroke ();
  fill(255, 255, 255);
  // left eye
  ellipse(0, 0, 36, 36);
  //left eye ball
  var M = minute();
  angleMode(DEGREES);
  fill(130, 115, 100);
  ellipse(cos(M / 60 * 360 - 90) * 9, sin(M / 60 * 360 - 90) * 9, 18, 18);

  // right eye
  fill(255, 255, 255);
  ellipse(100, 0, 36, 36); 
  // right eye ball
  fill(130, 115, 100);
  ellipse(cos(M / 60 * 360 - 90) * 9 + 100, sin(M / 60 * 360 - 90) * 9, 18, 18);
  angleMode(RADIANS);

  // nose
  fill(130, 115, 100);
  ellipse(50, 20, 10, 10); 

  //blush
  fill(252, 217, 224);
  ellipse(5, 30, 35, 10); // left blush
  ellipse(95, 30, 35, 10); // right blush
  pop();

  // left paw
  push();
  translate(152, 650);
  rotate(40 / PI);
  strokeWeight(3);
  stroke(255);
  fill(239, 208, 172);
  ellipse(0, 0, 80, 40);
  pop();

  // right paw
  push();
  translate(232, 650);
  rotate(-40 / PI);
  strokeWeight(3);
  stroke(255);
  fill(239, 208, 172);
  ellipse(0, 0, 80, 40);
  pop();
}
// The tail moves left and right every second, the eyeballs make a 360 rotation each hour,
// it moves clock wise every minute. The sky gets darker with each hour. It's the brightest
// at the beginning of the day and dark at the end of the day.

Cats are my favorite animal, so I wanted my abstract clock to be one. This project was highly enjoyable for me, as not only was it a fun challenge to design it, but it was entertaining to fully customize it to my own tastes. Seconds are indicated by the tail moving left and right each second. Minutes are indicated with the eyeballs moving clock wise every minute, completing a 360 rotation by the end of the hour. Hours/time of day is indicated through the ground and sky getting darker with each hour of the day. These two elements are very light in the morning and dark at night, similar to the sun setting.

Process work ^

Jenni Lee — Looking outwards — 05

Video of “Trapped Summer”

The computer graphics/3D art project I chose for this week was “Trapped Summer” by UK based 3D artist and motion designer, Peter Tomaszewicz. This project is described by him as a “humoristic tone to a hot summer,” as it is based around everyday, mundane objects associated with summer, such as fans and beach paddles. As the bright objects are set on vivid yet minimalistic backgrounds, I was immediately drawn to the unique visuals, bright colors, and engaging movement within the video. Tomaszewicz masterfully blends 3D art and animation in order to create interesting, fluid motion and interactions between the plastic and the objects. I found it meaningful how he incorporated the element of plastic, as it makes a statement about this material’s controversial nature, which communicates a subtle environmental message within the seemingly mindless video. Ultimately, I found this video is both thought provoking and visually pleasing.

View full project here.

Jenni Lee — Project 05 — Wallpaper

sketch

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project- 05
*/

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

function draw() {
  background(234, 228, 237);
  var i, j, num;
  var distF = 75; // distance between two flowers (center)
  var numY = 7, numX = 6; // number of flower to draw on x- and y- dimension
  var r, g, b;
  for (j = 0; j < numY; j++) { // use nested for loop to draw 
    //flowers on both horizontal and vertical directions
    if (j % 2 == 0) { // even row, draw numX of flowers with one color
      num = numX;
      r = 169;
      g = 132;
      b = 173;
    } 
    else { // odd row, draw numX-1 flowers, and different color
      num = numX - 1;
      r = 163;
      g = 62;
      b = 103;
    }
    for (i = 0; i < num; i++) {
      var py = 40 + j * distF * sqrt(3) / 2; // vertical distance between 
      //two flowers is sqrt(3)/2
      var px;
      if (j % 2 == 0) { // even row - start with default position
        px = 50 + i * distF;
      } 
      else {
        px = 50 + distF/2 + i * distF; // else, indent the flower 
        //by distance/2 (distF is the distance between two flowers)
      }
      push(); // remember the state
      drawFlower(px, py, r, g, b);
      pop();
    }
  }
}

function drawFlower(x, y, r, g, b) {
  fill(r, g, b, 127); // fill in the color of the flower, 
  //plus transparency for effects

  translate(x, y);
  noStroke();
  ellipseMode(CENTER);

  for (var i = 0; i < 10; i++) { // draw ellipse 10 times, each time 
    //rotate by 36 degrees to create flower
    ellipse(0, 20, 13, 35);
    rotate(PI / 5);
  }
}

For my wallpaper project, I was inspired by my current design studio poster project which involves many flower illustrations. I found this wallpaper project to be a fun extension of Assignment B, as I extracted the element of nested for loops and combined it with the usage of ellipse rotations in order to personalize the drawing. This project was a thorough learning experience, as it allowed me to apply newly learned topics into my own projects.

Jenni Lee — Project 04 — String Art


Jenni Lee — Project 04 — Dynamic Drawing

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project-04
*/

function setup() {
  createCanvas(800, 600);
  background(175);
  noLoop ();
}

function draw() {
  var i;
  for (i = 0; i < width; i += 10) {

// line connecting from top boundary line, starting from 0 and increment by 10 pixels, 
// to right boundary line, from top to bottom, increment by evenly divided height
    stroke (219, 79, 149);
    line (i, 0, width, lerp (0, height, i/width)); // lerp is to evenly divide the height with corresponding increment on width
    
    stroke (135, 96, 116);
    line (width - i, 0, 0, lerp (0, height, i/width));

    stroke (239, 218, 229);
    line (i, height, width, height - lerp (0, height, i/width));

    stroke (155, 59, 107);
    line (width - i, height, 0, height - lerp (0, height, i/width));

// line connecting from top boundary line, starting from 0 and increment by 10 pixels, 
// to right boundary line, from top to middle of height, increment by evenly divided height/2
    stroke (135, 96, 116);
    line (i, 0, width, lerp (0, height/2, i/width));
      
    stroke (219, 79, 149);
    line (width - i, 0, 0, lerp (0, height/2, i/width));
 
    stroke (155, 59, 107);
    line (i, height, width, height - lerp (0, height/2, i/width));

    stroke (239, 218, 229);
    line (width - i, height, 0, height - lerp (0, height/2, i/width));
    
// line connecting from top boundary line, starting from 0 and increment by 10 pixels, 
// to right boundary line, from top to 1/4 of height, increment by evenly divided height/4
    stroke (239, 218, 229);
    line (i, 0, width, lerp (0, height/4, i/width));
   
    stroke (219, 79, 149);
    line (width - i, 0, 0, lerp (0, height/4, i/width));
 
    stroke (135, 96, 116);
    line (i, height, width, height - lerp (0, height/4, i/width));

    stroke (155, 59, 107);
    line (width - i, height, 0, height - lerp (0, height/4, i/width));    
  }
}

Pink is my favorite color, so for this project, I wanted to play around with various shades of pink. Upon reflection of this piece, it’s almost a bit reminiscent of a rose of some sort of red/pink-ish flower. It took me a couple sketches for me to fully map out how I wanted to set everything up, as it was initially difficult for me to conceptualize everything, but ultimately, it was an enjoyable project.

Jenni Lee — Looking outwards — 04

Demonstrative video of LINES – an interactive sound art exhibition

This week for my selected sound art project, I chose Swedish composer, Anders Lind’s, interactive sound art exhibition, titled “LINES.” In this sound exhibition, colored lines attached to the wall generate sound when touched. As this project is a mesh of both sound and art, it not only enables new forms of musical interaction, but it promotes innovate art exploration. The various combinations of sound that can be produced through interaction with different locations on the lines allows for unique, and inventive music. I admire that the final installation may appear to be minimalistic, but the sound component of the project allow for intricacies of sound combinations, ultimately creating a complex piece. I believe that the success of this piece can be mainly attributed to the interactive components, as users can either touch the lines with their fingers or run, walk, and hop across the lines.

Here is another video of a LINES exhibit:

Jenni Lee — Project 03 — Dynamic Drawing

jenni-variable-drawing

var ballDiam = 50;
var ballDiamChange = 1;
var flowerCenterX = 400;
var flowerCenterY = 300;

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

var rotation = 0;
var rotdir = 1;
var rotdirChange = 2;
var speedOldX = 2;
var speedOldY = 2;
var speedX = 2;
var speedY = 2;

var isMouseMoved = 0;
var ballPosition = 0;

function draw() {

  background(216, 216, 206);
  if (isMouseMoved == 1) {
    speedX = 0;
    speedY = 0;
    flowerCenterX = mouseX;
    flowerCenterY = mouseY;
    frameRate(10);
  } else {
    speedX = speedOldX;
    speedY = speedOldY;
    frameRate(30);
  }
  rotation += rotdir;

  flowerCenterX = flowerCenterX + speedX;
  flowerCenterY = flowerCenterY + speedY;

  // check if the ball is touching the top, 
  // reverse vertical direction
  if (flowerCenterY < ballDiam * 3 / 2) {
    flowerCenterY = ballDiam*3/2;
    speedY = 2;
  }

  if (flowerCenterY + ballDiam*3/2 > height) {
    flowerCenterY = height - ballDiam*3/2;
    speedY = -2;
  }

  // check if the ball is touching the right, 
  // reverse horizontal direction
  if (flowerCenterX + ballDiam * 3 / 2 > width) {
    flowerCenterX = width - ballDiam*3/2;
    speedX = -2;
  }

  // check if the ball is touching the left, 
  // reverse horizontal direction
  if (flowerCenterX < ballDiam * 3 / 2) {
    flowerCenterX = ballDiam*3/2;
    speedX = 2;
  }

  createFlower();
  isMouseMoved = 0;
  if (speedX != 0 & speedY != 0) {
    speedOldX = speedX;
    speedOldY = speedY;
  }
}

function mouseMoved() {
  ballDiam += ballDiamChange;

  // change ball size when mouse moves
  if (ballDiam >= 100) {
    ballDiam = 100;
    ballDiamChange = -1;
  } else if (ballDiam <= 25) {
    ballDiam = 25;
    ballDiamChange = 1
  }

  // change rotation speed and direction when ball moves
  rotdir += rotdirChange;
  if (rotdir >= 10) {
    rotdir = 10;
    rotdirChange = -2;
  } else if (rotdir <= -10) {
    rotdir = -10;
    rotdirChange = 2;
  }

  // change ball color location when mouse moves
  ballPosition++;
  if (ballPosition == 6) {
    ballPosition = 0;
  }

  isMouseMoved = 1;
}

//create center of flower
function createFlower() {

  push();
  fill(251, 246, 178);
  noStroke();
  ellipseMode(CENTER);
  translate(flowerCenterX, flowerCenterY)
  ellipse(0, 0, ballDiam, ballDiam);

  // using sin and cos to determine coordinates 
  // of the surrounding balls
  angleMode(DEGREES); 
  rotate(rotation);
  fill(85, 78, 104);
  ellipse(ballDiam * cos(60 * ballPosition), ballDiam * sin(60 * ballPosition), ballDiam, ballDiam);
  fill(135, 133, 142);
  ellipse(ballDiam * cos(60 * (ballPosition + 1)), ballDiam * sin(60 * (ballPosition + 1)), ballDiam, ballDiam);
  fill(173, 169, 182);
  ellipse(ballDiam * cos(60 * (ballPosition + 2)), ballDiam * sin(60 * (ballPosition + 2)), ballDiam, ballDiam);
  fill(196, 194, 198);
  ellipse(ballDiam * cos(60 * (ballPosition + 3)), ballDiam * sin(60 * (ballPosition + 3)), ballDiam, ballDiam);
  fill(241, 239, 243,);
  ellipse(ballDiam * cos(60 * (ballPosition + 4)), ballDiam * sin(60 * (ballPosition + 4)), ballDiam, ballDiam);
  fill(49, 44, 66);
  ellipse(ballDiam * cos(60 * (ballPosition + 5)), ballDiam * sin(60 * (ballPosition + 5)), ballDiam, ballDiam);
  pop();
}

For this dynamic drawing, I wanted to experiment with the abstraction of a flower. Using dynamic movements, I wanted to convey the feeling of a flower floating through the breeze. Through the dynamic elements of size, position, color, rotation, and speed rotation direction, I was able to execute this idea. This project required a lot of effort for me, as not only did I have to look up many references on the p5 website and experiment with those features, but it also took me a while to figure out the positioning of the circles on this flower. Although it was difficult to accomplish, as I decided to take on the task of utilizing various features which I had previously never used before, such as using sin and cos, it ultimately was a good learning experience.

Related image

Here is the flower which I abstracted.

Jenni Lee – Looking Outwards – 03

Demonstrative video of the 3D Printed Ceramics

Link

Engineer Zack Eckel, based in Malibu, California, creates 3D-printed free-form, strong, and temperature resilient ceramics. These ceramics can withstand pressure and heat without breaking, warping, or cracking. By 3D printing these essentially invincible ceramics, Eckel addresses the design problems of both ceramics and of regular 3D printing. Ceramics, such as ceramic plates or mugs, are typically made of clay, easily breakable, despite their strong presence in American households. By designing these flawless, strong, 3D-printed ceramics, Eckel re-envisions and redefines the boundaries of ceramics. In addition, Eckel address the design problem of 3D printing products, as the material that typical 3D printers utilize are not heat resistant or particularly pressure resistant. As a result, Eckel uses stronger, revolutionary 3D-printing materials in order to address this. I found Eckel’s work to be not only aesthetically captivating, but also highly revolutionary in terms of human factors and ergonomics.