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.