How I made the artwork for Supatronix using Flash, AS3 and the HYPE Framework

Supatronix celebrated 7 years of broken beats and bass this year and for their birthday artwork they wanted something a little bit special. The brief was for a pixelated number 7 and with my recent interest in generative art I thought it was the perfect chance to get my hands dirty and produce some artwork. I chose to use the HYPE framework for most of the job as I knew that the BitmapCanvas class would allow me to capture the image at a high enough resolution for print.

Version 1

The idea I had for the art was to set a number of squares randomly vibrating and allow them to move about the canvas area. Colours were sampled from an image that I’d made in Photoshop of a slightly pixelated number 7. The colours were updated roughly every half a second to allow the colours to bleed out from the original shape. This produced some really nice, highly detailed images but it was felt that the number was getting lost in the overall design so I started to look into other ways of bumping up the definition of the main shape.

Version 2

My first update was to set several boids swarming to different points within the target shape with colours being pulled from a the colour pool I’d set up using HYPE. To me this looked absolutely ace, but was far too abstract so another angle was needed!

Version 3

The colours struck a chord with the client though so I had made a step in the right direction there. My final tweak was to change the swarm to random placement of squares. The squares wouldn’t leave the abstract trails of the swarm, but could be given the bright colours to help the main shape stand out. This worked really nicely and created the exact effect that I was after. Several variations and sizes followed before the final design was signed off.

Producing the artwork was a great learning experience and I’m glad to say that the end product has been really well received. I’ve had several requests for high resolution versions and the next set of images for Supatronix are all going to be using a very similar style!

Gallery of designs from throughout the process