A very fast & simple tilt-shift effect in Canvas.
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.
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.
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 projects
There are many experiments and projects like TILT SHIFT to discover other here.
- MUSIC FOR TINY AIRPORTS AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- THEY COME AT DUSK 👺 A survival horror game for JS1k 2018, where you run away from dead miners as you hear your heart beat. Turn around using the arrow keys until all you hear is beeeeeeeep.
- LRNZ SNGLRT LRNZ SNGLRT is a minimalist and energetic entry for JS1k 2016 showing twisted Lorenz attractors with ambient occlusion, soft shadows, ... a strong beat & clean design.
- MINICRAFT Tribute to MINECRAFT, voxel flyby in 252 bytes of HTML5
- TV NOISE Fall 2011, another meme struck Pouet.net. TV NOISE. Over the course of a few weeks, every single platform went psssh. There you go open web platform: TV noise in 128 bytes.
- PNEBULA Almost the first 256b intro using Canvas ever :p
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.