Author: Jackie

jwchou-Project07-Curves

sketch 66

// Jackie Chou
// Section E
// jwchou@andrew.cmu.edu
// Project-07-Curves

function setup() {
    createCanvas(480, 480);
    frameRate(60);
    angleMode(DEGREES); //change angle mode
}

//goal: draw a flower with a center that pops up as the flower takes form
//then flower abstracts and center dissapears

function draw() {
    background(200, 210, 253);
    var R = map(mouseX, 0, width, 200, 255); //change stroke color of flower as mouseX changes
    var G = map(mouseX, 0, width, 140, 250);
    var B = map(mouseX, 0, width, 60, 130);

    drawRanunculoiud(); //draw curve function

    //flower center
    translate(-width/2, - height/2); //move flower center to center
    fill(170, 80, 130); 
    
    if (mouseX < 200 & mouseX > 50) {   //draw flower center when flower starts to be visible
    var ellipseSize = map(mouseX, 0, 200, 80, 0)
    noStroke();
    ellipse(width/2, height/2, ellipseSize, ellipseSize);
}

function drawRanunculoiud(){
    beginShape();
    noFill();
    stroke(R, G, B); 
    translate(width/2, height/2); //move curve to center


    for (var i = 0; i < width/5; i++){ //mouseX controls number of curves
        constrain(mouseX/3, 100, 300); //constrain mouseX

        var x;
        var y;

        var a = map(mouseX, 0, width, 30, 10);
        var t = map(i, 0, mouseX, 10, 360);

        //Ranunculoid http://mathworld.wolfram.com/Ranunculoid.html
 		x = a * (6 * cos(t) - cos(6 * t));
        y = a * (6 * sin(t) - sin(6 * t));
        vertex(x, y);

    endShape();
    }
}
}

For this project, I had a bit of a hard time implementing the equation. However, looking and actually studying the diagrams on the site helped me understand what each variable affected the curve.

I eventually created a Ranunculoid, which looks like a flower with 5 pedals. When the mouse moves to the right, the flower grows but then eventually abstracts. When the form looks like a flower, a center disk forms. However, when the form abstracts, the center disk dissappears.

The first three frames showcase the growth of the flower.


The next three frames showcase the abstraction.

jwchou-LookingOutwards-07

Project: American Panorama by Stamen Inc.

A map by Stamen showing foreign-born populations in the USA using data. Each country is shown proportionally by size.

Stamen is a company that specializes in very unique and data-centered visualizations. Many of their projects are based on geography/mapping.

For one of their projects in collaboration with Mellon Foundation, Stamen created a suite of software tools that generate maps! They used their software to make maps that portrayed a diverse set of data about America, such as physical objects (canals and trails) and statistics such as foreign-born populations in America. The creators’ artistic sensibilities are portrayed in the different aesthetic choices of the maps, such as color, layout, type choice, etc… (graphic design).

I really admire how they made the software accessible on GitHub for anyone to use/explore, which shows that they realize how data visualization can be a powerful tool for education.

American Canals

These maps were a collaborative effort with the Digital Scholarship Lab. They analyzed and compiled many data sets, and Stamen used their software to visualize it.

jwchou-project06-abstractClock

sketch 66

//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project 06 Abstract Clock

var prevSec;
var millisRolloverTime;

