top of page
Search

Coding Project (finished) p5.js

  • Writer: Mackenzie
    Mackenzie
  • May 29, 2019
  • 3 min read

Link for my code project: https://editor.p5js.org/MackMurphy/sketches/VLo_pEVD5

(To play through different trees, you either have to keep pressing play, or turn on frame rate (this will mean that the flowers do not change))


Above are some of the trees generated by the code that I wrote for the final digital design project of the 9th grade year. This project was inspired by a far more complex project (http://beautifulprogramming.com/infinite-arboretum/), and the goal was to push myself as hard as I could to learn how to use p5.js. In my project proposal I said I wanted to make more complex generative art, I was able to accomplish this, I also said that I would want to make it interactive, but unfortunately I did not have the time to learn how to do this. To learn how to make it interactive, or to even add movement, I would have to find some way to save all the points, I was unsure how I should do this without writing a ridiculously long script. The code consists of 420 lines, most of it is made using push and pop with lots of randomized variables, floats, if/else statements, and custom functions. I used the translate function and nested push/pop functions to have branches build off of each other, and used different variables to determine how a branch would rotate. Each branch was assigned a letter code that told you what layer it was on and what side it branched off on, this helped with organization, (codes like LRLL meant 4th layer of branches, the splits being: left, right, left, left). Each branch was also given a numerical value, which were used to help round the top of the tree, and spread the branches out. The values look like the following:


(5th layer) -15 -14 -13 -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 0 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

-7 -6 -5 -4 -3 -2 -1 0 0 1 2 3 4 5 6 7

-3 -2 -1 0 0 1 2 3

-1 0 0 1

(1st layer) 0 0


The flowers on the tree could only appear on the 4th and 5th layers of branches, and only had a 50% chance of appearing. By adding so many random variables, I made sure that there would be lots of variety, there are different flowers, tree shapes, colors, and formations for everything. The process of coding this was mostly lots and lots of trial and error, googling what function I needed, and furiously scribbling down code, numbers, and any ideas that I wanted to test. The hardest part was trying to figure out how to do things that seemed so clear in my head when I have so little experience with p5.js. Other than the drawing of Pidge, this is the only thing I have made using text code, so making something like this with an unfamiliar medium is an achievement in my book, and I am proud of the outcome. In the end, I was able to overcome most of the difficulties, the whole project was fun and interesting as it just felt like one big puzzle. If I were to do this project over again, I would want to figure out how to store all of the points in the project so that I could have the tree move or sway, or have the user interact with it.

 
 
 

Comments


©2018 by Mackenzie's Digital Design Projects. Proudly created with Wix.com

bottom of page