Brudenell 100 // Initial Graphics

I set about making simple geometric adaptions of my sketches, creating scenarios that would animate well within the limitations of HTML5 Canvas. Here were some examples

Pool

gigroom

drinks selection 

All of my initial attempts, it was clear that I needed to really heavily refine the types of images I was creating. Firstly, they were too complex. The use of simple shapes makes the site load much faster, and would help to make the scenarios more stylistic, consistant and easier to animate. This was a limitation in the technology that I had not anticipated, but which became clear through trial and error. It was also clear that I needed a colour scheme to stick to as there is too much going on in these scenes. Stripping back the colours to something more interesting would definitely help stylise the site and bring them all together as a set. 

This was the colour scheme I chose to carry forward. 

The benefits of making these changes was clear straight away, and I carried these principles across to the whole set.

The table football was particularly complex to animate:

The darts animation was particularly useful to do as it taught me that you can animate the same object across multiple paths and it will cycle through them without redrawing it. This is a really efficient way of animating on the web as it cuts down the among of processing that has to be done at the user's end. Here the same dart drawing follows one path, then moves to the start of the second path to follow, then the third before repeating the whole cycle. This makes the use of a loop way less obvious to the viewer. 

Next Steps:

The drinks and pool animations are proving to the most troublesome and so they will need more attention to fit the set.

I need to design the website that will house these

I will need to write the copy to be displayed with each.