//--------------------------
function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;   
}
//--------------------------
function draw() {
	noStroke;
	fill(255, 60, 60); //red background
	rect(35,0, width-70, height); 
	fill(255);
	rect(0,0, 35, height); //left white margin
	rect(width-35, 0, 35, height); //right white margin
	rect(0,0, width, 15); //top white margin
	rect(0,height-15, width, 15); //bottom white margin
	var fillLevel = 255/24; //rectangle opacity

 
  	for(i=0; i < 23; i++) { //create 24 evenly columns spanning canvas
   	  noStroke;
   	  filllevel = fillLevel * i;
   	  fill(255, 255, 255, fillLevel);
   	  rect(35,0,((width-70)/24)*i, height); //keeps margins in consideration
    }
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    fill(128,100,100);
    text("Hour: "   + H, 10, 22);
    text("Minute: " + M, 10, 42);
    text("Second: " + S, 10, 62);
    text("Millis: " + mils, 10, 82);
    
    var hourBarWidth   = map(H, 0, 23, 45, height-45);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);
    var yPos = secondBarWidth-53  //vertical second position 
    var xPos = hourBarWidth-39.5 //horizontal hour position

    //plane
    noStroke();
    fill(190);
    ellipse(xPos + 40, yPos + 40, 70, 11); //wings
    ellipse(xPos + 40, yPos + 20, 35, 8); //horz stabilizer
    fill(108, 190, 225);
    ellipse(xPos + 40, yPos + 40, 17, 45); //fuselage
    ellipse(xPos + 57, yPos + 45, 6, 15); //left engine
    ellipse(xPos + 23, yPos + 45, 6, 15); //right engine
    fill(0);
    ellipse(xPos + 23, yPos + 50, 10, 2); //right propeler
    ellipse(xPos + 57, yPos + 50, 10, 2); //left propeller
    fill(190);
    ellipse(xPos + 40, yPos + 15, 5, 17); //tail
    fill(0);
    beginShape(); //cockpit
    vertex(xPos + 35, yPos + 50);
    vertex(xPos + 40, yPos + 57);
    vertex(xPos + 45, yPos + 50);
    vertex(xPos + 45, yPos + 45);
    vertex(xPos + 40, yPos + 50);
    vertex(xPos + 35, yPos + 45);
    vertex(xPos + 35,yPos +  50);
    endShape();

	for(c=0; c < M; c++) { //create dots trailing the plane to tell minutes
	  fill(255);
	  ellipse(hourBarWidth, yPos - 6.5*c, 3, 3) //dots using yPos of plane +hour position
	}    
}

For this project, I wanted to continue the theme of planes that I started last week.

I was wondering how I would depict time using the plane. This sketch represents my initial idea:

I wanted the plane to move vertically, 1/24 of its way through the canvas per hour, with a trail of dots behind it to signify the minutes. However, I quickly realized, after coding it, that the minute dots would go off the canvas for an entire hour at a time if the time was in the morning.

So I revised my idea, so that the plane would move horizontally one unit per hour. The dots would still signify the minutes. To signify seconds, the plane would move vertically by a 1/60 of the height every second. In this second configuration, the dots behind the plane are visible at least for a few moments per minute.

 

 

jwchou-LookingOutwards-06

Postmodern Modernist Generator
by Don Relyea

This project is a program that generates random modernist art by Don Relyea. It’s the third iteration, and with each iteration, Relyea incorporated new elements and features into his program.

I really admire Relyea’s thinking behind his programs. On his documentation page, he writes about how artists can truly never be replicated by programs, because they make spontaneous, intuitive decisions. However, he says that by logically breaking down choices an artist might make, a program can create a fairly good (and fast) approximation of art. Because he programs the generator to make decisions like an artist, Relyea’s artistic sensibilities are represented in the algorithms. However, It is not completely random, because the generator bases the art off of pre-selected color palates.

The last time the algorithm was updated seems to be 2010.

 

jwchou-project05-wallpaper

sketch 285

// Jackie Chou
// Section E
// jwchou@andrew.cmu.edu
// Project-05-Wallpaper

