2D Graphics Coursework – A JavaScript Orrery

I apologize for the lag in the above video, its honestly not my code! 😉 It’s the free screen recorder program I used being iffy.

For the last few weeks I’ve been steadily working on my coursework for the “2D Graphics and User Interface Design” module. We’ve been tasked with developing a digital orrery using the HTML5 canvas tag and the associated JavaScript drawing API’s. “What is an Orrery?” I hear you ask, Wikipedia to the rescue:

An orrery is a mechanical device that illustrates the relative positions and motions of the planets and moons in the Solar System in a heliocentricmodel

Heliocentric just means that the planets move around a stationary sun.

The finished, final version of the product will have gravitational forces effect the positions of each planet, allow the user to invent new planets and place them in (effecting the courses of all the other planets!) and have an additional drawing mode in which all of the planets are made to look like pretty Koch Snowflakes 🙂

In the above video you can see what I have achieved up until now, with another month remaining to get it finished. I have

  • 4 Drawing modes (Arc mode, Line Mode, Sprite (image) mode, Animated Earth Mode (Using spritesheets))
  • Independent rotation speeds for each of the planets
  • Keyboard controls to decide which mode is shown

I have the following left to implement

  • Gravity
  • User added planets
  • A moon orbiting earth
  • Elliptical orbits
  • Koch Snowflake drawing mode

I hope to get most of these done this week 🙂

One of the interesting parts of the assignment has been the programming language used itself. JavaScript, though based on the same family of programming languages as my preferred language C#, is quite different to the aforementioned language in some pretty important ways, for example Object Orientation doesn’t come naturally, instead the language uses the Prototyping paradigm, which takes a bit of getting used to if you are an OOP programmer.

JavaScript is also the first loosely typed language I have been formally taught, though I did write in PHP for a few years before university which is also loosely typed. A loosely typed language such as JavaScript doesn’t have hard and fast rules on what can be stored in a variable, for example in C# if I write:

public int WholeNumberVariable = "string";

the whole program will not compile, because putting a string in a variable that has been initialized to hold integer numbers is illegal. In JavaScript when you initialize a variable you can’t assign a type, so It can hold anything

var WholeNumberVariable = "string";
var IExpectANumericResult = WholeNumberVariable / 2;
//I'm going to be a huge bug! I expected a number to divide by 2 but now I'm trying to divide letters! This makes no sense!

This can cause some unexpected behaviour, also known as bugs. So it’s fair to say I much prefer Strongly typed languages.

But, I’m getting used to JavaScript and its numerous quirks, and actually rather enjoying it. I hope to report back soon with some additions to my orrery to show you!


Tags: , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s