Depth of Field

The term Depth of Field is commonly used in photography, which means the depth range in a photo or image that in the acceptably sharp focus. Lights coming out side the field will blur out and becoming the beautiful bokeh (ボケ).

Anders Hoff wrote a great article on how to recreate this natural phenomenon with algorithm and math. Unlike the smooth bokeh effect in photographs, Anders uses the “sampling” approach to generate the beautiful grainy effect. Instead of giving your code directly, Anders shares with his thoughts and guides you to implement it in your way.

You can get started by following these steps:

  • Read Anders’ post and learn the algorithm
  • Challenge your self to implement it without looking into other code, or you can take my port in p5.js as the starting point
  • If you get some extra time, try with different meshes, or follow Anders’ pervious posts about how he generates the webs starting with a triangle.

When you are all done, post your work on Twitter with the hashtag #codecember and #day11. Remember to include a link to the source code, so others can learn from your creation. We look forward to seeing your sketch!

Anthony & Pine


Don’t forget to check out Anders Hoff’s website for his amazing artworks and the great tutorials.