Assignment Two: “Storming” into the World of Processing, JS and p5.js

For my second assignment, I was required to create something cool by implementing my design idea using a function and then using the same function to replicate the original design but in different dimensions by changing the parameters.

Only two days since the start of January Term, due to next to nil prior experience in programming and due to the unconditionally cold weather, I was already struggling a little with the course.  Wednesday was supposed to be the coldest day of the week and a few people were predicting either heavy rains or a mild snowfall.

At this point, I decided that even though the material of the course was absolutely novel and unfamiliar to me, I could either let the stress of a new challenge drown out my confidence or I could instead storm my way through a new digital realm of unfamiliar syntax, HTMLs, JavaScript and codes, and have even have some fun with it along the way.

So that’s how I landed up with this idea to create a stormy scene on the screen, for the most part to reflect my own mood and state of mind. I wanted my project to have a compelling effect, I wanted the sky to flicker automatically, much like how the night sky flickers when the clouds roar thunder and pelt wild rains through a storm.

It was relatively simple and straightforward to create the three clouds on the screen. I started by creating one by simply using three ellipses, aligned parallel to each other and interconnected, such that the middle circle was larger than the two circles on its sides. I added the lines to give the effect of rain.  I chose a black sky as the background.  Here’s what the first cloud looked like on a stormy night.

Screen Shot 2016-01-13 at 5.04.33 PM

I incorporated the steps for creating the cloud into a function that I called “drawCloud(x, y)” with x and y being the coordinates where the center of the left-hand side circle of the cloud would get drawn.

The next step was the simply insert the “drawCloud(x, y)” function within the draw function of the code and repeat it by changing the x and y- coordinates in order to get two more clouds at different locations.  Here is how the final scene ;looked like, with three clouds in the stormy night sky.

Screen Shot 2016-01-13 at 5.32.32 PM

Finally, in order to get a cool flickering sky, which would really give the feel of a roaring storm, I had to modify the background using the random(0, 255) function that would project different shades of grey, black and white onto the screen by picking up random values from the greyscale that ranges from 0 (black) to 255 (white). Of course, I inserted the background function within the “draw” function of my code and placed it before the “drawCloud” function so that the background did not draw over my clouds.

And the final result was exactly what I wanted: a roaring stormy sky flashing differing shades of black and grey on the screen with the white clouds pelting rain.

With that stormy night sky and the successful completion of my second homework, I felt more confident about diving right into this fascinating world of creating visual effects and interactive models using code.

11,900 thoughts on “Assignment Two: “Storming” into the World of Processing, JS and p5.js”