Author: aj

Project-06-Abstract-Clock

For this project, I wanted to make the time easy to tell. I did not want the viewer to have to analyze every detail to be able to understand what time it was. Therefore I tried to keep it simple by having the boxes represent the hour number, the sky background represent what time of the day it is, and the coins to represent how many minutes have passed. I also made the piranha plant rise with respect to every second. When a minute passes, the piranha plant starts back at the base of the pot. While doing this project, I had a lot of difficult making each detail of Mario. I did not want to just import an image of him, and wanted to challenge myself by creating him through layers of shapes. In my thought process, I wrote down a lot of color combinations for each part of Mario, but I mainly referred to an actual image/screenshot of a Mario game (attached below.) Also attached to this post is some progress photos I took as I worked on the project.

sketch
//Annie Kim
//anniekim@andrew.cmu.edu
//SectionB
//Project-06

function setup() {
    createCanvas(480, 480);
    background(95, 201, 247); 

}
function draw() {
	var h = hour(); 
	var s = second();


	if (h < 18 & h > 6) { 
	//if it is morning time, background = light color
		background(95, 201, 247);
	}
	else {
	//if it is night, background = dark color
		background(20, 25, 68);
	}
	//yellow ovals in background
	fill(220, 137, 20);
	stroke(180, 107, 40);
	ellipse(5, 360, 60, 100); //shape
	line(0, 320, 23, 320); //lines on air balloons
	line(0, 330, 28, 330);
	line(0, 340, 32, 340);
	line(0, 350, 34, 350);
	line(0, 360, 35, 360);
	ellipse(100, 350, 90, 130);
	line(100, 315, 138, 315);
	line(100, 330, 142, 330);
	line(100, 345, 144, 345);
	line(90, 360, 140, 360);
	line(90, 375, 140, 375);
	ellipse(240, 345, 80, 90);
	line(207, 320, 273, 320);
	line(200, 345, 280, 345);
	line(207, 370, 273, 370);
	ellipse(275, 380, 60, 110);
	line(245, 380, 305, 380);
	line(240, 365, 303, 365);
	line(242, 360, 302, 360);
	line(244, 355, 301, 355);
	line(246, 350, 300, 350);
	line(246, 345, 297, 345);
	line(255, 340, 294, 340);
	ellipse(470, 370, 70, 85);
	line(445, 340, 480, 340);
	line(443, 345, 480, 345);
	line(441, 350, 480, 350);
	line(439, 355, 480, 355);
	line(437, 360, 480, 360);
	line(435, 365, 480, 365);
	line(437, 370, 480, 370);
	line(437, 375, 480, 375);
	line(437, 380, 480, 380);
	line(437, 385, 480, 385);
	ellipse(400, 390, 100, 110);
	line(350, 390, 450, 390);
	line(352, 375, 449, 375);
	line(361, 355, 445, 355);

    //trees in background
	fill(75, 165, 75);
	noStroke();
	rect(0, 400, 480, 80);
	circle(10, 400, 80);
	circle(8, 360, 30);
	circle(75, 400, 40);
	circle(105, 400, 30);
	circle(135, 400, 70);
	circle(113, 380, 30);
	circle(135, 370, 40);
	circle(160, 380, 30);
	circle(165, 400, 40);
	circle(195, 400, 50);
	circle(260, 400, 80);
	circle(245, 370, 40);
	circle(260, 360, 40);
	circle(275, 370, 40);
	circle(315, 400, 30);
	circle(350, 400, 60);
	circle(400, 400, 40);
	circle(450, 400, 60);

	//clouds
	fill(250, 130); //half transparent alpha
	noStroke();
	ellipse(40, 60, 100, 28);
	ellipse(240, 190, 190, 40);
	ellipse(350, 15, 130, 20);
	ellipse(420, 100, 180, 30);

    //** MARIO **
    //the ground of the scene
    noStroke();
    fill(250, 220, 103); //orange-yellow layer
    rect(0, 445, 480, 35);
    orangecircles(); //call for orange curtain pattern
    fill(108, 220, 68);
    rect(0, 430, 480, 17); //green layer
    greencircles(); //call for green curtain pattern

    //Mario's left shoe
    fill(105, 67, 45); //brown color
    circle(33, 407, 32); //heel of shoe
    circle(80, 415, 36); //mid of shoe
    circle(89, 416, 39); //toe of shoe
    quad(33, 422, 80, 432.5, 80, 400, 33, 400); //sole of shoe

    //Mario's left leg that is planted on the ground
    fill(31, 73, 180);
    quad(60, 300, 130, 300, 80, 395, 25, 390); //leg
    ellipse(53, 395, 61, 27); //hem of pants
    stroke(31, 73, 180); //filling in spaces for the shape
    line(78, 370, 80, 395);

    //Mario's left arm 
    fill(244, 44, 42); //red
    noStroke();
    quad(148, 235, 110, 205, 155, 140, 180, 150); //arm
    fill(255); //white glove
    ellipse(162, 140, 60, 50); //glove

    //visor part of hat
    fill(147, 42, 43); //red
    ellipse(158, 118, 140, 30);
    
    //Mario's head
    fill(248, 217, 191); //skin tone
    ellipse(125, 115, 95, 110);
    ellipse(124, 148, 85, 90);
    rect(70, 105, 50, 100); //neck

    //Mario's nose
    fill(248, 217, 191); //skin tone
    ellipse(175, 152, 30, 25); //tip of nose
    ellipse(160, 162, 45, 10);

    //Mario's hair
    fill(74, 45, 32); //brown hair
    rect(60, 65, 35, 100);
    ellipse(90, 155, 20, 25); //behind ear
    circle(63, 158, 20);
    circle(75, 160, 30);
    triangle(135, 100, 130, 150, 100, 100); //sideburn
    ellipse(122, 135, 15, 30);
    ellipse(123, 140, 15, 23);
    circle(128, 144, 14);
    triangle(133, 145, 135, 100, 125, 125);

    //red Mario hat
    fill(224, 44, 42); //red
    noStroke();
    rect(60, 75, 120, 40);
    beginShape(); //connecting shape to make rounded top
    curveVertex(80, 98);
    curveVertex(80, 98);
    curveVertex(80, 58);
    curveVertex(105, 43);
    curveVertex(130, 42);
    curveVertex(150, 41);
    curveVertex(160, 39);
    curveVertex(170, 38);
    curveVertex(179, 60);
    curveVertex(177, 70);
    curveVertex(177, 70);
    endShape();
    line(175, 30, 180, 30);
    noStroke();
    ellipse(177, 73, 60, 75);
    ellipse(67, 85, 50, 60);

    //white Mario logo on hat
    fill(255); //white circle
    stroke(255);
    ellipse(197, 80, 20, 40);
    //red M letters
    stroke(224, 44, 42);
    strokeWeight(4);
    line(195, 70, 193, 92);
    line(195, 70, 198, 80);
    line(198, 81, 201, 68);
    line(201, 68, 203, 89);

    //Mario's ear
    fill(248, 217, 191);
    stroke(208, 177, 151);
    strokeWeight(1);
    ellipse(100, 128, 30, 40); 
    stroke(238, 207, 181); //inner ear crevice
    ellipse(100, 128, 15, 20);

    //Mario's eye
    fill(255); //white of his eye
    ellipse(160.5, 135, 14, 30);
    fill(105, 180, 255); //blue of eye
    noStroke();
    ellipse(163, 139, 8, 20);
    fill(0); //black of eye
    ellipse(164, 141, 5, 10);

    //Mario's eyebrow
    stroke(60, 50, 50);
    strokeWeight(3);
    noFill();
    arc(162, 128, 10, 25, PI + QUARTER_PI, 0);

    //darker red of visor part of cap
    fill(204, 2, 3);
    noStroke();
    arc(195, 100, 80, 40, 0 + 0.5*QUARTER_PI, PI, CHORD);
    triangle(155, 100, 195, 100, 227, 114);

	//drawing Mario's abdomen
	fill(41, 93, 200); //blue jean clothing color
	noStroke();
	ellipse(100, 250, 100, 130);
	circle(90, 210, 80, 50);
	circle(100, 225, 80);
	circle(80, 280, 70); //butt area

	//the following lines fill space to make smooth abdomen
	strokeWeight(10);
	stroke(41, 93, 200); 
    line(55, 250, 51, 270); 
	line(80, 310, 100, 310);
	line(55, 220, 55, 250);

	//Mario's right shoe in the air
	fill(105, 67, 45); //brown color
	noStroke();
	circle(164, 362, 32); //heel of shoe
	circle(201, 350, 36); //mid of shoe
	circle(207, 347, 39); //toe of shoe
    quad(165, 377, 205, 366.5, 195, 340, 165, 350); //sole of shoe

    //Mario's right leg that is in the air
    fill(41, 93, 200);
    noStroke();
    ellipse(125, 290, 120, 50);
    circle(165, 280, 50); //knee cap
    quad(140, 300, 190, 280, 201, 330, 150, 345); //calf
    quad(200, 329, 203, 328, 150, 355, 150, 344); //calf
    
    //pant hem
    beginShape(); //curve shape so the hem looks curved
    curveVertex(150, 354);
    curveVertex(150, 354);
    curveVertex(160, 352);
    curveVertex(180, 347);
    curveVertex(195, 335);
    curveVertex(200, 330);
    curveVertex(202, 327);
    curveVertex(202, 327);
    endShape();
    strokeWeight(10);
    stroke(41, 93, 200);
    line(165, 259, 145, 255); //line making thigh look filled
    
    //making jean lines
    stroke(31, 83, 170);
    strokeWeight(3);
    line(90, 200, 90, 270); //side seam
    line(118, 246, 149, 251); //line on top thigh
    line(145, 313, 163, 288); //line at knee
    line(172, 305, 180, 345); //line at right calf
    stroke(21, 63, 140); //darker line for darker leg
    line(90, 317, 50, 407); //left leg line
    noStroke();

    //Mario's right arm that goes off the screen
    fill(244, 44, 42);
    noStroke();
    ellipse(85, 200, 60, 50);
    quad(45, 160, 95, 180, 90, 225, 45, 210); //bicep area
    quad(45, 160, 0, 180, 0, 230, 45, 210); //forearm

    //yellow button on Mario's overalls
    fill(255, 253, 104);
    ellipse(135, 220, 10, 20);

    //Mario's mustache
    fill(35, 23, 17);
    //edge of mustache
    arc(145, 160, 20, 10, 0, PI + QUARTER_PI); 
    //inner part of mustache
    arc(158, 164, 15, 10, 0, PI + QUARTER_PI); 
    //Mario's smile
    stroke(100);
    noFill();
    strokeWeight(2);
    arc(158, 170, 20, 10, 0.5*PI, PI); 

    //PIRANHA PLANT MOVES WITH SECONDS

    //stem of plant growing with seconds
    stroke(79, 145, 45);
    strokeWeight(10);
    //line(425, 366, 425, 366 - s);
    quad(423, 380, 423, 340 - s, 427, 340 - s, 427, 380);

    //piranha red head
    fill(215, 15, 15);
    noStroke();
    circle(425, 330 - s, 80); //red circle
    fill(255);
    circle(423, 360 - s, 13); //white spots on piranha head
    circle(395, 325 - s, 13);
    circle(405, 345 - s, 15);
    circle(435, 340 - s, 13);
    circle(457, 325 - s, 10);
    circle(455, 345 - s, 10);

    //making the mouth of piranha open
    if (h < 18 & h > 6) {
    	//using light blue color to match background
    	fill(95, 201, 247); 
    }
    else {
    	//using dark blue color to match bckground
    	fill(20, 25, 68);
    }
    triangle(425, 345 - s, 340, 280 - s, 510, 280 - s);
    
    //teeth of piranha mouth
    stroke(220); //outline color = grayish
    fill(245); //white teeth
    strokeWeight(1);
    triangle(418, 320 - s, 416, 340 - s,  408, 330 - s); 
    triangle(405, 310 - s, 403, 330 - s, 395, 320 - s);
    triangle(434, 320 - s, 441, 330 - s, 431, 340 - s);
    triangle(450, 310 - s, 457, 320 - s, 447, 330 - s);

    //white lips of piranha mouth
    fill(245);
    noStroke();
    circle(382, 315 - s, 15);
    triangle(377, 320 - s, 425, 345 - s, 385, 308 - s); //left lip
    circle(468, 315 - s, 15);
    triangle(463, 309 - s, 425, 345 - s, 473, 320 - s); //right lip

    //pot for the plant
    fill(75, 118, 68);
    noStroke();
    rect(400, 380, 50, 50); //base of pot
    stroke(55, 98, 48);
    strokeWeight(1);
    rect(390, 370, 70, 20); //top part of pot

    //draws coin for each minute
    for (m = 0; m < minute(); m ++) {
    	row = Math.floor(m / 4);
    	//15 rows of coins, 4 columns of coins
    	coins(240 + (m - 4 * row) * 28, 19 + (29 * row)); 
    }
    //draws boxes for each hour
    for (h = 0; h < hour(); h ++) {
    	row1 = Math.floor(h / 6);
    	//3 rows of boxes,
    	//4 columns in each row
    	boxes(336 + (h - 6 * row1) * 24, 10 + (35 * row1));
    }

    //MUNCHKIN stomach
    fill(143, 121, 91);
    noStroke();
    ellipse(210, 429, 18, 11);
    ellipse(210, 426, 16, 4);

    fill(134, 80, 50); //brown body color
    //munchkin feet
    ellipse(202, 433, 13, 8);
    ellipse(218, 433, 13, 8);
	noStroke();
	//layering body shaper
	ellipse(210, 400, 30, 40); 
	circle(203, 410, 30);
	circle(217, 410, 30);
	rect(203, 410, 14, 15);
	triangle(200, 385, 190, 403, 210, 400);
	triangle(220, 385, 230, 403, 210, 400);
	// munchkin eyes
	fill(255); //white of eyes
	stroke(230);
	ellipse(204, 400, 6, 13);
	ellipse(217, 400, 6, 13);
	fill(0); //black of eyes
	ellipse(205, 399, 5, 8);
	ellipse(216, 399, 5, 8);
	fill(255); //white dot in eyes
	circle(205, 398, 1);
	circle(216, 398, 1);
	//munchkin mouth
	fill(255);
	stroke(210);
	strokeWeight(1);
	triangle(197, 414, 199, 408, 202, 412); //teeth
	triangle(223, 414, 221, 408, 218, 412); //teeth
	stroke(0);
	strokeWeight(2);
	noFill();
	arc(210, 415, 25, 4, PI, 0); //frown line
	
	//munchkin left eyebrow
	stroke(0);
	strokeWeight(2);
	noFill();
	beginShape();
	curveVertex(193, 384)
	curveVertex(193, 384);
	curveVertex(195, 383);
	curveVertex(197, 383);
	curveVertex(199, 384);
	curveVertex(202, 387);
	curveVertex(203, 389);
	curveVertex(205, 392);
	curveVertex(207, 394);
	curveVertex(207, 394);
	endShape();
    //munchkin right eyebrow
	beginShape();
	curveVertex(213, 394);
	curveVertex(213, 394);
	curveVertex(215, 392);
	curveVertex(217, 389);
	curveVertex(219, 387);
	curveVertex(221, 384);
	curveVertex(223, 383);
	curveVertex(225, 383);
	curveVertex(228, 384);
	curveVertex(228, 384);
	endShape();
}

