hschung-Project-07

``````//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-07

var nPoints = 1000;

function setup() {
createCanvas(400, 400);
frameRate(10);
}

function draw() {
background(70, 140, 140);

var a = 1.5;
var b = 1.0;
var w = map(height/2, height/2, width/4, width-(width/4));
var inc = TWO_PI/(mouseX-height/4);

for (var waves = 0; waves < 400; waves++) { //waves behind the butterfly
strokeWeight(20);
stroke(83, 167, 218, 90);//blue thin lines sine curve
line(w, 100 -mouseY, waves*4 -mouseY, 100+sin(b)*40.0);
b = b + inc;

strokeWeight(3);
stroke(126, 180, 227, 90);//blue thick dotted sine curve
line(waves*10, 50, waves*4, 50+sin(b)*40.0);
b = b + inc;

strokeWeight(5);
stroke(30, 160, 154, 90); //green dotted sine curve
line(w, 150 -mouseY, waves*4, 150+sin(b)*40.0);
b = b + inc;

stroke(30, 160, 154, 90); //green lines sine curve
line(waves*10, 250, waves*4, 250+sin(b)*40.0);
b = b + inc;

stroke(255, 122, 153, 90); //dark pink dotted sine curve
line(w, 300, waves*4 -mouseX, 300+sin(b)*40.0);
b = b + inc;
}

push();
translate(width/2, height/2+30); //centers the butterfly
drawButterfly();
pop();
}

function drawButterfly() {
var x;
var y;
stroke(30, 160, 154, 90);
fill(255, 200, 200);
beginShape();
for (var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI); //adding mouseX and mouseY alters the power of sin()
x = -50 * (sin(t) * (exp(cos(t))- 2*cos(4*t) + pow(sin((1*t+mouseX)/12), 5)));
y = -50 * (cos(t) * (exp(cos(t))- 2*cos(4*t) + pow(sin((1*t+mouseY)/12), 5)));
vertex(x, y);
//I chose the Butterfly Curve.
//http://mathworld.wolfram.com/ButterflyCurve.html
}
endShape(CLOSE);

}``````

So at first, when I browsed the curves on the Mathworld website, I was drawn to the Butterfly Curve, and thought it would look interesting if it grew large and small from its center. So I looked at it but was warded off because it looked complicated and I wasn’t sure how to denote it in p5.js. Then I started playing with sine curves. I later realized with the help of my friend that the sine curve wasn’t an equation choice from the given site, so I (begrudgingly) went back to the Butterfly Curve and to my surprise, was able to translate it over into code without too much of a hitch… I was a little confused about how to write the parametric equations for the Butterfly Curve but the p5.js reference page helped a lot. I also added the sine curves I had been playing with into the background. I actually quite like the ever “fluttering butterfly” I was able to make. It makes some interesting heart/hybrid shapes too.

hschung-LookingOutwards-06

When I read that the topic was “randomness,” I instantly thought of Pisarro’s paintings that use pointillism. Although he placed every dot of paint in each pointillism painting, they weren’t calculated to their own rigid, specific positions. The placement of those dots are also random to an extent, because when people “randomly” generate things, it is not wholly random. So then I wondered about computer-generated “fine art” and I came across a project called “Grow Your Own Picture” by Chris Cummins, that generates the Mona Lisa painting using polygons of different shapes and colors, which can be manipulated by the website user. Chris gives credit for the idea of genetic algorithms to Roger Johansson, who was able to regenerate the painting using polygons of different colors, transparencies, and shapes. I was really intrigued that he was able to take so many sharp shapes and blend them to mimic the original painting so convincingly. I have also never heard of the term genetic programming or genetic algorithms before. It was so interesting to hear about programming that generates a “gene pool” of shapes and then does its best to sift out the “most fit” shapes to the Mona Lisa image. Cummin’s and Johansson’s approaches to this replication of fine art vary in level of randomness, in that with Cummin’s project, someone can interact with it and manipulate the content, so it has more opportunities to be different or random. They are also random in a similar sense, in the code that generates the art.

Chris Cummin’s interactive Grow Your Own Picture https://chriscummins.cc/s/genetics/#

Roger Johansson’s Mona Lisa replication via code

Genetic Programming: Evolution of Mona Lisa

hschung-Project-06

``````//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-06

var prevSec;
var millisRolloverTime;

