jiyeonch – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 07: Composition with Curves

// Jiyeon Chun
// Section C
// jiyeonch@andrew.cmu.edu 
// Project-07-Project

var nPoints = 100;

function setup() {
    createCanvas(400, 400);
    background(242, 140, 86);
    frameRate(20);
}

function draw() {
    push(); 
    //make origin the center of canvas
    translate(width/2, height/2);
    drawEpicycloidCurve();
    pop();

}

function drawEpicycloidCurve() {
    //Epicycloid:
    //https://mathworld.wolfram.com/Epicycloid.html
    var x;
    var y;

    var a = mouseX / 5;
    var b = a / int(mouseY / 25);

    stroke(255);
    strokeWeight(.5);
    noFill();
    beginShape();
    for (var i=0; i<nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = (a+b)*cos(t)-b*cos(((a+b)/b)*t);
        y = (a+b)*sin(t)-b*sin(((a+b)/b)*t);
        vertex(x,y);
    }
    endShape(CLOSE);

}

function mousePressed() { //press mouse to clear canvas and restart
    background(242, 140, 86);
}

My project is a program that allows the user to build up a composition using their interaction with the epicycloid curve with their mouse movements. I started off with other curves at first, however, some of the others didn’t offer as many change-able variables, as I wanted the program to be very dynamic upon the movement of the mouse. After putting the curve into my program, I took away the background from the draw function so that the canvas could keep a “history” of the mouse movement every frame, creating a composition over time in which the canvas has responded to the user’s mouse movements and the user to the canvas’ current composition! Here are just a few of the infinite amount of possible compositions:

LO: Information Visualization

This Data Visualization, by the group Stamen Design, is a visualization of the atlas of human emotions, designed for the Dalai Lama and scientist Dr. Paul Ekman. It features scholarly findings about emotions and maps it into a series of graphs and interactions on their live website, which brings in different factors such as emotions, triggers, and responses to map how different triggers may cause different emotions in us. For the data itself, the studio and Ekamn conducted a peer-reviewed study among other emotion-studying scientists called “What Scientists Who Study Emotion Agree About,” from which they derived that five emotions in particular are considered and widely acknowledged as universal regardless of culture: anger, fear, sadness, disgust, and enjoyment. I admire that the project uses computation and code to map something so human, visceral, and natural as emotions themselves, and I particularly enjoy the way they graphed the different states of emotions from least to most intense, using shapes, colors, and line qualities that help visualize the emotions themselves, which also point to the design studio’s artistic sensibilities beyond simply plotting data points.

LO: Randomness

This project, by Tyler Hobbs, is a generative piece that uses a custom algorithm to generate this distinct visual “painting.” I admire it firstly because it’s simply beautiful and mesmerizing to look at. Also, the artists’ website says that he strives to create work that strikes a balance between “the cold, hard structures that computers excel at, and the messy, organizing chaos we observe in the natural world around us.” Likewise, this piece in particular is obviously a digital artwork, but also looks strikingly like waves of an ocean or like some organic surface with hills, valleys, shadows, twists and turns– making it neither completely inorganic or organic, neither completely machine nor natural. I wasn’t able to find much information on the exact random algorithms, but with the specification of the piece having 16 iterations, it seems that the algorithm makes this “Blue Literal” image randomly, just with the bounds and specifications of Hobbs’ code, so that every time, it creates this image of these small, short lines of different shades of blue traveling in different but slowly changing directions, with the shades of blue also changing in relation to the lines around it, creating this gradient/wave effect. Again, the specificity of the aesthetic with the combination of a random generation makes it both distinctly computer-generated and simultaneously distinctly Hobbs’ art.

Project 06: Abstract Clock

sketch Download

// Jiyeon Chun
// Section C
// jiyeonch@andrew.cmu.edu 
// Project-06-A

var glowsize = 200; //sec
var waxDrip; //min
var candleHeight = 180; //hour

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

