var r; // red
var b; // blue
var x;
var y;
function setup() {
createCanvas(480, 480);
background(250, 130, 150);
}
function draw() {
for (y = 0; y < height; y += 80) {
for (x = 0; x < width; x += 80){
r = x;
b = y / 2;
// circles
noStroke();
fill(r, 150, 150);
ellipse(50 + x, 50 + y, 50, 50);
fill(255, 100, 100, 90);
ellipse(40 + x, 35 + y, 50, 50);
// banana body
fill(200, 230, b);
noStroke();
beginShape();
vertex(30 + x, 20 + y);
bezierVertex(75 + x, 15 + y, 70 + x, 75 + y, 25 + x, 70 + y);
bezierVertex(50 + x, 60 + y, 45 + x, 20 + y, 30 + x, 22 + y);
endShape();
// banana stem
stroke(200, 230, b);
strokeWeight(5.5);
line(25 + x, 26 + y, 39 + x, 14 + y);
// curve pattern
noFill();
stroke(255, 200, 200, 30);
strokeWeight(2.5);
arc(15 + x, 10 + y, 25, 25, HALF_PI, PI);
}
}
}
I’m really glad I got to successfully use the bezier vertex to create a shape that’s not an ellipse this week (a banana 🙂 ). I also enjoyed incorporating subtle color gradients into the wallpaper and combining that with different opacities. I had fun making this and definitely have a better understanding of nested for loops now.