Image may be NSFW.
Clik here to view.
This week’s assignment proved to be difficult but fun (and a success). My idea was to create a canvas where the colors produced would be random when the user wanted to draw, and where the size of the pen would increase with time. I also wanted to get rid of the cursor to improve the experience.
I had an easy time eliminating the cursor and replacing it with a flashing circle, as well as making the canvas reset when the user right-clicked the mouse. My big difficulty came when trying to ensure the cursor would only draw when I wanted it to draw. I tried using if statements, different settings with the mouse, moving around the order of code in the draw() function, and a few other methods. None of this worked, and I came to the help session over the weekend, where Moon took a look and explained the problem: we need an object and an array to make it work. An object is necessary because we will be drawing many circles, and the array is necessary to hold the information for these circles. An array is essentially a storage system for data, and it allows that data to be redrawn each time the draw() function redraws the background. The background is needed to be redrawn each time to eliminate the trailing of the cursor.
Moon also explained that by having an object it allows you to manipulate the canvas and make a rudimentary animation. Here, each frame sends the circles one pixel to the left, giving the illusion of a scrolling screen. To add some randomness, I also set it so that each time a circle is drawn, it will shrink at a semi-random speed, and I set the frame rate to load somewhere between 15 and 60 fps each time the page is loaded.
I really have to thank Moon for his help this week as he patiently explained to me the concept of objects and arrays, as well as how to code them.