function draw() {
    background(136, 39, 39);

    //get current time
    var H = hour();
    var M = minute();
    var S = second();

//second to glow toggle
    if (S%2 == 0) {
        glowSize = 180;
    } else {
        glowSize = 200;
    }

//hour to candle height
    candleHeight = 180+(H*5);

//minute to wax drip
    waxDrip = candleHeight+30+M;

//glow
    noStroke();
    fill(255, 176, 0,50);
    ellipse(150,candleHeight-40,glowSize);
    
//candle
    noStroke();
    fill(198, 187, 141);
    rect(120,candleHeight,60,220);

//background
    noStroke();
    fill(136, 39, 39);
    rect(0,400,300,220);

//dish
    noStroke();
    fill(151, 127, 33);
    quad(80,390,100,430,200,430,220,390);

//dish handle
    strokeWeight(8);
    stroke(151, 127, 33);
    fill(136, 39, 39);
    ellipse(232,400,40);

//flame
    noStroke();
    fill(255, 176, 0);
    ellipse(150,candleHeight-40,40,50);
    triangle(131,candleHeight-48,150,candleHeight-95,169,candleHeight-48);

//wax
    strokeWeight(8);
    stroke(237, 229, 195);
    line(120,candleHeight,180,candleHeight);
    line(158,candleHeight,158,waxDrip); //longone
    line(170,candleHeight,170,waxDrip-20); //shortone

//bible verse
fill(241, 240, 217);
    noStroke();
    textSize(12);
    textAlign(CENTER);
    text("MATTHEW 25:13",246,470);
}

Project 05: Wallpaper

sketch Download

var b; //x position for badfruit
var c; //y position for badfruit

function setup() {
    createCanvas(600, 600);
    background(180, 199, 137);
}


function goodfruit(x,y) {
    stroke(241, 240, 217);
    bezier(x,y+5,x-35,y-25,x-15,y+45,x,y+25); //leftside
    bezier(x,y+5,x+35,y-25,x+15,y+45,x,y+25); //rightside
}


function vine(x) {

    //vines
    noStroke();
    fill(241, 240, 217);
    rect(x-12,0,24,600);
    triangle(x,505,x,540,x+60,460); //bottomright
    triangle(x,480,x,445,x-60,400); //bottomleft
    triangle(x,360,x,325,x+60,280); //middleright
    triangle(x,300,x,265,x-60,220); //middleleft
    triangle(x,180,x,145,x+60,100); //topleft
    triangle(x,120,x,85,x-60,40); //topright

    //branches
    triangle(x+42,480,x+38,545,x+46,545); //bottomright
    goodfruit(x+42,535);
    triangle(x-42,420,x-38,485,x-46,485); //bottomleft
    goodfruit(x-42,475);

    triangle(x+42,300,x+38,365,x+46,365); //middleright
    goodfruit(x+42,355);
    triangle(x-42,240,x-38,305,x-46,305); //middleleft
    goodfruit(x-42, 295);

    triangle(x+42,120,x+38,185,x+46,185); //topright
    goodfruit(x+42,175);
    triangle(x-42,60,x-38,125,x-46,125); //topleft
    goodfruit(x-42, 115);

}

function badfruit(b,c) {
    stroke(96, 93, 42);
    fill(96, 93, 42);
    triangle(b,c-10,b-2,c+4,b+2,c+4); //stem
    bezier(b,c+5,b-35,c-25,b-15,c+45,b,c+25); //leftside
    bezier(b,c+5,b+35,c-25,b+15,c+45,b,c+25); //rightside
}


function draw() {

    vine(300);
    vine(480);
    vine(120);

    for (var b=35; b<=600; b+=176.5) { //increase from first to fourth row
       for(var c=25; c<=600; c+=176.5)  { //count from first to fourth column
        badfruit(b,c);
    }
}


//bible verse
fill(241, 240, 217);
    noStroke();
    textSize(12);
    textAlign(CENTER);
    text("JOHN 15:5",560,590);

}

LO: Computer Graphics

This piece, called “Secret Ramen”, is by 3D student Laura Keuk, who used programs Brush and 3ds Max, as well as Adobe photoshop and aftereffects to create the final image of the beautiful ramen bowl. I admire the simple beauty of the image; the detail, the colors, the lighting that invoke a warm, dreamy atmosphere. A secondary source cites that she used displacement for the oily soup texture, and particle simulation to spread out the onion rings around as garnish. I love that she chose something as simple and “commonplace” as food to painstakingly detail and craft, and shows her appreciation for the small joys in life, especially the importance of having and sharing good meals.

LO: Sound Art

This project, called Knight of Infinite Resignation, is a motorized sound installation by Diane Landry, an installation, video, and performance artist from France. It uses bicycle wheels to rotate sand-filled water-bottles (12 on each wheel) that align with the hour of the day and month of the year, with the sound of the sand filling the room as it moves with the motion of the bottles. Although they can be seen as a sort of clock for the human pattern of time, the cold, churring machines evoke an uncanny sense of perpetuality and vastness that also allude to eternity, space, serenity, and the unfathomable spans of time. The algorithm itself must be fairly simple; just programmed to run along a reference to the hour of the day or month of the year. However, the ingenuity of using such regular household items such as the bicycle wheel and plastic water bottle point to the artists’ ability to turn every-day, human objects into something bigger, more vast, more extensive.

