juyeonk – project03 – dynamicdrawing

sketch

//Claire Koh
//Section E
//juyeonk@andrew.cmu.edu


//variables used to determine the y-coordinates of each rain strand
var rainY1 = 0;
var rainY2 = 0;
var rainY3 = 0;
var rainY4 = 0;
var rainY5 = 0;
var rainY6 = 0;
var rainY7 = 0;
var rainY8 = 0;
var rainY9 = 0;
var rainY10 = 0;
var rainY11 = 0;
var rainY12 = 0;
var rainY13 = 0;
var rainY14 = 0;
var rainY15 = 0;
var rainY16 = 0;
var rainY17 = 0;
var rainY18 = 0;
var rainY19 = 0;
var rainY20 = 0;
var rainY21 = 0;
var rainY22 = 0;
var rainY23 = 0;
var rainY24 = 0;
var rainY25 = 0;
var rainY26 = 0;
var rainY27 = 0;
var rainY28 = 0;
var rainY29 = 0;
var rainY30 = 0;
var rainY31 = 0;
var rainY32 = 0;
var rainY33 = 0;
var rainY34 = 0;
var rainY35 = 0;
var rainY36 = 0;
var rainY37 = 0;
var rainY38 = 0;
var rainY39 = 0;
var rainY40 = 0;
var rainY41 = 0;
var rainY42 = 0;
var rainY43 = 0;
var rainY44 = 0;
var rainY45 = 0;
var rainY46 = 0;
var rainY47 = 0;
var rainY48 = 0;
var rainY49 = 0;
var rainY50 = 0;
var rainY51 = 0;
var rainY52 = 0;
var rainY53 = 0;
var rainY54 = 0;
var rainY55 = 0;
var rainY56 = 0;
var rainY57 = 0;
var rainY58 = 0;
var rainY59 = 0;
var rainY60 = 0;
var rainY61 = 0;
var rainY62 = 0;
var rainY63 = 0;



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


