Final Project – KORE

The final product is very different from my initial idea and project proposal. I actually kept on changing ideas throughout the process. Originally, I wanted to use PoseNet and have the user cut the tree. The idea kept evolving– from using music to grow the tree, to the ml5 library sound classifier.

Initial Process – sketches

These are the sketches I made before I began to code my project. At the beginning, I was still very lost with the direction I wanted my project to go in. I knew that I wanted to rely more on coding instead of loading images (like I did in Project II- Flying With Kiki), but in the end I decided not to code the character. Furthermore, the initial background idea was very complicated compared to how it ended up. I wanted to add mountains and clouds that moved across the sky, but I started to focus more on the interactions and ended up running out of time.

CODING PROCESS

I couldn’t settle on a concrete idea for interactions. Throughout the whole project, I constantly changed my idea until I finally stuck with the sound classifier. It was pretty unreliable; sometimes the trunk would show without saying anything, but most of the time I was shouting “go” with nothing happening.

Background

Bits of the background is actually from my first project “Generative Visuals”. One difference is that I turned the stars into a class and they twinkle, which I got from a p5.js web user wvnl. Another difference is that I used the CCLab CookBook for the gradient instead of code from the web. The waves are from the p5.js example called noise wave and the moon is also from the p5 reference for bezierVertex().

Tree

My biggest struggle in this project was the tree. I wanted to make the tree more realistic by adding different thickness, branch length, and branch angle. I did a bunch of research/searching the web for ideas, but most of them were too complicated for me to comprehend. The Coding Train’s video called Object Oriented Fractal Tree is the code I use in my project. However, I wish I did a little more with it. I tried animating the trunk using frameCount(), but then I couldn’t get the branch interaction working. So, although the final tree isn’t as realistic as I wanted it, I think it matched the visuals of my project. 

Additionally, I changed the tree color from white to dark gray to contrast with the moon, stars, and text. It also matched the title screen of my project. The green “platform” was removed to make the position of the tree constant.

The falling flowers was not intentional, but I really liked the effect. I tried to rotate the flowers randomly, but since it was all in a for loop it ended up being animated.

Character and Boat

Both the character and boat are images that I drew and implemented into my code using loadImage(). The boat was added in on a whim after I changed my idea again. I wanted to make it more story like, where Kore is alone in the middle of the ocean and the user helps her seek comfort through growing a tree (although this isn’t really clear in the project). Moreover, drawing both the character and boat made it easier for me to have it visually fit into my project. I felt like with these two elements drawn it stands out more.

Kore is actually three drawings converted into a GIF. I wanted to loop through the three images, but I felt like it would be simpler to turn her into a GIF.

Reflection

It’s simpler than what I initially intended for. My goal for this project was to rely less on images, which I think I succeeded. However, if I look back at my code in a few months I will surely get confused. I started commenting in the beginning, but stopped after a while. I also think that this final project does tie the first two projects together nicely though. Some future developments are:

• • Adding PoseNet and more interactions. I think it would be fun if the user can shake the tree and make the petals fall, instead of it just falling randomly. Additionally, adding user options like customizing the background colors or tree colors would be more immersive.
  • Different scenes/seasons. Like the customizing background colors idea, having different seasons would be interesting, or even different weather. I tried adding rain using a button, but no success.
  • Physics and real life aspects to make it more realistic. Features like wind, the boat bouncing with the waves, and tree thickness/length variation.

Overall, it’s been a fun journey learning how to code and create art, games, and data visualization. I did have a little bit of java knowledge prior to this class, but it doesn’t compare to what I learned this semester. I’ve definitely come a long way from the first activity. Thank you Professor Steele, Linda, and CCLab for a great first semester 🙂

Project diary

References

• • Twinkling Stars by wvln
  • The Coding Train- Object Oriented Fractal Tree,
  • Noise Wave p5.js Reference
  • bezierVertex() p5.js Reference
  • ml5 library- Sound Classifier
  • Zapsplat– Background music and sound effects
  • CCLab CookBook