jiaxinw-Project 05- Wallpaper

sketch

function setup() {
    noLoop();
    createCanvas(480, 600);
    background(255);
    //fill the canvas with a gradient color
    bgColor();

    //riandrop length
    var dLen = 10;

    noStroke();
    //fill the canvas with raindrop, set raindrop x and y equal 10
    for(var dy = 10; dy < height-dLen; dy += 40 ){
        for(var dx = 10; dx < width - dLen; dx += 40){
            stroke(144, 197, 242);
            strokeWeight(3);
            line(dx, dy, dx+dLen, dy+dLen);
        };
    };
    
    //umbrella size 
    var size = 80;

    //fill the canvas with umbrellas, set umbrella x and y equal 60
    for ( var y = 60; y < height-size/2; y += 95){
        for (var x = 60; x < width-size/2; x += 90){

            //blue umbrellas
            if((x+y)%7==0){
                    
                push();
                translate(x,y);
                rotate(radians(-45))
                //umbrella handle 
                noStroke();
                fill(57,130,158);
                rectMode(CENTER);
                rect(0, 0, 4, 80)

                noFill();
                stroke(71,165,200)
                strokeWeight(4);
                arc(0-size/12, 0+40, size/6, size/6, 0, PI)

                //umbrella top                   
                noStroke();
                blueUmbre(0,0);
                //small triangles of umbrella
                var tx=0;
                for(i = 0; i < 6; i++){
                    triangle(tx-size/2, 0, tx-size/2+(size/6), 0, tx-size/2+size/12, 0+size/12);
                    tx += size/6;
                };
                pop();
            } else {//red umbrellas
                //umbrella handle 
                noStroke();
                fill(234, 145, 145);
                rectMode(CENTER);
                rect(x, y, 4, 80)

                noFill();
                stroke(230,80,80)
                strokeWeight(4);
                arc(x-size/12, y+40, size/6, size/6, 0, PI)

                noStroke();
                //umbrella top
                redUmbre(x,y);
                //arc(x, y, size, size, PI, 2*PI)
                //small triangles of umbrella
                var tx=x;
                for(i = 0; i < 6; i++){
                    triangle(tx-size/2, y, tx-size/2+(size/6), y, tx-size/2+size/12, y+size/12);
                    tx += size/6;
                };
            };
        };
    };
    
}

function draw() {
}

function bgColor(){
    //create a gradient color from green to blue
    colorMode(RGB);
    noStroke();
    from = color (179, 222, 213);
    to = color (179, 209, 222);
    interA = lerpColor(from, to, .20)
    interB = lerpColor(from, to, .40)
    interC = lerpColor(from, to, .60)
    interD = lerpColor(from, to, .80)
    fill(from);
    rect(0,0,width,height/6);
    fill(interA);
    rect(0,height/6,width,2*height/6);
    fill(interB);
    rect(0,2*height/6,width,3*height/6);
    fill(interC);
    rect(0,3*height/6,width,4*height/6);
    fill(interD)
    rect(0,4*height/6,width,5*height/6);
    fill(to);
    rect(0,5*height/6,width,height);
}

//create gradient red color for red umbrellas
function redUmbre(x,y){
    var r = 230;
    for (var size=80; size > 0; size -= 2){
        fill(r,80,80)
        arc(x, y, size, size, PI, 2*PI)
        r -=1; 
    };
}

//create gradient blue color for blue umbrellas
function blueUmbre(x,y){
    var g = 165;
    for (var size=80; size > 0; size -= 2){
        fill(71,g,200)
        arc(x, y, size, size, PI, 2*PI)
        g -=1; 
    };
}

To start with the project, I drew out the sketch to have a sense of how the layout should look like.

At first, I only wanted the umbrella all looked like the same. When I created the all-umbrella wallpaper, I found if some of the umbrellas can be changed would be interesting. Therefore, I thought about how to make only some of the umbrellas change but not in a “boring” pattern. Later I found out if I ply around with the variables for the umbrella’s x and y, this design maybe can work! I tried to use modulo related to x and y, and it worked. What’s more, because the color looked “flat”, I thought maybe making the color become gradient can be more attractive, so I add gradient colors to umbrellas and the background.