ICA Art Rules case study

Tags: sapientnitro animation shortlisted web ruby box2d

Check animation prototypes

The ICA, Institute of Contemporary Art, has been in the forefront for arts for decades. It was finding difficulties keeping up with today’s social media age and needed to be part of the online art conversation. We (SapientNitro, London) built a platform to encourage people to challenge what art really means.



My role in this project was mainly in the rendering and animations of the art rules. Tech used includes: Ruby on Rails (RoR), HAML, Heroku, Github, SASS, CSS3 animations and Javascript Box2d 2D physics.

The major challenge in this project was to achieve fast animations on tablet devices. The performance on desktops and laptops was fine. I had to explore different ways of rendering the circles with the physics, mostly with canvas or DOM elements and CSS3.

At the end, due to the full screen nature of the animations, I decided to use DOM elements and apply realtime CSS3 transformations (hardware accelerated) to animate the circles. I used Box2d to calculate the physics for the attraction forces, collisions and pushing the colliding circles around when resizing one of them.

The mouse wheel and the swipe events in touch devices, were used as circle generators. The user could scroll left and right to move all the circles and generate new ones. As soon as the circles were out of the screen, they died and a new one were created on the other side of the screen. So, in a way, it was sort of generative art :-)

I really enjoyed working on this project, as I love arts and creative stuff and it was also quite challenging (because Box2d with DOM elements was unexplored terrotory for me and the rest of the team). It was also my first project in SapientNitro, so it really helped me to create a good reputation around me.

Featured on:

wall installation
Installation of the project on a wall in SapientNitro's office











Projection of the project over the facade of Tate Modern in London