Based on my previous experience of drawing with code, I really wanted to draw something different, such as an environment instead of an object. Therefore, I chose this picture from my album which was taken half an year ago, when I was in the Shanghai lockdown, stuck in Jingqiao. I can still remember, the period when I took this picture, the situation became a bit better and we were allowed to get down in certain time. The weather became warmer and followers became out of bloom in Jingqiao.
To create the environment with graphic-based drawing skill on Processing, I decided to use color lumps(triangles, beginShape/endShape, lines with color changed linearly, and transparency) as the background color, as shown in the picture:
For the petals and leaves, the workload will be unthinkable large if I draw and locate them one by one, so I determined to create a set of objects–by class(OOP). However, everything about OOP I’ve learned is based on other language, such as JS, python. I met problems defaulting and calling object array.
Therefore, I tried to make a function and call it hundreds of times in draw function. Here is the code can effect.
Version 1:
float x;
float y;
//Leave l;
int numL=int(random(100,200));
//Leave l[];
void setup() {
size(600, 800);
//createCanvas(width,height);
background(40, 30, 60);
}
void draw() {
//background
background(100, 120, 180);
for(int i=0;i<height/3;i+=1){
//stroke(i/2.8,i/3.2,i);
//line(0,height/3-i,width,height/3-i);
float c=map(i,0,height/3,0,255);
float d=map(i,0,height/3,255,0);
stroke(d/3+20,d/4+10,d);
line(c/255*width*2-width,height/3,c/255*width*2,0);
}
for(int i=height/3;i<=height;i+=1){
float c=map(i,height/3,height,0,255);
stroke(c/3,c/1.5,c/4);
line(c/255*width*2-width,height/3,c/255*width*2,height);
}
line(0, height/3, width, height/3.1);
line(0, height/3, width, height/2.7);
line(width, height/4, width/5*4, height/7*3);
line(width/5*4, height/7*3, width/4*2.8, height/3*2);
line(width/4*2.8, height/3*2, width/15*14, height);
push();
noStroke();
beginShape();
vertex(0, height/3, width, height/3.1);
endShape();
pop();
// background
//line(width/4*2.5,height/3*2);
//curve()
//flat
push();
noStroke();
fill(130, 130, 130, 180);
triangle(0, height/3, width, height/2.7, width, height/3.1);
triangle(width, height/4, width/5*4, height/7*3, width, height);
fill(120, 120, 120, 180);
triangle(width/5*4, height/7*3, width/4*2.8, height/3*2, width, height/3*2);
fill(110, 110, 110, 180);
triangle(width/4*2.8, height/3*2, width/15*14, height, width, height/3*2);
fill(100, 100, 100, 180);
triangle(width, height, width/15*14, height, width, height/3*2);
//width/5*4, height/7*3, width/4*3-20, height/3*2
//width/4*3-20, height/3*2, width/15*14, height
//grass
fill(20,40,20);
triangle(0,height/3.1,width/2,height/2,0,height/5*4);
fill(40,60,30,180);
triangle(0,height/3,width/10*9,height/2.8,width/3*2,height/3*2);
fill(40,60,30,180);
//triangle(0,height/3,width/5*4,height/2.9,width/3*2,height/3*2);
//fill(40,60,30,180);
//triangle(0,height/3,width/5*4,height/2.9,width/3*2,height/3*2);
pop();
//tree
push();
noStroke();
fill(120, 90, 80);
push();
x=width/5;
y=height/2;
translate(x, y);
rotate(PI*0.98);
rectMode(CORNER);
rect(0, 0, width/30, height/5*2);
pop();
push();
x=width/3;
y=height/5.1;
translate(x, y);
rotate(PI/3);
rect(0, 0, width/60, height/7);
pop();
//beginShape();
//vertex();
//endShape();
pop();
for(int i=0; i<numL;i+=1){ float x=random(width); float y=random(height/3,height); petals(x,y); } } void petals(float x, float y){ push(); translate(x,y); push(); translate(-25,-30); noStroke(); int r=int(random(230,255)); fill(r,200,220,130); beginShape(); vertex(18,21); bezierVertex(70,51,110,25,74,78); bezierVertex(76,123,38,89,18,21); endShape(); pop(); pop(); } //class Leave { // float x,y; // Leave (float xleave, float yleave) { // //ypos = y; // //speed = s; // x=xleave; // y=yleave; // } // void update() { // //y += speed; // //if (y > height) {
// // y = 0;
// //}
// //line(0, y, width, y);
// }
// void displayLeaves(){
// push();
// translate(x,y);
// scale(x*2/height);
// shape();
// pop();
// }
// void shape(){
// }
//}
The problem was: to diversify petals(location, color, size, rotation–only test teh location at the very beginning), function called everytime, changed the parameter of the location. However, the draw function is a loop. It means all the petals kept flashing, and changing locations–it was already an animation though :/
Later I dealed with the way to use class in Java and create serveral sets of objects(it could be improved and simplified!!!!!)
float x;
float y;
//Leave l;
//haha p-leave,l-petal,inversedQAQ
int numL=int(random(80, 100));
int numL2=int(random(40, 60));
int numL3=int(random(20, 30));
int numP=int(random(200, 300));
int numP2=1000;
int numP3=2500;
Leave[] l;
Leave[] l2;
Leave[] l3;
Leave[] l4;
Petal[] p;
Petal[] p2;
Petal[] p3;
void setup() {
size(600, 800);
//createCanvas(width,height);
background(40, 30, 60);
l= new Leave[numL];
p=new Petal[numP];
l2= new Leave[numL2];
l3= new Leave[numL3];
l4= new Leave[numL2];
p2=new Petal[numP2];
p3=new Petal[numP3];
for (int i=0; i<numL; i+=1) {
float x=random(width);
float y=random(height/3, height/12*11);
l[i]=new Leave(x, y);
}
for (int i=0; i<numL2; i+=1) {
float x=random(width/3*2);
float y=random(height/3, height/4*3);
l2[i]=new Leave(x, y);
}
for (int i=0; i<numL3; i+=1) {
float x=random(width/6, width/3*2);
float y=random(height/3, height/5*3);
l3[i]=new Leave(x, y);
}
for (int i=0; i<numL2; i+=1) {
float x=random(width);
float y=random(height/3.2);
l4[i]=new Leave(x, y);
}
for (int i=0; i<numP; i+=1) {
float x1=random(width/5*2);
float y1=random(height/7*3.2);
p[i]=new Petal(x1, y1);
}
for (int i=0; i<numP2; i+=1) {
float x1=random(width/3*2);
float y1=random(height/5*2);
p2[i]=new Petal(x1, y1);
}
for (int i=0; i<numP3; i+=1) {
float x1=random(width);
float y1=random(height/3);
p3[i]=new Petal(x1, y1);
}
}
void draw() {
background(100, 120, 180);
backGroundColor();
grass();
flat();
tree();
for (int i=0; i<numL; i+=1) {
l[i].display();
}
for (int i=0; i<numL2; i+=1) {
l2[i].display2();
}
for (int i=0; i<numL3; i+=1) {
l3[i].display3();
}
for (int i=0; i<numP3; i+=1) {
p3[i].display3();
}
for (int i=0; i<numP2; i+=1) {
p2[i].display2();
}
for (int i=0; i<numP; i+=1) {
p[i].display();
}
for (int i=0; i<numL2; i+=1) {
l4[i].display4();
}
}
void tree() {
//push();
noStroke();
fill(120, 90, 80);
push();
x=width/5;
y=height/2;
translate(x, y);
rotate(PI*0.98);
rectMode(CORNER);
rect(0, 0, width/30, height/5*2);
pop();
push();
x=width/3;
y=height/5.1;
translate(x, y);
rotate(PI/3);
rect(0, 0, width/60, height/7);
pop();
//beginShape();
//vertex();
//endShape();
//pop();
}
void grass() {
fill(20, 40, 20);
triangle(0, height/3.1, width/2, height/2, 0, height/5*4);
fill(40, 60, 30, 180);
triangle(0, height/3, width/10*9, height/2.8, width/3*2, height/3*2);
fill(40, 60, 30, 180);
//triangle(0,height/3,width/5*4,height/2.9,width/3*2,height/3*2);
//fill(40,60,30,180);
//triangle(0,height/3,width/5*4,height/2.9,width/3*2,height/3*2);
//pop();
}
void flat() {
//push();
noStroke();
fill(140, 140, 140, 250);
triangle(0, height/3, width, height/2.7, width, height/3.1);
triangle(width, height/4, width/5*4, height/7*3, width, height);
fill(120, 120, 120, 210);
triangle(width/5*4, height/7*3, width/4*2.8, height/3*2, width, height/3*2);
fill(110, 110, 110, 210);
triangle(width/4*2.8, height/3*2, width/15*14, height, width, height/3*2);
fill(100, 100, 100, 250);
triangle(width, height, width/15*14, height, width, height/3*2);
//width/5*4, height/7*3, width/4*3-20, height/3*2
//width/4*3-20, height/3*2, width/15*14, height
}
void backGroundColor() {
for (int i=0; i<height/3; i+=1) {
//stroke(i/2.8,i/3.2,i);
//line(0,height/3-i,width,height/3-i);
float c=map(i, 0, height/3, 0, 255);
float d=map(i, 0, height/3, 255, 0);
stroke(d/3+20, d/4+10, d);
line(c/255*width*2-width, height/3, c/255*width*2, 0);
}
for (int i=height/3; i<=height; i+=1) {
float c=map(i, height/3, height, 0, 255);
stroke(c/3, c/1.5, c/4);
line(c/255*width*2-width, height/3, c/255*width*2, height);
}
line(0, height/3, width, height/3.1);
line(0, height/3, width, height/2.7);
line(width, height/4, width/5*4, height/7*3);
line(width/5*4, height/7*3, width/4*2.8, height/3*2);
line(width/4*2.8, height/3*2, width/15*14, height);
push();
noStroke();
beginShape();
vertex(0, height/3, width, height/3.1);
endShape();
pop();
}
class Leave {
float x, y, r;
Leave (float xleave, float yleave) {
//ypos = y;
//speed = s;
x=xleave;
y=yleave;
r=radians(random(360));
}
void display() {
push();
translate(x, y);
float s=map(y, height/3, height, 0.2, 0.4);
scale(s);
rotate(r);
//scale(x*2/height);
noStroke();
int r=int(random(230, 255));
fill(r, 200, 220, 180);
shape();
pop();
}
void display2() {
push();
translate(x, y);
float s=map(y, height/3, height, 0.2, 0.4);
scale(s);
rotate(r);
//scale(x*2/height);
noStroke();
int r=int(random(240, 255));
fill(r, 240, 240, 180);
shape();
pop();
}
void display3() {
push();
translate(x, y);
float s=map(y, height/3, height, 0.2, 0.4);
scale(s);
rotate(r);
//scale(x*2/height);
noStroke();
int r=int(random(240, 255));
fill(r, 250, 250);
shape();
pop();
}
void display4() {
push();
translate(x, y);
float s=map(x, 0, width, 0.2, 0.1);
scale(s);
rotate(r);
//scale(x*2/height);
noStroke();
int r=int(random(240, 255));
fill(255, 180, 180, 220);
shape();
pop();
}
void shape() {
push();
translate(-25, -30);
beginShape();
vertex(18, 21);
bezierVertex(70, 51, 110, 25, 74, 78);
bezierVertex(76, 123, 38, 89, 18, 21);
endShape();
pop();
}
}
class Petal {
float x, y, r;
Petal(float xleave, float yleave) {
//ypos = y;
//speed = s;
x=xleave;
y=yleave;
r=radians(random(360));
}
void display() {
push();
translate(x, y);
float s=map(y, 0, height/5*2, 0.2, 0.3);
scale(s);
rotate(r);
//scale(x*2/height);
noStroke();
int g=int(random(200, 230));
fill(120, g, 110, 120);
shape();
pop();
}
void display2() {
push();
translate(x, y);
float s=map(y, 0, height/5*2, 0.3, 0.2);
scale(s);
rotate(r);
//scale(x*2/height);
noStroke();
int g=int(random(100, 130));
fill(80, g, 90, 80);
shape();
pop();
}
void display3() {
push();
translate(x, y);
float s=map(y, 0, height/3, 0.4, 0.2);
scale(s);
rotate(r);
//scale(x*2/height);
noStroke();
int g=int(random(80, 90));
fill(60, g, 70, 180);
shape();
pop();
}
void shape() {
push();
translate(-25, -30);
beginShape();
vertex(18, 21);
bezierVertex(70, 51, 110, 25, 74, 78);
bezierVertex(76, 123, 38, 89, 18, 21);
endShape();
pop();
}
}
Since I used many random functions to diversify the sum, colors, locations of leaves/petals, everytime the code excuted, the picture will be different.
One more interesting thing is, I made random function of leaves’ green colors changing in a large range. It makes the leaves keeping changing colors at the set positions, seemingly flashing, which makes the picture an animation as the effect of wind blowing!