function coins(x, y) { 
	fill(242, 220, 95); //yellow color
	stroke(222, 200, 75); //darker yellow to highlight shape
	ellipse(x, y, 13, 25); //shape of coin
	fill(222, 200, 75);
	rect(x - 1, y - 10, 3, 21); //vertical line on coin
}

function boxes(x, y) {
	fill(151, 88, 53); //brown color
	strokeWeight(2); //outline of box
	stroke(0); 
	square(x, y, 24); //size of each box
	strokeWeight(1); //thickness of brick lines
	line(x, y + 8, x + 24, y + 8); //lines to make bricks
	line(x, y + 16, x + 24, y + 16);
	line(x + 12, y, x + 12, y + 8);
	line(x + 8, y + 8, x + 8, y + 16);
	line(x + 16, y + 8, x + 16, y +16);
	line(x + 12, y + 16, x + 12, y + 24);
}

function greencircles() { //will "curtain" the green grass
	for (var a = 0; a < 485; a += 20) {
		fill(108, 220, 68); //green color
		circle(a, 445, 20);
	}
}

function orangecircles() { //layer that will "curtain" yellow grass
    for (var b = 0; b < 485; b += 25) {
        fill(238, 117, 40); //dark orange color
        ellipse(b, 463, 35, 17);
        fill(250, 220, 103); //orange-yellow color
        ellipse(b, 457, 35, 17);
        
    }
}
Here is the first progress picture I had, which somewhat highlights the difficulty I had in creating Mario from scratch.
Here is a progress pic as I started layering shapes to create Mario’s body. I had the easiest time making the piranha plant because it was based on simpler shapes.
This is the image I was referring to as I made my project. It was not very easy because I was limiting myself to a smaller canvas, and had to leave out some details that I really wanted to include. (Such as the Toad Mushrooms).

