For this assignment, I decided to create a tree with flowers. I struggled a lot with what I wanted to do for this assignment. Since I didn’t have a starting point or any idea what I wanted to do, I spent a lot of time trying to figure out what I wanted to create. This also led to me changing my mind numerous times (there are 4 versions of this assignment, the first 3 are incomplete because I kept changing my mind with what I wanted to do).
Coding Process
show() {
for(let i = 0; i < 3; i++) {
ellipse(this.pointX[i], this.pointY[i], 10);
}
beginShape();
vertex(this.vertexX, this.vertexY);
for(let i = 0; i < 10; i++) {
bezierVertex(this.pointX[i], this.pointY[i], this.pointX[i+1], this.pointY[i+1], this.pointX[i+2], this.pointY[i+2]);
}
endShape();
}
}
The code above is part of the v1 of assignment 3. I wanted to tackle bezier curves, but it didn’t end up quite the way I wanted. I watched a few videos explaining how it worked, but I was still kind of confused so I decided to just experiment with it. I tried to shortcut my way around writing multiple points by using for loops, but when I wrote the code to create the shape, I got an error about the variable scope. Therefore, I decided to give up on this “shortcut” and try something else.
The ellipse placements reminded me of a galaxy, so my next version was an attempt to create galaxy art. I originally wanted the stars to twinkle by changing the alpha of the color and I also wanted to make the stars grow and shrink. I also wanted to create the galaxy cloud effect somehow and add some shooting stars. However, I realized that this idea was a bit too ambitious, and during the process of making the stars grow I had another idea.
The final idea was to create a tree with growing flowers. For some reason, as I was playing around with the “breeze” blowing the flowers, I started to make it flowers falling off a tree. Here is the code:
breeze() {
if (this.pointX < this.pointX + 50) {
this.pointX += random(-1, 1);
this.pointY += 0.75;
}
}
But for the final version, I decided to make the flowers grow and shrink. I made the flowers arcs instead of ellipses because I felt like it was more interesting to see different compared to different sized ellipses.
The fractal tree I got from this example. I also watched The Coding Train video on fractal trees, but I mainly used the tree by Yuan Hau. I tried to experiment with the tree by changing the strokeWeight() and angle, but I didn’t keep those changes. This will be part of my future improvements and ideas.
Future Improvements and Ideas
One thing that I found interesting was changing the angle of one side of the branches. This created a bent tree, which I thought would have been cool to work with. 
However, I wasn’t sure how to bound the flowers to the shape of the tree. What I did was restrict it to a box by using random(), but it doesn’t fit the shape of the tree. For improvements, I want to figure out how to make the flowers follow the shape of the tree.
To add more improvements to the tree, I feel like it looks too mathematical and organized. So, for the future I want to make it have different thicknesses in the branches, different angles, and different lengths in the branches. I did try to experiment with these three things, but with the experiments I crashed my program several times…
One thing I had an issue on with all four versions was choosing a random color. For example, for v4 I wanted a random color for each individual flower, but my code randomly picks one color from the array once for all the flowers. The color will change every time you run the program though. Since I have a specific set of colors, I put it into an array:
flowerColors = ["#EC275F", "#F25477", "#E476A6", "#F3868C"];
let oneFlower = [];
function setup() {
createCanvas(550, 550);
pickAColor = floor(random(flowerColors.length));
The code above is the bit that creates a variable to pick a random element in the array. This is the link to the reference I used to figure out how to use floor() (actually I used a different reference, but my very first sketch crashed before I saved so I lost the reference).
show() {
this.color.setAlpha(200);
fill(this.color); //how to make each individual flower have a different, random color?
arc(
this.pointX,
this.pointY,
this.size,
this.size,
this.arcPt1,
this.arcPt2
);
}
The code above is in my class Flowers, where I fill the color of the flower and change the alpha to be more transparent. I tried to use a loop, but that didn’t work. So this is another aspect that I want to improve in the future.
Finally, I want to work on is the breeze. Currently, it doesn’t look as smooth as I want it to look. I feel like to do this, I would need to incorporate some physics and more math.
Overall, while I’m not totally satisfied with how the final code ended up looking, I did try to experiment and take risks with this assignment, which is a win.