function setup() {
createCanvas(400, 400);
millisRolloverTime = 0;
angleMode(DEGREES);
}

function draw() {
background(43, 58, 71);
var H = hour(); // moon sinks down the sky
var M = minute(); // tail moves to the right
var S = second(); //cat's drool drips down

if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);
var hourMoon   = map(H, 0, 24, 0, height);
var minuteTail = map(M, 0, 59, 0, height);
var secondsWithFraction = S + (mils / 1000.0);
var secondsDroolChunky = map(S, 0, 59, 253, height);

// MOON
noStroke(); //moon and its little craters

fill(234, 232, 150); //moon's glowing rings of light
ellipse(300, hourMoon, 120, 120);
fill(212, 214, 150, 95);
ellipse(300, hourMoon, 220, 220);
fill(234, 239, 175, 90);
ellipse(300, hourMoon, 350, 350);
fill(175, 175, 113, 70);
ellipse(300, hourMoon, 550, 550);

fill(255);
ellipse(300, hourMoon, 80, 80);//moon
fill(230, 230, 230);
ellipse(317, hourMoon, 30, 30);//crater
fill(230, 230, 230, 90);
ellipse(290, hourMoon, 20, 20); //crater
fill(80, 40);
ellipse(300, hourMoon - 25, 10, 10);//crater
fill(230, 230, 230, 90);
ellipse(320, hourMoon - 20, 15, 15);//crater
fill(230, 230, 230);
ellipse(305, hourMoon + 30, 15, 10);//crater

// HILL
push();
fill(70, 100, 90);
stroke(40, 94, 60);
ellipse(width/2 -50, height, 800, 200);
pop();
fill(127, 160, 112, 99);
ellipse(width/2 -50, height -5, 700, 180);

// BODY
push();
noFill(); //tail arc
stroke(153, 125, 125);
strokeWeight(30);
arc(width/2 -30, height/2 + 75, minuteTail +50, 250,  -10, 120); //350, 250 = ellipse dimensions for tail
pop();

fill(153, 125, 125); //cat body
ellipse(width/3 - 20, height/2 + 150, 170, 200);

fill(181, 158, 151); //cat belly highlight
ellipse(width/3 - 10, height/2 +150, 130, 150);

//FISH
push();
fill(110, 140, 151); //fish body
stroke(127, 156, 167);
strokeWeight(3);
ellipse(width/3 -100, height/2 +180, 400, 120);
pop();

push();
stroke(40, 58, 72);
strokeWeight(4);
line(143, 360, 173, 368); //fish eye
line(151, 377, 168, 356); //fish eye
strokeWeight(2);
line(197, 387, 222, 391); //fish mouth
strokeWeight(1);
line(213, 377, 212, 372); //fish left nostril
line(220, 377, 220, 373); //fish right nostril
pop();
push();
fill(87, 115, 135); //fish's fin
ellipse(width/3 - 50, height/2 +180, 90, 45);

stroke(110, 140, 151, 99);
strokeWeight(5);
line(31, 371, 129, 370); //fin stripes thick and transparent
line(32, 382, 129, 380);
line(32, 393, 129, 390);
pop();
fill(110, 140, 151); //fish's fin eclipse
ellipse(width/3 - 10, height/2 +180, 45, 55);

// EARS
var earX = width/2 - 100;
var earY = height/2 - 80;

fill(200, 170, 170); // both ears
//triangle(earX +10, earY+20, earX -35, earY+30, earX - 20, earY-20); //left ear
//triangle(186, 171, 146, 138, 208, 128); //right ear
//plotted right ear parts in Illustrator and used the info to get the points

beginShape(); //left ear squishy
curveVertex(earX +10, earY+20);
curveVertex(earX -35, earY+30);
curveVertex(earX - 20, earY-20);
curveVertex(earX +10, earY+20);
curveVertex(earX -35, earY+30);
endShape();

beginShape(); //right ear squishy
curveVertex(186, 171);
curveVertex(146, 138);
curveVertex(208, 128);
curveVertex(186, 171);
curveVertex(146, 138);
endShape();

fill(255, 200, 200); // ear insides
triangle(178, 167, 152, 145, 195, 138); //left inside ear
triangle(100, 141, 72, 153, 82, 116); //right inside ear

// FACE
noStroke();
fill(220, 220, 200); //cat face
ellipse(120, height/2, 155, 140);

