var petalD = 65; // petal depth
var petalW= 60; // petal width
var rotation = 60; // standard rotation
var xspacing = 380; // space between flowers
var yspacing = 270;
function setup() {
createCanvas(800, 400);
background(0);
}
function draw() {
// draw white stripes
for(var i = 40; i <height; i +=100){
stroke(255);
strokeWeight(50);
line(0,i,width,i);
}
//draw the flowers
for(var y = 0; y < height; y+= yspacing){
for(var x = 0; x < width; x+= xspacing){
flower(x,y);
}
}
noLoop();
}
function flower(x,y){ // function to make flower
noStroke();
push();
translate(x,y);
// leaves
fill(179,253,181);
ellipse(petalD,0,120,20);
rotate(radians(143));
ellipse(petalD,0,120,20);
rotate(radians(230));
ellipse(petalD,0,120,20);
rotate(radians(195));
ellipse(petalD,0,120,20);
rotate(radians(0)); // reset to no rotation
for (var i=0; i<9; i++){ // makes up to nine petals
if(i%2==0){
fill(255,191-i,229-i); // make every other petal darker
petalW = 90; // vary petal width
petalD = 80; //vary petal depth
}else{
fill(255,200+i,230+i); // make every other petal lighter
petalD = 75; // vary petal depth
petalW = 90; // vary petal width
}
rotate(radians(rotation));
ellipse(petalD/2,0,petalD,petalW); // makes a petal
rotation += i; // makes rotations less uniform and circular
fill(0);
ellipse(10,0,15); // center circles
}
pop();
}
For this project I wanted to try to create a wallpaper that combined geometric elements and more organic one. I have been seeing a lot of designs that have been combining stripes with florals, so I decided to try to recreate that in this project.