This is the documentation for the second week of Nature of Code. 😉 This week we mainly studied the application of OOP and Vectors, and this week we are required to include the knowledge learned this week in the mini project.

Because I am still not familiar with the p5.js program and code. After seeing this week's task requirements, I first went through most of this week's slides and sample code. Different from last week, last week my project was mainly based on sample code, while this week I want to understand and make a project by myself.

For the OOP and Array sections, I first chose balls [] and Class balls, which are often used as examples in class. I put them in my code first and write the base code. Use 

balls.push(new Ball(random(width),random(height))); 

to make the balls appear randomly in various places on the canvas.

Then I tried the checkOutOfCanvas function. I wanted to add different motions to the object, so I set the ball bounce whenever it touched the border(opposite direction).

But then I found a problem, that is, the ball can not get out of the canvas, but new balls are constantly being generated. In order to make the whole picture clearer, I used two methods to limit the number of balls. One is to limit the probability of producing small balls, and the other is to specify the maximum number of small balls to be 50. In this way, my picture becomes more concise and beautiful.

So I have the framework of my project, and I'm going to replace all of my x, y, xSpd, ySpd values with vectors. I studied the slides of Vectors, merged x and y values into position, and merged xSpd and ySpd into velocity, and added acceleration and random colors to make the motion of the ball more diversified and better visual effect.

To be honest, I have been trying in the previous steps, but many ideas have been rejected by myself. It wasn't until I joined vectors that I finally decided what I wanted to do with this project. (So "celebrating" could also be to celebrate that I finally understand oop and vectors a little bit hahaha) I think fireworks in bloom are a good choice. When the mouse clicks, the balls split into more balls and move in all directions, simulating the effect of fireworks.

Finally, I changed the background color and transparency so that the fireworks could leave some marks on the canvas. In addition, I specially used shrink () to create some jitter effects and make the picture more interesting.

My second project in this class is also of great significance to me. This project was my introduction to arrays, oop, and vectors. It was also the first work that I built code on my own. Special thanks to Professor Moon who helped me explain the code in this process! (It seems that I ask questions every week🤔) I hope I can keep the enthusiasm of learning, catch up with the progress as soon as possible, and become better and better.🔥

Here's my sketch: https://editor.p5js.org/VivianaviVi/sketches/XW51DwA0f

Here' are my project's screenshots, but I think the dynamic effect is better!☺️