fill(200, 170, 170); //left eye spot
ellipse(width/2 - 110, height/2, 70, 60);

fill(100); //eyes
ellipse(width/2 - 100, height/2 + 10, 20, 15); //left eye
ellipse(width/2 - 40, height/2, 20, 15); //right eye

strokeWeight(2);
fill(255, 150, 150); //nose
ellipse(width/2 -65, height/2 + 10, 10, 8);

var mBottomY = height/2 + 40; //base y position of bottom corners of mouth
var mouthX = width/2 -50;
fill(255, 180, 180); //mouth
//triangle(mouthX, mBottomY -5, mouthX -30, mBottomY, mouthX -15, mBottomY - 20);

push();
stroke(255, 169, 163);
strokeWeight(2);
beginShape(); //mouth squishy
curveVertex(mouthX, mBottomY -5);
curveVertex(mouthX -30, mBottomY);
curveVertex(mouthX -15, mBottomY -20);
curveVertex(mouthX, mBottomY -5);
curveVertex(mouthX -30, mBottomY);
endShape();
pop();

// DROOL
fill(155, 187, 201);//bit of drool on cat's mouth
ellipse(width/2 - 50, 235, 10, 10)
fill(195, 229, 244);//highlight for drool on mouth for more noticeablility
ellipse(width/2 - 48, 232, 5, 5)
fill(155, 187, 201);//the cat's dripping drool from its mouth
ellipse(width/2 - 50, secondsDroolChunky, 10, 40);
fill(195, 229, 244); //dripping drool highlight
ellipse(width/2 - 48, secondsDroolChunky-4, 5, 25);
}``````

Like my last project, I started off by doodling whatever came to mind. I doodled a cat, and then I added it drooling, and then I got the idea to have it drooling while looking at fish. At first I thought I’d have the cat’s drool drop by the second, the tail move by the minute, and a pile of fish grow with each passing hour. I did end up matching the drool to seconds and the tail to minutes, but I made a glowing moon sink down the sky for the passing hours.

I had fun trying to make this abstract clock cute and whimsical, but it took me a long time to understand what I needed to code and how to execute it. I popped a few screenshots of my project into Illustrator to help plot some points for triangles- like the ears and mouth. This was also my first time using curveVertex, and I also played with transparency. I feel like my code could have made use of for loops, but I wasn’t sure where to insert them. In the end, I was finally able to make it cute enough for my tastes.

(Also, when the cat’s drool gets close enough to the fish’s eye, it looks as though the fish is crying. This was intentional.)

hschung-LookingOutwards-05

When I think of impressive or inspiring 3D computer graphics, I am intensely drawn to this animated video that worked with Major Lazer’s “Light It Up.” Deluxe’s Method Studios was hired by production company RSA to produce this video. They used motion capture technology in conjunction with procedural animation and dynamic simulations. It has a variety of different characters with wildly unique body types and interesting textures that are not usually paired with human figures, and works in sync with music as well. I am intrigued by this video every time I watch it, because it looks so believable, and yet the textures and behaviors of the people dancing in the video would never make sense in real life. I really like it because its creators were able to take his imaginative characters and render them believably so that other people could see his creation. It’s so fantastically imaginative and entertaining.

hschung-Project-05

``````// Heidi Chung
// Section A
// hschung@andrew.cmu.edu
// Project-05

// (245, 185, 140) peach
// (200, 90, 90)

function setup() {
createCanvas(400, 400);
background(172, 234, 245);
}

function draw() {
spaceBunnies();
}

function spaceBunnies() {
var tw = 60;
var th = 75;
var oy = 50;
var ox = 50;
var amt = 10;

for (var rows = 0; rows < 5; rows++) {
for (var col = 0; col < amt; col++) {
var py = 10 + oy + rows * th;
var px = ox + col * tw; //th and tw = bounding box of circles
noStroke();
fill(255); //bun face // 255, 200, 200 medium pink
ellipse(px-90, py + 5, 55, 50);

fill(0); // both eyes
ellipse(px-105, py +5, 7, 5);
ellipse(px-140, py, 7, 5);

fill(245, 185, 140); //nose
ellipse(px-154, py, 7, 5);

fill(255, 200, 200 ); // mouth
ellipse(px-152, py + 12, 13, 15);

fill(255); // both ears
ellipse(px-105, py-25, 13, 25);
ellipse(px-140, py-25, 13, 25);

fill(255, 200, 200); // ear insides
ellipse(px-105, py -25, 8, 18);
ellipse(px-140, py-25, 8, 18);

}
}
}

``````

I started out by sketching some doodles, and I thought I might do a pattern involving bunnies or space, and moon/star shapes. I decided to go with the bunnies because I thought it was cute and work well if it was repeated as a motif. I went for a simple, cute wallpaper, one that I could see being used for a phone background. If I were to do this again, I would like to try making some of the bunnies with different expressions for points of interest. Doing this project helped me strengthen my familiarity with for loops again- but I would like to solidly understand it inside and out, so I can manipulate them with more finesse.

hschung-LookingOutwards-04

I read an article about the increasing capabilities of machines to make music, especially in the mimicry of iconic music made by people. It was interesting to see this topic made people react a number of ways. Some expressed disgust that people would consider that computer-generated music as “real” music or art, while others were more optimistic and speculated the commercial applications of computer-generated music. David Kope, a composer and computer scientist, also authored a book titled “Experiments in Musical Intelligence” in 1981- so this concept has been growing for some time.

I don’t know much about the algorithms involved in creating computer-generated melodies, but prior to reading this article, I did know about a different but related concept. In 2004, Japan produced a program called Vocaloid, which is a singing synthesizer- meaning samples are taken from voice actors’ or singers’ voices, and those samples are manipulated by program users to create songs. The users have to input the melody and lyrics. I think both of these projects probably have to confront the concepts of what is considered art, and where the source of originality and creation lay. It’s really interesting to me how they both allow for people to create new melodies in sync with machines, that couldn’t have been created by either being alone.

It could indeed be argued that machine-produced music determined by algorithms “doesn’t count” as art, but I don’t think that’s necessarily true- if humans created the algorithms necessary to create the melodies, even if they mimic existent styles, they still went through the creative process in a unique medium.

https://www.theatlantic.com/entertainment/archive/2014/08/computers-that-compose/374916/

hschung-Project-04

``````// Heidi Chung
// Section A
// hschung@andrew.cmu.edu
// Project-04

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

function draw() {
background(200, 90, 90);
for (var i = -5; i < 350; i += 10) {

var x1 = 0;
var y1 = i * height/500;
var x2 = i * height/300;
var y2 = height;

push();
stroke(235, 130, 130); // peach lines that touch bottom of canvas
strokeWeight(9);
line(i*2 + 20, 500, 1.5*i, 120);
pop();

push();
stroke(245, 185, 140); //thin short peach lines
strokeWeight(3);
line(1.5*i, 120, 1.2*i, 240);
pop();

push();
stroke(111, 178, 173); //short blue lines
strokeWeight(4);
line(i*2 + 20, 240, 1.5*i, 120);
pop();

stroke(235, 130, 130);//left bottom corner pink underlay grid
strokeWeight(3);
line(x1, y1 +100, x2, y2);

stroke(255); //white overlay grid
strokeWeight(.5);
line(x1, y1 +100, x2, y2);

stroke(235, 130, 130); //top right pink overlay grid
strokeWeight(.5);
line(y2-width/2, x1, y1 +400, x2);

stroke(235, 130, 130);//top left pink grid
strokeWeight(1);
line(y2, y2-width, x1, y1);

stroke(239, 84, 84);//grid top left reddish pink
strokeWeight(2);
line(y2 + 100, y2-width, x1 + 100, y1);

stroke(141, 219, 213); //light blue grid
strokeWeight(1);
line(y2 * i, x1, y1, x2);

}

}``````

I didn’t have a clear image of what I wanted to make when I started this, except for the color palette surrounding peachy pinks. It took me a long time to conceptually understand how to use the for loop to make the lines appear in a curved grid. But I had some helpful explanations from my friends and that helped ground me a lot. I think I’ll need to keep practicing using for loops a lot.

hschung-LookingOutwards-03

