ChristineSeo – Project 07 – Curves

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-07

var leftColor;
var rightColor; 
var inBetweenColor;
var scaledVal;

function setup() {
  createCanvas(450, 450);
  rightColor = color(249, 185, 226); 
  leftColor = color(226, 213, 248); 
  inBetweenColor = color(182, 115, 138);
  scaledVal = 0; 
  strokeColor = 0;

}

function draw() {
  background(0);
  translate(width / 2, height / 2); //drawing is place to the center of canvas
  Hypotrochoid();
  angleMode(DEGREES);
}

function Hypotrochoid() {
    scaledVal = map(mouseX, 0, width, 0,1);  //color of the strokes change from left to right
    inBetweenColor = lerpColor(leftColor, rightColor, scaledVal);
    noFill();
    stroke(inBetweenColor);
     if (mouseX < (width / 1.5)) {
      stroke(strokeColor);
      strokeColor = map(mouseX, 0, width, 0, 255);
    }

    var x;
    var y;
    var x2;
    var y2;
    var c = constrain(mouseX, 50, 10, width); //constrained distance of the radius of the circles 
    var r = 175; //radius of outter circle
    var r2 = 5; //radius of inner circle 
    var b = r / constrain(mouseY, 50, height);  //constrained radius of small circles

    beginShape();
     for (var i = 0; i < r; i ++) {

     var t = map(i, 10, r, 10, 360);

     var x = (r + b) * cos(t) - c * cos (((r + b) / b) * t); //Hypotrochoid equation (outter circle)
     var y = (r + b) * sin(t) - c * sin (((r + b) / b) * t);
     var x2 = (r2 + b) * cos(t) - c * cos (((r2 + b) / b) * t); //inner circle
     var y2 = (r2 + b) * sin(t) - c * sin (((r2 + b) / b) * t);
           
     vertex(x, y); //outter circle
     vertex(x2, y2); //inner circle
        }  

    endShape();
}

For this project, I loved exploring all the variety of shapes and forms that the Hypotrochoid function could make. Although the mathematical equations seemed difficult at first, I was able to successfully make intriguing shapes that I wanted to create. I also explored to make colors of the strokes change using the mouse. I have two different sets of Hypotrchnoid in the project, that gives the overall product to have a “core” in the middle of the canvas. If you move the mouse more slowly, you are able to see that there are a lot of different shapes that can be made through your mouse. I found out that the constrain function is very useful in this project and for future projects as well. It is really interesting how it looks like the shapes are rotating consistently; I definitely want to explore more functions such as Hypotrochoid and epitrochoid.

ChristineSeo- Looking Outwards – 07

A physical simulation was used to control organically moving lines and curves.
Abstract geometric shapes visualize raw sensor data without the involvement of humans.
Geometric textures form the baseline for reflections on the car’s beautiful surface.

Studio NAND wanted to capture the experience of driving through data visualization with light and motion. They used realtime video production to interact cars and humans together by projecting onto walls. They used speed, acceleration, heart rate, and sound to create textures, patterns and dynamic shapes to visualize the data. The installation was originally for Infinity, as they wanted to visually replicate the experience in the car: they wanted to focus on design and technology in order to communicate in meaningful and engaging ways. Studio NAND work with different teams in design and production to work with various clients and inventions.

I think it is very intriguing how the project shows something that are usually not visually represented. Experience is something that requires practical contact and encounter with the specific observation of the event. However, Studio NAND was able to take a step further to visualize the data into a beautiful artwork. I also think the interaction between humans are cars are interesting too, as humans have to drive the car in order for it to work; and having them interact physically through data (such as hear rate and acceleration) is very fascinating. However, I wish that instead of only two walls being used to protrude the data, there were more (front and back) to capture a greater sense of the experience. The project not only reaches beyond the expectations of the experience inside of the car, but also has a deeper meaning through the connection of technology and men.

https://nand.io/projects/infinity

ChristineSeo-Project06-SectionC

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-06

var r;
var b;
var g;
var prevSec; 
var a; // set to make the text move

function setup() {
  createCanvas(480, 480);
  prevSec = second();
  r = random(130,255);
 	g = random(110,255);
 	b = random(200,250);
  a = width / 2; 
}

