function setup() {
createCanvas(480, 480);
background(255, 213, 238);
for(var x = 0; x < 500; x+=100){
for(var y = 0; y < 500; y+=100){
cacti(x,y);
}
}
}
function draw() {
cacti();
}
function cacti(x,y) {
noStroke();
fill(255, 185, 71);
ellipse(x+50, y-20, 20, 20);
//clouds
noStroke();
fill(131, 175, 226);
ellipse(x+20, y-10, 15, 15);
ellipse(x+30, y-5, 20, 20);
ellipse(x+45, y-10, 26, 26);
ellipse(x+60, y-10, 15, 15);
//cacti
stroke(99, 212, 136);
strokeWeight(15);
line(x, y-10, x, y+60);
line(x-20, y-10, x-20, y+10);
line(x-20, y+10, x-10, y+10);
line(x+10, y+30, x+25, y+30);
line(x+25, y+30, x+25, y);
//needles
stroke(255, 185, 71);
strokeWeight(4);
line(x-3, y, x-3, y+10);
line(x-1, y+20, x-1, y+40);
//sun
/*noStroke();
fill(255, 185, 71);
ellipse(100, 30, 20, 20);
//clouds
noStroke();
fill(131, 175, 226);
ellipse(70, 40, 15, 15);
ellipse(80, 45, 20, 20);
ellipse(95, 40, 26, 26);
ellipse(110, 40, 15, 15);
//cacti
stroke(99, 212, 136);
strokeWeight(15);
line(50, 40, 50, 110);
line(30, 40, 30, 60);
line(30, 60, 40, 60);
line(60, 80, 75, 80);
line(75, 80, 75, 50);
//needles
stroke(255, 185, 71);
strokeWeight(4);
line(47, 50, 47, 60);
line(49, 70, 49, 90);*/
}
I initially started out by creating a tile of the cacti in the desert scene with the cloud and the sun. By making this tile its own function, I was then able to make it repeat using for loops. It was very interesting to make a drawing its own function in order to repeat it throughout the canvas.