// 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:
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.
]]>
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.
]]>// 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);
}
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);
}
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.
]]>
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.
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();
}
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.
]]>
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);
}
}