Totally Drawesome

Our First Official Passion Project with our Design Friends, Nueker. It's Totally Drawsome!

Nov 6th Tech

Image for Totally Drawesome

Imagining the Unimagined

At Univers Labs, we’ve never really thought of ourselves as a digital agency, we’re just a group of people who love to explore unimagined ideas and new technologies to create something that we think is fun or interesting, and hope others find it valuable too. We like to see things differently and challenge the way people think about digital, whether it be the way we visualise data or the way we use a website. In short, we like to take exciting ideas and turn them into digital realities! 

We’ve always been big fans of collaborating with others and have been lucky enough to work with some incredible creative agencies over the years, and these relationships have formed some of our most loved work. So when our pals at design agency, Nueker, asked us if we wanted to collaborate with them on a playful new drawing project for their website, we were more than keen to be a part of it! 

Who are Nueker?

Nueker is a London based design agency, founded by Chris Nuelle and Josh Harker, who are also university friends of Univers Labs co-founder, Louis. They've developed brands for clients, including easyHotel, MCS, and Wet & Dry, and have collaborated on many of the projects created here at Univers Labs too.

Nueker wanted to create a unique experience for their users when visiting their website, something completely different from other design studios. They wanted their website to be more than somewhere people could view their work, but a place where they could play and experiment...enter Drawing Toy.  

The Drawing Toy was an idea that Josh designed while he was bored, and soon realised it would be far more fun and useful to use on their website. So, Nueker decided to create a tool that would give their users the freedom to try their hand at design, and create their very own abstract masterpieces, which can be saved and shared with friends. 

"A film montage of staged agency life, with employees pointing at post-its or sitting on Eames replica furniture. A carousel of the latest projects. A showreel of work. A pithy statement or adage. These are all things we've seen before, and we're unsurprisingly a little numb to it.

At Nueker, we always wanted people to come to our website and play with it. We wanted a toy. We wanted people to land on our page and feel delighted in some way, but at the same time, get a sense of design craft. Enter, drawing toy". 

Chris Nuelle, Founder & Director - Nueker

The Technical Talk to Drawing

Drawing in the digital realm is far more technically complex than drawing in the human realm, so we left it to Josh Richards, our Passion Project developer and another close university friend of Louis', to explain it.

We knew from the beginning that we wanted the Drawing Toy to be super smooth, but drawing smooth lines is hard, like really hard! That applies to both the physical act of drawing and the technical challenges involved with representing the lines as pixels on a screen. Fortunately for us, the user is responsible for the former, and the browser's canvas API can handle the latter. 

In order to connect these elements into a fluid and satisfying user experience, two distinct layers of processing sit between the user's actual brush (mouse/touch) movement and the final brush stroke drawn. This is where the curves come in.

Drawing curves works best with fewer points, so the first step was to reduce the number of positions in the path taken by the brush while still maintaining a high level of fidelity. We achieved this by comparing directional movement vectors at each position, if the variance is above some preset threshold, then the point is considered a necessary feature and can be used as a point for our curve. 

To reproduce the brushes path as closely as possible, the curve needs to pass through all of the previously calculated points. We decided to use a type of interpolating spline, a Catmull-Rom spline, to represent the curve as they satisfy this requirement and have several other desirable properties.

We can take advantage of the fact that both Bezier curves and Catmull-Rom splines are defined by cubic polynomials and are therefore interchangeable. Armed with a bit of algebra and matrix multiplication, any 4 points that define a segment of a Catmull-Rom spline can be used to calculate the 2 tangent vectors of the curve at the middle 2 points. Conveniently these tangents correspond to the control points of the equivalent Bezier patch, and when used as inputs to the canvas API's native curve function draw a smooth brush stroke. 

An Experimental Reunion

The Drawing Toy project marks both the return of Univers Labs to it's experimental roots, and the reunion of four university friends to work on a project that brings together their creative and technology skills, and restore them to the pursuit of play and experimentation.

This was a super fun project for the team to work on and we love how The Drawing Toy has turned out. We hope it allows people to experience a website in a new and fun way, while creating their own works of art. The brush sizes and colours switch at random, making the drawing process oddly frustrating and insanely addictive at the same time. Either way, a beautiful and unique piece of abstract art is always created!

 

Check it out at www.nueker.co.uk and start creating your very own masterpieces!