Category: Nature of Code

Link here.

For this week, I wanted to do something, and was thinking about updating last week’s sketch with the rain and umbrella, and converting the raindrops into vectors and having them reflect or “bounce” off the umbrella, but I thought it would be much more appropriate (and maybe much less original) to make fireworks. After looking at some other people’s examples online and not being very satisfied with any of them, I took a few hours to code my own. It’s a pretty simple program I think, and writing it all really helped to further solidify my understanding of objects and constructors, arrays, and conditionals, and I think spending the time this week to code something from more or less scratch instead of just improving on something old may help me in the future once the concepts become more rigorous, since admittedly, my coding skills were sub-par entering this semester, but are I am growing more and more comfortable with P5 after not having done processing in nearly 3-4 years (since freshman year). I used comments frequently this time, and plan on continuing that not only to help others but to help myself understand what my code was doing, they helped me “find my place” a lot of the time, since scrolling up and down over and over does make the code begin to kind of blur together. Overall this week was a fun step to take, and I managed to spend most of the time coding rather than fixing errors in my code, which was nice especially since I had tried to mess with createVector() last week before I even knew that they were the next topic in class, haha. Looking forward to class tomorrow.

Date: 03-02-2019

Click here to visit on P5 Web Editor

For this week’s vector assignment, I redid my “Petals in Flames” idea with vector. This time I made it more colorful, using more random function but in a way that doesn’t produce inharmonious combinations of colors. The small flower in the middle is made using HSB color mode, by mapping the hues of the ellipses to their positions. I also added a spinning effect to it. It spins clockwise by itself, and mouse movements make it spin faster.

I kept the petal number changing function, which increases and decreases the number of petals. When you hold the mouse, all the petals close inwards by a “freeze” function. Another function called “bloom” is triggered every time the mouse is released, making those squarish objects burst out of screen.

Link: https://editor.p5js.org/Susan_Xu/sketches/6w9uERpF5

I change the code from last week in form of vector. Everything is much clearer now. I follow Moon’s advise to scale the window to full size.

The interaction well reminds me of fountain, so I thought: why not a real fountain? I change the initial velocity in y to negative, so the particles are shooting up before falling down. For the best view of the fountain, I restrict the initial position to the bottom of the canvas. After all that, I alter the color to make it more realistic, and add velocity coefficient to ensure that the fountain stays in the canvas. Now, our users are able to create their own fountain (and even fountain sets! Check below:).

My change in color, though, is disliked by my boyfriend. He insists that pink is the perfect color. To make compromise, I add a keyboard interaction: once ‘p’ is clicked, the fountain will become pink, and will return to blue once other keys are pressed. Which color do you prefer? Let me know!