Turning a regular SVG image into an interactive animation is a breeze with SnapSVG. In this project an isometric illustration of an App has been made interactive and there are some nice animations that bring the project alive and make the interactions have meaning. The illustration is an exploded view image which is often found […]
Posts By: Mark
If you’ve got sound playing such as a song, you may very well be doing that as part of a live presentation and so firing animation at key points in the music is pretty important. It can be a hassle to set up timers and make sure they go off at the right point, so […]
Generative morphing, interactive spirograph shape using the p5js framework which is a port of the popular Processing Java library. This tutorial was commissioned for Web Designer magazine and shows how to create rich interactive graphics using the HTML5 Canvas element.
Further exploration of the earlier Generative Drawing System 01. This update relies on the agents moving via a repulsion and attraction system. The agents naturally form flower like structures as they follow these rules.
Using Processing to create large scale renders of animated agents, this generative drawing system uses networked connections to draw structures based on the movement of the agents through their individual life span. Here is a close up detail image: Here is a low res early version being drawn: Generative Drawing Particles 001 from Mark Shufflebottom […]
This project uses WebGL and the popular ThreeJS library to create an interactive 360º panorama. This uses a large image mapped onto the inside of a sphere then the camera is placed in the middle of this and as the user clicks and drags, they can navigate the room. The hover effect happens when the […]
This tutorial for Web Designer Magazine shows how to create a scene visually rather than just using code. The advantages are that objects can be placed visually and the scene built up and tweaked without constant fiddling with code. The scene is built in the ThreeJS editor using models brought in from Cinema4D but other […]
This was a two issue tutorial for Web Designer magazine creating a 3D platform game in WebGL with the ThreeJS Library. The tutorial was to show how to create a multilevel game. At present there are only two levels however the architecture is there to add more levels to the game. The game features models […]