New HTML5/JS Projects

Aug 05 2018

A few days ago I completed a number of HTML5 Canvas projects that I was working on, a link to each one can be found on the Navbar. These were a continuation of the original cover page project (which is the current cover page with circles growing and moving about).

The original cover page project was done using Canvas and JavaScript. After I connected the canvas element with my JS file, I could use JS to write the necessary classes, objects and movement patterns. Most of the exercise was straightforward. However, there was a moment when I didn't qualify an action (beginPath()) with my canvas.getContext('2d') variable, which caused issues and took me a while to find. The other challenge was centering my link through HTML and CSS. I still need to improve how it looks on mobile devices but for now I am using either fixed or absolute positioning.

As I was completing the original project I wanted to consolidate the skills I learned, particularly the class and object creation. So, I made another cover page from scratch that also involves moving shapes and interactivity. It generates triangles that project from the outer left corner and bounce around the screen. A mouse click will begin the process anew. Please note that no two animations are alike.

The next cover page evolved from me still experimenting with colours and circles. It is not interactive but is still unique upon reloading. Finally, the last cover page is the cosine pattern. This took a little longer to figure out. I started from scratch and tried a number of different approaches to getting the wave pattern that I wanted. Eventually I landed on one that worked. I used a for loop with four variables: i, x, y, pie. The i variable just manages the iterations of the loop, x and y manage the horizontal and vertical coordinates and pie manages Math.PI which interacts with my y coordinate variable. I played around with the ratios for a while until I found one that looks good (on a PC viewport anyway). In the end I was pretty happy with the result. The next stage would be to animate it...but I will leave that for another time.