function setup() {
    createCanvas(480, 480);
    //background(161, 209, 255);
    background(164, 225, 219);

    var move;
    var r;
    var g;
    var b;
    var num;

    var cloudX = random(0, width); //random location of cloud 1
    var cloudY = random(0, height);

    var cloudX1 = random(0, width); //random location of cloud 2
    var cloudY1 = random(0, height);

    var cloudX2 = random(0, width); //random location of cloud 3
    var cloudY2 = random(0, height);

    var cloudX3 = random(0, width); //random location of cloud 4
    var cloudY3 = random(0, height);

    var cloudX4 = random(0, width); //random location of cloud 5
    var cloudY4 = random(0, height);

    var cloudX5 = random(0, width); //random location of cloud 6
    var cloudY5 = random(0, height);

    //cloud 1
    noStroke();
    fill(255, 255, 255, 80);
    ellipse(cloudX, cloudY, 70, 50);
    ellipse(cloudX + 15, cloudY - 10, 60, 40);
    ellipse(cloudX + 30, cloudY + 15, 40, 30);
    ellipse(cloudX + 35, cloudY, 50, 30)

    //cloud 2
    ellipse(cloudX1, cloudY1, 100, 70);
    ellipse(cloudX1 + 15, cloudY1 - 10, 70, 50);
    ellipse(cloudX1 + 30, cloudY1 + 15, 80, 50);
    ellipse(cloudX1 + 35, cloudY1, 50, 30)
 
    //cloud 3
    ellipse(cloudX2, cloudY2, 70, 50);
    ellipse(cloudX2 + 15, cloudY2 - 10, 50, 30);
    ellipse(cloudX2 + 30, cloudY2 + 15, 30, 10);
    ellipse(cloudX2 + 35, cloudY2, 40, 20)

    for(var y = 0; y < 6; y++) {
        if (y % 2 == 0) { //is row is even
            move = 45; //offset by 35
            r = 222; //pink
            g = 147;
            b = 142;
            num = 4; //have four planes

        } else {
            move = 0; //if row is odd, offset by zero
            r = 202; //purple
            g = 151;
            b = 222;
            num = 5; //have five plaes
        }
       
        for(var x = 0; x < num; x++) {
            xPos = x * 90 + move + 25; // x Position + offset
            yPos = y * 75 + 20; // y Position

            noStroke();
            fill(190);
            ellipse(xPos + 40, yPos + 40, 70, 11); //wings
            ellipse(xPos + 40, yPos + 20, 35, 8); //horz stabilizer
            fill(108, 190, 225);
            ellipse(xPos + 40, yPos + 40, 17, 45); //fuselage
            ellipse(xPos + 57, yPos + 45, 6, 15); //left engine
            ellipse(xPos + 23, yPos + 45, 6, 15); //right engine
            fill(0);
            ellipse(xPos + 23, yPos + 50, 10, 2); //right propeler
            ellipse(xPos + 57, yPos + 50, 10, 2); //left propeller
            fill(190);
            ellipse(xPos + 40, yPos + 15, 5, 17); //tail
            fill(0);
            beginShape(); //cockpit
            vertex(xPos + 35, yPos + 50);
            vertex(xPos + 40, yPos + 57);
            vertex(xPos + 45, yPos + 50);
            vertex(xPos + 45, yPos + 45);
            vertex(xPos + 40, yPos + 50);
            vertex(xPos + 35, yPos + 45);
            vertex(xPos + 35,yPos +  50);
            endShape();

    }

    //cloud 4
    noStroke();
    fill(255, 255, 255, 50);
    ellipse(cloudX3, cloudY3, 70, 50);
    ellipse(cloudX3 + 15, cloudY3 - 10, 60, 40);
    ellipse(cloudX3 + 30, cloudY3 + 15, 40, 30);
    ellipse(cloudX3 + 35, cloudY3, 50, 30)

    //cloud 5
    ellipse(cloudX4, cloudY4, 100, 70);
    ellipse(cloudX4 + 15, cloudY4 - 10, 70, 50);
    ellipse(cloudX4 + 30, cloudY4 + 15, 80, 50);
    ellipse(cloudX4 + 35, cloudY4, 50, 30)
 
    //cloud 6
    ellipse(cloudX5, cloudY5, 70, 50);
    ellipse(cloudX5 + 15, cloudY5 - 10, 50, 30);
    ellipse(cloudX5 + 30, cloudY5 + 15, 30, 10);
    ellipse(cloudX5 + 35, cloudY5, 40, 20)

}
}

