[{"data":1,"prerenderedAt":292},["ShallowReactive",2],{"$sBXLId4RTz":3,"$ggEEF5xeQI":74,"resources-trcc-courses-the-coding-train-getting-started-guide-learn-glsl-shaders-unsplash":243},{"id":4,"uid":5,"url":5,"type":6,"href":7,"tags":8,"first_publication_date":9,"last_publication_date":10,"slugs":11,"linked_documents":12,"lang":13,"alternate_languages":14,"data":15},"aDqYsxEAACYATEhc",null,"settings","https://mvds.cdn.prismic.io/api/v2/documents/search?ref=aOEWphIAACIAuQ9C&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aDqYsxEAACYATEhc%22%29+%5D%5D",[],"2025-05-31T05:54:51+0000","2025-08-05T06:06:51+0000",[6],[],"en-us",[],{"site_title":16,"meta_description":17,"meta_image":18,"navigation":28,"footer_nav":48,"socials":63},"Mike van der Sanden","Hi, my name is Mike van der Sanden and I am a interdisciplinary designer.",{"dimensions":19,"alt":5,"copyright":5,"url":22,"id":23,"edit":24},{"width":20,"height":21},2400,1260,"https://images.prismic.io/mvds/aI4C1aTt2nPbZywB_og-image.jpg?auto=format%2Ccompress&rect=0%2C0%2C2400%2C1260&w=2400&h=1260","aI4C1aTt2nPbZywB",{"x":25,"y":25,"zoom":26,"background":27},0,1,"transparent",[29,40],{"id":30,"type":31,"tags":32,"lang":13,"slug":33,"first_publication_date":34,"last_publication_date":35,"uid":33,"link_type":36,"key":37,"isBroken":38,"text":39},"aDxwLhEAACYATt7E","page",[],"cases","2025-06-01T15:22:33+0000","2025-09-24T05:43:11+0000","Document","a5153a27-a276-4b02-a988-596963e91c73",false,"Cases",{"id":41,"type":31,"tags":42,"lang":13,"slug":43,"first_publication_date":44,"last_publication_date":45,"uid":43,"link_type":36,"key":46,"isBroken":38,"text":47},"aDsFlhEAACUATOKP",[],"about","2025-05-31T13:35:19+0000","2025-10-04T12:44:22+0000","8e831512-c797-4e48-a90a-52e0e3f29db6","About",[49,57,60],{"id":50,"type":31,"tags":51,"lang":13,"slug":52,"first_publication_date":53,"last_publication_date":54,"uid":52,"link_type":36,"key":55,"isBroken":38,"text":56},"aDsFhhEAACgATOJy",[],"home","2025-05-31T13:35:05+0000","2025-09-24T05:42:55+0000","7bc5883a-6327-499f-9e7b-51a7cbe9f1e6","Home",{"id":30,"type":31,"tags":58,"lang":13,"slug":33,"first_publication_date":34,"last_publication_date":35,"uid":33,"link_type":36,"key":59,"isBroken":38,"text":39},[],"93a6da17-52b3-455e-bc1e-74dadda5266a",{"id":41,"type":31,"tags":61,"lang":13,"slug":43,"first_publication_date":44,"last_publication_date":45,"uid":43,"link_type":36,"key":62,"isBroken":38,"text":47},[],"67de3346-dcaf-47c3-b649-fb476e54a7b5",[64,70],{"link_type":65,"key":66,"url":67,"target":68,"text":69},"Web","29ab8b70-e17b-449b-800a-8eb6e764a3fc","https://www.instagram.com/mikevdsanden/","_blank","Instagram",{"link_type":65,"key":71,"url":72,"target":68,"text":73},"2d93c469-68fa-4ffb-aab8-0208fcf01ee3","https://www.linkedin.com/in/mike-van-der-sanden-736ab2b/","LinkedIn",{"id":75,"uid":76,"url":5,"type":77,"href":78,"tags":79,"first_publication_date":80,"last_publication_date":81,"slugs":82,"linked_documents":83,"lang":13,"alternate_languages":84,"data":85},"aEiLFhAAACAApnsF","modifier-tool","casestudy","https://mvds.cdn.prismic.io/api/v2/documents/search?ref=aOEWphIAACIAuQ9C&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aEiLFhAAACAApnsF%22%29+%5D%5D",[],"2025-06-10T19:44:28+0000","2025-08-01T12:53:40+0000",[76],[],[],{"title":86,"thumb":87,"vimeo_file_link":5,"use_media":94,"aspect_ratio":95,"tags":96,"slices":99,"meta_title":5,"meta_description":5,"meta_image":242},"Modifier Tool",{"dimensions":88,"alt":5,"copyright":5,"url":91,"id":92,"edit":93},{"width":89,"height":90},4000,2668,"https://images.prismic.io/mvds/aEiLDbNJEFaPX184_Komma_vibes_foto-12.jpg?auto=format,compress","aEiLDbNJEFaPX184",{"x":25,"y":25,"zoom":26,"background":27},"image","5x4",[97],{"tag":98},"Live tool",[100,114,157,174,187,202],{"variation":101,"version":102,"items":103,"primary":104,"id":112,"slice_type":113,"slice_label":5},"default","initial",[],{"title_rows":105},[106,109],{"title":107,"align":108},"Modifier","Left",{"title":110,"align":111},"Tool","Center","editorial_hero$218fdfea-1c75-45d5-9267-2df2c3ae5e30","editorial_hero",{"variation":115,"version":102,"items":116,"primary":117,"id":155,"slice_type":156,"slice_label":5},"mediaTextWithDetails",[],{"media":118,"vimeo_file_link":5,"use_media":94,"content":125,"align":131,"details":132,"live_tool":139},{"dimensions":119,"alt":5,"copyright":5,"url":122,"id":123,"edit":124},{"width":120,"height":121},2560,2048,"https://images.prismic.io/mvds/aF-3Onfc4bHWizpI_Komma_vibes_foto-12.jpg?auto=format,compress","aF-3Onfc4bHWizpI",{"x":25,"y":25,"zoom":26,"background":27},[126],{"type":127,"text":128,"spans":129,"direction":130},"paragraph","While I was learning about shaders, I came across a number of examples where they were used to apply effects to images. At the time, I was having the most fun building tools that others could potentially enjoy as well. So I thought: why not build a tool where you can create modified versions of an image in a playful way?",[],"ltr","image-text",[133,136],{"property":134,"value":135},"Published","September 2023",{"property":137,"value":138},"Hero photo","Matijs Moeskops",[140],{"body":141,"link":151},[142,145,148],{"type":127,"text":143,"spans":144,"direction":130},"This live-tool only works on an iPad. It is for experimentation purposes only and may sometimes not work as expected. ",[],{"type":127,"text":146,"spans":147,"direction":130},"",[],{"type":127,"text":149,"spans":150,"direction":130},"Use two fingers to apply an effect, tap with a third finger to change the effect. You can also use your own photos. They stay on the so called client-side so they are not saved or seen by me in any way. ",[],{"link_type":65,"key":152,"url":153,"target":68,"text":154},"70ae196a-b943-4746-a6fe-2f92cf556730","https://mikevandersanden.com/tools/modifier-tool/","Visit live tool","media_text$393d2c49-8218-4d7c-bef6-b2e7f4dd8766","media_text",{"variation":101,"version":102,"items":158,"primary":159,"id":172,"slice_type":173,"slice_label":5},[],{"media_group":160,"content":168,"align":156},[161,165],{"image":162,"vimeo_file_link":163,"use_media":164},{},"https://player.vimeo.com/progressive_redirect/playback/1097135154/rendition/1080p/file.mp4?loc=external&log_user=0&signature=4dd62d0d2efc011a13084a667132d202622e4383c968982a83c219093dce2da2","vimeo",{"image":166,"vimeo_file_link":167,"use_media":164},{},"https://player.vimeo.com/progressive_redirect/playback/1097135142/rendition/1080p/file.mp4?loc=external&log_user=0&signature=e6a568b84e2f7b4fd279c3dc162845af7cf6fdeaf55a9553bb9f56c49cb028ee",[169],{"type":127,"text":170,"spans":171,"direction":130},"The project resulted in a desktop tool you'll find below. Then I came across the work of Frankfurt-based design studio Schultzschultz. They built multi-touch tools on iPad, which in my opinion creates an even stronger connection between the user and the result. So I started researching how to approach this and implemented all my existing effects into a multi-touch interface. If you happen to visit this page on an iPad, make sure to check out the live tool.",[],"double_media_text$fc7280ee-d2b8-4b2c-aa20-708b9ec7357e","double_media_text",{"variation":101,"version":102,"items":175,"primary":176,"id":186,"slice_type":173,"slice_label":5},[],{"media_group":177,"content":184,"align":185},[178,181],{"image":179,"vimeo_file_link":180,"use_media":164},{},"https://player.vimeo.com/progressive_redirect/playback/1097135172/rendition/1440p/file.mp4?loc=external&log_user=0&signature=459a1ced2bb0293599149d2c3e90a991596cd38556f18655abc6c38c0f554f49",{"image":182,"vimeo_file_link":183,"use_media":164},{},"https://player.vimeo.com/progressive_redirect/playback/1097135161/rendition/1440p/file.mp4?loc=external&log_user=0&signature=fbcb316daa2fc3ef263a3a806863cc0e3ece92eff52c549f42de14c48d9d41b8",[],"text_media","double_media_text$ab21077f-2830-4375-bd9d-3104dabc06de",{"variation":101,"version":102,"items":188,"primary":189,"id":201,"slice_type":173,"slice_label":5},[],{"media_group":190,"content":197,"align":156},[191,194],{"image":192,"vimeo_file_link":193,"use_media":164},{},"https://player.vimeo.com/progressive_redirect/playback/1097135182/rendition/1440p/file.mp4?loc=external&log_user=0&signature=f8b6ca54fadc963607682b6070d1876ed33898a43f4f66e4d8ea25ee0db29c9e",{"image":195,"vimeo_file_link":196,"use_media":164},{},"https://player.vimeo.com/progressive_redirect/playback/1097135187/rendition/1440p/file.mp4?loc=external&log_user=0&signature=6fb340404e86c0f00b0594354fd317e8a437936c28c3e255d7b7d0f206eb66eb",[198],{"type":127,"text":199,"spans":200,"direction":130},"I looked into all kinds of functionality Such as placing animation points on the canvas to generate automatic movement. A lot of ideas were simply too much and ended up being discarded.",[],"double_media_text$836762b6-5df5-4fdf-b281-1a4771f134bd",{"variation":101,"version":102,"items":203,"primary":204,"id":240,"slice_type":241,"slice_label":5},[],{"code_example":205,"resources":206},[],[207,216,224,231],{"resource":208},{"id":209,"type":210,"tags":211,"lang":13,"slug":212,"first_publication_date":213,"last_publication_date":214,"uid":212,"link_type":36,"key":215,"isBroken":38},"aIyhYxIAACEAUDe8","resource",[],"trcc-courses","2025-08-01T11:13:45+0000","2025-08-01T11:13:55+0000","8a969482-f6ca-4a9d-8f00-be84cb637a4d",{"resource":217},{"id":218,"type":210,"tags":219,"lang":13,"slug":220,"first_publication_date":221,"last_publication_date":221,"uid":222,"link_type":36,"key":223,"isBroken":38},"aIyv4hIAACAAUFD0",[],"getting-started-guide","2025-08-01T12:15:33+0000","the-coding-train-getting-started-guide","6f43392f-915a-4327-a6a0-503460e720da",{"resource":225},{"id":226,"type":210,"tags":227,"lang":13,"slug":228,"first_publication_date":229,"last_publication_date":229,"uid":228,"link_type":36,"key":230,"isBroken":38},"aIymVRIAACAAUD-Q",[],"learn-glsl-shaders","2025-08-01T11:34:48+0000","832f7715-e632-4bab-83f7-20bf5bcb8a6e",{"resource":232},{"id":233,"type":210,"tags":234,"lang":13,"slug":235,"first_publication_date":236,"last_publication_date":237,"uid":238,"link_type":36,"key":239,"isBroken":38},"aIy4thIAACEAUF9y",[],"freely-usable-images","2025-08-01T12:53:11+0000","2025-08-01T12:54:27+0000","unsplash","15de6e19-766d-4579-b6bb-a0ae07e989d3","resources$9e95a884-6f52-46c1-af30-0bb7563d3375","resources",{},[244,256,268,280],{"id":209,"uid":212,"url":5,"type":210,"href":245,"tags":246,"first_publication_date":213,"last_publication_date":214,"slugs":247,"linked_documents":248,"lang":13,"alternate_languages":249,"data":250},"https://mvds.cdn.prismic.io/api/v2/documents/search?ref=aOEWphIAACIAuQ9C&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aIyhYxIAACEAUDe8%22%29+%5D%5D",[],[212],[],[],{"label":251,"credits":252,"link":253},"TRCC Courses","Tim Rodenbröker",{"link_type":65,"key":254,"url":255,"target":68},"2b01e781-72e6-4349-a611-dfb7f1fa1e94","https://timrodenbroeker.de/courses/",{"id":218,"uid":222,"url":5,"type":210,"href":257,"tags":258,"first_publication_date":221,"last_publication_date":221,"slugs":259,"linked_documents":260,"lang":13,"alternate_languages":261,"data":262},"https://mvds.cdn.prismic.io/api/v2/documents/search?ref=aOEWphIAACIAuQ9C&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aIyv4hIAACAAUFD0%22%29+%5D%5D",[],[220],[],[],{"label":263,"credits":264,"link":265},"Getting Started Guide","The Coding Train",{"link_type":65,"key":266,"url":267,"target":68},"4bd07397-bd8b-4d19-97d9-2a6f8f9daca9","https://thecodingtrain.com/guides/getting-started#start-learning-and-coding!",{"id":226,"uid":228,"url":5,"type":210,"href":269,"tags":270,"first_publication_date":229,"last_publication_date":229,"slugs":271,"linked_documents":272,"lang":13,"alternate_languages":273,"data":274},"https://mvds.cdn.prismic.io/api/v2/documents/search?ref=aOEWphIAACIAuQ9C&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aIymVRIAACAAUD-Q%22%29+%5D%5D",[],[228],[],[],{"label":275,"credits":276,"link":277},"Learn GLSL Shaders","Nicholas Lever",{"link_type":65,"key":278,"url":279,"target":68},"b3f3f1b7-4ebe-426a-b635-0599d8798425","https://www.udemy.com/course/learn-glsl-shaders-from-scratch/",{"id":233,"uid":238,"url":5,"type":210,"href":281,"tags":282,"first_publication_date":236,"last_publication_date":237,"slugs":283,"linked_documents":284,"lang":13,"alternate_languages":285,"data":286},"https://mvds.cdn.prismic.io/api/v2/documents/search?ref=aOEWphIAACIAuQ9C&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aIy4thIAACEAUF9y%22%29+%5D%5D",[],[235],[],[],{"label":287,"credits":288,"link":289},"Freely usable images","Unsplash",{"link_type":65,"key":290,"url":291,"target":68},"5545659b-d906-4b36-9c02-a2f1bbe8e1f9","https://unsplash.com/",1759581901966]