Author: hschung@andrew.cmu.edu

hschung-Project-07

sketch

//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
        //adding the negative sign into the equation flips the butterfly vertically
    }
    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

sketch

//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

2016 AICP Sponsor Reel – Dir Cut from Method Studios on Vimeo.

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

sketch

// 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.

Link to the article I read-
https://www.theatlantic.com/entertainment/archive/2014/08/computers-that-compose/374916/

hschung-Project-04

sketch

// 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

Reverberating Across the Divide: Digital Design Meets Physical Context from Madeline Gannon on Vimeo.

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

sketch

//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);

	fill(20, 190, 100); //duck head
	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/

COH & FRANK, live at HeK, Basel from Tina Frank on Vimeo.