LookingOutwards-06

The work is called “e4708” by Mark Wilson. This is a random computer generated artwork. I admired how there are aspects of randomness and some aspects of organized arrays and shapes in the artwork. It is very unique because it was randomly generated, but it also is unique in the sense that it looks like a colorful PCB board for computers. I think this was really eye-catching because the artwork is random but still reminds me of something tangible and real. The artist supposedly used layers that helped produce some of the calculated repetition in the artwork, but most of the aspects were “left to chance” and were randomly chosen by the computer. Mark Wilson’s artistic sensibilities are manifested in this final form, because based on his previous works, a lot of his works use repetition of circles and squares in rows and columns, and all seem to look somewhat like machinery/computer parts. 

https://www.widewalls.ch/magazine/computer-generated-art-10-artworks

This is “e4708” by Mark Wilson, in which he combined both randomly generated pieces of art and his own calculated repetitions.

LookingOutwards-05

The project is called “Ghost Mantis” by Dmytro Teslenko. Immediately I was drawn to this work due to the attention to detail. I couldn’t believe that it was computer-generated because it looked like an actual praying mantis was being observed under a microscope. I specifically admired the little textured bumps and tiny hairs on the body of the praying mantis. I think it is interesting because it shows just how much zoomed-in attention the artist put into the work. Dmytro Teslenko used 3D rendering to create the image, but did not specify exactly what program helped generate the work. He said that his process to create the work consisted of modelling, sculpting, and then texturing. Based on Dmytro Teslenko’s previous works, it is obvious how his artistic sensibilities were manifested in the final form. His previous works consist of detailed renderings of animals, insects, etc. He tends to focus closely on the face and eyes of the organism he makes works of, and his “Ghost Mantis” piece follows suit. 

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

This is “Ghost Mantis” by Dmytro Teslenko.
This is how some of Teslenko’s previous works. Based on these previous works, I could see how Teslenko manifested some of his artistic interests in animals and other organisms into the work that I discussed in this blog.

Project-05-Wallpaper of Koalas

I personally have a preference for pastel colors because I think when you use patterns/repeating patterns, it is visually “easier on the eyes.” I wanted to use a light green background, and it inspired me to make a project about nature and animals. I wanted to challenge myself in terms of producing the image that would get repeated, so I chose a koala. I made the tree trunk pretty long because I wanted the overall wallpaper to appear as if there were koalas sitting on every branch up and down the tree. It was challenging to layer shapes to create the koala itself because its legs were in a specific position which forced me to use a lot of curveVertex in order to get the shape just right.

sketch
//Annie Kim
//andrewID:anniekim@andrew.cmu.edu
//anniekim-05-Project
//SectionB

function setup() {
    createCanvas(525, 500);
    background(204, 242, 207); //light green background
    noLoop();
}

function draw() {
	background(204, 242, 207); //light green background
    noStroke();
    //for loop to repeat the koalas everywhere
    for (var x = 0; x < width; x += 88.3) {
    	for (var y = 0; y < height; y += 96) {
    		push();
    		translate(x, y);
    		drawKoala();
    		pop();
    	}
    }

} //function draw end