http://dianelandry.com/installations-en/knight-of-infinite-resignation-2/https://www.youtube.com/watch?v=K_jWA_o-Cvg

Project 04: String Art

sketch Download

var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 40;

function makeStringArt(x1, y1, x2, y2, x3, y3, x4, y4) { //function to make string art from points of two lines
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    dx1 = (x2-x1)/numLines; //changes x value of first point
    dy1 = (y2-y1)/numLines; //changes y value of first point
    dx2 = (x4-x3)/numLines; //changes x value of second point
    dy2 = (y4-y3)/numLines; //changes y value of second point

    //initial points
    var firstx = x1; 
    var firsty = y1;
    var secondx = x3;
    var secondy = y3;

    //draws lines and adjusts points for next line
    for (var i = 0; i <= numLines; i += 1) {
        line(firstx, firsty, secondx, secondy);
        firstx += dx1;
        firsty += dy1;
        secondx += dx2;
        secondy += dy2;
    }
}

function setup() {
    createCanvas(400, 400);
    background(218, 190, 229); //purple

}

function draw() {
    stroke(255); //white: corner shapes
    makeStringArt(0,0,200,0,0,400,0,0);
    makeStringArt(200,400,400,400,400,400,400,0);
    //quarters of the star shape
    stroke(166, 155, 52); //gold
    makeStringArt(200,0,200,200,200,200,380,200);
    stroke(0, 142, 219) //blue
    makeStringArt(200,400,200,200,200,200,380,200);
    stroke(166, 155, 52); //gold
    makeStringArt(200,400,200,200,200,200,20,200);
    stroke(0, 142, 219) //blue
    makeStringArt(200,0,200,200,200,200,20,200);

    noLoop();
}

LO: Computational Fabrication

I found Nadeem Haidary’s work In-Formed especially powerful because it introduces potentially foreign and far-away-seeming data through such a ubiquitous, intimate human ritual such as eating. By visualizing the data in the prongs of a fork, the designer makes the statistic real, tangible, unable to ignore. On his website, he actually asks the question, “what if this information crawled off the page and seeped into the products that surround us?” (Haidary). As one looks at, reflects on, and imagines what it might look like to eat with this fork, it makes the reality of different eating habits and access far more tangible to the viewer than a simple fact they might read or hear. Regarding the algorithm, I assume the craft involved researching the statistics of calorie consumption by country, and then using those number to determine the proportions between each prong for each country it represented. The creator’s artistic sensibilities are manifested in the form in that it shows his ability to communicate something in a very human, tangible, and accessible way, as good designers do.

Project 03: Dynamic Drawing

sketch Download


var angle;  
var rStart = 209; 
var rSlope = -186/400; 
var bStart = 237;
var bSlope = -173/400; 
var gStart = 255;
var gSlope = -163/400;
var oSlope = 235/400; 

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

function get_color(mouseY) { //background color 
    if (mouseY <= 400) {
        var r = rStart + (mouseY*rSlope); 
        var g = bStart + (mouseY*bSlope); 
        var b = gStart + (mouseY*gSlope); 
        return [r, g, b];
    }
    else { //if mouse exceeds bounds
        return [23, 64, 92]; //keep color same 
    }
}

function get_opacity(mouseY) { //flower opacity
    if (mouseY <= 400) { 
        var opacity = 255 - (mouseY*oSlope);
        return opacity; 
    }
    else { //if mouse exceeds bounds 
        return 20; //keep opacity same
    }
}

function get_grass(mouseX) { //????
    if (mouseX <= 300) {
        if (mouseX <= 150) {
            var grR = ((65/150)*(mouseX) + 56);
            return [grR, 121, 18];
        }
        else {
            var grG = ((-37/150)*(mouseX-150) + 121);
            return [121, grG, 18];
        }
    }
    else { //if mouse exceeds bounds
        return [121,84,18]; //brown
    }
}


