Ballistics Battle WebGL Game! As an old time gamer, I used to love one of the most classic board games called Battle Ships. In the current day with me being a developer I though why not recreate the concept using everything I’ve learnt so far in WebGL. …enter Ballistics Battle! …or in other words my attempt at creating a similar game! In
Crises on Earth locally visualized with WebGL So I thought displaying all the natural Crises going on around the earth could be quite a fun project. After doing the globe and the atmosphere for the GPresults.net site, I stepped back and decided I was fairly unhappy with the look…(I am allowed to criticize myself yes 😛 ) So I looked for
GP Results displayed using WebGL technology I’m a big (read HUUUUGGEE) fan of MotoGP, so naturally I was inspired to do some visualization of a GP aspect using my favourite technology. After getting some ideas from other great coders, I have come up with a way to display the GP results of all the past/present MotoGP riders. As well as to
The Cross References visualized using WebGL I’ve always found it fascinating how many chapters in the Bible go hand-in-hand with completely different parts of the Bible. So I figured what better platform to use than WebGL to visualize all the cross referencing pieces. The Site will not only display the connection between all the parts but it allows you to read the
Sombrero Galaxy recreated with WebGL I am always mesmerized with the enormity and beauty of the universe, specifically the varying geometry of distant galaxies. After inspecting the high quality images of the Sombrero Galaxy, I got inspired to try my hand at re-creating it using WebGL and the Three.js library, along with some custom vertex and fragment shaders. This image in
Colourpicker tool using WebGL A colourpicker tool built with WebGL using custom Vertex and Fragment shaders to put the load on the GPU. This experiment uses custom shader technology for colouring and protruding the vertices on the plane that matches(by colour tolerance) the colour picked from the canvas in the bottom left that displays the uploaded image or the default placeholder
Simple Water with WebGL Simple Water exercise using WebGL and CPU calculations for points. This experiment uses, lighting/shadows/lensflare/random math/plane geometry & the Tween engine. The solar image and flares were taken directly from the Three.js website – http://threejs.org/examples/webgl_lensflares.html Interaction: There is no interaction in this scene apart from the ability to move the camera around and zoom in-out ect.
Data Graphs using WebGL Visual representation of data using simple 3D graphs. This experiment uses, lighting/shadows/data feeds/cylinder & text geometries/camera anchor points with Tween effects/mouse interaction & CSS labels overlay’ed over the WebGL scene. Thanks to the amazing work by AMCharts for the inspiration of the graph looks. Interaction: Clicking on any graph name in the upper right corner of the screen takes
Particle Collider animation using WebGL Recreation of the Large Hadron Collider on a small scale. This experiment uses lighting/shadows/circle maths/cube,tube,torus,sphere geometries/textured materials/keyboard interaction & point clouds. Interaction: The “Up” arrow makes the particles travel faster and the “Down” arrow makes it go slower until it reaches reverse. The “Right” arrow halts the particles. The “Left” arrow aligns both particles to the vertical
Particles Tornado using WebGL Tornado made from particles. This experiment uses lighting/3D surface terain/exponential growth maths/plane geometry/textured materials/keyboard+mouse interaction & point clouds. Fun Tornado facts Interaction: The “Up” arrow moves the tornado backwards. The “Down” arrow moves the tornado forwards. The “Left” arrow moves the tornado left. The “Right” arrow moves the tornado right. The mouse feathers the particles out of it’s way when the pointer is
Sphere physics demo. This experiment uses lighting/physics/collision/box,sphere geometries/textured materials/keyboard+mouse interaction & point clouds. Interaction: Hovering the mouse over a red ball gives it “mass“. Once a ball has mass it will drop to the floor (the bottom ones will obviously need to be given a mass first, otherwise they will hold the top balls in the air). After giving the
Ball grid demo. This experiment uses lighting/sphere geometry/grid maths/colored materials & mouse interaction Interaction: Hovering the mouse over a red ball shoves it backwards.
Simple 3D box demo. This experiment uses lighting/box geometry/textured and colored materials & mouse interaction Interaction: Clicking on a wall panel changes it’s color randomly.
Simple weather site using the API from WorldWeatherOnline.
Animated with the help of SVG layers.
HTML5 tool to selectively color photos.
With the educational well-being of the younger dudes on the board at heart, I thought I’d share this basic theory: “The Smoke Theory of electricity” OR “How Microchip Circuits really Work”. A sheet of paper crossed my desk the other day and as I read it, the realisation of a basic truth came over me. So simple! So obvious we