Exercise 1

Static Example

For my static example, I have decided to draw a bee.

At first, I thought it would be something simple to draw. Then I started to make it and had to use:

  • Arcs (Circles)
  • Bezier Curves
  • Quadratic Curves
  • Rectangles &
  • Lines

I think this is a good demonstration of the possibilities of HTML5 Canvas. Images on screens are usually square or rectangular, to draw such a curved object takes a lot of time and plotting.

View Code: Link to Static Canvas Code

Your browser does not support the HTML 5 Canvas.

Moving Example

This is my moving example. I created this to help me with my assignment. The ball moves from Point 1 to Point 2, by choosing a value from a slider, you can choose how unstable the ball is.

In my Assignment, I aim to have a helicopter that is moving along, incoming sensor data will change it's path. Shaking it should not make it harder to control, since it stays on the line (var line), but rather make it 'bigger' as when it shakes, it take up a space upto 14 pixels bigger than the ball actually is, thus making the game harder.

I feel this is a good demonstration of HTML5 Canvas as it mixes canvas drawing (the ball and scene) with mathematics (random numbers and coordinates) and javascript (lots of variables and functions).

How to use:

  • Use the 'Bounce' slider to determine how unstable the ball is, you can do this while the ball is moving
  • Press 'Go' to start the ball moving

Note: You will have to refresh the page to use again.

Controls:


Stats:

Distance Remaining:

Bounce:

View Code: Link to Moving Canvas Code

Your browser does not support the HTML 5 Canvas.

References

Snippets of code from other websites have been linked to in code comments.

  1. Week 1 - code-master.zip. 2015. Blackboard [ONLINE] Available at: https://bblive.uclan.ac.uk/webapps/blackboard/content/listContent.jsp?course_id=_37705_1&content_id=_693316_1&mode=reset. [Accessed 9 February 2015].
  2. Generate random value between two numbers in Javascript - Stack Overflow. 2015. Generate random value between two numbers in Javascript - Stack Overflow. [ONLINE] Available at: .http://stackoverflow.com/questions/4959975/generate-random-value-between-two-numbers-in-javascript. [Accessed 9 February 2015].
  3. javascript - How to draw an oval in html5 canvas? - Stack Overflow. 2015. javascript - How to draw an oval in html5 canvas? - Stack Overflow. [ONLINE] Available at: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas. [Accessed 12 February 2015].
  4. Modernizr: the feature detection library for HTML5/CSS3. 2015. Modernizr: the feature detection library for HTML5/CSS3. [ONLINE] Available at: http://modernizr.com/. [Accessed 13 February 2015].