function drawKoala() {
	//branch that koala is sitting on 
    fill(80, 55, 41); //brown color
    stroke(80, 55, 41);
    beginShape();
    curveVertex(.6, 83);
    curveVertex(.6, 83);
    curveVertex(25, 84);
    curveVertex(60, 85); //right endpoint of branch
    curveVertex(65, 88);
    curveVertex(58, 88);
    curveVertex(23, 94);
    curveVertex(.6, 96);
    curveVertex(.6, 96);
    endShape();

    fill(137, 189, 161); //leaf on branch
    stroke(67, 109, 91); //green color
    beginShape();
    curveVertex(65, 88);
    curveVertex(65, 88);
    curveVertex(71, 89);
    curveVertex(73, 90);
    curveVertex(77, 96);
    curveVertex(73, 95);
    curveVertex(71, 94);
    curveVertex(69, 93);
    curveVertex(68, 92);
    curveVertex(67, 91);
    curveVertex(65, 88);
    curveVertex(65, 88);
    endShape();

    stroke(57, 99, 71); //lines on leaf, dark green color
    line(65, 88, 77, 96); 
    line(68, 92, 67, 90);
    line(67, 90, 71, 89);
    line(70, 91, 73, 91);
    line(70, 91, 72, 94.5);
    line(72, 92, 75, 93);

    fill(74, 49, 31); //vertical base of tree on left
    stroke(74, 49, 31);
    rect(1, 0, 10, 90); //left side of function
    rect(85, 0, 5, 95); //right side of function

    stroke(44, 19, 11); //lines of tree base
    line(3, 2, 3, 15);
    line(7, 4, 7, 31);
    line(1.5, 38, 1.5, 68);
    line(0, 75, 0, 115);


    //koala base body
    fill(138);
    stroke(0);
    circle(6, 80, 10); //tail
    fill(138);
    stroke(0);
    beginShape(); //connecting body points
    curveVertex(20, 47);
    curveVertex(20, 47);
    curveVertex(18, 48);
    curveVertex(15, 50);
    curveVertex(10, 53);
    curveVertex(14, 56);
    curveVertex(12, 59);
    curveVertex(9, 63);
    curveVertex(7, 68);
    curveVertex(5.5, 72);
    curveVertex(5.3, 77);
    curveVertex(5.4, 81);
    curveVertex(5.8, 83);
    curveVertex(6.2, 85);
    curveVertex(6.5, 86);
    curveVertex(6.5, 86);

    curveVertex(10, 89);
    curveVertex(14, 90);
    curveVertex(17, 90);
    curveVertex(20, 89);

    curveVertex(24, 90);
    curveVertex(27, 89);

    curveVertex(31, 90);
    curveVertex(33, 90);

    curveVertex(36, 89);
    curveVertex(38, 90);
    curveVertex(40, 90);
    curveVertex(43, 89);

    curveVertex(43, 86);

    curveVertex(41, 83);
    curveVertex(43, 70);
    curveVertex(43, 60);
    curveVertex(43, 48);
    curveVertex(43, 48);
    endShape();

    noFill(); //hind leg outline
    beginShape();
    curveVertex(13, 75);
    curveVertex(13, 75);
    curveVertex(17, 74);
    curveVertex(21, 76);
    curveVertex(22, 79);
    curveVertex(22, 82);
    curveVertex(21, 84);
    curveVertex(25, 86);
    curveVertex(25, 87);
    curveVertex(26, 89);
    curveVertex(26, 89);
    endShape();

    beginShape(); //part of the right front leg outline
    curveVertex(22, 75);
    curveVertex(22, 75);
    curveVertex(23, 79);
    curveVertex(25, 83);
    curveVertex(26, 85);
    curveVertex(26, 87);
    curveVertex(26, 87);
    endShape();

    beginShape(); //line separating front two legs
    curveVertex(31, 70);
    curveVertex(31, 70);
    curveVertex(33, 78);
    curveVertex(33, 81);
    curveVertex(33, 83);
    curveVertex(33, 85);
    curveVertex(35, 87);
    curveVertex(36, 89);
    curveVertex(36, 89);
    endShape();

    //light grey stomach patch of fur
    fill(210);
    noStroke();
    triangle(30, 65, 33, 76, 43, 60);
    stroke(0);
    beginShape();
    curveVertex(33, 75);
    curveVertex(33, 75);
    curveVertex(35, 74);
    curveVertex(37, 72);
    curveVertex(39, 75);
    curveVertex(40, 71);
    curveVertex(42, 74);
    curveVertex(42, 70);
    curveVertex(45, 70);
    curveVertex(42, 66);
    curveVertex(44, 67);
    curveVertex(43, 60);
    curveVertex(43, 60);
    endShape();

	// koala base head black outline
	stroke(0);
	strokeWeight(1);
	ellipse(28, 51, 40, 26);
	ellipse(28, 45, 41, 36);
	circle(10, 36, 19);
	circle(48, 36, 19);
	noStroke();
	// koala base head no outline
	fill(140);
	ellipse(28, 51, 39, 25);
	ellipse(28, 45, 40, 35);
	circle(10, 36, 18); //left ear
	circle(48, 36, 18); //right ear

    //hair patch at top of forehead
    stroke(0);
    strokeWeight(0.5);
    beginShape();
    curveVertex(23, 37);
    curveVertex(23, 37);
    curveVertex(24, 33);
    curveVertex(26, 36);
    curveVertex(28, 31);
    curveVertex(30, 36);
    curveVertex(32, 33);
    curveVertex(33, 37);
    curveVertex(33, 37);
    endShape();


	//koala face parts below

	//light color patch under nose and mouth
	noStroke();
    fill(210);
	ellipse(28, 56, 10, 12);
	//light color part of ears
	circle(10, 37, 10);
	circle(48, 37, 10);
	//covering part of the ears to make arc shape
	fill(140);
	circle(15, 40, 11);
	circle(43, 40, 11);

	//nose
	fill(30);
	ellipse(28, 54, 9, 9.5);
	
	stroke(30);
    strokeWeight(1);
	arc(28, 59, 6, 3, 0, PI, CHORD);

	//eyes
	fill(0);
	circle(20, 47, 4);
	circle(36, 47, 4);

	fill(255); // white shine of eyes
	noStroke();
	circle(20.5, 46, 1.5);
	circle(36.5, 46, 1.5);

	//leaf in mouth
	//stem
	stroke(43, 76, 45);
	noFill();
	arc(34, 61, 30, 5, PI, 0, OPEN);

	//petals of flower
	fill(239, 217, 221);
	stroke(255, 180, 190);
	circle(48, 56, 8);
	circle(45, 60, 8);
	circle(48, 63, 8);
	circle(53, 61, 8);
	circle(52, 57, 8);
    fill(255); //white center part of flower
    circle(49, 59, 7);
}
This was my thought process/drafting process before I started translating it into code.

Looking Outwards 04: Sound Art

Sonic Playground — Playful acoustics by Yuri Suzuki caught my attention and I found it an interesting installation. I admire how it is interactive and that each sculpture is a different color since each sculpture transmits different sounds. I admire this because those who are hard of hearing would be able to feel the vibrations since they are large sculptures. It seems very accessible and interactive (in varying ways) for all people. The installation is made through horns and pipes through which specially computed acoustics travel through. The software used to develop this project is called Grasshopper, which allows for frequency ranges and wave behavior can be simulated. Based on Yuri Suzuki’s previous works, it seems that the artist enjoys having large and open installations where anyone can interact with it. I thought it was a great way to incorporate sound without resorting to the use of bluetooth speakers or more basic forms of audio speakers.

Sonic Playground – Playful acoustics by Yuri Suzuki Design
The installations have varying shapes and varying colors. It has different heights, making it accessible for everyone, and provides an interactive hearing/vibration experience.

Project-04: String Art

For my project, I was inspired by some string art I had seen a while ago at the beach. I remember seeing how lines would give the sails of a sailboat depth, and almost make it look slightly 3-D. I thought that making the sails were challenging because the sails are all different shapes and face different directions, and it took me a while to figure out how to perfectly layer the lines.

If you move the mouse around the screen, the lighthouse light will follow it around the page. Though this assignment focuses mostly on lines, I also incorporated other shapes and features in order to give the overall project that “finished” look.

sketch
//Annie Kim
//anniekim
//SectionB
var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 30;
var boatLines = 40;

var mx1;
var my1;
var mx2;
var my2;

var bx1;
var by1;
var bx2;
var by2;

var angle = 0;


function setup() {
    createCanvas(400, 300);
    background(100, 200, 255);;
    stroke(255);
    //left side sail lines
    line(60, 185, 150, 190); //left side sail horizontal
    line(150, 190, 210, 70); //left side sail vertical
    dx1 = (150 - 60)/numLines;
    dy1 = (190 - 185)/numLines;
    dx2 = (210 - 150)/numLines;
    dy2 = (70 - 190)/numLines;

    //middle sail lines
    line(230, 40, 155, 191); // vertical
    line(155, 191, 245, 195); //horizontal
    mx1 = (155-230)/numLines;
    my1 = (191-40)/numLines;
    mx2 = (245-155)/numLines;
    my2 = (195-191)/numLines;

    
    //right sail lines
    stroke(255);
    line(270, 70, 250, 195);
    line(250, 195, 310, 196);
    bx1 = (250-270)/numLines;
    by1 = (195-70)/numLines;
    bx2 = (310-250)/numLines;
    by2 = (196-195)/numLines;

    //water lines
    stroke(74, 152, 168);
    line(0, 150, 400, 150);
    line(0, 300, 400, 150);
    line(0, 150, 0, 300);
    line(400, 150, 400, 300);


}

