TILT SHIFT

A very fast & simple tilt-shift effect in Canvas.

Live demo

Click and move the cursor on the canvas above to define the start and end point of the focus area.

The original image of Jodhpur rooftops by Paul Goyette is under Creative-Common.

Technique

A blurred version of the original image is generated using Canvas and drawImage(), upon rendering the tilt-shift image, a gradient is generated based on the user defined start and end points and used as a mask to show the blurred image on top of the original image. Simple.

The blurred image is generated incrementally to improve the quality of the blurring effect. Without this, it would feature heavy bilinear interpolation approximations.

Disclaimer

This effect is more a proof of concept than an attempt to match exactly the optical properties of a real tilt-shift effect. For instance it does not use a depth map and thus can not properly process images showing tall structures. However the results are quite convincing for such a simple piece of code.

Other recent experiments

There are many experiments and projects like TILT SHIFT to discover other here.

• FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
• VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
• BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks. on June 26th, 2017
• CODING⬢ART AT SCRIPT'17 Script'17 was all kinds of awesome: Great organization, line up, venue, catering, diverse and welcoming. It was a pleasure to talk to you all and LIVE code something useless before the party. Looking forward to see useless things from you all. on January 27th, 2017
• TINY AUDIO-VISUAL DEMOS AT JSCONF ASIA I had the honor to open the second day of JSConf Asia 2015 in Singapore with a talk and LIVE programming session about Tiny Audio-Visual Demos on November 20th, 2015
• JSPONGY Since Mentor^TBC released Spongy, an amazing 128b intro raymarching a Menger sponge, I wondered how far such effect could be size optimized in JavaScript while keeping complex camera path. The answer: 281 bytes. on October 23rd, 2009
• MARS LANDSCAPE Remember the amazing MARS 4Kb intro by Tim Clarke in 1993 ? Here comes a remake in 256b using JavaScript and Canvas on October 16th, 2008
• 256B.HTM The first edition of the 256B.HTM contest allowed 5 entries per author. Mine ranked 1st, 10th, 19th and 29th out of 63. on March 1st, 2002

Let's talk

Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.