11.

Dec

2016.

University Coursework

I've not posted in quite a long time, as I've been busy with University. I'm a second year now and my modules are currently: Advanced Programming, Artificial Intelligence, 2D Computer Graphics & User Interface Design, and Systems Analysis & Design. I've been working on 2 pieces of coursework.

Systems Analysis & Design

For this coursework, I joined a group of 6 other students. Our task was to design and create software which would be used at a theatre in order to create and manage plays, performances, customers and bookings. We had a specification to follow which defined the requirements of the software.

Theatre Management Software

It was an enjoyable project to work on. I initially helped plan the structures of the database, working with efficiency in mind. I then took the created database and linked it to a Manager class, which was responsible for updating the database in predefined functions, which could then be used in the UI. Examples included functions for creating customers, editing plays and deleting performances.

 

2D Computer Graphics & User Interface Design

In this module we worked with Javascript (with JSLint) and the HTML5 Canvas in order to draw a scene. Early lab work taught us about Matrix mathematics, Bezier Curves, Scene Graphs and Animation. Our coursework was titled "Do whatever you want*", with the asterisk mentioning that it has to be work that can be graded against specific criteria.

Initially the idea of using Matrices and Scene Graphs seemed daunting, but as I learnt about it they seemed logical and not-so-scary anymore. Javascript wasn't hard to work in, though the JSLint made errors more pronounced (which has helped me with better JS programming conventions).

After creating a class for Vectors and Matrices, I went on to create a Polygon object which draws a polygon from points passed in. I used this to create a western scene.

Western1

I used a simple gradient background, an arc for the sun, polygons with curves for the objects, and a Bezier curve for the ground. It looks good, but not impressive enough. I decided to add tumbleweed and create a Mirage to create a nice shimmering effect - I did this by taking in the data of the background (which is a 1 dimensional array of Uint8, with 4 values for each pixel - RGBA), and doing 2 for loops to create a distortion on the X and Y axis using sin and cosine waves. It made an effect like this:

shimmer

This was initially quite slow and CPU intensive, as it was calculating the data on-the-fly. I then redesigned the code so it generates the first 60 frames at the start of the program, then simply loops through them in order to create the animation. This caused the program to halt for ~5 seconds before it started which didn't look very good. It was more efficient, but it didn't appear so to the eye. I then used a web worker to generate the mirage frames so I could show a loading screen whilst it calculates. This worked, but the loading times were pretty long - it turns out web workers don't pass a reference, but instead pass a copy of the data. Why was this a problem?

Remember the original array of pixels, with one for red, one for green, one for blue and one for alpha. The size of each value is a byte. The canvas is 800 x 600. So for each frame there's 800 * 600 * 4 bits, multiply that by 60 (as there are 60 frames) gives us 115200000 bytes, or 115.2 megabytes. This is a problem as it's trying to copy 115mb at the start which is slower than the initial calculation without the web worker.

I discovered that web workers can pass an ArrayBuffer as a reference instead of copying, so I passed the array buffers in order to circumvent this problem.

I will update this with a link to view my work in action - right now the coursework deadline is not over yet.