I looked at the project “Reverberating Across the Divide” by Madeline Gannon. I thought it was really interesting because it took a thorough route of combining digital and physical input and output. This was my first time being exposed to the topic of a chronomorphologic modeling environment. I’m especially impressed with the complexity of technology that is now possible in order for the designer to have been able to scan and create forms virtually, taking influence and depth from the real world. “A depth camera translates a physical space or object into a three-dimensional point cloud,” which allows her to create the expressive, exoskeleton-like forms that have strong influence from both the digital scans and physical features. I am a product design student, so I know a bit about 3D printing- but I didn’t know about the possibilities of scanning a physical form and then altering it in virtual reality. It excites me to think that if these technologies are possible for this whimsical project that created interesting, decoration-like forms, advancements in other areas like treating broken bones can also be made; I heard about 3D printing casts a few years ago, so I’m sure the tech has become more efficient since then.

hschung-Project-03

index

``````//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-03

var eyeR = 0;

function setup() {
createCanvas(640, 480);
rectMode(CENTER);
}

function draw() {
background(86, 155, 148);
fill(255, 255, 0);
noStroke();
//restrict mouseX to 0-400
var m = max(min(mouseX), 30);
var size = m * 150 / 300;

ellipse(60 + m * 190 / 200, 200, //duck beak
size + 60, size + 50);

fill(230, 90, 100); //pink ring
size = 350 - mouseX;
ellipse(300, 200,
size, size);

fill(86, 155, 148); //circle with same tone as background
size = 350 - size; //eclipses red circle and beak
ellipse(200 + m * 100 / 400, 200,
size + 40, size + 40);

size = 250 - size;
ellipse(185 + m * 150 / 900, 200,
size - 30, size - 30);

fill(20, 190, 100);//duck body
ellipse(340 + m * 250 / 300, 380, 380, 250);

fill(86, 155, 148); //circle with same tone as background
size = 350 - size; //to eclipse duck body
ellipse(m * 2 - 200, 400, 300, 300);

//if (x = 201 + m * 150 / 900) { ///change to white?
//fill(255);
// ellipse(200 + m * 150 / 900, 200,
// 	size, size);

fill(eyeR, 45, 45); //black eye
size = 100;
ellipse(m * 2 + 80, 190,
40, 40);

if (mouseX > 220) {

// fill(0); //left eye
// ellipse(160, 240, 40, 40);

// fill(0); //right eye
// ellipse(480, 240, 40, 40);

// fill(255, 220, 0); //darker part of beak
// ellipse(width / 2, height / 2, 140, 100);

// fill(255, 255, 0); //brighter part of beak
// ellipse(width / 2, height / 2 - 20, 140, 100);
// ///

var faceX = mouseX - 240;

fill(0); //left eye
ellipse(faceX - 120, 240, 40, 40);

fill(0); //right eye
ellipse(faceX + 20, 240, 40, 40);

fill(255, 220, 0); //darker part of beak
ellipse(faceX - 50, 340, 140, 100);

fill(255, 255, 0); //brighter part of beak
ellipse(faceX - 50, 310, 140, 100);
}

if (mouseX > 300) {
fill(230, 90, 100); //left pink cheek
ellipse(mouseX - 400, mouseY, 60, 60);
fill(230, 90, 100); //right pink cheek
ellipse(mouseX - 180, mouseY, 60, 60);

}

// var faceX = mouseX-width/2;
// ellipse(faceX, height/2, 10, 10);

}``````

I started off by drawing some shapes in colors I thought went well together. I ended up drawing a duck, and I wanted to transform its form to a something different, and I decided to change the position/view of the duck’s face.
(The duck face is manipulated by the mouse and it slides onto the duck’s head. I’m not sure why it’s not working in this embed, but it works in the browser.. it stays abstract, but it’s supposed to create the duck face looking to the right.)

hschung-LookingOutwards-02

I looked at the generative artwork of Tina Frank, specifically a performance she did live in Basel, on September 12, 2015. The performance consisted of a constantly changing background accompanying rather abstract, synth-electronic-like music. According to Frank’s website, all the images were created live by using audio frequencies played through a synchronator. The music she was creating was fed into a computer, which then made visuals in the form of a digital video, which was projected.
I think the beauty of this project is that it creates many works of ephemeral art, and that it uses technology so creatively. Looking at the wildly contrasting pictures of the projected video makes me reflect on how each moment a person experiences this performance is so unique and isn’t repeated again. The fluctuations of the sounds and sights mix to make a constantly changing piece of art. I think it’s impressive and an interesting contrast to typical, “classic” art, such as paintings or drama plays.

(I tried to embed the video, but they have restricting permissions, so I was unable to do so.)
http://www.tinafrank.net/audiovisual-art/av-performance-coh-frank/