For this project, I was inspired by a sweater I used to own that had a bunch of planes on it. I wanted to create something in the same vein, and I also wanted to incorporate a few random elements, which became a few clouds in the pattern that have random coordinates.

jwchou-LookingOutwards-05

Dark Forest by Jakub Javora, 2016

This is a piece I found when I searched for 3D artists on the internet. It depicts a surreal scene of a deer in a forest, facing a bright plane. There are so many reasons to admire this piece. First, it’s very technically sound. Everything is beautifully rendered and the realism is impressive. I also appreciate how the artist found an interesting subject matter that makes use of the medium. He didn’t just recreate a natural scene. He recreated a scene and added a surreal element to it, elevating the narrative.

According to a post about the piece here, the artist created Dark Forest using RedShift, Maya, and Photoshop using assets from an XFrog library.

If you look at the iterations in this gif, you can see how the artist used his sense of perspective to lay out the images. It looks that while the algorithms in rendering software rendered the basic elements, he had to go into photoshop to give it a few effects (the purple flare around the deer). So to me, that says the algorithms used in rendering software are not nearly adequate or flexible enough for more stylistic touches.

More info here:

https://www.artstation.com/artwork/QPv04

jwchou-project04-stringart

sketch 285

var ellipseX = 0
var ellipseY = -10




function setup() {
    createCanvas(400, 300);
    background(255, 173, 158);
    strokeWeight(0.5);
}


function draw() {
	createCanvas(400, 300);
	background(255, 173, 158);

	stroke(196, 154, 108);
	for (var i = 5; i < 100; i+=20) {
	line(50, 0, 380, i*0.1+20);
	stroke(27, 117, 188);		
	line(380, i*0.1+20, 0, i*0.2+70);
	stroke(43, 182, 115);
	line(0, i*0.25+70, 350, 0.4*i+150);
	stroke(241, 90, 41);
	line(350, 0.4*i+150, 0, i*1.5+200)

	ellipseX = ellipseX += 3;
    ellipseY = ellipseY += 0.2;
	ellipse(ellipseX, ellipseY, 15, 15);

    if(ellipseX > width) {
    	ellipseX -= 3;
    	ellipseY += 0;
    }
	

	
    
   
	}

//stroke(150);
//	strokeWeight(0.5);
//	for (var i = 0; i < 30; i++) {
//		line(0, height, 130 + (i*15), 70 - (i));
//	}
//
//	for (var i = 0; i< 500; i++) {
//		fill(255, 255, 0);
//		ellipse(0, height + i * 40, 40, 40);
//	}

}

Here is my… project… I wanted to lines to have some perspective, and I also wanted some kind of physical animation. I think I need to go back and review these concepts later because I don’t have a firm grasp on them yet (and I’m on a severe time crunch).

jwchou-LookingOutwards-04

Big Bang (Icebox) by Ezra Masch

Big Bang (Icebox) is the third in a series of projects by the artist Ezra Masch. It consists of LED light poles installed in a space, which are activated by the input of a drummer and a drum set. As the drummer beats on the drum set, the LED light poles will light up in specific ways based on the tempo/beat/intesity of the drum. Masch is an artist who has a background in sculpture from RISD, but he has recently been experimenting with combining technology and art.

His work is incredibly disciplinary, combining visual art, music, and technology, and I think it mirrors the interdisciplinary spirit at CMU. I don’t know much about the algorithms that were used for his work, but his website states that his installations use custom electronics by 4MS Pedals.

If I were to critique this project, I’d love to see other instruments added to it. It could be expanded with more colors and arrangements.

Video:

A drummer talking about drumming in Big Bang:

jwchou-LookingOutwards-3

Project: Iris Van Herpen’s line of laser-cut/3d-printed dresses 
http://www.additivefashion.com/wp-content/uploads/2013/05/RadiationSS10-418B.jpg
Iris van Herpen “Radiation Invasion” Sept 2009 Leather