function draw() {
    var rgb = get_color(mouseY);
    var opacity = get_opacity(mouseY);
    var [gr,gg,gb] = get_grass(mouseX);
    background(rgb[0], rgb[1], rgb[2]);


    //flower
        noFill();
            stroke(143, 167, 65, opacity);
            strokeWeight(8)
            bezier(135,225,180,230,190,300,158,380); //leftstem
            bezier(224,168,250,180,220,320,150,370); //rightstem
        noStroke();
            fill(178, 123, 210, opacity); //lightpurple
                ellipse(130,210,30);
                ellipse(150,220,30);
                ellipse(143,243,30);
                ellipse(120,235,30); //end of flower left
                ellipse(220,150,30);
                ellipse(243,160,30);
                ellipse(233,183,30);
                ellipse(210,175,30); //end of flower right
            noStroke();
            fill(223, 186, 244, opacity);
            ellipse(224,168,15) //topflowermiddle
            fill(223, 186, 244, opacity);
            ellipse(135,225,15); //bottomflowermiddle

    //leaves 
        noStroke();
        fill(143,167,65, opacity);
        arc(175,280,190,190, 0, PI/2, OPEN); //rightleafright
        fill(143,167,65, opacity);
        arc(270,375,190,190, PI,-PI/2, OPEN); //rightleafleft
        noStroke();
        fill(143,167,65, opacity);
        arc(79,375,190,190, -PI/2, 0,OPEN); //leftleafright
        fill(143,167,65, opacity);
        arc(174,280,190,190, PI/2, PI, OPEN); //leftleafleft

    //grass
    dy = 0
    if(mouseY > 300){
        dy = -30
    }
    noStroke();
        fill(gr,gg,gb); //greengrasscolor
            triangle(0,dy+400,25,dy+400,0,dy+330); //blades of grass from left to right
            triangle(8,dy+400,35,dy+400,18,dy+290); 
            triangle(15,dy+400,30,dy+400,30,dy+305); 
            triangle(30,dy+400,50,dy+400,45,dy+305);
            triangle(45,dy+400,75,dy+400,68,dy+320);
            triangle(70,dy+400,100,dy+400,80,dy+330);
            triangle(80,dy+400,110,dy+400,95,dy+320);
            triangle(108,dy+400,135,dy+400,118,dy+300); 
            triangle(115,dy+400,130,dy+400,130,dy+315); 
            triangle(130,dy+400,150,dy+400,145,dy+315);
            triangle(130,dy+400,150,dy+400,145,dy+305);
            triangle(145,dy+400,175,dy+400,168,dy+320);
            triangle(170,dy+400,200,dy+400,180,dy+330);
            triangle(180,dy+400,210,dy+400,195,dy+320);
            triangle(200,dy+400,225,dy+400,220,dy+320);
            triangle(180,dy+400,200,dy+400,195,dy+305);
            triangle(215,dy+400,245,dy+400,238,dy+320);
            triangle(240,dy+400,270,dy+400,260,dy+310);
            triangle(250,dy+400,275,dy+400,270,dy+315);
            triangle(270,dy+400,290,dy+400,285,dy+325);
            triangle(285,dy+400,300,dy+400,297,dy+310);
            rect(0,dy+395,300,dy+100);
                

    fill(212, 220, 192);
    noStroke();
    textSize(12);
    textAlign(CENTER);
    text("ISAIAH 40:8",262,393);

    //bible
    rotate(angle - QUARTER_PI);
    noStroke();
    fill(75, 45, 20);
    rect(35,40,150,90);
    noStroke();
    fill(255, 239, 226);
    ellipse(125,49,35);
    ellipse(95,49,35);
    noFill();
    strokeWeight(3);
    stroke(255, 239, 226);
    bezier(45,50,70,60,90,10,110,48); //toplineleft
    bezier(45,120,70,130,90,90,110,120); //bottomlineleft
    line(45,50,45,120);
    line(175,50,175,120);
    bezier(110,120,130,90,150,130,175,120); //bottomlineright
    bezier(110,48,130,10,150,60,175,50); //toplineright
    fill(255, 239, 226); //biblefill
    quad(45,51,45,107,175,107,175,51);
    quad(45,120,45,105,100,105,55,120); //bottomleftcorner
    quad(175,120,175,105,120,105,165,120); //bottomrightcorner
    triangle(61,50,80,40,70,100); //toplefttri
    triangle(155,48,132,38,70,100); //toprighttri
    triangle(110,120,85,90,135,90); //bottomtri
    noStroke();
    fill(224, 211, 184);
    quad(110,40,110,122,120,110,120,32);
    push();

    //biblerotate
    if (mouseX > 115 & mouseX < 205){
        angle = mouseX * (1/200);
    }
}