2. Interactive Digital Cube
First design concepts: The
ideas of producing a cube
with a rope or pulling
device to enable
interaction.
Also enabling rotation by
adding arrows to prompt
the user to turn the cube.
This would be created
using HTML5 & CSS3.
3. Other ideas included the concept of a
4D maze of which you had to rotate
the cube in order to reach the ending.
4. Adding ‘Interactions with JavaScript
JavaScript is a great utility (as a programming language, of course) on the web
for creating dynamic content as well as animating content. During the
development, I decided to take a CSS3-made cube made by Rich
Bradshaw, recoded the parts and added interactivity to the faces of the cube
which will act as interactive panels.
5. The HTML5 Canvas Element
One of the main criteria for creating the Digital Cube
was being able to rub it, I had the idea of using the
<canvas> element in HTML5.
The <canvas> element is like a drawing whiteboard, you
get to draw on it, but we wanted to simulate rubbing so
we used the <canvas> element to create rub marks on
the cube.
As soon as you stop rubbing, those marks disappear.
