Project: Website Redesign
#100DaysOfCode — Day 37
Today I completed the canvas animation that will be used as my background. I also changed the nav bar’s style a bit and added a header and tagline.
The circles in the background move around in a spiral if they are not disturbed. If they move off-screen, they respawn and if the cursor moves too close to them, they run away. Below is a video clip of the animation in action.
On to my notes, then. Today, I am going to include a picture of my notes, then, I will go through and talk about them. The notebook that I am currently using is one that I intended to use for school. It was too thin to keep a semester’s worth of notes, though, so it sat on a shelf until the other day. Now, gander at my atrocious handwriting and try to ignore the constant misspellings. Thes notebook doesn’t have a spell checker.
I didn’t get around to making the canvas resize on window resize, I will have to do that tomorrow. I also couldn’t get the viewport height property to work right. Maybe it is working right and I just don’t understand it.
For the canvas, I made an array of objects with the properties x, y, unitR, r, and color. x and y are the positions of the circles on the canvas, unitR is the radius of each circle, r is the distance from the circle’s starting point to its destination. The color is self-explanatory.
I made two for loops, one that loops through and draws each circle and one that changes the circle’s color and position. I didn’t write it down, but I also added an onmousemove listener that got the x and y coordinates of the cursor. inside the loop that changed the circle’s positions, I checked the position of the cursor and compared it to the position of the circle being repositioned. If the cursor was close to the circle, the circle would forget about its normal route and move away from the cursor instead.
I will probably continue working on this, cleaning it up. Maybe I will share the code with you tomorrow.
PS-I am on the lookout for more blogs related to coding. Some that are kind-of like mine. Like, journaling blogs. If you run one, please leave me a link!