This was a program made using JavaScript (ES 6) applied onto a canvas object in HTML. It is a screensaver emulator, since it is formatted to run within a browser framework, but could be reapplied later on.
Project Dates: November 2018 - Present (Inactive since February 2019)
This is a part of my retroactive upload initiative to showcase my personal projects on an open-source platform.
Circle Growth was one of my first attempts at creating a screensaver-styled javascript program. It loads in a 400px by 400px standard HTML5 canvas object, but is resized to fit the entire available window space by applying a window.onresize property on startup.
Essentially, a Pen object is used to trace where Circle objects should be placed. The pen drags across the screen, leaving circles, much like ink from a real pen. These circles will automatically and independently resize to fill a pre-designated amount of space as time progresses.
A big advantage to this project is that it allowed me to explore and practice with forms of JavaScript objects. In this case, I created 3 object frameworks. The Pen and Wiper only have one instance each, but the Circle object is replicated many times during runtime, stored in an array to facilitate a loop through all circles present on the canvas.
| Property | Type | Description |
|---|---|---|
| x | variable | x-coordinate of pen cursor |
| y | variable | y-coordinate of pen cursor |
| angle | variable | angle the pen is heading over next time step |
| speed | variable | speed the pen travels across the canvas |
| color | variable | color of circle that will spawn next |
| move | function | shifts pen along angle, possibly rotates angle, changes ink color |
| Property | Type | Description |
|---|---|---|
| on | variable | Defines whether wiper is running |
| t | variable | Measures progress of current wipe |
| method | variable | Records type of wipe |
| start | function | begins wiper actions |
| stop | function | ends wiper actions and resets variables |
| clean | function | selects cleaning action/function |
| wipe | function | wipes from side-to-side |
| cells | function | wipes in an array of cells |
| pie | function | wipes in a pie-style spin |
| blots | function | wipes by making blots * |
| stripes | function | wipes in diagonal stripes * |
* experimental or incompleted feature
| Property | Type | Description |
|---|---|---|
| x | variable | x-coordinate of circle center |
| y | variable | y-coordinate of circle center |
| r | variable | radius of the circle |
| color | variable | color of circle, for printing |
| grow | function | increase circle radius by regular amount |
| intersect | function | determine if circle is intersecting another (passed as parameter) |