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

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

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

}
}

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

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

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

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.

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

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

strokeWeight(2);
fill(144, 148, 165);
noStroke();
rect(0, 390, 600, 60);
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
}

Project-02-Variable-Face

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

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

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.

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

Artist: LIA

Year of Creation: 2018