Colour me in

Welcome to the Playground

The Playground is a space for us to play with tech, experiment and share cool techniques with our friends and partners. Check back for quarterly updates and give us a shout if you have an idea you’d like to share.

New beginnings

We moved into our studio behind Barbican tube station in late summer 2014. It wasn’t a move that we wanted to make, but due to the sale of our beloved building in Hatton Wall we had to move and fast.

The first few weeks and months took some adjustment. We were now at least half a mile closer to the City and the clientele in the local tabernacles illustrated this.

But we settled quicker than we thought and soon grew to love the avenues and alleyways of Smithfield’s, the strange names like Little Britain and Cloth Fair, and, most importantly, we found a pub we could call home.

Making a mark

But we needed to make a mark. A literal mark. Tasked with given our building an identity, our illustration dream team of Daisy and Laura set about creating something that represented TheTin on the streets of EC1.

Our new studio is set out over two floors; the ground where the directors and consultants hang out and the basement where the magic happens – the engine room, if you like. Laura began drawing out some Mario-esque pipes visualising the output of the industry that is located below ground.

From the pipes concept, Daisy began expressing the creativity that comes from our studio, whether it’s code, graphics, illustration or ideas – represented in a burst of colour, shapes and patterns.

After a number of iterations, we agreed a final design and mapped it across the vast windows of 5-6 Newbury Street. At this point, we decided that the colour should be dropped for the exterior to avoid scaring our new neighbours.

Window illustration

Inside, however, the design was brought to life in glorious Technicolor, with both meeting rooms given a feature wall vinyl wrapped in the stunning design.

Meeting room illustration

The design was uniformly loved across the business and when Sasha, one of our front end team, saw it she suggested we should bring it to life on our website for our inaugural playground piece.

Colour me in

Over to Sasha for a description of how she set about bring the design to life in the playground:

"This was the perfect opportunity to experiment with animating SVG with CSS3. SVG animation has lot of dependency on the way it is drawn, so I re-purposed the original illustration in Adobe Illustrator for animation such as grouping elements, assigning IDs to elements and compounding paths.

In the SVG, we have three main “groups”; the pipes, the black outline of the shapes and the area inside the shapes which will be coloured in.

JavaScript is used to apply the colouring. I started with random RGB colour values being generated and this colour is added to the “fill” of the shape every time the user clicks it. However, this resulted in some undesirable colours being generated (our design doesn’t need muddy greens and browns). Daisy provided a list of hex colour codes to use and I used an array (list of data) consisting of these colours to create a palette. Colours are still random but now selected randomly from the list.

I soon realised an issue with this method - what if the user doesn’t like the colour they receive randomly? How do they change this? This was solved by data() in jQuery. When the user clicks on a shape to add a colour, data is generated. This data lets us know that a colour has already been assigned, so we will still repeat the process but this time replace with a new randomly selected colour to fill the shape. This method allowed the user to repeatedly change the colour of a shape as many times as they want.

The animation process was quite time-consuming and complicated, because every single object had to animate one after the other. Shapes are overlapping so they had to be animated in a particular order with the shapes at the front animating before the shapes underneath. The image below shows my labelling for the animation sequence order.

Overall, there are 85 individual objects to animate, which would take a very long time in CSS especially when you have to test/alter the speed/delay of the animation for every single one through trial and error. That’s when LESS comes to the rescue.

Animated sequence labelled

We created a loop in LESS - one for the animation of the pipes and one for the animation of the shapes that are bursting out of the pipe (see code snippet below). This helped generate the CSS by using commands rather than writing the CSS for every single object and we could easily specify that each object would start their animation every n seconds.

.loop(@index) when (@index > 0) {
    #A@index} {
        opacity: 0;
        -webkit-animation: showMe .3s linear forwards (2s+(@index*0.015s));
        animation: showMe .3s linear forwards (2.2s+(@index*0.015s));
    }
    // next iteration
    .loop(@index - 1);
}

// end the loop when index is 0
.loop(0) {}

@times: 2s, 1s, 2s, 2s, 2s, 3s, 2s, 2s, 2s, 2s, 2s, 2s, 2s, 2s, 2s;
.loop2(@pipe) when (@pipe > 0) {
    #P@{pipe}, #P@{pipe}_extra {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        -webkit-animation: dash extract(@times, @pipe) forwards linear (@pipe*0.15s);
        animation: dash extract(@times, @pipe) forwards linear (@pipe*0.15s);
    }
     // next iteration
     .loop2(@pipe - 1);
}

// end the loop when index is 0
.loop2(0) {}

.timedsvg {
    @n: 70; //num of elements
    .loop(@n);

    @p: 15; //num of elements
    .loop2(@p);
}

For the pipes, we are animating the stroke (the outline of the pipes) to appear as if they are being drawn out onto the page. We had some complication with our loop because certain pipes had to animate at a faster/slower speed than others, but we learnt about using a method called extract which is the same as creating an array of data in JavaScript but this time we are using seconds instead of colours.

For the shapes, we are simply control the opacity of each object. They start as 0% opacity on page load and gradually transition to 100% opacity at specified speed. The shapes are animated one after the other to achieve the effect that they are bursting out of the pipe.

Find out more about the Technologies used in the Playground

Share this

Launch full screen