[{"data":1,"prerenderedAt":239},["ShallowReactive",2],{"$sBXLId4RTz":3,"$ggEEF5xeQI":74,"resources-multiple-window-3d-scene-the-coding-train-getting-started-guide-p5js":204},{"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":84,"lang":13,"alternate_languages":85,"data":86},"aG59exAAACIAbAIk","i-built-a-small-application-in-p5.js-that-uses-the","casestudy","https://mvds.cdn.prismic.io/api/v2/documents/search?ref=aOEWphIAACIAuQ9C&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aG59exAAACIAbAIk%22%29+%5D%5D",[],"2025-07-09T14:33:52+0000","2025-08-01T13:28:41+0000",[83],"window-communication",[],[],{"title":87,"thumb":88,"vimeo_file_link":5,"use_media":95,"aspect_ratio":96,"tags":97,"slices":98,"meta_title":5,"meta_description":5,"meta_image":203},"Window communication",{"dimensions":89,"alt":5,"copyright":5,"url":92,"id":93,"edit":94},{"width":90,"height":91},1080,1350,"https://images.prismic.io/mvds/aG58i0MqNJQqHuZZ_image2.jpg?auto=format,compress","aG58i0MqNJQqHuZZ",{"x":25,"y":25,"zoom":26,"background":27},"image","1x1",[],[99,118,145,162,173],{"variation":100,"version":101,"items":102,"primary":103,"id":116,"slice_type":117,"slice_label":5},"default","initial",[],{"title_rows":104},[105,108,111,114],{"title":106,"align":107},"Motion through","Left",{"title":109,"align":110},"multiple","Center",{"title":112,"align":113},"browser","Right",{"title":115,"align":110},"windows","editorial_hero$679b65fc-afe7-4446-ae60-3b9c6b62b894","editorial_hero",{"variation":119,"version":101,"items":120,"primary":121,"id":143,"slice_type":144,"slice_label":5},"mediaTextWithDetails",[],{"media":122,"vimeo_file_link":123,"use_media":124,"content":125,"align":134,"details":135,"live_tool":142},{},"https://player.vimeo.com/progressive_redirect/playback/1100002323/rendition/1080p/file.mp4?loc=external&log_user=0&signature=3bf2ba5cf57b398664ce029eee31bbd0e6a440a93878e82bffccfecfdf698682","vimeo",[126,131],{"type":127,"text":128,"spans":129,"direction":130},"paragraph","I built a small application in P5.js that uses the JavaScript window object to enable interaction between multiple browser windows. To check off several items on my learning wishlist, I also used this project to integrate P5.js with TypeScript — something I had been wanting to learn for a while.",[],"ltr",{"type":127,"text":132,"spans":133,"direction":130},"I got the idea for the browser interaction from a post by Bjørn Staal. He also shared a small Three.js example that helped me understand how the principle works. Be sure to check out his work.",[],"image-text",[136,139],{"property":137,"value":138},"Published","February 2024",{"property":140,"value":141},"Tech","P5js",[],"media_text$5177a51e-8a48-42b0-a2ad-285be3a8085d","media_text",{"variation":100,"version":101,"items":146,"primary":147,"id":160,"slice_type":161,"slice_label":5},[],{"media_group":148,"content":158,"align":159},[149,152],{"image":150,"vimeo_file_link":151,"use_media":124},{},"https://player.vimeo.com/progressive_redirect/playback/1100002249/rendition/1440p/file.mp4?loc=external&log_user=0&signature=f083c7d6d1e74318a9b10737dcb65d36fffb791da0fdacb407c0e5cb9b0fba5c",{"image":153,"vimeo_file_link":5,"use_media":95},{"dimensions":154,"alt":5,"copyright":5,"url":155,"id":156,"edit":157},{"width":90,"height":91},"https://images.prismic.io/mvds/aG59vEMqNJQqHuak_image2.jpg?auto=format,compress","aG59vEMqNJQqHuak",{"x":25,"y":25,"zoom":26,"background":27},[],"text_media","double_media_text$9d3303d0-a53e-4a9a-b3db-a6e963fb3008","double_media_text",{"variation":163,"version":101,"items":164,"primary":165,"id":172,"slice_type":144,"slice_label":5},"image_left_text_right",[],{"media":166,"vimeo_file_link":167,"use_media":124,"content":168,"align":134},{},"https://player.vimeo.com/progressive_redirect/playback/1100002291/rendition/1080p/file.mp4?loc=external&log_user=0&signature=fef425f7682a7226555847344fbd81daca734fc9dff6abba49aa03ac953c6a01",[169],{"type":127,"text":170,"spans":171,"direction":130},"I made a variation, drawing inspiration from another project I did using Mediapipe and shaders. In each window, the fingers follow a different color scheme. But since all windows are drawing to the same canvas, you end up with multiple colours in the painting.",[],"media_text$0c426368-4980-4d61-8254-ffcb252998de",{"variation":100,"version":101,"items":174,"primary":175,"id":201,"slice_type":202,"slice_label":5},[],{"code_example":176,"resources":177},[],[178,186,194],{"resource":179},{"id":180,"type":181,"tags":182,"lang":13,"slug":183,"first_publication_date":184,"last_publication_date":184,"uid":183,"link_type":36,"key":185,"isBroken":38},"aIzA9xIAACAAUG0y","resource",[],"multiple-window-3d-scene","2025-08-01T13:28:25+0000","9275e6d3-5c4e-4059-8f41-eb59f62b8464",{"resource":187},{"id":188,"type":181,"tags":189,"lang":13,"slug":190,"first_publication_date":191,"last_publication_date":191,"uid":192,"link_type":36,"key":193,"isBroken":38},"aIyv4hIAACAAUFD0",[],"getting-started-guide","2025-08-01T12:15:33+0000","the-coding-train-getting-started-guide","6c4165e8-7c9e-4c31-8332-c2b11608bd30",{"resource":195},{"id":196,"type":181,"tags":197,"lang":13,"slug":198,"first_publication_date":199,"last_publication_date":199,"uid":198,"link_type":36,"key":200,"isBroken":38},"aIypUhIAAB8AUEQU",[],"p5js","2025-08-01T11:47:32+0000","3aaed32b-cc67-49ce-8d9d-14ea27484054","resources$f428b02d-5db3-4f19-bfec-a63c501e453e","resources",{},[205,217,229],{"id":180,"uid":183,"url":5,"type":181,"href":206,"tags":207,"first_publication_date":184,"last_publication_date":184,"slugs":208,"linked_documents":209,"lang":13,"alternate_languages":210,"data":211},"https://mvds.cdn.prismic.io/api/v2/documents/search?ref=aOEWphIAACIAuQ9C&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aIzA9xIAACAAUG0y%22%29+%5D%5D",[],[183],[],[],{"label":212,"credits":213,"link":214},"Multiple Window 3D Scene","Bjørn Gunnar Staal",{"link_type":65,"key":215,"url":216,"target":68},"f4e09999-baa7-4ad7-9523-60fd88ae273d","https://github.com/bgstaal/multipleWindow3dScene",{"id":188,"uid":192,"url":5,"type":181,"href":218,"tags":219,"first_publication_date":191,"last_publication_date":191,"slugs":220,"linked_documents":221,"lang":13,"alternate_languages":222,"data":223},"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",[],[190],[],[],{"label":224,"credits":225,"link":226},"Getting Started Guide","The Coding Train",{"link_type":65,"key":227,"url":228,"target":68},"4bd07397-bd8b-4d19-97d9-2a6f8f9daca9","https://thecodingtrain.com/guides/getting-started#start-learning-and-coding!",{"id":196,"uid":198,"url":5,"type":181,"href":230,"tags":231,"first_publication_date":199,"last_publication_date":199,"slugs":232,"linked_documents":233,"lang":13,"alternate_languages":234,"data":235},"https://mvds.cdn.prismic.io/api/v2/documents/search?ref=aOEWphIAACIAuQ9C&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22aIypUhIAAB8AUEQU%22%29+%5D%5D",[],[198],[],[],{"label":198,"credits":5,"link":236},{"link_type":65,"key":237,"url":238,"target":68},"f5c29bcf-bea8-41ad-bae8-02610b15b9d5","https://p5js.org/",1759581901966]