function draw() {

    //skyline & waterline
    stroke(179, 213, 244);
    strokeWeight(1.2);
    fill(179, 213, 244); //light blue sky
    rect(0, 0, 400, 150); //top rect sky
    //sun rising
    push();
    translate(100, 150);
    rotate(radians(angle));
    fill(242, 244, 190);
    noStroke();
    circle(50, 150, 120);
    pop();
    angle = angle + 1;
    //waters/waterline
    fill(74, 152, 168); //teal waters
    rect(0, 150, 400, 150); //bottom rect - waterline

    stroke(44, 122, 138); //waves webbing
    for (var i = 0; i <= 50; i ++) {
    	line(0, 300, 0 + 8*i, 151);
    }
    for (var i = 0; i <= 50; i ++) {
    	line(400, 300, 400 - 8*i, 151);
    }
    for (var i = 0; i <= 30; i ++) {
    	line(0, 150, 0 + 13.333*i, 300);
    }
    for (var i = 0; i <= 30; i ++) {
    	line(400, 150, 400 - 13.3333*i, 300);
    }
    //lighthouse building
    stroke(200);
    fill(200); //light grey color
    quad(370, 150, 375, 70, 385, 70, 390, 150); //base of lighthouse

    rect(374, 50, 12, 10); // the part of the lighthouse where the light will come from

    stroke(52, 54, 76); //dark navy color
    fill(52, 54, 76);
    quad(375, 70, 372, 60, 388, 60, 385, 70); //walk base of lighthouse

    triangle(372, 50, 380, 40, 388, 50); //top of lighthouse


    //hill
    fill(127, 105, 91); //brown color for sand under lighthouse
    stroke(127, 105, 91);
    strokeWeight(1);
    point(328, 151); //making lighthouse hill points
    point(331, 146);
    point(334, 143);
    point(336, 142);
    point(339, 140);
    point(345, 138);
    point(350, 136);
    point(355, 136);
    point(360, 136);
    point(365, 135);
    point(370, 134);
    point(375, 134);
    point(380, 133);
    point(385, 133);
    point(390, 132);
    point(400, 130);
    point(400, 151);

    beginShape();
    curveVertex(328, 151); //connecting hill points
    curveVertex(328, 151);
    curveVertex(331, 146);
    curveVertex(334, 143);
    curveVertex(336, 142);
    curveVertex(339, 140);
    curveVertex(345, 138);
    curveVertex(350, 136);
    curveVertex(355, 135);
    curveVertex(360, 136);
    curveVertex(365, 135);
    curveVertex(370, 134);
    curveVertex(375, 134);
    curveVertex(380, 133);
    curveVertex(385, 133);
    curveVertex(390, 132);
    curveVertex(400, 130);
    curveVertex(400, 151);
    curveVertex(400, 151);
    endShape();
    
    //lights of lighthouse
    fill(248, 226, 94);
    stroke(248, 226, 94);
    quad(374, 51, 374, 59, mouseX, mouseY + 12, mouseX, mouseY - 8);

    //birds
    stroke(40);
    strokeWeight(2);
    point(88, 63);
    point(96, 65);
    point(100, 70);
    point(104, 65);
    point(112, 63);

    point(138, 33);
    point(146, 35);
    point(150, 40);
    point(154, 35);
    point(162, 33);
    
    strokeWeight(1);
    line(88, 63, 96, 65);
    line(96, 65, 100, 70);
    line(100, 70, 104, 65);
    line(104, 65, 112, 63);

    line(138, 33, 146, 35);
    line(146, 35, 150, 40);
    line(150, 40, 154, 35);
    line(154, 35, 162, 33);

    stroke(255);
    strokeWeight(1.2);
	//left side sail
	var x1 = 60; 
	var y1 = 185;
	var x2 = 150;
	var y2 = 190;

	for (var i = 0; i <= numLines; i += 1) { //connecting webs of left sail
		line(x1, y1, x2, y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		y2 += dy2;
	}
	//noLoop();
    
    for (var i = 0; i <= 15; i++) { //adding vertical lines for left sail
    	line(60 + 6*i, 185 + 0.33333*i, 210 - 4*i, 70 + 8*i);
    }

	//middle sail
	var m1 = 230;
	var m2 = 40;
	var m3 = 155;
	var m4 = 191;

		for (var i = 0; i <= numLines; i += 1) { //connecting webs of middle sail
		line(m1, m2, m3, m4);
		m1 += mx1;
		m2 += my1;
		m3 += mx2;
		m4 += my2;
		
	}
	//noLoop();

	for (var i = 0; i <= 20; i ++) { //adding vertical lines for middle sail
		line(155 + 4.5*i, 191 + 0.2*i, 155 + 3.75*i, 191 - 7.505*i);
	}
	
    
    //right sail
    var b1 = 270;
    var b2 = 70;
    var b3 = 250;
    var b4 = 195;

    for (var i = 0; i <= numLines; i += 1) { //connecting webs of right sail
    	line(b1, b2, b3, b4);
    	b1 += bx1;
    	b2 += by1;
    	b3 += bx2;
    	b4 += by2;
    }
    //noLoop();
	
	for (var i = 0; i <= 10; i ++) { //adding vertical lines for right sail
		line(250 + 6*i, 197 - 0.2*i, 250 + 2*i, 195 - 12.5*i);
	} 

    //boat waves lines
    stroke(14, 92, 108);
    line(260, 243, 375, 220);
    line(260, 245, 370, 240);
    line(260, 250, 400, 250);
    line(260, 255, 390, 260);
    line(270, 260, 375, 280);

    //the bottom of the sailboat 
    stroke(230, 150, 50);
    strokeWeight(1);

    //bottom of sail boat

    //first horizontal line
    line(60, 190, 310, 200); 
    //second horizontal 
    line(100, 260, 270, 260);
    //left side of lower boat
    line(60, 190, 100, 260);
    //right side of lower boat 
    line(310, 200, 270, 260);

    fill(250, 180, 100);
    quad(60, 190, 310, 200, 270, 260, 100, 260);

    for (var i = 0; i <= 30; i ++) {
    	    line(60, 190, 100 + 5.66666*i, 260); //hatching from left top corner to bottom line

    }
    
    for (var i = 0; i <= 30; i++) {
    	line(310, 200, 270 - 5.66666*i, 260); //hatching from top right corner to bottom line 
    }

    stroke(210, 140, 30);
    for (var i = 0; i <= 15; i++) { //hatching from top left corner to right side
    	line(60, 190, 270 + 2.6666*i, 260 - 4*i);
    }

    for (var i = 0; i <= 15; i++) { //hatching from top right corner to left side
    	line(310, 200, 100 - 2.666*i, 260 - 4.6666*i);
    }

 


}

LookingOutwards-03

I admired the entry work by matsys for the Tulum Site Museum competition. I was fascinated by the creator’s ability to demonstrate depth within their works. With the inclusion of a person within their work, it was relatively easy to understand how large of a museum it would be. Immediately, I began seeing and thinking “that must be a window”, or “that must be a mirror.” 

As far as the algorithms, it was never explicitly stated but I would assume that it was done through 3D rendering, with the implementation of layers to show how the rooms within the museum should be arranged. Based on matsys’ previous works, I can see how their artistic sensibilities are manifested in this work. Most of their works include a porous material/texture, and appear almost sponge-like. In the entry work for the Tulum Site Museum competition, the walls have many holes/empty spaces in them. It seems so sponge-like that it reminds me of coral reefs. 

This is from mastys’ entry work for the Tulum Site Museum competition. Here, they have created a rendering of what they imagine the interior of the museum should look like. You can see how mastys has incorporated the porous-like appearance in the walls and the ceiling. With the inclusion of what appears to be a shadow of a person, it is useful in making a judgment of how large the museum would be.

https://www.matsys.design/tulum-site-museum

Project-03: Dynamic Drawing

I was inspired by album art by the band Surfaces. I liked the way their album art had soft pastel colors and the depth it always presented. I started with the background mountains, trees, and roads first. It took me a while to make all the trees because I had to layer triangles, and the car took a lot of time to accurately have all the car parts move with respect to mouseX. If you click, the headlights thickness will increase, and the color of the sun will change. If you move mouseX, the car will move. If you move mouseY, the clouds will move, the background sky color will change, and the sun size will change.

sketch
//Annie Kim
//andrewID anniekim
//SectionB

var sunangle = 0
var suncolorR = 242
var suncolorG = 244
var suncolorB = 190
var headlighttop = 370
var headlightbottom = 395
var star1angle = 0
var star2angle = 0
var star3angle = 0
var star4angle = 0
var sundiameter = 150

function setup() {
    createCanvas(600, 450);
    background(14, 40, 91); //blue background
}

function draw() {
	//background sky - blue if mouseY is in top half, pink if in bottom half
	if (mouseY < (height * 0.50)) {
        background(15, 40, 91);

    } else if (mouseY > (height * 0.5)) {
        background(240, 210, 209);
    }
	//sun rising and moving
    push();
	translate(300, 225); //moving sun's origin to middle of screen
    rotate(radians(sunangle)); // rotating in circle clockwise
    fill(suncolorR, suncolorG, suncolorB);
    noStroke();
	circle(50, 150, sundiameter + (mouseY/3)); //sun made
	pop();
	sunangle = sunangle + 2.5; //med rotation speed
    

    //cloud#1
	fill(255); //white color
	stroke(255);
	point(mouseY - 140, 55); //points of the first cloud to connect
    point(mouseY - 185, 50);
	point(mouseY - 220, 52)
    point(mouseY - 260, 54);
	point(mouseY - 290, 55);
	point(mouseY - 138, 60);

    beginShape();
	curveVertex(mouseY - 140, 55); //connecting first cloud
	curveVertex(mouseY - 140, 55);
	curveVertex(mouseY - 185, 50);
	curveVertex(mouseY - 220, 52);
	curveVertex(mouseY - 260, 54);
	curveVertex(mouseY - 290, 55);
	curveVertex(mouseY - 138, 60);
	curveVertex(mouseY - 138, 60);
    endShape();

	//cloud#2
	point(mouseY, 91); //points of the second cloud to connect
	point(mouseY - 10, 93);
	point(mouseY -20, 98);
	point(mouseY - 60, 105);
	point(mouseY - 70, 115);
	point(mouseY + 30, 125);
	point(mouseY + 60, 125);
	point(mouseY + 170, 120);
	point(mouseY + 155, 110);
	point(mouseY + 130, 85);
	point(mouseY + 90, 90);

	beginShape();
	curveVertex(mouseY, 91); //connecting second cloud
	curveVertex(mouseY, 91);
	curveVertex(mouseY - 10, 93);
	curveVertex(mouseY -20, 98);
	curveVertex(mouseY - 60, 105);
	curveVertex(mouseY - 70, 115);
	curveVertex(mouseY + 30, 125);
	curveVertex(mouseY + 60, 125);
	curveVertex(mouseY + 170, 120);
	curveVertex(mouseY + 155, 110);
	curveVertex(mouseY + 130, 85);
	curveVertex(mouseY + 90, 90);
	curveVertex(mouseY + 90, 90);
	endShape();
	
	//mountain layer 1 (light coral color)
    fill(250, 180, 175);
    stroke(250, 180, 175);
    strokeWeight(5);
    point(0, 255);
    point(0, 385);
    point(30, 230);
    point(150, 210);
    point(195, 190);
    point(215, 200);
    point(260, 215);
    point(290, 220);
    point(310, 215);
    point(380, 175);
    point(420, 190);
    point(460, 145);
    point(510, 185);
    point(540, 165);
    point(580, 155);
    point(600, 160);
    point(600, 375);

    beginShape();
    curveVertex(0, 385);
    curveVertex(0, 385);
    curveVertex(0, 255);
    curveVertex(30, 230);
    curveVertex(150, 210);
    curveVertex(195, 190);
    curveVertex(215, 200);
    curveVertex(260, 215);
    curveVertex(290, 220);
    curveVertex(310, 215);
    curveVertex(380, 175);
    curveVertex(420, 190);
    curveVertex(460, 145);
    curveVertex(510, 185);
    curveVertex(540, 165);
    curveVertex(580, 155);
    curveVertex(600, 160);
    curveVertex(600, 375);
    curveVertex(600, 375);
    endShape();

    //mountain layer #2
    fill(230, 195, 210);
    stroke(230, 195, 210);
    point(0, 170);
    point(0, 370);
    point(10, 155);
    point(25, 145);
    point(55, 130);
    point(80, 140);
    point(105, 180);
    point(140, 200);
    point(170, 205);
    point(210, 225);
    point(250, 225);
    point(250, 370);

    beginShape();
    curveVertex(0, 370);
    curveVertex(0, 370);
    curveVertex(0, 170);
    curveVertex(10, 155);
    curveVertex(25, 145);
    curveVertex(55, 130);
    curveVertex(80, 140);
    curveVertex(105, 180);
    curveVertex(140, 200);
    curveVertex(170, 205);
    curveVertex(210, 225);
    curveVertex(250, 225);
    curveVertex(250, 370);
    curveVertex(250, 370);
    endShape();

    //mountain layer #3 (purple layer)
    fill(200, 180, 222);
    stroke(200, 180, 222);
    point(250, 390);
    point(250, 265);
    point(280, 260);
    point(300, 270);
    point(310, 280);
    point(320, 290);
    point(340, 287);
    point(350, 285);
    point(370, 270);
    point(390, 267);
    point(410, 280);
    point(430, 300);
    point(440, 298);
    point(450, 295);
    point(460, 285);
    point(490, 270);
    point(500, 260);
    point(515, 265);
    point(525, 275);
    point(535, 280);
    point(565, 276);
    point(585, 270);
    point(600, 260);

    beginShape();
    curveVertex(250, 390);
    curveVertex(250, 390);
    curveVertex(250, 265);
    curveVertex(280, 260);
    curveVertex(300, 270);
    curveVertex(310, 280);
    curveVertex(320, 290);
    curveVertex(340, 287);
    curveVertex(350, 285);
    curveVertex(370, 270);
    curveVertex(390, 267);
    curveVertex(410, 280);
    curveVertex(430, 300);
    curveVertex(440, 298);
    curveVertex(450, 295);
    curveVertex(460, 285);
    curveVertex(490, 270);
    curveVertex(500, 260);
    curveVertex(515, 265);
    curveVertex(525, 275);
    curveVertex(535, 280);
    curveVertex(565, 276);
    curveVertex(585, 270);
    curveVertex(600, 260);
    curveVertex(600, 390);
    curveVertex(600, 390);
    endShape();

    //trees layer 1 (lightest green layer)
    fill(176, 231, 228); //first tree on left
    stroke(176, 231, 228);
    triangle(0, 250, 70, 390, 0, 390); //layering triangles
    triangle(0, 200, 35, 260, 0, 260); 
    triangle(0, 230, 50, 300, 0, 300);
    triangle(0, 260, 60, 340, 0, 340);
    //second tree from the left
    triangle(75, 250, 110, 180, 145, 250);
    triangle(60, 300, 110, 220, 160, 300);
    triangle(45, 350, 110, 260, 175, 350);
    triangle(30, 390, 110, 300, 190, 390);
   //third tree from the left
    triangle(225, 195, 260, 170, 295, 195);
    triangle(222, 205, 260, 180, 298, 205);
    triangle(219, 215, 260, 190, 301, 215);
    triangle(216, 225, 260, 200, 304, 225);
    triangle(213, 235, 260, 210, 307, 235);
    triangle(210, 245, 260, 220, 310, 245);
    triangle(207, 255, 260, 230, 313, 255);
    triangle(204, 265, 260, 240, 316, 265);
    triangle(201, 275, 260, 250, 319, 275);
    triangle(198, 285, 260, 260, 322, 285);
    triangle(195, 295, 260, 270, 325, 295);
    triangle(192, 305, 260, 280, 328, 305);
    triangle(180, 315, 260, 290, 331, 315);
    triangle(177, 325, 260, 300, 334, 325);
    triangle(150, 390, 260, 260, 361, 390);
    //tree in the middle
    triangle(320, 305, 340, 200, 360, 305);
    triangle(340, 200, 320, 270, 363, 270);
    triangle(363, 300, 390, 255, 410, 300);
    triangle(358, 320, 387, 275, 415, 320);
    triangle(420, 310, 440, 270, 460, 310);
    triangle(490, 240, 480, 300, 500, 300);
    //tree on the far right
    triangle(550, 160, 560, 145, 570, 160);
    triangle(545, 170, 560, 155, 575, 170);
    triangle(540, 180, 560, 165, 580, 180);
    triangle(535, 190, 560, 175, 585, 190);
    triangle(530, 200, 560, 185, 590, 200);
    triangle(525, 210, 560, 195, 595, 210);
    triangle(520, 220, 560, 205, 600, 220);
    triangle(515, 230, 560, 215, 605, 230);
    triangle(510, 240, 560, 225, 610, 240);
    triangle(505, 250, 560, 235, 615, 250);
    triangle(500, 260, 560, 245, 620, 260);
    triangle(495, 270, 560, 255, 625, 270);
    triangle(490, 280, 560, 265, 630, 280);
    triangle(485, 290, 560, 275, 635, 290);
    triangle(480, 300, 560, 285, 640, 300);
    triangle(475, 310, 560, 295, 645, 310);
    triangle(470, 320, 560, 305, 650, 320);

    //trees layer 2 (med green layer)
    //first tree from the left
    fill(156, 208, 204);
    stroke(156, 208, 204);
    triangle(40, 200, 60, 160, 80, 200);
    triangle(35, 220, 60, 180, 85, 220);
    triangle(30, 240, 60, 200, 90, 240);
    triangle(25, 260, 60, 220, 95, 260);
    triangle(20, 280, 60, 240, 100, 280);
    triangle(15, 300, 60, 260, 105, 300);
    triangle(10, 320, 60, 280, 110, 320);
    triangle(5, 340, 60, 300, 115, 340);
    triangle(0, 360, 60, 320, 120, 360);
    triangle(-5, 380, 60, 240, 125, 380);
    triangle(-7.5, 390, 60, 250, 127.5, 390);
    //second tree from the left
    triangle(150, 320, 170, 260, 190, 320);
    triangle(145, 360, 170, 300, 195, 360);
    triangle(138, 390, 170, 330, 203, 390);
    //middle tree
    triangle(280, 245, 300, 225, 320, 245);
    triangle(270, 260, 300, 235, 330, 260);
    triangle(260, 275, 300, 245, 340, 275);
    triangle(250, 290, 300, 255, 350, 290);
    triangle(240, 305, 300, 265, 360, 305);
    triangle(230, 320, 300, 275, 370, 320);
    triangle(220, 335, 300, 285, 380, 335);
    triangle(210, 350, 300, 295, 390, 350);
    triangle(200, 365, 300, 315, 400, 365);
    triangle(190, 380, 300, 325, 410, 380);
    triangle(195, 390, 300, 330, 415, 390);
    //fourth tree from the left
    triangle(400, 320, 420, 300, 440, 320);
    triangle(395, 340, 420, 310, 445, 340);
    triangle(390, 360, 420, 320, 450, 360);
    triangle(385, 380, 420, 330, 455, 380);
    triangle(380, 390, 420, 340, 460, 390);
    //fifth tree from the left
    triangle(460, 260, 480, 240, 500, 260);
    triangle(450, 285, 480, 245, 510, 285);
    triangle(440, 310, 480, 250, 520, 310);
    triangle(430, 335, 480, 255, 530, 335);
    triangle(420, 360, 480, 260, 540, 360);
    triangle(410, 385, 480, 265, 550, 385);
    triangle(405, 390, 480, 270, 555, 390);
    //far right tree
    triangle(600, 240, 570, 280, 600, 280);
    triangle(600, 245, 550, 320, 600, 320);
    triangle(600, 250, 530, 360, 600, 360);
    triangle(600, 255, 510, 390, 600, 390);


    //trees layer 3 (darkest green layer)
    fill(131, 180, 177);
    stroke(131, 180, 177);
    //middle tree
    triangle(200, 230, 190, 260, 210, 260);
    triangle(200, 240, 185, 270, 215, 270);
    triangle(200, 250, 175, 290, 225, 290);
    triangle(200, 260, 170, 310, 230, 310);
    triangle(200, 270, 165, 330, 235, 330);
    triangle(200, 280, 160, 350, 240, 350);
    triangle(200, 290, 155, 370, 245, 370);
    triangle(200, 300, 150, 390, 250, 390);
    //first left tree
    triangle(60, 300, 90, 270, 120, 300);
    triangle(50, 320, 90, 275, 130, 320);
    triangle(40, 340, 90, 280, 140, 340);
    triangle(30, 360, 90, 285, 150, 360);
    triangle(20, 380, 90, 290, 160, 380);
    triangle(10, 390, 90, 295, 170, 390);
    //third tree from left
    triangle(370, 335, 390, 300, 410, 335);
    triangle(360, 380, 390, 305, 420, 380);
    triangle(350, 390, 390, 310, 430, 390);
    //far right tree
    triangle(515, 280, 535, 240, 555, 280);
    triangle(510, 300, 535, 245, 560, 300);
    triangle(505, 320, 535, 250, 565, 320);
    triangle(500, 340, 535, 255, 570, 340);
    triangle(495, 360, 535, 260, 575, 360);
    triangle(490, 390, 535, 265, 580, 390);

    //road
    strokeWeight(2);
    fill(144, 148, 165);
    noStroke();
    rect(0, 390, 600, 60);
    //road stripes
    stroke(242, 244, 190);
    line(0, 415, 600, 415);
    line(0, 420, 600, 420);

    //front headlights: moves with respect to mouseX so it stays connected to the car
    fill(226, 204, 128);
    stroke(226, 204, 128);
    triangle(mouseX + 100, 381, mouseX + 225, headlighttop, mouseX + 225, headlightbottom);
    
    //car that moves with respect to mouseX
    fill(239, 184, 145);
    stroke(239, 184, 145);
    rect(mouseX, 340, 100, 53); //layering shapes to build car shape
    triangle(mouseX, 340, mouseX - 3.5, 393, mouseX, 393); 
    rect(mouseX + 100, 370, 15, 23);
    triangle(mouseX + 100, 340, mouseX + 115, 370, mouseX + 100, 370);

    //white strip on top of the car that moves with respect to mouseX
    stroke(255);
    fill(255);
    quad(mouseX, 340, mouseX + 5, 335, mouseX + 95, 335, mouseX + 100, 340);

    //windows that move with respect to mouseX
    stroke(170);
    fill(170);
    rect(mouseX + 5, 346, 30, 10);
    rect(mouseX + 43, 346, 26, 10);
    quad(mouseX + 76, 346, mouseX + 97, 346, mouseX + 102, 356, mouseX + 76, 356);

    //door marks that move with respect to mouseX
    stroke(200, 175, 145);
    line(mouseX + 39, 343, mouseX + 39, 393);
    line(mouseX + 72.5, 343, mouseX + 72.5, 393);
    stroke(255);
    line(mouseX + 65, 372, mouseX + 70, 372); //door handles
    line(mouseX + 75.5, 372, mouseX + 80.5, 372); //door handles

    //wheels that move with respect to mouseX
    fill(100);
    stroke(100);
    circle(mouseX + 15, 393, 25);
    circle(mouseX + 95, 393, 25);
    //wheel covers
    fill(200);
    stroke(200);
    circle(mouseX + 15, 393, 11);
    circle(mouseX + 95, 393, 11);
    
    //front wheels that is near the headlights, move with respect to mouseX
    fill(100);
    stroke(100);
    point(mouseX + 116, 368);
    point(mouseX + 121, 370);
    point(mouseX + 121, 393);
    point(mouseX + 116, 393);

    beginShape();
    curveVertex(mouseX + 116, 368);
    curveVertex(mouseX + 116, 368);
    curveVertex(mouseX + 121, 370);
    curveVertex(mouseX + 121, 393);
    curveVertex(mouseX + 116, 393);
    curveVertex(mouseX + 116, 393);
    endShape();

    //back bumper that moves with respect to mouseX
    fill(200); 
    stroke(200);
    rect(mouseX - 5, 385, 6, 3);

}


    function mouseClicked() {
    suncolorR = suncolorR + 6; //everytime you click, the color of sun gets darker red/orange
    suncolorG = suncolorG - 9; //everytime you click, the color of sun gets darker red/orange
    suncolorB = suncolorB - 9; //everytime you click, the color of sun gets darker red/orange
    headlighttop = headlighttop - 2.5 //everytime you click, the headlight thickness should appear to increase
    headlightbottom = headlightbottom + 2.5 //everytime you click, the headlight thickness should appear to increase
    }

Project-02-Variable-Face

powerpuffDownload
//Annie Kim
//andrewID: anniekim
//Section B

var Reye= 228; //color of original eye (red)
var Geye = 175; //color of original eye (green)
var Beye = 195; //color of original eye (blue)
var HR = 255; //color of original hair (red)
var HG = 159; //color of original hair (green)
var HB = 65; //color of original hair (blue)
var pupil = 20; // diameter of pupil
var heart1r = 227; //red of heart1
var heart1g = 83; //green of heart1
var heart1b = 102; //blue of heart1
var heart2r = 232; //red of heart2
var heart2g = 138; // green of heart2
var heart2b = 173; //blue of heart 2
var backgroundr = 158 // red of background
var backgroundg = 15 // green of background
var backgroundb = 28 // blue of background
var StrokeArrow = 15; //stroke size of arrow
var RectColorR = 218; //red of right background
var RectColorG = 127; // green of right background
var RectColorB = 157; // blue of right background
var backR = 216; // red of original background
var backG = 77; // green of original background
var backB = 82; //blue of original background
var smilecurvex = 20; //width of smile
var smilecurvey = 15; //height of smile


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

function draw() {
    background(backR, backG, backB);


    //right half of background
    stroke(RectColorR, RectColorG, RectColorB);
    fill(RectColorR, RectColorG, RectColorB);
    rect(320, 0, 320, 480);


     //lines across
    stroke(248, 206, 93);
    strokeWeight(StrokeArrow);
    line(140, 380, 550, 80);
    line(65, 370, 140, 380);
    line(100, 450, 140, 380);
    fill(248, 206, 93);
    triangle(540, 57, 575, 100, 580, 60);


//heart1 forming
    fill(heart1r, heart1g, heart1b);
    strokeWeight(7);
    stroke(heart1r, heart1g, heart1b);
    triangle(171, 210, 469, 210, 320, 440);
    circle(244, 183, 155);
    circle(396, 183, 155);

//second heart layer
    fill(heart2r, heart2g, heart2b);
    stroke(heart2r, heart2g, heart2b);
    triangle(240, 240, 400, 240, 320, 360);
    circle(359, 220, 92);
    circle(281, 220, 92);

//middle hair behind the back
    fill(HR, HG, HB);
    stroke(HR, HG, HB);
    arc(320, 260, 120, 140, 0, PI, CHORD);
    triangle(320, 200, 275, 260, 365, 260);

    //body middle
    fill(Reye, Geye, Beye);
    stroke(0);
    strokeWeight(5);
    rect(295, 220, 50, 80);
    fill(0);
    rect(295, 245, 50, 30);
    fill(255);
    stroke(255);
    rect(328, 305, 15, 40);
    ellipse(297, 297, 25, 45);
    fill(0);
    stroke(0);
    arc(297, 297, 25, 45, 0, PI, CHORD); //left shoe
    arc(335.5, 337, 17, 35, 0, PI, CHORD); //right shoe

    //recovering black stroke
    stroke(0);

    //middle right arm
    fill(246, 232, 219);
    stroke(246, 232, 219);
    circle(230, 240, 30);
    circle(410, 120, 30);
    stroke(246, 232, 219);
    rect(395, 120, 30, 40);
    triangle(395, 160, 422, 164, 377, 200);
    triangle(235, 225, 295, 225, 243, 249);

 //middle bow
    fill(255, 0, 0);
    stroke(255, 0, 0);
    circle(270, 80, 25);
    circle(375, 80, 25);
    triangle(257, 89, 255, 155, 295, 170);
    strokeWeight(30);
    line(274, 85, 310, 170);
    strokeWeight(1);
    arc(320, 120, 60, 35, PI, 0);
    strokeWeight(30);
    line(375, 80, 330, 170);
    line(375, 80, 370, 175);


    //head middle
    strokeWeight(2);
    fill(246, 232, 219);
    stroke(0);
    ellipse(320, 177, 135, 110);
    

    //middle eyes
    strokeWeight(2);
    fill(255);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(Reye, Geye, Beye);
    stroke(Reye, Geye, Beye);
    circle(350, 178, 45); // color of right eye pink 
    circle(290, 178, 45); // color of left eye pink
    noFill();
    stroke(0);
    circle(283, 175, 60);
    circle(355, 175, 60);
    fill(0);
    stroke(0);
    circle(346, 180, 35); // black of right eye
    circle(294, 180, 35); // black of left eye
    fill(255);
    circle(346, 180, pupil);
    circle(294, 180, pupil);


    //middle bangs
    fill(HR, HG, HB);
    stroke(0);
    strokeWeight(1.5);
    arc(320, 150, 118, 52, PI, 0, CHORD);
    fill(246, 232, 219);
    stroke(246, 232, 219);
    triangle(320, 135, 310, 155, 330, 155);


    //overlapping head shape
    noFill();
    stroke(0);
    strokeWeight(5);
    ellipse(320, 177, 135, 110);

     //middle smile
    noFill();
    strokeWeight(2);
    arc(320, 205, smilecurvex, smilecurvey, 0, PI);
 
}
    function mouseClicked() {
    Reye = random(0, 255);
    Geye = random(0, 255);
    Beye = random(0, 255);
    HR = random(0,255);
    HG = random(0, 255);
    HB = random(0, 255);
    pupil = random(15, 35);
    heart1r = random(100, 255);
    heart1g = random(75, 90);
    heart1b = random(80, 110);
    heart2r = random(0, 100);
    heart2g = random(0, 100);
    heart2b = random(0,100);
    backgroundr = random(150, 200);
    backgroundg = random(15, 25);
    backgroundb = random(20,30);
    StrokeArrow = random(1, 20);
    RectColorR = random(200,220);
    RectColorG = random(110, 130);
    RectColorB = random(150, 160);
    backR = random(200, 255);
    backG = random(50, 100);
    backB = random(60, 100);
    smilecurvex = random(15, 45);
    smilecurvey = random(15, 45);
}

I decided to create a PowerPuff character because I thought it would be interesting to see how the appearance of the character would change with each click, and I wanted to see if I could get it to look like the other PowerPuff characters by continuously clicking. I worked on most of the shapes (such as the bow, the hair, the hearts, etc) by putting together a variety of shapes. It was a little challenging to make sure everything aligned perfectly. One of the hardest things was making sure that everything remained proportionate to the actual character from the show. I think that this does a nice job of making this character essentially customizable because you can keep clicking until you are happy with the color and sizes of different features.

LookingOutwards-02: Generative Art

I truly admire “Flow Field #1 – Reinterpreting the Starry Night” (2018) by the software and net artist, LIA. The first thing that I had noticed about this work was that the movement of the flow fields were so hypnotizing. Despite being two-dimensional lines flowing, it showed a lot of smooth feather-like texture and movement. I admired this because I was impressed at how it showed a lot of three-dimensional depth despite its two-dimensinal form. Though I do not know exactly what algorithm was used to create this work, it is said that LIA took the original color palette of Starry Night, and translated the work into her own interpretation with a custom-made computer code using the flow fields technique. This technique reveals the lines and loops of the artwork into these flow fields to present depth and motion throughout the canvas. Based on LIA’s other works as well, it is obvious that this artist enjoys working with lines and shapes, and distorting them in an ethereal manner, where the projects look like a hallucinated and imagined state of mind.  

Flow Fields (Reinterpreting Van Gogh)

Title: “Flow Field #1 – Reinterpreting the Starry Night by Vincent Van Gogh”

Artist: LIA

Year of Creation: 2018