Canvas Drag and Drop with Collision Detection

In this post I’ll cover the basics of implementing drag and drop with collision detection using the Canvas element and JavaScript. The end result will produce the following:

Drag and Drag shapes on the canvas

Each item on the canvas is represented by a rectangle.  When clicking inside the bounds of an rectangle the inner circle’s colour changes to grey to indicate the item is selected.  Release the button results in a mouse up event .  Between the mouse down and up events the item can be dragged and thus moved around the canvas.  When two objects collide they will be coloured red. This functionality has been implemented as follows. Continue reading “Canvas Drag and Drop with Collision Detection”

3 Step CSS Animation Tutorial

CSS3 includes the ability to animate elements using nothing more that pure CSS – no JavaScript or Flash required.  An animation is defined as the transition of an element moving from one state to another.  For example a simple square can be move from one position to another using CSS e.g.

CSS Animation illustration Continue reading “3 Step CSS Animation Tutorial”

Raining google with HTML5’s Canvas

Following on from the Great Balls of Gravity post, I’ve used the code from the post and adjusted to animate Google’s logo.  Each letter within the famous name will free-fall from top, bounce at the base and then fall off the bottom and repeat. Continue reading “Raining google with HTML5’s Canvas”

Great Balls of Gravity – HTML5 Canvas

Continuing with the Physics posts my second post on the subject involves mimicking the gravity effect on a medicine, basket, football and tennis balls.   A working version can be viewed here. The completed project is depicted below:

Falling balls effect in HTML5's canvas

The example above uses the Canvas element which is available in most of the major browsers as part of HTML5. The mark up of the above follows: Continue reading “Great Balls of Gravity – HTML5 Canvas”

HTML5’s Canvas – A physics’ Race

Cars in motion HTML5I fancied stepping into the unknown with my next HTML5 and canvas project. I’ve always been fascinated by the laws of physics and the programmatic approach one would take to manage this within a software project. As my knowledge on this subject only extends to my education at school, I decided to attempt to carry out the basics of a car race animation using the basic equation for a particle in motion e.g. x = x0 + (v0 * t) + (1/2 * a * t^2). Continue reading “HTML5’s Canvas – A physics’ Race”

HTML 5 Canvas: An animated Digital Clock

HTML5’s canvas implementation allows you to draw whatever takes you fancy; be it a thermometer, speedometermap, compass or a Caesar cipher.  In this post one intends to draw a digital clock.  This HTML5 canvas implementation draws the hour, minute and second digits individually with the correct number that represents the current time.  These are then redrawn every second as one would expected a real clock would do!
HTML5 Canvas Digital Clock
Continue reading “HTML 5 Canvas: An animated Digital Clock”

HTML 5 Canvas: An animated Analogue Clock

html5-canvas-analogue-clock

HTML5’s canvas implementation allows you to draw whatever takes you fancy; be it a thermometer, speedometermap, compass or a Caesar cipher.  In this posts I’ve taken the engine used to draw the Caesar cipher and applied it to a traditional analogue clock.  This HTML5 canvas implementation draws the clock face – minus the hands – as the background.  The hour, minute and second hands are then drawn at the angle that represents the current time.  These are then redrawn every second to animate the clock arms as one would expected a real analogue clock to do!
Continue reading “HTML 5 Canvas: An animated Analogue Clock”

HTML 5 Canvas: An animated Caesar Cipher

ceasar_cipher_html5_canvas

HTML5’s canvas implementation allows you to draw whatever takes you fancy; be it a thermometer, speedometermap or compass.  This post takes my previous posts one step further and mixes together the techniques used  in the aforementioned posts to draw an interactive animated Caesar cipher.  In cryptography, a Caesar cipher is one of the simplest and most widely known encryption techniques. It is a substitution cipher in which letters are replaced by a letter some fixed number of positions down the alphabet.  For example, with a shift of 4, A would be replaced by E, B would become F, and so on. The method is named after Julius Caesar, who used it in his private correspondence.  In this post one will explain how to draw a Caesar Cipher gauge.  The gauge will allow a user to input the desired shift.  When a shift value is input the Caesar Cipher dial will rotate to represent the new shift.

. Continue reading “HTML 5 Canvas: An animated Caesar Cipher”

HTML 5 Canvas: An animated compass

HTML5 Animated Canvas Image

My previous posts on HTML5’s canvas implementation have simply drawn a static image; be it a thermometer, speedometer or a map.  This post blends together the various methods covered in the aforementioned posts to draw an animated compass.  This is achieved by adding two elements to the canvas.  These are the background image (a compass without its needle) and the compass needle which is continuously animated in a circular motion. Continue reading “HTML 5 Canvas: An animated compass”