Will DonohoeFront End Developer.

YouTube

YouTube Advertise

Whilst at Toaster I was lead developer on a brand new website for YouTube, showcasing how advertisers can promote their products on YouTube. The site was built ground up with performance taking a key role, using modern techniques such as service worker caching to allow offline use and precaching as well as lazy loading of responsive images. Maintaining a consistent 60 frames per second by creating performant hardware accelerated CSS animations.

The new YouTube branding consisted of triangles, which proved to be challenging when the web is built with rectangles. Using a mixture of CSS masking, and SVG overlays I was able to achieve this effect, allowing it to scale responsively.

The project proved to be challenging yet through the strategies we implemented it proved to be a massive success, as well as adding support for 19 languages including alternative layouts for right to left.

Toaster VR

Toaster embraced the idea of experiencing the web in VR early. To find out the challenges of building a WebVR project I built a prototype showcasing the Toaster office in VR. The learnings of the project would help us advise clients where we could push boundaries for future projects.

We brought in an external production agency to record the office in 4k 360 video and I had the opportunity to find the most performant way of playing the videos in the best resolution within VR for the web, whilst not compromising frame rate.

I demonstrated my findings in a blog post, describing how we use Three JS and forked a third party library to quickly create a high performance VR video experience. Why not have a tour of the Toaster office by viewing it in a browser, or by using a cardboard / daydream to view in VR.

LUNE

We collaborated with Google Creative Lab to build beautiful starter templates for AMP Start, proving that developers can build cutting edge designs, as well as benefiting from AMP’s blazing fast delivery.

This template’s main purpose was to push the boundaries of what is possible with accelerated mobile pages, while conforming to best practices to be featured on the AMP Start website. During the development process, we also worked closely with the AMP development team to provide feedback of their components.

The result was a clean, responsive and blazing fast template that AMP could feature on their site. The project was by no means easy, we faced a lot of challenges along the way, overcoming restrictions like not being able to use Javascript.

Create a Snowflake

Remember folding paper and cutting patterns to unfold and create unique snowflakes? With a bit of downtime leading up to Christmas, the developers brainstormed some ideas for a Christmas Codepen. The person who suggested the best idea would be given a week to complete it. I came up with the idea to bring this snowflake creation process to the digital world.

The project is built using WebGL to render the 3D paper, Blender to form the shape and using morph normals to animate to the position, while using 2D canvas to handle the drawing. The project ended up going viral with people creating and sharing their own creations on social media.

Taiwan Elections Hub

Leading up to the 2016 presidential campaign in Taiwan, Google approached Toaster with an idea to revolutionise the way election information was delivered, giving people access to latest news, videos, as well as a special widget to ask the candidates questions. 11 of the most popular were asked during a broadcasted electoral debate.

I was a part of a team building the website hub. Using Polymer, we were able to create a very modular and componentised site, making it very easy for us to build on top of and update. Although I helped build most parts of the website, my main focus was the Ask the Candidates widget. Utilising a custom Google Map and Polymer’s data binding to visualise where the questions were coming from and which were most popular.

The project was hugely successful, changing the way citizens of Taiwan digested information about the candidates with 18.8 million voters reached and 6,500 questions asked, making it the most digital powered election ever in Taiwan.

Had a Love - Vessels Album Art

A part of a series of personal projects, taking an offline album artwork and bringing it to a digital space by making it interactive and animated.

I recreated the Vessels "Had A Love" single artwork in 3D, using WebGL and three js. There are a few different techniques used to create this piece, such as 65,536 GPGPU particles to create the dust, where a shader takes the 2 point light positions to calculate the colour and opacity of each particle. 2 point lights rotating around a series of box geometries to create the movement of light.

Users can rotate around the object, however the camera will start automatically jumping to random positions after a period of inactivity.

I See You - The XX Album Art

This project was kick started to gain a deeper understanding of GLSL fragment shaders. I had seen previous experiments where developers had created a raindrop effect purely by doing pixel manipulation in a fragment shader. Of course all of these operations happened on the graphics card and therefore extremely performant.

I wanted to recreate The XX’s “I See You” album art, by creating a frosted glass effect with an extruded X in the middle. The curves in the X should also create a refraction effect to give the idea of depth.

Each frame goes through 3 processes: The first shader adds a slight gaussian blur, the second pushes the pixels around to give the effect of frosted glass and the third and final process distorts the pixels further to extrude the X.

To make the demo more interactive, users have the option to flick between a static image, a video or alternatively use their webcam to impose themselves on the artwork.

Rennen - Sohn Album Art

The Rennen album artwork consists of crisp lines and flat shading, making SVG a perfect technology to bring this artwork to life. Getting inspiration from the Conrad music video, I used a combination of SVG and CSS animations to zoom, transform and interpolate the dash offsets to show the artwork being drawn.

The challenge in this project was to get past the various browser quirks when using CSS transform animations with SVG. For example Chrome rasterizes SVG elements each frame as you animate the SVG element for performance reasons. This caused problems when using the scale property as it made all of the lines pixelated. The solution to this was to perform the transform operations on a group inside the SVG element to prevent rasterization.

Even though this project seems relatively simple, it was much more difficult than I anticipated, but I’m really proud of the final result.

Elliptic - Vessels Album Art

Making the most of blend modes, this was a quick experiment with canvas 2d. It draws 4 circles on top of each other, each being manipulated by perlin noise to give organic motion. Each blended into each other to give the white shape in the middle.

This was the first project that kicked off the album artwork recreation series, it was done extremely quickly, but it goes to show that sometimes the simplest projects are sometimes the best.