Hannahk2-Project03-DynamicDrawing

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Assignment-01

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(0, 0, 0);

//background color change
//as mouse moves down, color changes from blue 
//to lighter blue
    var Rc = map(mouseY, 0, height, 200, 260);
    var Gc = map(mouseY, 0, height, 240, 255);
    var Bc = map(mouseY, 0, height, 250, 255);

    noStroke();
    fill(Rc, Gc, Bc);
    rect(0, 0, 600, 600);

//circle background color change
//as mouse moves down, color changes from white
//to blue
    var circSize =map(mouseY, 0, height, 0, 400);
    var Rc1 = map(mouseY, 0, height, 260, 200);
    var Gc1 = map(mouseY, 0, height, 255, 240);
    var Bc1 = map(mouseY, 0, height, 255, 250);
noStroke();
fill(Rc1, Gc1, Bc1);
ellipseMode(CENTER);
ellipse(294, 242, circSize, circSize);

//top chopstick
var topChop = map(mouseY, 0, 400, 92, 300);
stroke(198, 58, 61);
strokeWeight(9);
line(27, 60, 291, topChop);

//noodle 1
var nood1 = map(mouseY, 0, 400, 76, 310);
stroke(221, 215, 153);
strokeWeight(6);
line(240, nood1, 240, 311);

//noodle2
var nood2 = map(mouseY, 0, 400, 76, 312);
stroke(221, 215, 153);
strokeWeight(6);
line(252, nood1, 253, 313);

//noodle3
var nood3 = map(mouseY, 0, 400, 76, 312);
stroke(221, 215, 153);
strokeWeight(6);
line(266, nood3, 266, 316);

//bottom chopstick
var bottomChop = map(mouseY, 0, 400, 107, 310);
stroke(198, 58, 61);
strokeWeight(9);
line(5, 111, 292, bottomChop);

noStroke();
//draw ramen cup
fill (233, 231, 226);
rect (164, 261, 272, 8);
quad (175, 275, 210, 560, 386, 561, 428, 277);
noStroke();
arc(297, 561, 176, 10, TWO_PI, PI);

//draw top row of yellow marks
fill(194, 198, 89);
rect(182, 300, 3, 24);
rect(188, 300, 3, 24);
rect(194, 300, 3, 24);
rect(200, 301, 3, 24);
rect(207, 301, 3, 24);
rect(214, 302, 3, 24);
rect(222, 302, 3, 24);
rect(230, 302, 3, 24);
rect(239, 303, 3, 24);
rect(248, 303, 3, 24);
rect(257, 303, 3, 24);
rect(267, 304, 3, 25);
rect(277, 304, 3, 25);
rect(287, 304, 3, 25);
rect(297, 304, 3, 25);
rect(307, 304, 3, 25);
rect(317, 303, 3, 25);
rect(326, 303, 3, 24);
rect(335, 303, 3, 24);
rect(344, 303, 3, 24);
rect(352, 303, 3, 24);
rect(361, 303, 3, 24);
rect(369, 303, 3, 24);
rect(377, 303, 3, 24);
rect(385, 302, 3, 24);
rect(392, 302, 3, 24);
rect(399, 301, 3, 24);
rect(405, 300, 3, 24);
rect(411, 300, 3, 24);
rect(417, 300, 3, 24);

//draw bottom row of yellow marks
fill(194, 198, 89);
rect(207, 501, 3, 24);
rect(214, 502, 3, 24);
rect(222, 502, 3, 24);
rect(230, 502, 3, 24);
rect(239, 503, 3, 24);
rect(248, 503, 3, 24);
rect(257, 503, 3, 24);
rect(267, 504, 3, 25);
rect(277, 504, 3, 25);
rect(287, 504, 3, 25);
rect(297, 504, 3, 25);
rect(307, 504, 3, 25);
rect(317, 503, 3, 25);
rect(326, 503, 3, 24);
rect(335, 503, 3, 24);
rect(344, 503, 3, 24);
rect(352, 503, 3, 24);
rect(361, 503, 3, 24);
rect(369, 503, 3, 24);
rect(377, 503, 3, 24);
rect(385, 502, 3, 24);

//draw red background for middle logo 
fill(198, 58, 61);
rect(272, 354, 79, 58);
arc(346, 374, 50, 40, PI+QUARTER_PI, HALF_PI);
ellipseMode(CENTER);
ellipse(263, 383, 59, 63);
quad(197, 408, 204, 462, 392, 465, 398, 408);
ellipse(248, 437, 59, 63);
ellipse(278, 437, 59, 63);

//draw text for cup
textSize(50);
textStyle(BOLD);
fill(255, 255, 255);
text("CUP", 248, 400);

//draw text for noodles
textSize(38);
textStyle(BOLD);
fill(255, 255, 255);
text("NOODLES", 203, 450);

//draw nissin logo with text
fill(177, 27, 38);
arc(208, 357, 36, 38, PI, TWO_PI);
textSize(8);
fill(255, 255, 255);
text("NISSIN", 195, 354);

//bottom red line
strokeWeight(1);
stroke(198, 58, 61);
line(210, 535, 386, 536);

//top red line
line(175, 289, 428, 291);

//white shine on cup
fill(255, 255, 255, 90);
noStroke();
quad(373, 272, 348, 568, 375, 564, 407, 272);
}

 

This project was pretty fun for me, though I did not know where to start with the commands and which commands to choose to make my code do what I wanted it to do. I enjoyed creating the cup of noodles especially, since I always eat cup noodles.

Leave a Reply