Continuing from my last post, this part will cover the Javascript part.
My GitHub Page:
https://kroyagis.github.io
I struggled the most with Javascript on this project. Especially because I chose to stick with Vanilla Javascript. I did not want to load the whole jQuery library, because my GitHub Page is a relatively small single page website. Hence I climbed a steep learning curve, but I learned a lot. I also realized that I was taking so many things for granted when I was using only jQuery.
Xeyes — making the eyes follow cursor
So to make the eyes follow the mouse cursor, I found this excellent site that explains how the Xeyes functions work (credit goes to Dr A R Collins) The basic idea is that, when the mouse moves, the pupil moves towards the cursor. However, it can’t go further than the radius of the eyeball. I won’t get into too much detail, but the three important variables are: location of the cursor, centre of the eyeball, and centre of the pupil.
Firstly, in Javascript, the x and y coordinate of the mouse, measured from the top left of the page, can be calculated by MouseEvent clientX Property.
Secondly, the centre of the eyeball, is (e1x, e1y), which allows us to calculate the x and y displacement of the cursor from the centre of the eyeball.
Lastly, since x:dx and r:R have equal ratios (because they’re from similar triangles), centre of the pupil can be obtained by the following equation:
where r, is a constant which is the width of <div class=”eyeball”> divided by 2.
Increasing performance — throttle and debounce function
To avoid putting too much stress on cpu, I looked for ways limit the number of mousemove and page resize events fired. I found out about throttle and debounce function, at here. Throttle limits the maximum number of times that a function can run in a given time, where as debounce does not allow the function to be run unless a given amount of time has passed. More detailed explanation can be found here.
Afterthoughts…
So this is it! It took me a lot of time and effort to create something from scratch, but it was a very rewarding experience. Many thanks to my wife for giving me lots of advice, and fellow Bitmaker students for all the positive feedbacks! Please don’t hesitate to contact me if you have any comments or questions.