function draw() {
  background(197, 234, 244);
  noStroke(0);
  fill(110, 75, 3); //outer donut
  ellipse(width / 2,height / 2,430,430);
  fill(229, 155, 201);
  
  push();
  translate(width / 2, height / 2);// pink frosting shape
	ellipse(0, 0, 382, 152);
  rotate(PI / 1.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 2.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 3.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 3.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 3.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 3.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
  rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 5.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
	rotate(PI / 7.0);
	ellipse(0, 0, 382, 152);
  pop();
  
  fill(229, 155, 201);//frosting base
  ellipse(width / 2,height / 2,320,320);
  ellipse(width / 2 + 5,height / 2 + 5,320,320);
  fill(110, 75, 3);//inner donut
  ellipse(width / 2,height / 2,170,170);
  fill(197, 234, 244);
  ellipse(width / 2,height / 2,150,150);
  
  push();//sprinkles
	translate(width / 2, height / 2);
  for (var p = 0; p < minute(); p += 1){ //adds a sprinkle color every minute
    rotate(PI / 3.0); 
    fill(r,g,b); 
    rect(85,95 / 30 * p - 30,35,8,20);
}
  pop();
  
  
    fill(197, 234, 244);//bites
  for(var i = 0; i < hour(); i += 1){  
    if(i < 6){
    	ellipse(120 + i * 50,40,60,70);//40=spacing
    }
    else if(i < 12){
    	ellipse(33,i * 33,70,40);
    }
    else if(i < 18){
      ellipse(450,i * 21,70,30);
    }
    else if(i < 24){
      ellipse(i * 30 - 400,440,50,70);
      
    }
}
  push();
  strokeWeight(10); //donut highlight
  stroke(255);
  noFill(0);
  curve(380, 260, 415, 186, 360, 108, 70, 60);
  pop();
  
  fill(110, 75, 3); //text 
  textSize(32);
  textStyle(BOLD);
  a = a - 2.5;
  if (a < -width) {
  a = 150;
  }
  text('yum~', 10 - a, 40);
  fill(229, 155, 201);
  text('yum!', 10 - a, 460);
  
  fill(0);
  rect(180,240,45,12); //eyebrows
  rect(260,240,45,12);
	ellipse(210,280,45,50);//eyes base
  ellipse(270,280,45,50);
  fill(255);
  ellipse(210,283,30,40); // eye whites
  ellipse(270,283,30,40);
  fill(0);
  ellipse(270,290,15,25); //eye inside
  ellipse(210,290,15,25);
  fill(255); //eye inside inside
  ellipse(208,285,5,5);
  ellipse(268,285,5,5);
  
  if(second() != prevSec){ //sprinkles color
 		 prevSec = second();
 		r =random(130,255);
 		g =random(110,255);
 		b = random(200,250);//changes color every second every time value is different from the previous second 
  fill(0);
  ellipse(210,280,45,50);
  ellipse(270,280,45,50);
 		}
}

For this project, I wanted to portray a fun and exciting theme: a donut! Every second, the sprinkles on the donut changes color. Also, there is a visual representation of minutes through the number of sprinkles. Every hour, the number of bites on the donut increases, accordingly, through 24 hours. Additionally, the eyes blink every second! I wanted it to be playful and fun with a color palette as well. I also wanted it to have some sort of randomness incorporated within my project (which can be seen in the –limited– random colors of sprinkles).

Although this clock is not the easiest to read, I think that the creativity into this abstract clock makes the assignment really interesting. I had a difficult time figuring out what to make that can relate to the number of minutes, seconds, and hours. I also first drew the eyes but thought that there could be something more; this is the reason why the eyes blink every second! It was a very fun project to work on, especially because there was a wide range of opportunities to go about making the abstract clock.

Rough sketch of donut clock

ChristineSeo- Looking Outwards 06 – Section C

Photograph of the projector glitch in the dark room
Photography of tiles with mixture of a variety of exposure, speed, and frame rates
Photograph of a digital drawing that was “waved” back and forth

Ishac Bertran, an artist from Barcelona, focuses his work around the relationship between people and technology. There were digital drawings that were photographed in a dark room, with long exposure times. Randomness is shown through the rendering of imperfections and the asynchrony between the frame rate of the video signal and the refresh rate of the projector. He ran the Processing sketch and then photographed it after there was a random glitch from the computer monitor or graphics card and occasionally what was caught in between the digital and analogue mediums.

I thought it was very interesting how he used various photographic techniques such as exposure, speed, and frame rates to seek out the glitches. I especially thought that it was intriguing how the camera could capture these imperfections, while the naked eye could not. The random graphic glitches added a meaning to the artwork as it captured their unpredictable beauty. Originally, he was inspired by the aesthetics of physics and computation, which drove him to create this artwork; he wanted to make his digital drawings more meaningful. He also claims that he finds “beauty in complex systems that are driven by simple principles.” I wish that he would have experimented further, with even more various materials and mediums to capture these photographs.

https://www.creativeapplications.net/processing/generative-photography-processing/

ChristineSeo-Project05-SectionC

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-05

var shapeSize;
var smallSize;

var r;

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

function mouseClicked(){
   background(255, 250, 220);

//first row set
push();
for(var x = 15; x <= width; x += 110){
  for(y = 30; y <= height; y += 110){
	shapeSize = random(15,25); //randomness of size of shapes with restriction
	smallSize = random(5,7);//randomness of size of shapes with smaller restriction
  
  r = random(255)
  
  noStroke();
	colorMode(HSB,200);//restrict colors
	var c = color(r,30,200);
	fill(c);
  ellipse(x + 5,y - 13,smallSize,shapeSize);//ears
  rect(x,y,shapeSize,shapeSize); //;legs
  ellipse(x,y,shapeSize,shapeSize);//eye
  ellipse(x + 25,y,shapeSize + 12,shapeSize + 12);//body
  fill(50);
  ellipse(x,y,shapeSize / 2,shapeSize / 2);//eye black
  fill(255);
  ellipse(x + 5,y - 3,shapeSize / 3,shapeSize / 3);//eye highlight
  	}
	}
pop();

//hearts pattern
push();
for(var x = 70; x <= width; x += 110){
  for(y = 80; y <= height; y += 115){
  r = random(255)

  noStroke();
  colorMode(HSB,200);
  var c = color(r,30,200);
  fill(c);
  triangle(x,y,x + 20,y + 20,x + 40,y);//bottom of heart
  triangle(x + 15,y,x + 30,y - 10,x + 40,y);//top right of heart
  triangle(x,y,x + 15,y - 10,x + 25,y);//top left of heart
    }
  }
pop();

noLoop() 
}

Ideas: Rough sketch

I was inspired by my baby cousin’s bunny wallpaper. I added hearts to give it a different pattern so it won’t be boring. I wanted to randomize the color and size of the shape of the bunny as well. I tried to stay in certain a color palette that resonates with soft colorful cotton candies. I also made sure the pattern visually stayed within the canvas. This project is something that I would actually use in real life and even in other classes if I need a unique background for other projects! I think the for loop function is very useful to redraw multiple things at once.

 

ChristineSeo-LookingOutwards-05

First stage of the process of when Julien Crochet created the work
3D rendering of Yoii’s character
The original “The Observer” 3D illustration

Julien Crochet is a 3D generalist that worked on “The Observer.” For this 3D artwork, he focused on modeling, texturing, shading, rendering, and compositing of the character that was inspired by the unique mood of an early morning. The character was inspired by Yoii’s character and rooftops. Since Crochet is a 3D Graphist, he has high proficiency in VRay, 2DS Max, Photoshop, and Maya. I was really intrigued by this artwork because his attention to detail for reflections and shadows really help to render a 3 dimensional space within the character’s surroundings. His use of shallow depth of field also was interesting because I am personally an art student and always work with rendering 3 dimensional spaces in 2D drawings.

I have not worked with a lot of rendering digitally, and it definitely captured my attention that he used a narrative illustration to show not only 3D rendering of the character, but also the space in the background. I wish Crochet worked in a series, where the character is portrayed in different locations, instead of one specific rooftop in Japan. However, the overall aesthetics of the piece as well as the color palette really captured my attention and gave a sense of reality in a digital world through 3D rendering.

http://juliencrochet.wixsite.com/portfolio/3d-observer

ChristineSeo-Project04

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-04

function setup() {
  createCanvas(300, 400);
  mouseClicked();
}

function draw() {
  
}

function mouseClicked() {
  background(245, 229, 254);
  noStroke();
  
	    push();
	  for(var x = 0; x <= width; x += 30){ //rainbow dashes
	   for(var y = 0; y <= height; y += random(90)){
  	
     var r = random(220);
     var r1 = random(0, 5);
     var r2 = random(10, 40);
     
     colorMode(HSB,200); 
		 var colorC = color(r,r2,220);
		 fill(colorC);
     	ellipse(x, y, r, r1);
	   }
	  }
	  pop();

	 push();
	for (var y = 0; y < height; y += random(80)){ 
    
    strokeWeight(random(1, 5));
    stroke(250);
    line(0, 0, y-80, height/2); //top white lines
    line(width, height, y-80, height/2); //lower white lines
	  }
	pop();

	strokeWeight(random(1, 5));//midline in center
    stroke(250);
	line (0,height/2,width,height/2);


    push();
	for (var y = 0; y < height; y += random(40)){ //dark gray lines left bottom corner
    
    strokeWeight(random(1, 5));
    stroke(100);
    line(0, y, y+10, height);
  	}
	pop();
  
     push();
	for (var x = 0; x < width; x += random(40)){ //dark gray lines right top corner
    strokeWeight(random(1, 5));
    stroke(100);
    line(x, 0,width, x+10);
	  }
	pop();

    push();
  for (var x = 0; x < width; x += random(20)){ // light gray lines right top corner
    strokeWeight(random(1, 2));
    stroke(160);
    line(x-35, 0,width, x+35);
    }
  pop();

    push();
  for (var y = 0; y < height; y += random(20)){ // light gray lines left bottom corner
    
    strokeWeight(random(1, 2));
    stroke(160);
    line(0, y-35, y+35, height);
    }
  pop();
 
  

}

For this project, I wanted to play having a color scheme as well as use different corners of the canvas to create lines. When clicked, the movement of the lines are random (with restriction). Although getting the gist of using for() was difficult at first, I was able to get a hang of it and create something that I think is very successful.

ChristineSeo-LookingOutwards-04

 

Classyfier is a project where a table has the ability to choose the music genre that fits into the situation by detecting the beverages that people are consuming. It is programmed through Wekinator, Processing and the OFX collection, by Benedict Huebener, and 2 other students in Copenhagen Institute of Interaction Design. The music can be changed to the next song by tapping on the table. Huebener originally has passion for mechanics and aesthetics. He applies physical and digital prototyping techniques in order to take on problems in today’s society, which dictated him to take on this project.

I found this project very intriguing because I believe that this kind of technology relating to sound can be used in the bigger world. I think that this is a very possible project that can be actually carried on to a further extent to use in the future. The use of technology to respond to sounds in order to appropriately use in a certain context relates to convenience for humans. This project is aids human’s convenience and does not affect in a harmful way, which I think is very important since technology is consistently developing today. The man made machine table that can use its intelligence due to training, is very fascinating. I wish this project can work for multiple uses, not only limiting to sound of wine glasses, beer cans, and spoons clicking against mugs. Overall, this project is very successful in its use and the conceptual idea must be carried forward, and shared to a wider audience.

http://www.creativeapplications.net/processing/the-classyfier-ai-detects-situation-and-appropriates-music/

ChristineSeo-LookingOutwards-03-SectionC

This work was created by David Bowen over a course of a few days which involved a drone running ArduPilot software; it hovered 30 meters above Lake Superior and captured still images of the water’s surface. The surface ripples changed every time the weather was different and Bowen captured these images and converted them into three-dimensional displacement maps. The information was carved with a CNC router into a series of transparent acrylic cylinders.

David Bowen was influenced by the relationship between natural and mechanical systems: he had other projects that related to this topic. His previous project, Underwater, was a large scale, real-time installation that captured the surface of waves through hundreds of servo-motors. I believe he was inspired by the topic and his previous works that made him continue his research and thus create another work. Through his projects, he wanted to “provide an immersive mechanical perspective of a natural, dynamic and ageless phenomenon.”

In my previous Looking Outwards assignments, I researched a couple that were similar to this topic. I am very fascinated by the idea of nature coming together with technology to create beautiful pieces. It was very intriguing that he used clear acrylic to cut this out because it displays the delicacy of the water through the material: it captures the beauty of nature in a man made work. However, he only made 5 of these cylinders and I wish he made a room filled with them to display the vast scale of a ocean/lake. Overall, I am very interested in CNC routers because I am an art student and I am working as a monitor to help out with students to use CMU’s CNC router in Doherty Hall. I’ve actually created works with the machine before and will keep working to create more meaningful art!

http://www.creativeapplications.net/objects/the-obverse-box-deru-fuses-sound-light-and-artifact/

ChristineSeo-Project-03-SectionC

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-03

var leftColor; 
var rightColor;
var inBetweenColor;
var inBetweenPosition;
var angle1 = 0;
var angle2=0;


function setup() {
    createCanvas(640, 480);
    leftColor = color (200, 171, 223);
    rightColor = color (35, 42, 97);
    inBetweenColor = color (115, 171, 223);
    inBetweenPosition = 0;
    
}

function draw() {
	//background color change
	inBetweenPosition = map (mouseX,0, width, 0, 1);
	inBetweenColor = lerpColor(leftColor,rightColor,inBetweenPosition);
	background(inBetweenColor);

	//triangles bottom
	push();
	fill(mouseX+200, mouseY, 100);
	triangle(100, 360, 0, 480, 140, 480);
	fill(mouseX+200, mouseY, 300);
	triangle(210, 270, 110, 480, 290, 480);
	triangle(570, 240, 430, 480, 650, 480);
	fill(mouseX+200, mouseY, 100);
	triangle(410, 370, 270, 480, 510, 480);
	pop();

	//triangles top
	push();
	fill(mouseX+200, mouseY, 300);
	noStroke(0);
	triangle(100, 160, 0, 0, 140, 0);
	triangle(410, 170, 270, 0, 510, 0);
	fill(mouseX+200, mouseY, 100);
	triangle(210, 70, 110, 0, 290, 0);
	triangle(570, 30, 430, 0, 650, 0);
	pop();

	//triangle moves
	noStroke(0);
	if (mouseY>height/2){
		fill(mouseX+200, mouseY, 100);
		triangle(100, 270, 0, 0, 140, 0);
		fill(mouseX+200, mouseY, 300);
		triangle(100, 270, 0, 480, 140, 480);

		fill(mouseX+200, mouseY, 100);
		triangle(210, 140, 110, 480, 290, 480);
		fill(mouseX+200, mouseY, 300);
		triangle(210, 140, 110, 0, 290, 0);

		triangle(410, 240, 270, 480, 510, 480);
		fill(mouseX+200, mouseY, 100);		
		triangle(410, 240, 270, 0, 510, 0);

		triangle(570, 150, 430, 480, 650, 480);
		fill(mouseX+200, mouseY, 300);		
		triangle(570, 150, 430, 0, 650, 0);
	}

	//eyes
	fill(255);
	var x1=map(mouseX,0,width,163,173);
	ellipse (x1,270,40,40);
	var x2=map(mouseX,0,width,233,253,true);
	ellipse (x2,270,40,40);

	fill(0);
	var x3=map(mouseX,0,width,154,174);
	ellipse(x3,265,10,10);
	var x4=map(mouseX,0,width,224,254,true);
	ellipse(x4,265,10,10);

	fill(255);
	var x1=map(mouseX,0,width,360,370);
	ellipse (x1,160,40,40);
	var x2=map(mouseX,0,width,430,450,true);
	ellipse (x2,160,40,40);

	fill(0);
	var x3=map(mouseX,0,width,350,370);
	ellipse(x3,155,10,10);
	var x4=map(mouseX,0,width,420,450,true);
	ellipse(x4,155,10,10);

	//rotating rectangles
	fill(255);
	noStroke(0);
	push();
	rotate(radians(-angle1));
    ellipse(angle2, angle2, 0.1, 0.1);
	rect(140,135,10,10);
	rect(30,185,10,10);
	rect(70,245,30,30);
	rect(180,175,20,20);
	rect(120,195,10,10);
	rect(270,295,80,80);
	rect(299,355,10,10);
	rect(350,255,50,50);
	rect(490,155,70,70);
	rect(530,195,40,40);
	rect(620,285,10,10);
	pop();
    angle1 += mouseX/100;
    angle2 += 0.5;
}

I enjoyed being able to interact with my work through a mouse. I made sure to use many different elements and played with the color of the background and triangles. I also wanted to focus on using both the mouseX and mouseY. I think the eyes made the piece come together to make it more interesting as well!