Escher's Droste Effect

Published on 17 November 2008

The "Droste effect" derives from a Dutch chocolate maker that used an image of its box on the box recursively at smaller and smaller scales.

MC Escher's "Prentententoonstelling" (print gallery) image took this idea one step further and mapped the image on itself in a spiral. However, he only got so far with pen and paper leaving an enigmatic white centre. It wasn't until the Dutch mathematician, Hendrik Lenstra, worked out the maths behind the image transformation that the complete effect could be visualised. Take a look at the illustrated write-up that gives a good explanation about the process.

Jos Leys took the process further and created a generic logrithmic image transformation that can create endless zooming animations. This process was turned into a Mathmap script by Josh Sommers and Briec and now has an active Flickr group that use it.

I've ported the Mathmap script over to Adobe's new Pixel Bender Toolkit. Pixel Bender was officially released as part of the CS4 suite but is also available as a free download. The filters will run in After Effects, Photoshop CS4 and Flash 10 (in some cases) so there is huge creative potential here!

See the project page for download and usage instructions

  Last updated: 28 November 2008

32 Comments

• Tomek // Og2t commented at 18 November 2008 at 09:34

  Can't wait to try to PhotoShop filter out, how did you manage to stop Ethan moving the train too far? ;-)

• Frank Reitberger commented at 18 November 2008 at 15:42

  Too bad!

  I really thought I would have enough time to adapt my Droste Effect AS3 Version (I´d developed last week) to Pixel Bender. I wonder where your initial spark came from... ;)

  But anyhow, very nice work!!!

  Cheers
  -frank

• Tom commented at 18 November 2008 at 15:59

  Cheers Frank, if I'd seen your version first I might have saved myself some work. Interesting site BTW, it's now in my list of feeds :)

  Like you I first came across the effect via the Flickr group and my version is a fairly straight port of the Mathmap code described there, with a few extra bits for dealing with the complex number math.

  I'm still working on a Flash compatible version of the filter. However when running in Flash the filters won't use the GPU so I'm not sure if the performance hit will be worth it.

• Frank Reitberger commented at 20 November 2008 at 15:33

  No prob at all Tom,

  to be honest, your port is a solid Pixel Bender version. I shouldn´t have just thought about transforming my AS3-approach for Pixel Bender instead of not porting it right away. So I guess it´s, first come, first served!

  I think it´s definitively worth it, that you work on your Flash compatible version, because even if it won´t use the GPU, it should run quite faster then a native flash analog.
  Anyway, there are so many other nice filters-ideas still remaining, there´s enougjh to play with for everyone... ;)

• mohan commented at 25 November 2008 at 13:53

  Nice thing....but this idea is great......good use of the script

• Frank Beltran commented at 28 November 2008 at 07:47

  Hi guys, I'm Frank Beltran and I made a Droste Videoclip a couple of months ago called "Clap your brains off"...
  Hey this plugin seems great!!! We had to program a code on Java and run a batch on it in order to obtain the images for the video... It was a bit of work, but also a fun process.
  So now there's a plugin... WOW!!!
  Sure things go fast these days...
  I wanted to ask all of you guys that already tried it... (Cause I don't have CS4 or AE so far) How long does it take to process the images???
  Cause part of why we did everything with Java was that with mathmap a 3456 x 2304 pixels image took almost 20 minutes to process... Is it the same more or less with photoshop or it goes way much faster? And how about on AE???
  I'd really appreciate that sort of feedback.

  I'll leave you the link from my video, hope you also see the making of and take a look at the amount of work that was doing it the "hard way"

  Congratulations on your job.

  http://www.vimeo.com/1689442

• Tom commented at 28 November 2008 at 09:10

  Thanks Frank - your amazing video was part of the inspiration for creating the Pixel Bender version!

  Performance wise in After Effects I can tweak the parameters and see the results close to real-time for a D1 PAL video frame (so about 768x576px). However, I don't think that After Effects makes full use of the GPU unlike Photoshop CS4 because with that I can get very responsive updates when changing the parameters on an 8Mpix photo. Either way significantly faster than Mathmap :)

• Dorus commented at 28 November 2008 at 11:51

  I love it! Thanks.
  Immediately tried it in after effects and works beautiful even in animations. And it is much faster then math map (in gimp). Fantastic; keep up the great work.
  (first experiment here: http://dorus.oerlemans.tv/?p=46 (post in Dutch though ))

  Cheers,
  Dorus

• Josh Sommers commented at 1 December 2008 at 20:40

  Hey, this is great! I've been working on a straight Droste Filter for Photoshop for some time, but I gave up a while back because the Photoshop filter architechture was very difficult for me to understand, even as a software developer.

  FYI, the formula you have seen in Mathmap and derived your plugin from was not developed by Jos Leys. The first version was initially developed by my friend Ben (Breic). Subsequent versions, which included all of the little variations you have included in your plugin (like the mirror effect, show both poles, tile poles, pole rotation, etc) were developed by me, in some cases with additional input from Breic.

  My goal has always been to share this effect with the masses, which is why I have always kept the formula public, and is also why I was working to get the effect into Photoshop one way or another. It seems you have achieved that here, and even more importantly, into After Effects. It's really only a matter of time now before we see this effect everywhere, and sadly, those of us who have been at the forefront of the effect and played some part in bringing it to the masses will likely be forgotten. :(

• Andrew Donaldson commented at 10 December 2008 at 11:24

  I was just watching Frank's excellent video again (http://www.vimeo.com/1689442) and noticed that at 1:47 when the guy is flicking through the albums, there are a few famiilar names in there... Nice hat-tip!

  Maybe thats super obvious, but it passed me by the first few watches... :)

• Frank Reitberger commented at 10 December 2008 at 14:04

  Hi again!

  I´ve just rewritten my version of the Droste Effect with Pixel Bender and this one is for the use with Flash too.

  Ok ok... there are still a lot of the origin Math Map values missing - let´s say it´s a lightweight variant. But it´s pretty fast performing when it comes to Flash. :)

  So here it is - enhanced Escher for Flash:
  http://www.dasprinzip.com/prinzipiell/2008/12/10/enhanced-escher/