function draw() {
    
    //variables used to determine the x coordinate of each rain strand
    var x = 10;
    var x2 = 20;
    var x3 = 30;
    var x4 = 40;
    var x5 = 50;
    var x6 = 60;
    var x7 = 70;
    var x8 = 80; 
    var x9 = 90;
    var x10 = 100;
    var x11 = 110;
    var x12 = 120;
    var x13 = 130;
    var x14 = 140;
    var x15 = 150;
    var x16 = 160;
    var x17 = 170;
    var x18 = 180;
    var x19 = 190;
    var x20 = 200;
    var x21 = 210;
    var x22 = 220;
    var x23 = 230;
    var x24 = 240;
    var x25 = 250;
    var x26 = 260;
    var x27 = 270;
    var x28 = 280;
    var x29 = 290;
    var x30 = 300;
    var x31 = 310;
    var x32 = 320;
    var x33 = 330;
    var x34 = 340;
    var x35 = 350;
    var x36 = 360;
    var x37 = 370;
    var x38 = 380;
    var x39 = 390;
    var x40 = 400;
    var x41 = 410;
    var x42 = 420;
    var x43 = 430;
    var x44 = 440;
    var x45 = 450;
    var x46 = 460;
    var x47 = 470;
    var x48 = 480;
    var x49 = 490;
    var x50 = 500;
    var x51 = 510;
    var x52 = 520;
    var x53 = 530;
    var x54 = 540;
    var x55 = 550;
    var x56 = 560;
    var x57 = 570;
    var x58 = 580;
    var x59 = 590;
    var x60 = 600;
    var x61 = 610;
    var x62 = 620;
    var x63 = 630;
    
    strokecolor = 255;
    background(0);
    
    
    //rain
    stroke(255);
    line(x, rainY1 - 100, x, rainY1);
    rainY1 = rainY1 + 20;
    
    //when the rain goes beyond the bottom edge of the canvas it moves back to its original coordinate point and repeats
    if (rainY1 >= 520) {
        rainY1 = 0;
    }
    
    //it resets itself when it hits the umbrella as well
    if (abs(mouseX - 10) <= 40 & rainY1 >= mouseY) {
        rainY1 = 0;
    }
    
    stroke(255);
    line(x2, rainY2 - 80, x2, rainY2);
    rainY2 = rainY2 + 10;
    
    if (rainY2 >= 520) {
        rainY2 = 0;
    }
    if (abs(mouseX - 20) <= 40 & rainY2 >= mouseY) {
        rainY2 = 0;
    }
    
    line(x3, rainY3 - 150, x3, rainY3);
    rainY3 = rainY3 + 5;
    
    if (rainY3 >= 520) {
        rainY3 = 0;
    }
    
    if (abs(mouseX - 30) <= 40 & rainY3 >= mouseY) {
        rainY3 = 0;
    }
    
    line(x4, rainY4 - 40, x4, rainY4);
    rainY4 = rainY4 + 10;
    
    if (rainY4 >= 520) {
        rainY4 = 0;
    }
    if (abs(mouseX - x4) <= 40 & rainY4 >= mouseY) {
        rainY4 = 0;
    }
    
    
    line(x5, rainY5 - 100, x5, rainY5);
    rainY5 = rainY5 + 12;
    
    if (rainY5 >= 520) {
        rainY5 = 0;
    }
    if (abs(mouseX - 50) <= 40 & rainY5 >= mouseY) {
        rainY5 = 0;
    }
    
    line(x6, rainY6 - 180, x6, rainY6);
    rainY6 = rainY6 + 10;
    
    if (rainY6 >= 520) {
        rainY6 = 0;
    }
    if (abs(mouseX - x6) <= 40 & rainY6 >= mouseY) {
        rainY6 = 0;
    }
    
    line(x7, rainY7 - 120, x7, rainY7);
    rainY7 = rainY7 + 14;
    
    if (rainY7 >= 520) {
        rainY7 = 0;
    }
    if (abs(mouseX - x7) <= 40 & rainY7 >= mouseY) {
        rainY7 = 0;
    }
    
    line(x8, rainY8 - 90, x8, rainY8);
    rainY8 = rainY8 + 17;
    
    if (rainY8 >= 520) {
        rainY8 = 0;
    }
    if (abs(mouseX - x8) <= 40 & rainY8 >= mouseY) {
        rainY8 = 0;
    }
    
    line(x9, rainY9 - 55, x9, rainY9);
    rainY9 = rainY9 + 8;
    
    if (rainY9 >= 520) {
        rainY9 = 0;
    }
    if (abs(mouseX - x9) <= 40 & rainY9 >= mouseY) {
        rainY9 = 0;
    }
    
    line(x10, rainY10 - 70, x10, rainY10);
    rainY10 = rainY10 + 20;
    
    if (rainY10 >= 560) {
        rainY10 = 0;
    }
    if (abs(mouseX - x10) <= 40 & rainY10 >= mouseY) {
        rainY10 = 0;
    }
    
    line(x11, rainY11 - 170, x11, rainY11);
    rainY11 = rainY11 + 20;
    
    if (rainY11 >= 480) {
        rainY11 = 0;
    }
    if (abs(mouseX - x11) <= 40 & rainY11 >= mouseY) {
        rainY11 = 0;
    }
    
    line(x12, rainY12 - 90, x12, rainY12);
    rainY12 = rainY12 + 10;
    
    if (rainY12 >= 480) {
        rainY12 = 0;
    }
    if (abs(mouseX - x12) <= 40 & rainY12 >= mouseY) {
        rainY12 = 0;
    }
    
    line(x13, rainY13 - 120, x13, rainY13);
    rainY13 = rainY13 + 17;
    
    if (rainY13 >= 520) {
        rainY13 = 0;
    }
    if (abs(mouseX - x13) <= 40 & rainY13 >= mouseY) {
        rainY13 = 0;
    }
    
    line(x14, rainY14 - 85, x14, rainY14);
    rainY14 = rainY14 + 5;
    
    if (rainY14 >= 480) {
        rainY14 = 0;
    }
    if (abs(mouseX - x14) <= 40 & rainY14 >= mouseY) {
        rainY14 = 0;
    }
    
    line(x15, rainY15 - 70, x15, rainY15);
    rainY15 = rainY15 + 15;
    
    if (rainY15 >= 520) {
        rainY15 = 0;
    }
    if (abs(mouseX - x15) <= 40 & rainY15 >= mouseY) {
        rainY15 = 0;
    }
    
    line(x16, rainY16 - 20, x16, rainY16);
    rainY16 = rainY16 + 17;
    
    if (rainY16 >= 520) {
        rainY16 = 0;
    }
    if (abs(mouseX - x16) <= 40 & rainY16 >= mouseY) {
        rainY16 = 0;
    }
    
    line(x17, rainY17 - 90, x17, rainY17);
    rainY17 = rainY17 + 20;
    
    if (rainY17 >= 520) {
        rainY17 = 0;
    }
    if (abs(mouseX - x17) <= 40 & rainY17 >= mouseY) {
        rainY17 = 0;
    }
    
    line(x18, rainY18 - 80, x18, rainY18);
    rainY18 = rainY18 + 11;
    
    if (rainY18 >= 480) {
        rainY18 = 0;
    }
    if (abs(mouseX - x18) <= 40 & rainY18 >= mouseY) {
        rainY18 = 0;
    }
    
    line(x19, rainY19 - 150, x19, rainY19);
    rainY19 = rainY19 + 10;
    
    if (rainY19 >= 480) {
        rainY19 = 0;
    }
    if (abs(mouseX - x19) <= 40 & rainY19 >= mouseY) {
        rainY19 = 0;
    }
    
    line(x20, rainY20 - 40, x20, rainY20);
    rainY20 = rainY20 + 7;
    
    if (rainY20 >= 520) {
        rainY20 = 0;
    }
    if (abs(mouseX - x20) <= 40 & rainY20 >= mouseY) {
        rainY20 = 0;
    }
    
    
    line(x21, rainY21 - 100, x21, rainY21);
    rainY21 = rainY21 + 12;
    
    if (rainY21 >= 520) {
        rainY21 = 0;
    }
    if (abs(mouseX - x21) <= 40 & rainY21 >= mouseY) {
        rainY21 = 0;
    }
    
    
    line(x22, rainY22 - 180, x22, rainY22);
    rainY22 = rainY22 + 19;
    
    if (rainY22 >= 520) {
        rainY22 = 0;
    }
    if (abs(mouseX - x22) <= 40 & rainY22 >= mouseY) {
        rainY22 = 0;
    }
    
    line(x23, rainY23 - 110, x23, rainY23);
    rainY23 = rainY23 + 14;
    
    if (rainY23 >= 480) {
        rainY23 = 0;
    }
    if (abs(mouseX - x23) <= 40 & rainY23 >= mouseY) {
        rainY23 = 0;
    }
    
    line(x24, rainY24 - 90, x24, rainY24);
    rainY24 = rainY24 + 17;
    
    if (rainY24 >= 520) {
        rainY24 = 0;
    }
    if (abs(mouseX - x24) <= 40 & rainY24 >= mouseY) {
        rainY24 = 0;
    }
    
    line(x25, rainY25 - 55, x25, rainY25);
    rainY25 = rainY25 + 20;
    
    if (rainY25 >= 520) {
        rainY25 = 0;
    }
    if (abs(mouseX - x25) <= 40 & rainY25 >= mouseY) {
        rainY25 = 0;
    }
    
    line(x26, rainY26 - 75, x26, rainY26);
    rainY26 = rainY26 + 15;
    
    if (rainY26 >= 520) {
        rainY26 = 0;
    }
    if (abs(mouseX - x26) <= 40 & rainY26 >= mouseY) {
        rainY26 = 0;
    }
    
    line(x27, rainY27 - 165, x27, rainY27);
    rainY27 = rainY27 + 19;
    
    if (rainY27 >= 480) {
        rainY27 = 0;
    }
    if (abs(mouseX - x27) <= 40 & rainY27 >= mouseY) {
        rainY27 = 0;
    }
    
    line(x28, rainY28 - 90, x28, rainY28);
    rainY28 = rainY28 + 10;
    
    if (rainY28 >= 480) {
        rainY28 = 0;
    }
    if (abs(mouseX - x28) <= 40 & rainY28 >= mouseY) {
        rainY28 = 0;
    }
    
    line(x29, rainY29 - 120, x29, rainY29);
    rainY29 = rainY29 + 18;
    
    if (rainY29 >= 520) {
        rainY29 = 0;
    }
    if (abs(mouseX - x29) <= 40 & rainY29 >= mouseY) {
        rainY29 = 0;
    }
    
    line(x30, rainY30 - 85, x30, rainY30);
    rainY30 = rainY30 + 7;
    
    if (rainY30 >= 520) {
        rainY30 = 0;
    }
    if (abs(mouseX - x30) <= 40 & rainY30 >= mouseY) {
        rainY30 = 0;
    }
    
    line(x31, rainY31 - 70, x31, rainY31);
    rainY31 = rainY31 + 14;
    
    if (rainY31 >= 550) {
        rainY31 = 0;
    }
    if (abs(mouseX - x31) <= 40 & rainY31 >= mouseY) {
        rainY31 = 0;
    }
    
    line(x32, rainY32 - 50, x32, rainY32);
    rainY32 = rainY32 + 17;
    
    if (rainY32 >= 480) {
        rainY32 = 0;
    }
    if (abs(mouseX - x32) <= 40 & rainY32 >= mouseY) {
        rainY32 = 0;
    }
    
    line(x33, rainY33 - 170, x33, rainY33);
    rainY33 = rainY33 + 18;
    
    if (rainY33 >= 550) {
        rainY33 = 0;
    }
    if (abs(mouseX - x33) <= 40 & rainY33 >= mouseY) {
        rainY33 = 0;
    }
    
    line(x34, rainY34 - 85, x34, rainY34);
    rainY34 = rainY34 + 5;
    
    if (rainY34 >= 550) {
        rainY34 = 0;
    }
    if (abs(mouseX - x34) <= 40 & rainY34 >= mouseY) {
        rainY34 = 0;
    }
    
    line(x35, rainY35 - 70, x35, rainY35);
    rainY35 = rainY35 + 15;
    
    if (rainY35 >= 550) {
        rainY35 = 0;
    }
    if (abs(mouseX - x35) <= 40 & rainY35 >= mouseY) {
        rainY35 = 0;
    }
    
    line(x36, rainY36 - 50, x36, rainY36);
    rainY36 = rainY36 + 10;
    
    if (rainY36 >= 550) {
        rainY36 = 0;
    }
    if (abs(mouseX - x36) <= 40 & rainY36 >= mouseY) {
        rainY36 = 0;
    }
    
    line(x37, rainY37 - 120, x37, rainY37);
    rainY37 = rainY37 + 12;
    
    if (rainY37 >= 550) {
        rainY37 = 0;
    }
    if (abs(mouseX - x37) <= 40 & rainY37 >= mouseY) {
        rainY37 = 0;
    }
    
    line(x38, rainY38 - 73, x38, rainY38);
    rainY38 = rainY38 + 11;
    
    if (rainY38 >= 480) {
        rainY38 = 0;
        }
    if (abs(mouseX - x38) <= 40 & rainY38 >= mouseY) {
        rainY38 = 0;
    }
    
    line(x39, rainY39 - 50, x39, rainY39);
    rainY39 = rainY39 + 20;
    
    if (rainY39 >= 550) {
        rainY39 = 0;
    }
    if (abs(mouseX - x39) <= 40 & rainY39 >= mouseY) {
        rainY39 = 0;
    }
    
    line(x40, rainY40 - 130, x40, rainY40);
    rainY40 = rainY40 + 10;
    
    if (rainY40 >= 520) {
        rainY40 = 0;
    }
    if (abs(mouseX - x40) <= 40 & rainY40 >= mouseY) {
        rainY40 = 0;
    }
    
    line(x41, rainY41 - 100, x41, rainY41);
    rainY41 = rainY41 + 19;
    
    if (rainY41 >= 550) {
        rainY41 = 0;
    }
    if (abs(mouseX - x41) <= 40 & rainY41 >= mouseY) {
        rainY41 = 0;
    }
    
    line(x42, rainY42 - 82, x42, rainY42);
    rainY42 = rainY42 + 12.5;
    
    if (rainY42 >= 480) {
        rainY42 = 0;
    }
    if (abs(mouseX - x42) <= 40 & rainY42 >= mouseY) {
        rainY42 = 0;
    }
    
    line(x43, rainY43 - 103, x43, rainY43);
    rainY43 = rainY43 + 16.5;
    
    if (rainY43 >= 480) {
        rainY43 = 0;
    }
    if (abs(mouseX - x43) <= 40 & rainY43 >= mouseY) {
        rainY43 = 0;
    }
    
    line(x44, rainY44 - 71, x44, rainY44);
    rainY44 = rainY44 + 7.5;
    
    if (rainY44 >= 480) {
        rainY44 = 0;
    }
    if (abs(mouseX - x44) <= 40 & rainY44 >= mouseY) {
        rainY44 = 0;
    }
    
    line(x45, rainY45 - 59, x45, rainY45);
    rainY45 = rainY45 + 22.5;
    
    if (rainY45 >= 480) {
        rainY45 = 0;
    }
    if (abs(mouseX - x45) <= 40 & rainY45 >= mouseY) {
        rainY45 = 0;
    }
    
    line(x46, rainY46 - 117, x46, rainY46);
    rainY46 = rainY46 + 10;
    
    if (rainY46 >= 480) {
        rainY46 = 0;
    }
    if (abs(mouseX - x46) <= 40 & rainY46 >= mouseY) {
        rainY46 = 0;
    }
    
    line(x47, rainY47 - 57, x47, rainY47);
    rainY47 = rainY47 + 18.7;
    
    if (rainY47 >= 480) {
        rainY47 = 0;
    }
    if (abs(mouseX - x47) <= 40 & rainY47 >= mouseY) {
        rainY47 = 0;
    }
    
    line(x48, rainY48 - 113, x48, rainY48);
    rainY48 = rainY48 + 21;
    
    if (rainY48 >= 480) {
        rainY48 = 0;
    }
    if (abs(mouseX - x48) <= 40 & rainY48 >= mouseY) {
        rainY48 = 0;
    }
    
    line(x49, rainY49 - 88, x49, rainY49);
    rainY49 = rainY49 + 8.5;
    
    if (rainY49 >= 480) {
        rainY49 = 0;
    }
    if (abs(mouseX - x49) <= 40 & rainY49 >= mouseY) {
        rainY49 = 0;
    }
    
    line(x50, rainY50 - 151, x50, rainY50);
    rainY50 = rainY50 + 19;
    
    if (rainY50 >= 520) {
        rainY50 = 0;
    }
    if (abs(mouseX - x50) <= 40 & rainY50 >= mouseY) {
        rainY50 = 0;
    }
    
    line(x51, rainY51 - 70, x51, rainY51);
    rainY51 = rainY51 + 11.3;
    
    if (rainY51 >= 480) {
        rainY51 = 0;
    }
    if (abs(mouseX - x51) <= 40 & rainY51 >= mouseY) {
        rainY51 = 0;
    }
    
    line(x52, rainY52 - 98, x52, rainY52);
    rainY52 = rainY52 + 13;
    
    if (rainY52 >= 520) {
        rainY52 = 0;
    }
    if (abs(mouseX - x52) <= 40 & rainY52 >= mouseY) {
        rainY52 = 0;
    }
    
    line(x53, rainY53 - 74, x53, rainY53);
    rainY53 = rainY53 + 10;
    
    if (rainY53 >= 560) {
        rainY53 = 0;
    }
    if (abs(mouseX - x53) <= 40 & rainY53 >= mouseY) {
        rainY53 = 0;
    }
    
    line(x54, rainY54 - 129, x54, rainY54);
    rainY54 = rainY54 + 15;
    
    if (rainY54 >= 560) { 
        rainY54 = 0;
    }
    if (abs(mouseX - x54) <= 40 & rainY54 >= mouseY) {
        rainY54 = 0;
    }
    
    line(x55, rainY55 - 61, x55, rainY55);
    rainY55 = rainY55 + 16.5;
    
    if (rainY55 >= 520) {
        rainY55 = 0;
    }
    if (abs(mouseX - x55) <= 40 & rainY55 >= mouseY) {
        rainY55 = 0;
    }
    
    line(x56, rainY56 - 181, x56, rainY56);
    rainY56 = rainY56 + 20;
    
    if (rainY56 >= 540) { 
        rainY56 = 0;
    }
    if (abs(mouseX - x56) <= 40 & rainY56 >= mouseY ) {
        rainY56 = 0;
    }
    
    line(x57, rainY57 - 59, x57, rainY57);
    rainY57 = rainY57 + 11;
    
    if (rainY57 >= 520) {
        rainY57 = 0;
    }
    if (abs(mouseX - x57) <= 40 & rainY57 >= mouseY) {
        rainY57 = 0;
    }
    
    line(x58, rainY58 - 113, x58, rainY58);
    rainY58 = rainY58 + 8;
    
    if (rainY58 >= 520) {
        rainY58 = 0;
    }
    if (abs(mouseX - x58) <= 40 & rainY58 >= mouseY) {
        rainY58 = 0;
    }
    
    line(x59, rainY59 - 70, x59, rainY59);
    rainY59 = rainY59 + 10;
    
    if (rainY59 >= 560) {
        rainY59 = 0;
    }
    if (abs(mouseX - x59) <= 40 & rainY59 >= mouseY) {
        rainY59 = 0;
    }
    
    line(x60, rainY60 - 100, x60, rainY60);
    rainY60 = rainY60 + 10;
    
    if (rainY60 >= 540) {
        rainY60 = 0;
    }
    if (abs(mouseX - x60) <= 40 & rainY60 >= mouseY) {
        rainY60 = 0;
    }
    
    line(x61, rainY61 - 120, x61, rainY61);
    rainY61 = rainY61 + 12;
    
    if (rainY61 >= 560) {
        rainY61 = 0;
    }
    if (abs(mouseX - x61) <= 40 & rainY61 >= mouseY) {
        rainY61 = 0;
    }
   
    line(x62, rainY62 - 55, x62, rainY62);
    rainY62 = rainY62 + 20;
    
    if (rainY62 >= 560) {
        rainY62 = 0;
    }
    if (abs(mouseX - x62) <= 40 & rainY62 >= mouseY) {
        rainY62 = 0;
    }
    
    line(x63, rainY63 - 80, x63, rainY63);
    rainY63 = rainY63 + 18;
    
    if (rainY62 >= 540) {
        rainY62 = 0;
    }
    if (abs(mouseX - x63) <= 40 & rainY63 >= mouseY) {
        rainY63 = 0;
    }
    
    //the person. Your goal is to block all the rain from this person. He/She will be happy if the umbrella's on top of him/her, but will be sad and crying if gets rained on. Also he/she will blush if you help him/her out!
    var red = constrain(abs(520-mouseX), 0, 520);
    var dir = - 1;
    var personposition = 520;
    
    noStroke();
    fill(255, 255 - (520-red)/8, 255 - (520-red)/8);
    ellipse(personposition, 300, 35, 35);
    
    
    
    
    
    //tears: length of the tears depends on the distance from the person to the umbrella. They get longer if the umbrella moves further away from the person, and get shorter if it moves closer. They will disappear if the cursor is exactly on top center of the person. 
    var rectY = constrain(abs(520-mouseX), 0, 530);
    fill(117, 255, 247);
    rect(525, 293, 5, rectY/52);
    
    fill(117, 255, 247);
    rect(510, 293, 5, rectY/52);
    
    
    //mouth: will make a sad face if the umbrella is far; will make a happy face if the umbrella is close
    stroke(0);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(510, 308 + abs(520-(mouseX))/65);
    curveVertex(515, 308 + abs(520-(mouseX))/65-4);
    curveVertex(518, 308);
    curveVertex(522, 308);
    curveVertex(525, 308 + abs(520-(mouseX))/65-4);
    curveVertex(530, 308 + abs(520-(mouseX))/65);
    endShape();
    
    
    //umbrella: moves with the mouse. It can block the rain!!!
    noStroke();
    fill(255);
    arc(mouseX, mouseY, 80, 80, HALF_PI+HALF_PI, TWO_PI);
    
    fill(255);
    rect(mouseX - 2, mouseY, 4, 30);
    
    fill(255);
    rect(mouseX - 7, mouseY + 26, 5, 4);
    
    fill(255);
    ellipse(mouseX - 7, mouseY + 28, 4, 4);
    
    
    
    
    
}



The most difficult part of this project was to code each strand of rain. It was more tedious than hard, but assigning random lengths and speed to each strand was definitely not easy.

You can move around the mouse to change the location of the umbrella.

I wish I could make the code take the mouseY into account as well so that the person wouldn’t smiling if the umbrella was below him/her.

Author: Claire

B.Arch Class of 2021 (Sophomore)

Leave a Reply