Project 03

This is my project 03

sketch

function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
//cloud left variables
var x1 = 70
var y1 = 60;
var cwidth = 60;
var cheight = 40;
//cloud right variables
var x2 = 400;
var y2 = 60;
//star left variables
var sx1 = 70;
var sy1 = 130;
var sw1 = 3;
var sh1 = 12;
//star right variables
var sx2 = 400;
var sy2 = 130;
var sw2 = 12
var sh2 = 21
//color for cloud
var rc = 183;
var gc = 186;
var bc = 202;
var angle = 0
//color for rain
var rr = 57;
var rg = 85;
var rb = 96;
//flower 
var anglef = 0
var diam = 45
var rf = 199
var gf = 101
var bf = 93

function draw() {
    background(255)
    //ground
    noStroke();
    push();
    angle = mouseX*0.15   //background rotation
    mouseX = max(min(mouseX,600),0);
    rotate(radians(angle))
    fill(237,186,185);
    rect(0,400,800,50);
    fill(246,219,219);
    rect(0,350,800,50);
    fill(214,211,203);
    rect(0,300,800,50);
    fill(214,207,141);
    rect(0,250,800,50);
    fill(242,126,113);
    rect(0,200,800,50);
    fill(237,186,185);
    rect(0,150,800,50);
    fill(246,219,219);
    rect(0,100,800,50);
    fill(214,211,203);
    rect(0,50,800,50);
    fill(214,207,141);
    rect(0,0,800,50);
    pop();

    //cloud left
    fill(rc,gc,bc);
    ellipse(x1,y1,cwidth,cheight);
    ellipse(x1+30,y1-10,cwidth,cheight);
    ellipse(x1+60,y1,cwidth,cheight);
    ellipse(x1,y1+20,cwidth,cheight);
    ellipse(x1+30,y1+25,cwidth,cheight);
    ellipse(x1+60,y1+20,cwidth,cheight);
    ellipse(x1+30,y1+10,cwidth,cheight);
    ellipse(x1-20,y1+10,cwidth/1.5,cheight/1.5);
    ellipse(x1+80,y1+10,cwidth/1.5,cheight/1.5);
    cwidth = 60 + mouseX*0.03 // size change due to the mouseX position
    cheight = 40 + mouseX*0.03
    x1 = mouseX  // position change according to the mouseX
    bc = 202- mouseX*0.1 // color change of cloud according to the mouseX

    //cloud right
    fill(rc,gc,bc);
    ellipse(x2,y2,cwidth,cheight);
    ellipse(x2+30,y2,cwidth,cheight);
    ellipse(x2+60,y2,cwidth,cheight);
    ellipse(x2,y1+20,cwidth,cheight);
    ellipse(x2+30,y2+25,cwidth,cheight);
    ellipse(x2+60,y2+20,cwidth,cheight);
    ellipse(x2+30,y2+10,cwidth,cheight);
    ellipse(x2-20,y2+10,cwidth/1.5,cheight/1.5);
    ellipse(x2+80,y2+10,cwidth/1.5,cheight/1.5);
    x2 = 600- mouseX // position change according to the mouseX
    rc = 183- mouseX*0.1+20 // color change of cloud according to the mouseX
    
    
    //rain left
    fill(rr,rg,rb);
    ellipse(sx1,sy1,sw1,sh1);
    ellipse(sx1-25,sy1-12,sw1,sh1);
    ellipse(sx1+20,sy1+10,sw1,sh1);
    ellipse(sx1-15,sy1+20,sw1,sh1);
    ellipse(sx1+40,sy1+40,sw1,sh1);
    ellipse(sx1+10,sy1+40,sw1,sh1);
    ellipse(sx1+10,sy1+40,sw1,sh1);
    ellipse(sx1+50,sy1+10,sw1,sh1);
    ellipse(sx1+75,sy1+20,sw1,sh1);
    ellipse(sx1+70,sy1-13,sw1,sh1);
    ellipse(sx1+35,sy1+80,sw1,sh1);
    ellipse(sx1+45,sy1+120,sw1,sh1);
    ellipse(sx1+20,sy1+110,sw1,sh1);
    ellipse(sx1,sy1+80,sw1,sh1);
    ellipse(sx1+50,sy1+60,sw1,sh1);
    ellipse(sx1-10,sy1+50,sw1,sh1);
    sx1 = mouseX; // position change according to the mouseX
    sw1 = 3+mouseX*0.013 // size change due to the mouseX position
    sh1 = 12+mouseX*0.013
    rg = 85-mouseX*0.2 // color change of rain according to the mouseX
    rr = 57- mouseX*0.1+20 // color change of rain according to the mouseX

    //rain right
    fill(rr,rg,rb);
    ellipse(sx2,sy2,sw2,sh2);
    ellipse(sx2-30,sy2-12,sw2,sh2);
    ellipse(sx2+20,sy2+10,sw2,sh2);
    ellipse(sx2-15,sy2+20,sw2,sh2);
    ellipse(sx2+40,sy2+40,sw2,sh2);
    ellipse(sx2+10,sy2+40,sw2,sh2);
    ellipse(sx2+10,sy2+40,sw2,sh2);
    ellipse(sx2+50,sy2+10,sw2,sh2);
    ellipse(sx2+85,sy2+20,sw2,sh2);
    ellipse(sx2+70,sy2-13,sw2,sh2);
    ellipse(sx2+35,sy2+80,sw2,sh2);
    ellipse(sx2+30,sy2+140,sw2,sh2);
    ellipse(sx2+20,sy2+110,sw2,sh2);
    ellipse(sx2,sy2+80,sw2,sh2);
    ellipse(sx2+50,sy2+60,sw2,sh2);
    ellipse(sx2-10,sy2+50,sw2,sh2);
    sx2 = 600- mouseX // position change according to the mouseX
    sw2 = 12-mouseX*0.013 // size change due to the mouseX position
    sh2 = 21-mouseX*0.013
    rb = 96+mouseX*0.05 // color change of rain according to the mouseX

    //flower center
    if(mouseX>width/2){
        fill(110,109,28);
        rect(width/2-5,height/2+28,10,height/2);
        rect(width/4-5,height/4*3+28,10,height/2);
        rect(width/4*3-5,height/4*3+28,10,height/2);
        push();
        translate(width/2,height/2)
        rotate(radians(anglef)); //flower rotate by it self 
        fill(rf,gf,bf);
        circle(-15,-25,diam)
        circle(15,-25,diam)
        circle(-15,25,diam)
        circle(15,25,diam);
        circle(28,0,diam)
        circle(-28,0,diam)
        fill(231,183,diam);
        circle(0,0,diam);
        pop();
        bf = 93+mouseX*0.05

        diam = 45+mouseX/20
        anglef += 3
        //flower left
        push();
        translate(width/4,height/4*3)
        rotate(radians(anglef)); //flower rotate by it self 
        fill(249,213,216);
        circle(-15,-25,diam/2);
        circle(15,-25,diam/2);
        circle(-15,25,diam/2);
        circle(15,25,diam/2);
        circle(28,0,diam/2);
        circle(-28,0,diam/2);
        fill(189,135,136);
        circle(0,0,diam/2);
        pop();
        //flower right
        push();
        translate(width/4*3,height/4*3)
        rotate(radians(anglef)); //flower rotate by it self 
        fill(195,231,254);
        circle(-15,-25,diam/2);
        circle(15,-25,diam/2);
        circle(-15,25,diam/2);
        circle(15,25,diam/2);
        circle(28,0,diam/2);
        circle(-28,0,diam/2);
        fill(238,218,92);
        circle(0,0,diam/2);
        pop();
        //sun
        fill(245,177,86);
        ellipse(width/2,height/6,diam*1.1);


    }



}

Leave a Reply