• Tom commented at 10 December 2008 at 14:10

  35fps - nice :)

• Frank Reitberger commented at 16 December 2008 at 09:48

  ...and as you asked for Tom - here goes the pbk-File:
  http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1706526

• I, Gallery =) commented at 15 January 2009 at 19:36

  Ni-i-ice! Really nice effect. Thanks =)

• Carlos Sosa commented at 27 January 2009 at 04:22

  This plugin is awesome!!!! cheers from Ecuador!!!!!

• Babette commented at 19 February 2009 at 18:20

  There isn't a version of this anywhere for CS3?
  I, unfortunately, bought CS3 2 weeks before CS4 came out.

• chris commented at 28 February 2009 at 22:00

  As a photo artist I am constantly on the lookout for new and innovative ideas. this is certainly one of those! I off to download the plugin..............

• Josh Sommers commented at 24 March 2009 at 22:33

  Hey SubBlue- just wanted to mention that there is one issue with this version of the plugin, which is that you omitted the option to flatten the transparency from the mathmap script, which was selected by default. The problem is that in this version pixels retain their original degree of transparency and so the resulting image can have areas that are not opaque, which usually results in a white ring around the edge of the spiral. The way to fix this is to ensure that every pixel is 100% opaque as the last step of the script.

  Cheers,
  Josh

• photo retouching commented at 16 June 2009 at 08:13

  What an interesting article. It is these type of pages that keep us photoshop users up to date with advancements.

• evan commented at 21 September 2009 at 17:28

  .. is there a way to get the droste effect wrap and unwrap the image?
  it seems that it is either on which creates the twirl or off.
  I'd like to start from a normal image which will start twirling into the droste effect.
  Thanks

• Tom commented at 21 September 2009 at 23:21

  Evan: I'm afraid due to the way the maths works it has to be either wrapped or unwrapped I don't think it would be possible to transition between the two.

• Photo restoration and retouching commented at 5 October 2009 at 10:03

  Escher is awesome and inspired me to use the an old photograph to make the never ending staircase. http://www.image-restore.co.uk/blog/index.php/never-ending-staircase-illusion/ but droste effect is also clever concept. I usually restore old photos but Escher got me side tracked with his stairs.

• takopus commented at 29 November 2009 at 23:44

  Tom, thank you for awesome filter!
  I have a little question: is there any way to make each cycle of spiral to get darker and darker towards center? I'm not so good with math (actually, not good at all). Tried to find some way to make it in AS3-version, but with no luck at all.
  Main idea is to have a coeffecient, something like:
  factor = angle + iteration * PI
  where 'angle' is an angle from last iteration. I can get it as atan(z), but it seems z and iteration starting angle are not aligned...
  Anyway, if you have a spare minute and find this problem interesting, it would be simply great! If not, well, thank you for your filter anyhow!

• Ryan Wilson commented at 12 March 2010 at 02:10

  Great Droste plug-in for after effects. Thanks a lot!

• Symbols commented at 4 May 2010 at 15:53

  Wow, I even found your name when looking at adobe after effects help trying to find out how to install this thing! http://help.adobe.com/en_US/AfterEffects/9.0/WS858FD341-7F4F-409d-8702-E2970CC3049F.html Looks like your effects are ones of the most amazing non-default Pixel Bender effects ^.^

• Tony OBrien commented at 28 May 2010 at 18:31

  Man I love the Cannon shot you have done! What an amazing plug in you have created, as a digital artist I take my hat off to you! - thank you

• David Sainte commented at 11 July 2010 at 19:42

  We used the droste to try and pull off an almost Hitchcockian Dali esk sequence. This was a huge help thanks.

  Dinosaur Feathers "Teenage Whore" Music Video Created by The Moonmen
  http://vimeo.com/13032362

  http://www.youtube.com/watch?v=7gaNVVq_oM4

• photo retouching commented at 15 July 2010 at 12:20

  All i have to say its superb, i am a big fan of that sort of stuff!

• Elliott 'Photo Restoration Expert' Walsh commented at 24 July 2010 at 18:27

  i love all of escher's work, he was a genius. this is a great piece of art. i might even post it to my facebook page.

• Kenny Howse commented at 29 July 2010 at 12:00

  Some good stuff here, thank you for this blog, I've only recently started my own photo restoration service and am always on the look out for best practice, hints, tips & techniques.

• photo retouching commented at 14 September 2010 at 09:21

  I’ve been following this thread with great interest, I simply had to give it a go, great stuff and thanks for sharing, it looks like a lot of people really appreciate your work

• Jim Smithson commented at 24 February 2012 at 07:52

  Wow! I love how this effect looks, I will definitely give it a shot after I manage to blunder my way through the installation procedure, can’t wait to make some amazing pictures!!!

Older: Fast Mandelbrot Renderer Newer: Tracing a terrain