I really admire this project because it really combines hand craftsmanship with the precision and automation of modern digital methods. Even though she used digital tools to cut the materials, she still had to use her aesthetic sensibilities to come up with the patterns and designs. In addition, I assume in assembling the dress, she still had to do it by hand to fit the dress to the specific model. It also inspired me in how she worked with various different manufacturers and partners in order to create the necessary forms.

I visited her exhibit at the Carnegie Museum last year, and in the exhibit, she talked about how many people told her that her vision could not be accomplished with existing technology. I love that her vision was so strong that she was so insistent in bringing her creations to live.

 

 

jwchou-project03-dynamicdrawing

sketch 285

//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project-Week-03

var bkgndR = 241;
var bkgndG = 240;
var bkgndB = 120;
var appleR = 241;
var appleG = 98;
var appleB = 72;

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

function draw() {
	background(bkgndR, bkgndG, bkgndB);
	noStroke();

    push();
    //rotates apple at the end when mouseX >500
    if (mouseX > 500) {
        translate(670, -50);
        rotate(PI/2.01);
    }

	//stem   
	fill(96, 47, 7);
	beginShape();
	curveVertex(311, 176);
	curveVertex(325, 169);
	curveVertex(323, 137);
	curveVertex(333, 111);
	curveVertex(325, 99);
	curveVertex(315, 106);
	curveVertex(318, 115);
	curveVertex(315, 130);
	curveVertex(312, 146);
	curveVertex(312, 176);
	endShape();

	//apple
	fill(appleR - 0.046 * mouseX, appleG + 0.1109 * mouseX, appleB + 0.09166 * mouseX);
    beginShape();
    curveVertex(315, 149);
    curveVertex(308, 149);
    curveVertex(285, 143);
    curveVertex(257, 149);
    curveVertex(236, 161);
    curveVertex(201, 218);
    curveVertex(214, 311);
    curveVertex(273, 371);
    curveVertex(323, 373);
    curveVertex(354, 376);
    curveVertex(399, 358);
    curveVertex(443, 283);
    curveVertex(451, 236);
    curveVertex(430, 177);
    curveVertex(376, 141);
    curveVertex(338, 140);
    curveVertex(315, 149);
    endShape();

    //bite one when mouseX > 40
    if (mouseX > 40) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse(440, 170, 80, 80);
    }

    //bite two when mouseX > 80
    if (mouseX > 80) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse(425, 230, 70, 90);
    }

    //bite three when mouseX > 20
    if (mouseX > 20) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (200, 260, 70, 90);
    }

    //bite four when mouseX > 60
    if (mouseX > 60) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (210, 290, 80, 60);
    }

    //bite five when mouseX > 200
    if (mouseX > 200) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (430, 300, 100, 100);
    }

    //bite six when mouseX > 150
    if (mouseX > 150) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (200, 160, 130, 130);
    }

    //bite seven when mouseX > 280
    if (mouseX > 280) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (428, 270, 120, 90);
    }

    //bite eight when mouseX and seed one > 320
    if (mouseX > 320) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (210, 250, 110, 100);
      fill(140, 98, 57);
      ellipse (300, 235, 12, 25);
    }

    //bite nine and seed two when mouseX > 400
    if (mouseX > 400) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (215, 300, 96, 96);
      fill(140, 98, 57);
      ellipse (315, 255, 12, 25);
    }

    //bite ten and seed three when mouseX > 450
    if (mouseX > 450) {
      fill(bkgndR, bkgndG, bkgndB);
      ellipse (415, 160, 90, 105);
      fill(140, 98, 57);
      ellipse (325, 225, 12, 25);
    
    }
    pop();




}

For this project, I started with an idea that I would have a plane take off and land as mouseX moved from left to right. However, I realized that I probably did not have the coding skill to pull it off successfully because I didn’t know how to make a complex object expand/shrink in size.

I was thinking of a good chronological visual, and the idea of having an apple being eaten made sense to me. I used mouseX and background-colored ellipses to convey bites being taken out of the apple. I tried making the background change color as well, but it ultimately distracted from the apple.