Project 3: Dynamic Drawing

chapmanDynamic

//ELise Chapman
//ejchapma
//Section D

function setup() {
    createCanvas(450,600);
    rectMode(CENTER);
}

var stormSize=1;
var rainPos=200;
var rainV=1;

function draw() { //cloud
    noStroke();
    background(149,209,216);
    //as the mouse moves down, the sky gets darker
    if (mouseY<100) {
        background(149,209,216);
        stormSize=1;
    } else if (mouseY>=100 & mouseY<200) {
        background(121,176,190);
        stormSize=2;
    } else if (mouseY>=200 & mouseY<300) {
        background(85,137,157);
        stormSize=3;
    } else if (mouseY>=300 & mouseY<400) {
        background(62,103,124);
        stormSize=4;
    } else if (mouseY>=400 & mouseY<500) {
        background(52,82,102);
        stormSize=5;
    } else {
        background(43,63,81);
        stormSize=6;
    }

    //as the mouse moves left and right, the wind blows
    push();
    rotate(-radians(mouseX/50));

    //as the mouse moves down, the rain gets heavier
    fill(90,195,255);
    rect(width/2,rainPos,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2+25,rainPos+50,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2+50,rainPos+250,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2+75,rainPos+150,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2+100,rainPos+75,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2-25,rainPos+100,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2-50,rainPos-5,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2-75,rainPos+200,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2-100,rainPos+75,5+mouseY/50,25+mouseY/20,80,80,80,80);
    if (stormSize==1) {
        rainPos=rainPos;
        rainV=3;
    } else if (stormSize==2) {
        rainPos=rainPos;
        rainV=5;
    } else if (stormSize==3) {
        rainPos=rainPos;
        rainV=6.5;
    } else if (stormSize==4) {
        rainPos=rainPos;
        rainV=7;
    } else if (stormSize==5) {
        rainPos=rainPos;
        rainV=8.25;
    } else if (stormSize==6) {
        rainPos=rainPos;
        rainV=9.5;
    }
    rainPos += rainV;
    if (rainPos>height+100) {
        rainPos=200;
    }

    //as the mouse moves down, the cloud gets smaller and darker
    pop();
    if (stormSize==1) {
        fill(207,215,218);
    } else if (stormSize==2) {
        fill(170,180,184);
    } else if (stormSize==3) {
        fill(137,154,162);
    } else if (stormSize==4) {
        fill(128,144,151);
    } else if (stormSize==5) {
        fill(104,118,124);
    } else if (stormSize==6) {
        fill(96,105,109);
    }
    ellipse((width/2)+25,(110+mouseY/50),(150-mouseY/10));
    rect(width/2,160,(300-mouseY/10),(100-mouseY/20),80,80,80,80);
    ellipse((width/2)-50,(125+mouseY/50),(100-mouseY/30));
    ellipse((width/2)-20,130,50+mouseY/20);
    ellipse((width/2)+60,140,40+mouseY/20);

    //when the rain is hard and the mouse is clicked, lightening strikes
    if (mouseIsPressed) {
        if (stormSize==5 || stormSize==6) {
        stroke(260);
        strokeWeight(10);
        line(225,200,125,350);
        line(125,350,250,400);
        line(250,400,200,710);
        }
    }
}

When thinking of things to make, I started by thinking about natural processes. I love watching the rain and how varied rain occurs, so I decided to move with that. I knew I wanted the rain to get bigger as the mouse moved down, along with the sky and cloud growing darker to simulate heavier rain. I also knew I wanted to include lighting on a click – just because lighting is fun. I think I went in with a clear idea in mind of what I wanted, so at that point it was just writing the program.