Ricochet is a Pong-inspired game. It’s an earlier demo with collision detection, scoring and basic camera manipulation. Both are somewhat preliminary and I plan to refine them as time goes on. However, their main purpose is to showcase some of the features of the library which I hope I have done. As the library becomes more efficient (and as I hone my javascirpt skills), I foresee demos which are better and faster….and don’t eat memory for breakfast!
Here are the demos:
Both demos detect if the canvas loaded properly. If canvas loading failed, an image is displayed instead with a screenshot of the demo and some text directing the user to setup instructions.
It took me a little longer than I was anticipating but the flickr/picking demo is done. It is available under the demo section of the website. This demo grabs different sized images from Flickr and textures them onto some cubes. The user can rotate the cube as well as zoom in on the cube. For those that don’t know of Flickr, it is a photo management system. It allows people to upload there personal images and they can be made public or private.
I would have published earlier but I ran into some problems. Apparently I misunderstood what the client mouse position was. I thought I was getting the coordinates of the mouse on the element that generated the mouse callback. What actually gets returned is the mouse position with regards to the client window. I realized this problem when I was adding my demo to a webpage and I moved the actual location of the canvas on the page. Now the mouse position on the screen didn’t match the mouse position over the canvas. Further more if the page scrolls but the mouse stays still, the actual position of the mouse in the canvas has changed but the mouse position to the client has not.
I spent a few hours researching this problem until I discovered a script by Peter-Paul Koch that finds the actual position of any object in a page relative to the page. That only helped while the canvas was on the screen and the page did not move. Once the page scrolled or was resized then my mouse position no longer reflected its correct position within the canvas. I then did some more research and found that the window has an attritube pageXoffset and pageYoffset which holds the amount a page was scrolled by or resized by. Hallelujah! My demo now works regardless of scrolling or resizing.
On a side note: