mjeong1-Project-03-Dynamic Drawing-Section A

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-03
var a;
var x = 400;
var y = 400;
var cloud = 100;
var dir = 1;
var dir2 =1;
var speed = 4;
var speed2 = 1;
var diam = 50;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(168,204,239);
    //sunny background
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        background(124,146,181);
    }
    //cloudy background
    noStroke();
    fill(150,234,148);
    rect(0,390,640,height - 350);
    //sunny ground
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(107,145,106);
        rect(0,390,640,height - 350);
    }
    //cloudy ground


    fill(206,166,124);
    strokeWeight(1);
    stroke(255);
    rect(width/2 - 4,height/2 - 4,8,200);
    stroke(255);
    //1st windmill stick


    push();
    translate(width/2,height/2);
    var a = atan2(mouseY-height/2,mouseX-width/2);
    rotate(a);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(255,105,113);
    }
    else {fill(100);}
    triangle(-50,-50,0,-50,0,0);
    triangle(-50,-50,-100,0,0,0);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(118,135,255);
    }
    else {fill(100);}
    triangle(0,0,0,-100,50,-50);
    triangle(0,0,50,-50,50,0);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(118,255,118);
    }
    else {fill(100);}
    triangle(0,0,100,0,50,50);
    triangle(0,0,50,50,0,50);
    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        fill(255,242,118);
    }
    else {fill(100);}
    triangle(0,0,0,100,-50,50);
    triangle(0,0,-50,50,-50,0);
    pop();

    fill(0);
    ellipse(width/2,height/2,10,10);
    //center windmill clockwise


    push();
    translate(width/2 - 200, height/2 + 100);
    var a = atan2(mouseY-height/2,mouseX-width/2);
    rotate(-a);
    if (dist(mouseX,mouseY,width/2,height/2)<=50) {
        fill(158,118,255);
    }
    else {fill(100);}
    triangle(-25,-25,0,-25,0,0);
    triangle(-25,-25,-50,0,0,0);
    triangle(0,0,0,-50,25,-25);
    triangle(0,0,25,-25,25,0);
    triangle(0,0,50,0,25,25);
    triangle(0,0,25,25,0,25);
    triangle(0,0,0,50,-25,25);
    triangle(0,0,-25,25,-25,0);
    pop();
    //left windmill counterclockwise 

    push();
    translate(width/2 + 200, height/2 + 100);
    var a = atan2(mouseY-height/2,mouseX-width/2);
    rotate(-a);
    if (dist(mouseX,mouseY,width/2,height/2)<=50) {
        fill(155,189,115);
    }
    else {fill(100);}
    triangle(-25,-25,0,-25,0,0);
    triangle(-25,-25,-50,0,0,0);
    triangle(0,0,0,-50,25,-25);
    triangle(0,0,25,-25,25,0);
    triangle(0,0,50,0,25,25);
    triangle(0,0,25,25,0,25);
    triangle(0,0,0,50,-25,25);
    triangle(0,0,-25,25,-25,0);
    pop();
    //right windmill counterclockwise


    if (dist(mouseX,mouseY,width/2,height/2)<=100) {
        x = mouseX; 
        y = mouseY; 
        noFill();
        strokeWeight(5);
        stroke(65,95,183);
        beginShape ();
        curveVertex(x,y);
        curveVertex(x,y);
        curveVertex(x + 25, y +25);
        curveVertex(x + 50, y);
        curveVertex(x + 75, y +25);
        curveVertex(x + 100, y);
        curveVertex(x + 100, y);
        endShape();
        beginShape ();
        curveVertex(x,y + 20);
        curveVertex(x,y + 20);
        curveVertex(x + 25, y +45);
        curveVertex(x + 50, y + 20);
        curveVertex(x + 75, y +45);
        curveVertex(x + 100, y +20);
        curveVertex(x + 100, y +20);
        endShape();
        beginShape ();
        curveVertex(x,y + 40);
        curveVertex(x,y + 40);
        curveVertex(x + 25, y + 65);
        curveVertex(x + 50, y + 40);
        curveVertex(x + 75, y + 65);
        curveVertex(x + 100, y + 40);
        curveVertex(x + 100, y + 40);
        endShape();
    }
    //wind 


    fill(178,119,119);
    stroke(255);
    strokeWeight(2);
    ellipse(0,0,200,200);
    //sunny sun 


    if (dist(mouseX,mouseY,width/2,height/2)>=100){
        fill(249,143,143);
        ellipse(0,0,200,200);
    }
    //cloudy sun 


    if (dist(mouseX,mouseY,width/2,height/2)<=100){
        fill(220);
        ellipse(0,100,50,50);
        ellipse(30,110,40,40);
        ellipse(50,70,70,70);
        ellipse(70,100,50,50);
        ellipse(100,90,50,50);

        ellipse(200,100,50,50);
        ellipse(230,110,40,40);
        ellipse(250,70,70,70);
        ellipse(270,100,50,50);
        ellipse(300,90,50,50);

        ellipse(400,100,50,50);
        ellipse(430,110,40,40);
        ellipse(450,70,70,70);
        ellipse(470,100,50,50);
        ellipse(500,90,50,50);

        ellipse(600,100,50,50);
        ellipse(630,110,40,40);
        ellipse(650,70,70,70);
        ellipse(670,100,50,50);
        ellipse(700,90,50,50);
}
    //cloud


    fill(255);
    noStroke();

    ellipse(x,100,diam,diam);
    ellipse(x - diam/2,100-diam/3,diam,diam);
    ellipse(x + diam/2,100-diam/3,diam * 1.5,diam *1.5);
    ellipse(x + diam * 1.4,100-diam/4,diam,diam);
//cloud 1
    ellipse(x - 100,150,diam,diam);
    ellipse(x - diam/2 - 100,150-diam/3,diam,diam);
    ellipse(x + diam/2 -100,150-diam/3,diam * 1.5,diam *1.5);
    ellipse(x + diam * 1.4 -100,150-diam/4,diam,diam);
//cloud 2
    ellipse(x + 100,150,diam,diam);
    ellipse(x - diam/2 + 100,150-diam/3,diam,diam);
    ellipse(x + diam/2 +100,150-diam/3,diam * 1.5,diam *1.5);
    ellipse(x + diam * 1.4 +100,150-diam/4,diam,diam);
//cloud 3
    x += dir*speed;
    if (x > width - 25 || x < 25) {
        dir = -dir;
    }

    if (diam > 50) {
        dir2 = -dir2;
    }

    if (diam < 10){
        dir2 = -dir2;
    }

    if (mouseX < width/2 + 50 || mouseX > width/2 - 50) {
        diam += dir2 * speed2;
    }
    //moving clouds

}

For this assignment I created windmills generated by mouse movement. As the middle windmill rotates clockwise, the other windmills on both sides rotates counterclockwise. Weather condition is also controlled by the mouse movement.