<p>Chroma AR is the WebAR component for The Met&#8217;s recent <a href="https://www.metmuseum.org/exhibitions/chroma" target="_blank" rel="noopener">Chroma</a> exhibition, which tells the story of how ancient sculptures originally looked and how a team of scientists, artists, and technologists figured that out.</p>
<p>The app was built using <a href="https://www.8thwall.com/" target="_blank" rel="noopener">8th Wall&#8217;s</a>&nbsp;<b>WebAR</b> JavaScript engine paired with <b>Three.js</b>, vanilla <b>JavaScript</b>, <b>HTML</b>, and <b>CSS</b>.</p>
<div class="is-full-width">
  <iframe class="media is-16by9" src="https://www.youtube.com/embed/1DXsUaG6Lh4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; modestbranding; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="press-items">
<div class="press-item">
    <a href="https://www.8thwall.com/blog/post/80781034917/the-metropolitan-museum-of-art-brings-ancient-sculptures-to-life-with-chroma-ar-experience" target="_blank" rel="noopener"><img width="300" height="108" src="https://jwwpheadless.com/wp-content/uploads/2022/10/logo-8th-wall.png" class="attachment-gallery-image-medium size-gallery-image-medium" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/logo-8th-wall.png 300w, https://jwwpheadless.com/wp-content/uploads/2022/10/logo-8th-wall-296x108.png 296w" sizes="(max-width: 300px) 100vw, 300px"></a></p>
<div class="press-item-caption">
      <a href="https://www.8thwall.com/blog/post/80781034917/the-metropolitan-museum-of-art-brings-ancient-sculptures-to-life-with-chroma-ar-experience" target="_blank" rel="noopener">The Met Deploys 3D Imaging And AR To Paint Classical Antiquity In Living Color</a> in Jing Culture &#038; Crypt.
    </div>
</p></div>
<div class="press-item">
    <a href="https://www.commarts.com/project/35133/chroma-ar" target="_blank" rel="noopener"><img width="290" height="239" src="https://jwwpheadless.com/wp-content/uploads/2022/10/logo-commarts.png" class="attachment-gallery-image-medium size-gallery-image-medium" alt="" decoding="async" loading="lazy"></a></p>
<div class="press-item-caption">
      <a href="https://www.commarts.com/project/35133/chroma-ar" target="_blank" rel="noopener">Featured</a> in CommArts
    </div>
</p></div>
<div class="press-item">
    <a href="https://jingculturecrypto.com/the-metropolitan-museum-of-art-chroma/" target="_blank" rel="noopener"><br />
      <img width="2560" height="668" src="https://jwwpheadless.com/wp-content/uploads/2022/10/logo-jing-scaled.webp" class="attachment-gallery-image-medium size-gallery-image-medium" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/logo-jing-scaled.webp 2560w, https://jwwpheadless.com/wp-content/uploads/2022/10/logo-jing-768x200.webp 768w, https://jwwpheadless.com/wp-content/uploads/2022/10/logo-jing-1536x401.webp 1536w, https://jwwpheadless.com/wp-content/uploads/2022/10/logo-jing-2048x535.webp 2048w" sizes="(max-width: 2560px) 100vw, 2560px"><br />
    </a></p>
<div class="press-item-caption"><a href="https://jingculturecrypto.com/the-metropolitan-museum-of-art-chroma/" target="_blank" rel="noopener">The Metropolitan Museum of Art brings ancient sculptures to life with Chroma AR experience</a> in the 8th Wall blog
    </div>
</p></div>
</div>
<h2 id="app-experience">App experience</h2>
<p>The app features three modes &#8211; <b>Explore</b>, <b>Learn</b>, and <b>Play</b>. Each mode uses a variety of special effects leveraging both the 8th Wall WebAR engine and custom </p>
<h3>Explore mode</h3>
<p>This mode uses 8th Wall&#8217;s World Tracking feature to place realistic 3D scanned models of sculptures in front of the viewer, allowing the viewer to walk around the models and even get up close to examine tiny details. Multiple &#8220;filters&#8221; are provided that show different textures and/or models, including a giant tower called a &#8220;stele&#8221; where the sphinx would&#8217;ve been placed years ago. </p>
<div id='gallery-1' class='gallery galleryid-12682 gallery-columns-3 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/10/explore-1.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/10/vlc-record-2023-04-03-22h29m17s-Explore-and-Learn-great-lighting-and-tracking.mp4-.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/10/explore-stele.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><br style="clear: both" />
		</div>

<h3>Learn mode</h3>
<p>In this mode, a single 3D model is placed in front of the viewer along with a set of filters for them to use. Each filter applies different textures to the model&#8217;s surface to mimic the process of uncovering and recreating the sculpture&#8217;s original colors. Viewers can see the sculpture as it exists today, with multi-spectral scientific imagery, or with reconstructed paints.</p>
<p>Interactive hotspots are attached in different places for each filter, which open modal dialogs with interesting content when tapped. When all hotspots are found in all filters, the viewer gets a nice little reward screen.</p>
<div id='gallery-2' class='gallery galleryid-12682 gallery-columns-4 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Onboarding.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/10/portal.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/10/learn-2.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/10/learn-4.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><br style="clear: both" />
		</div>

<h3>Play mode</h3>
<p>We couldn&#8217;t pass up the opportunity to add a classic AR feature &#8211; selfie filters! In this mode the app switches to the front-facing camera and attaches different 3D objects from the real 3D scanned sculptures to the user&#8217;s head using 8th Wall&#8217;s face tracking.</p>
<p><a href="https://jwwpheadless.com/wp-content/uploads/2022/10/Chroma_Full_Flow_6.gif"><img decoding="async" loading="lazy" width="444" height="960" src="https://jwwpheadless.com/wp-content/uploads/2022/10/Chroma_Full_Flow_6.gif" alt="" class="alignnone size-full wp-image-12832" style="height: 600px; width: auto;" /></a></p>
<h2 id="ar-off-mode">&#8220;No camera&#8221; mode</h2>
<p><img decoding="async" loading="lazy" src="https://jwwpheadless.com/wp-content/uploads/2022/10/vlcsnap-2023-04-03-20h31m59s688-444x309.jpg" alt="" width="444" height="309" class="alignright size-medium wp-image-12840" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/vlcsnap-2023-04-03-20h31m59s688-444x309.jpg 444w, https://jwwpheadless.com/wp-content/uploads/2022/10/vlcsnap-2023-04-03-20h31m59s688-296x206.jpg 296w" sizes="(max-width: 444px) 100vw, 444px" />8th Wall&#8217;s WebAR engine is very computationally expensive, so even the newest and fastest phones will heat up and drain battery very quickly. Nobody wants to run out of battery while they&#8217;re in the middle of Manhattan (where The Met is located), so we felt it was important that AR could be turned off at any time by the user and still give them a great experience. </p>
<p>We also recognized that not all users would want to grant camera and sensor permissions for privacy reasons, and some users might not even have a functional camera. Other users may have perfectly functional devices, but have a disability or impairment that makes it uncomfortable or impossible to move or interact with their phone to get to the AR content.</p>
<p>That&#8217;s why we added an AR toggle button at the top of the app, allowing users to interact with all the same content (including the 3D models) as if it were just a normal 2D website.</p>
<h3>Explore and Learn modes</h3>
<p>Both of these modes focus on allowing users to freely examine 3D models from the exhibition to discover interesting features and information. For these modes we implemented a classic model viewer UI with gestures and buttons for zooming and rotating the model.</p>
<div id='gallery-3' class='gallery galleryid-12682 gallery-columns-5 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.19.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.19.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.19-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.19-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.19-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.50.44.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.50.44.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.50.44-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.50.44-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.50.44-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.53.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.53.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.53-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.53-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2022/10/2023-03-31-09.49.53-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-1.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-1.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-1-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-1-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-1-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-2.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-2.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-2-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-2-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2022/10/Learn-Filter-2-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" />
			</dt></dl><br style="clear: both" />
		</div>

<h3>Play mode</h3>
<p>This mode was more about seeing a 3D object overlaid on your own face, so we felt a full 3D model viewer wasn&#8217;t necessary. Instead we allow users to upload a selfie image they&#8217;ve already taken on their device and see the 3D objects overlaid on them automatically. </p>
<p>We decided not to use face detection here and instead always place the 3D model in the same exact place for every image. Instructions were provided to guide users to frame their face correctly, though in practice this may not have been as effective as would like.</p>
<div id='gallery-4' class='gallery galleryid-12682 gallery-columns-5 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2022/10/Play-1.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/Play-1.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2022/10/Play-1-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2022/10/Play-1-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2022/10/Play-1-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2022/10/Play-2.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/10/Play-2.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2022/10/Play-2-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2022/10/Play-2-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2022/10/Play-2-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" />
			</dt></dl>
			<br style='clear: both' />
		</div>

<p></p>

Chroma AR: a WebAR experience for The Met

<p>As the world has transitioned to social distancing and contactless interactions these past few years, many museums have been thinking about ways for visitors to safely interact with artifacts at their museums. <a href="https://www.lacma.org/" target="_blank" rel="noopener">LACMA</a> is no exception, so they approached Bluecadet (where I worked as a Senior Developer) with an idea for one way this could work and asked us to build a prototype so they could test it out on site. </p>
<p>The overall vision was for visitors to be able to find out more about artifacts through a web app on their mobile device and a personalized NFC tag that they can swipe at special, custom NFC reader stations throughout the museum. Each time a visitor swipes their tag at an NFC reader station, their web app session updates in real-time to show them more information about the artifact associated with that station. </p>
<h2>Web app</h2>
<p>Visitors access the web app through a QR code containing a unique URL associated with the specific NFC tag they are holding. If they can&#8217;t (or don&#8217;t want to) scan the QR code, they can also type the URL into their browser manually. When the app loads, it starts a <b>WebSocket</b> connection with <b>Sanity</b> so it can receive new content in real-time when the visitors NFC tag is swiped somewhere. Within seconds of swiping a tag a station, the visitor will see new content on their device.</p>
<div id='gallery-5' class='gallery galleryid-12698 gallery-columns-3 gallery-size-gallery-image-small'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1170" height="2532" src="https://jwwpheadless.com/wp-content/uploads/2023/03/1-onboarding.png" class="attachment-gallery-image-small size-gallery-image-small" alt="" decoding="async" aria-describedby="gallery-5-12713" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2023/03/1-onboarding.png 1170w, https://jwwpheadless.com/wp-content/uploads/2023/03/1-onboarding-768x1662.png 768w, https://jwwpheadless.com/wp-content/uploads/2023/03/1-onboarding-710x1536.png 710w, https://jwwpheadless.com/wp-content/uploads/2023/03/1-onboarding-946x2048.png 946w" sizes="(max-width: 1170px) 100vw, 1170px" />
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-5-12713'>
				Tag shortcode entry screen. Skipped if a QR code was scanned.
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1170" height="2532" src="https://jwwpheadless.com/wp-content/uploads/2023/03/2-paired.jpg" class="attachment-gallery-image-small size-gallery-image-small" alt="" decoding="async" aria-describedby="gallery-5-12714" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2023/03/2-paired.jpg 1170w, https://jwwpheadless.com/wp-content/uploads/2023/03/2-paired-768x1662.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2023/03/2-paired-710x1536.jpg 710w, https://jwwpheadless.com/wp-content/uploads/2023/03/2-paired-946x2048.jpg 946w" sizes="(max-width: 1170px) 100vw, 1170px" />
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-5-12714'>
				After pairing with a tag, the app listens for swipes.
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="1170" height="2532" src="https://jwwpheadless.com/wp-content/uploads/2023/03/3-artifact.jpg" class="attachment-gallery-image-small size-gallery-image-small" alt="" decoding="async" aria-describedby="gallery-5-12715" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2023/03/3-artifact.jpg 1170w, https://jwwpheadless.com/wp-content/uploads/2023/03/3-artifact-768x1662.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2023/03/3-artifact-710x1536.jpg 710w, https://jwwpheadless.com/wp-content/uploads/2023/03/3-artifact-946x2048.jpg 946w" sizes="(max-width: 1170px) 100vw, 1170px" />
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-5-12715'>
				Artifact detail page.
				</dd></dl><br style="clear: both" />
		</div>

<p>The web app was built with <b>Next.js</b> and deployed to <b>Netlify</b>. Using Next&#8217;s <a href="https://nextjs.org/docs/api-routes/introduction" target="_blank" rel="noopener">API routes</a> feature, we were able to seamlessly spin up an external-facing API that the NFC reader station hardware could send data to each time an NFC tag is swiped. </p>
<p>One of these API routes receives swipe &#8220;notifications&#8221; from the NFC stations and adds the event to session data stored in Sanity. Since the web app is also connected to Sanity, it observes these events in <a href="https://www.sanity.io/docs/realtime-updates" target="_blank" rel="noopener">real-time</a> and automatically displays relevant content to the visitor.</p>
<h2>NFC reader station hardware</h2>
<p>Each reader station consists of an <a href="https://www.adafruit.com/product/4775" target="_blank" rel="noopener">Adafruit Metro ESP32-S2</a> with a <a href="https://www.adafruit.com/product/789" target="_blank" rel="noopener">PN532 NFC reader shield</a>. When the PN532 shield detects an NFC tag, the Metro board sends data about the tag and itself to the API using the museum&#8217;s wifi network, triggering a content update to whichever user session is currently open for that tag.</p>
<div id='gallery-6' class='gallery galleryid-12698 gallery-columns-1 gallery-size-gallery-image-large'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<img width="2560" height="1920" src="https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-07-12.27.50-scaled.jpg" class="attachment-gallery-image-large size-gallery-image-large" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-07-12.27.50-scaled.jpg 2560w, https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-07-12.27.50-768x576.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-07-12.27.50-1536x1152.jpg 1536w, https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-07-12.27.50-2048x1536.jpg 2048w" sizes="(max-width: 2560px) 100vw, 2560px" />
			</dt></dl><br style="clear: both" />
		</div>

<p>NFC tags come in many shapes and sizes, so we ordered a variety for LACMA to experiment with. Some are cheap (under $1), some are disposable (like stickers), and some can even be worn as fashion accessories, like wristbands and rings.</p>
<div id='gallery-7' class='gallery galleryid-12698 gallery-columns-1 gallery-size-gallery-image-large'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<img width="2560" height="1920" src="https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-08-09.45.38-scaled.jpg" class="attachment-gallery-image-large size-gallery-image-large" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-08-09.45.38-scaled.jpg 2560w, https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-08-09.45.38-768x576.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-08-09.45.38-1536x1152.jpg 1536w, https://jwwpheadless.com/wp-content/uploads/2023/03/2023-03-08-09.45.38-2048x1536.jpg 2048w" sizes="(max-width: 2560px) 100vw, 2560px" />
			</dt></dl><br style="clear: both" />
		</div>



Real-time artifact web app and NFC prototype for LACMA

<p>In preparation for a new library currently under construction, the Felician Sisters of North America wanted a set of touchscreen kiosks with interactive content to convey the history and breadth of their work to visitors. As a Senior Developer at Bluecadet, I worked with our talented team of designers, narrative strategists, and producers to create this beautiful experience, which will eventually be installed on 3-5 physical kiosks.</p>
<p>The app was built in <b>React</b> and makes extensive use of <b>Framer Motion</b> for many of the motion elements. The experience seamlessly uses a mix of real-time code effects and pre-rendered videos to achieve a fun variety of transitions. Using Bluecadet&#8217;s <a href="https://www.npmjs.com/package/@bluecadet/launchpad">Launchpad</a> toolkit, I set up a PC to run the app automatically in a fullscreen Chromium window in kiosk mode on startup.</p>
<div class="is-full-width" style="margin-top: 60px">
  <iframe class="media is-16by9 has-border" src="https://www.youtube.com/embed/_D7ej-UJ3_8?autoplay=1&#038;mute=1&#038;start=10&#038;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; modestbranding; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>


Felician Sisters Provinces touchscreen app

<p>Each year around the holidays, Bluecadet usually creates a fun holiday-themed experience built using tech or knowledge that the team learned over the past year. This past season I teamed up with motion designer <a href="https://www.sijichen.com/" target="_blank" rel="noopener">Siji Chen</a> to produce this interactive animated scene in <b>WebAR</b> using <b>8th Wall</b>.</p>
<p>Siji built the scene in <b>Blender</b>, then exported it as a <b>GLB</b> file with all the animations, textures, and lighting baked in. From there the GLB file is loaded into the <strong>8th Wall</strong> app using <strong>Three.js</strong>, where some fancy raycasting logic gets wired up to make parts of the model interactive on tap. First you have to tap a wrapped present to open it up, then you can tap on individual parts of the scene for little easter egg animations (like the bells and snowmen).</p>
<div id='gallery-8' class='gallery galleryid-12673 gallery-columns-4 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/01/bridge-present-1.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/01/rooftop-open-1.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/01/field-1.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<img width="360" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/01/bridge-people-1.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><br style="clear: both" />
		</div>

<p>Try it yourself by scanning this QR code!</p>
<div id='gallery-9' class='gallery galleryid-12673 gallery-columns-2 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<img width="800" height="800" src="https://jwwpheadless.com/wp-content/uploads/2022/01/holiday-card-qr-e1680480019811.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2022/01/holiday-card-qr-e1680480019811.jpg 800w, https://jwwpheadless.com/wp-content/uploads/2022/01/holiday-card-qr-e1680480019811-768x768.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" />
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<img width="300" height="300" src="https://jwwpheadless.com/wp-content/uploads/2022/01/vlc-record-2023-04-02-20h41m56s-3032120863.mp4-.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" />
			</dt></dl><br style="clear: both" />
		</div>

<style type="text/css">
#gallery-2 .gallery-item:last-of-type img {
  width: 100%;
  height: 100%;
}
</style>


WebAR holiday card for Bluecadet

<p>Reaction-diffusion is a mathematical model describing how two chemicals might <b>react</b> to each other as they <b>diffuse</b> through a medium together. It was <a href="https://www.dna.caltech.edu/courses/cs191/paperscs191/turing.pdf">proposed by Alan Turing in 1952</a> as a possible explanation for how the interesting patterns of stripes and spots that are seen on the skin/fur of animals like giraffes and leopards form.</p>
<p>When run at large scales and high speeds, reaction-diffusion systems can produce an amazing variety of dynamic, mesmerizing patterns and behaviors. In the time since Turing published his original paper on the topic, reaction-diffusion has been studied extensively by researchers in biology, chemistry, physics, computer science, and other fields. Today it has become accepted as a plausible (some say proven) explanation for the formation of patterns such as <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2689028/">zebrafish pigmentation</a>, <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2634019">hair follicle spacing</a>, the <a href="https://en.wikipedia.org/wiki/Belousov%E2%80%93Zhabotinsky_reaction">Belousov-Zhabotinsky (BZ) chemical reaction</a>, certain types of coral, zebra and tiger stripes, and more.</p>
<div class="buttons">
  <a href="https://jasonwebb.github.io/reaction-diffusion-playground/" class="button is-dark" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-external-link" aria-hidden="true"></span> Visit the playground</a> <a href="https://github.com/jasonwebb/reaction-diffusion-playground" class="button is-ghost has-icon" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-github" aria-hidden="true"></span> See the source code on Github</a>
</div>
<h2>Features</h2>
<p>My implementation is informed heavily by the work of many other people and projects, all of which are <a href="https://github.com/jasonwebb/reaction-diffusion-playground#references">cataloged in the Github repo</a>. I began by thoroughly reading Alan Turing&#8217;s original paper, along with the seminal works of <a href="https://www.karlsims.com/rd.html">Karl Sims</a> and <a href="https://mrob.com/pub/comp/xmorphia/">Robert Munafo</a>, all of which provided critical insight into the possibilities of various parameters and modes of operation not commonly seen in most implementations in the creative coding space.</p>
<p>On the coding side, I would also like to credit <a href="https://github.com/pmneila/jsexp">pmneila</a>, <a href="https://www.redblobgames.com/x/1905-reaction-diffusion/">Red Blob Games</a>, <a href="https://kaesve.nl/projects/reaction-diffusion/readme.html">Ken Voskuil</a>, and <a href="https://github.com/colejd/Reaction-Diffusion-ThreeJS">Jonathan Cole</a> for sharing their source code, as their projects in particular helped me work through specific coding challenges like rendering using custom shaders in ThreeJS and achieving different visual effects.</p>
<p>In the Reaction-Diffusion Playground you will find:</p>
<ul>
<li><a href="https://raw.githubusercontent.com/jasonwebb/reaction-diffusion-playground/master/images/parameter-map-screenshot.png">Interactive parameter map</a> for quickly jumping to interesting areas of the parameter space just by clicking.
<li>Basic MIDI controller support for all parameters.
<li>Upload an image to use as a &#8220;style map&#8221;, which interpolates equation parameters between two user-defined values based on pixel brightness. The style map image can be translated, scaled, and rotated too!
<li>Multiple rendering styles, including HSL mapping, gradient mapping, grayscale, and a number of styles based on Red Blob Games&#8217; implementation.
<li>Configurable seed patterns including a circle, rectangle, text, or an uploaded image.
<li>Support for diffusion bias, meaning diffusion can occur faster in one direction than in others (achieved through directional weighting applied to the Laplacian stencil).
<li>A large collection of interesting parameter presets from Robert Munafo&#8217;s <a href="https://mrob.com/pub/comp/xmorphia/ogl/index.html">WebGL Gray-Scott Explorer</a>.
</ul>
<h2>Renders</h2>
<div class="is-full-width">
  <iframe class="media" style="aspect-ratio: 1045/523" src="https://www.youtube.com/embed/8Nk0DhAtmgk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id='gallery-10' class='gallery galleryid-12558 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-1.jpg'><img width="1918" height="927" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-1.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-1.jpg 1918w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-1-768x371.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-1-1536x742.jpg 1536w" sizes="(max-width: 1918px) 100vw, 1918px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-2.jpg'><img width="1918" height="927" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-2.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-2.jpg 1918w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-2-768x371.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-2-1536x742.jpg 1536w" sizes="(max-width: 1918px) 100vw, 1918px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-3.png'><img width="1918" height="927" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-3.png" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-3.png 1918w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-3-768x371.png 768w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-3-1536x742.png 1536w" sizes="(max-width: 1918px) 100vw, 1918px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-4.jpg'><img width="1918" height="927" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-4.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-4.jpg 1918w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-4-768x371.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-4-1536x742.jpg 1536w" sizes="(max-width: 1918px) 100vw, 1918px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-5.jpg'><img width="1918" height="927" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-5.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-5.jpg 1918w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-5-768x371.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-5-1536x742.jpg 1536w" sizes="(max-width: 1918px) 100vw, 1918px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-6.jpg'><img width="1918" height="927" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-6.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-6.jpg 1918w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-6-768x371.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-6-1536x742.jpg 1536w" sizes="(max-width: 1918px) 100vw, 1918px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-7.jpg'><img width="1918" height="927" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-7.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-7.jpg 1918w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-7-768x371.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-7-1536x742.jpg 1536w" sizes="(max-width: 1918px) 100vw, 1918px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-8.jpg'><img width="900" height="900" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-8.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-8.jpg 900w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-8-768x768.jpg 768w" sizes="(max-width: 900px) 100vw, 900px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-9.jpg'><img width="900" height="900" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-9.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-9.jpg 900w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-9-768x768.jpg 768w" sizes="(max-width: 900px) 100vw, 900px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-10.jpg'><img width="1918" height="927" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-10.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-10.jpg 1918w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-10-768x371.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-10-1536x742.jpg 1536w" sizes="(max-width: 1918px) 100vw, 1918px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-11.jpg'><img width="900" height="900" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-11.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-11.jpg 900w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-11-768x768.jpg 768w" sizes="(max-width: 900px) 100vw, 900px" /></a>
			</dt></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-12.jpg'><img width="900" height="900" src="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-12.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-12.jpg 900w, https://jwwpheadless.com/wp-content/uploads/2020/12/screenshot-12-768x768.jpg 768w" sizes="(max-width: 900px) 100vw, 900px" /></a>
			</dt></dl><br style="clear: both" />
		</div>



Reaction-Diffusion Playground

<p>Space colonization is a process for iteratively growing networks of organic branches based on the distribution of attractors to which the branches are attracted. <a href="http://algorithmicbotany.org/papers/venation.sig2005.pdf">Originally described</a> (PDF) by <a href="http://adam.runions.net/" target="_blank" rel="noopener noreferrer">Adam Runions</a> and collaborators at the <a href="http://algorithmicbotany.org/" target="_blank" rel="noopener noreferrer">Algorithmic Botany group</a> at the University of Calgary, this system can be used to simulate the growth of leaf venation patterns and tree-like structures, as well as many other vein-like systems like Gorgonian sea fans, circulatory systems, root systems, and more.</p>
<p>I set out to explore this algorithm in a series of generative 2D experiments built using vanilla ES6 JavaScript and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" target="_blank" rel="noopener noreferrer">Canvas API</a>, all of which you can run in your browser using the link below!</p>
<div class="buttons">
  <a href="https://jasonwebb.github.io/2d-space-colonization-experiments" class="button is-dark" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-external-link" aria-hidden="true"></span> Run the experiments in your browser</a> <a href="https://github.com/jasonwebb/2d-space-colonization-experiments" class="button is-ghost has-icon" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-github" aria-hidden="true"></span> See the source code on Github</a>
</div>
<p>For those of you who would like to learn exactly how this process works and how I implemented it using code, I&#8217;ve published a full technical write-up available over on Medium:</p>
<div class="buttons">
  <a href="https://medium.com/@jason.webb/space-colonization-algorithm-in-javascript-6f683b743dc5" class="button is-info" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-medium" aria-hidden="true"></span> Read the technical article on Medum</a>
</div>
<h2>Types of growth</h2>
<p>The original paper describes two types of growth &#8211; <i>open</i> and <i>closed</i> venation, referring to whether or not adjacent branches connect together to form loops. Open venation is perfect for modeling trees, shrubs, and sea fans, but closed venation is the way to go for modeling leaf venation and slime molds.</p>
<div id='gallery-11' class='gallery galleryid-12268 gallery-columns-2 gallery-size-gallery-image-medium'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/11/space-colonization-basic-open.gif'><img width="800" height="800" src="https://jwwpheadless.com/wp-content/uploads/2019/11/space-colonization-basic-open.gif" class="attachment-gallery-image-medium size-gallery-image-medium" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/11/space-colonization-basic-closed.gif'><img width="800" height="800" src="https://jwwpheadless.com/wp-content/uploads/2019/11/space-colonization-basic-closed.gif" class="attachment-gallery-image-medium size-gallery-image-medium" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<h2>Effects</h2>
<p>In addition to the core growth algorithm there are a couple of nice visual effects that can be implemented to create more realistic and compelling images.</p>
<h3>Vein thickening</h3>
<p>In this effect, branches become thicker the longer they get. Starting at the tips, each branch&#8217;s thickness is increased as the code recursively travels all the way up to the &#8220;root&#8221;. If there are multiple sub-branches, they all contribute to the &#8220;trunk&#8221; branch thickness. The paper references the term auxin flux canalization when talking about leaf venation, as well as <a href="https://en.wikipedia.org/wiki/Murray%27s_law" target="_blank" rel="noopener noreferrer">Murray&#8217;s law</a> from fluid transport network theory.</p>
<div id='gallery-12' class='gallery galleryid-12268 gallery-columns-2 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/canalization-off.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/canalization-off.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/canalization-on.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/canalization-on.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<h3>Opacity blending</h3>
<p>The illusion of depth can also be created by varying a branch&#8217;s opacity proportionally to it&#8217;s thickness at any point. Thinner, shorter branches are more transparent more thicker, longer ones.</p>
<div id='gallery-13' class='gallery galleryid-12268 gallery-columns-2 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/opacity-blending-off.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/opacity-blending-off.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/blending-opacity-on.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/blending-opacity-on.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<h2>Basic setup</h2>
<p>Taking away all the visual effects, colors, and features shown below, this is what the raw output of the space colonization (with open venation) looks like:</p>
<p><a href="https://jasonwebb.github.io/2d-space-colonization-experiments/experiments/basic" target="_blank" rel="noopener noreferrer" class="button is-dark">Run this experiment in your browser</a></p>
<div class="embed-responsive embed-responsive-16by9 is-full-width">
  <iframe loading="lazy" width="1100" height="619" class="embed-responsive-item" src="https://www.youtube.com/embed/PxziKX-O7CA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h2>Bounding shapes</h2>
<p>Growth can be constrained to arbitrary bounding shapes to simulate the finite domain of a leaf or organism.</p>
<p><a href="https://jasonwebb.github.io/2d-space-colonization-experiments/experiments/bounds" target="_blank" rel="noopener noreferrer" class="button is-dark">Run this experiment in your browser</a></p>
<div id='gallery-14' class='gallery galleryid-12268 gallery-columns-2 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/bounds-circle.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/bounds-circle.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/bounds-leaf.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/bounds-leaf.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<div class="embed-responsive embed-responsive-16by9 is-full-width">
  <iframe loading="lazy" width="1100" height="auto" class="embed-responsive-item" src="https://www.youtube.com/embed/4vmP_3C9mVI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h2>Obstacles</h2>
<p>Growth can also be made to avoid obstacles to simulate areas of decay or space already taken up by competing systems. Its fascinating to see how veins will &#8220;find&#8221; paths of minimal energy automatically, like lightning seeking a path to the earth.</p>
<p><a href="https://jasonwebb.github.io/2d-space-colonization-experiments/experiments/obstacles" target="_blank" rel="noopener noreferrer" class="button is-dark">Run this experiment in your browser</a></p>
<div id='gallery-15' class='gallery galleryid-12268 gallery-columns-2 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/obstacles-leaf.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/obstacles-leaf.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/obstacles-square.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/obstacles-square.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<div class="embed-responsive embed-responsive-16by9 is-full-width">
  <iframe loading="lazy" width="1100" height="619" class="embed-responsive-item" src="https://www.youtube.com/embed/EmKZVq8DBuA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h2>Marginal growth</h2>
<p>Real leaves grow over time, sometimes even evolving their boundary shapes to form features like lobes or serrations. In these examples, growth attractors are placed only along the edge (never inside the shape) and new attractors must be added to fill in gaps between older attractors as the shape gets bigger. Each time attractors are filled in, branches tend to be split.</p>
<p><a href="https://jasonwebb.github.io/2d-space-colonization-experiments/experiments/marginal-growth" target="_blank" rel="noopener noreferrer" class="button is-dark">Run this experiment in your browser</a></p>
<div id='gallery-16' class='gallery galleryid-12268 gallery-columns-2 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/marginal-growth-circle.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/marginal-growth-circle.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2020/03/marginal-growth-square.gif'><img width="600" height="600" src="https://jwwpheadless.com/wp-content/uploads/2020/03/marginal-growth-square.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<div class="embed-responsive embed-responsive-16by9 is-full-width">
  <iframe loading="lazy" width="1100" height="619" class="embed-responsive-item" src="https://www.youtube.com/embed/HPredEpsFA8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h2>Interactivity</h2>
<p>This system comes really alive when a bit of interactivity is added! In this experiment the mouse is used to &#8220;paint&#8221; growth attractors and place &#8220;roots&#8221;. Use left click to paint, mouse wheel to increase/decrease the paintbrush radius, and right click to place a root node to kick off growth.</p>
<p><a href="https://jasonwebb.github.io/2d-space-colonization-experiments/experiments/painting" target="_blank" rel="noopener noreferrer" class="button is-dark">Run this experiment in your browser</a></p>
<div class="embed-responsive embed-responsive-16by9 is-full-width">
  <iframe loading="lazy" width="1100" height="619" class="embed-responsive-item" src="https://www.youtube.com/embed/stZZER0SRUE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h2>Growth from images</h2>
<p>The branching networks that the space colonization algorithm produces are highly dependent on the arrangement of attractors through which the branches grow. In all of the experiments above, attractors were distributed randomly (taking into account any bounding shapes or obstacles), but really you can arrange them however you like. </p>
<p>In this experiment I started with a grayscale image and generated a pattern of circles using the <a href="https://www.cs.ubc.ca/labs/imager/tr/2002/secord2002b/secord.2002b.pdf" target="_blank" rel="noopener noreferrer">weighted Voronoi stippling</a> algorithm via EMSL&#8217;s StippleGen. I converted each circle&#8217;s position into a set of attractors and ended up with the following result.</p>
<p><a href="https://jasonwebb.github.io/2d-space-colonization-experiments/experiments/from-images" target="_blank" rel="noopener noreferrer" class="button is-dark">Run this experiment in your browser</a></p>
<div class="embed-responsive embed-responsive-16by9 is-full-width">
  <iframe loading="lazy" src="https://player.vimeo.com/video/461625489" width="1100" height="auto" class="embed-responsive-item" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe><br />
  <script src="https://player.vimeo.com/api/player.js"></script>
</div>


Space colonization branching experiments in JavaScript

<p>Digital morphogenesis, or the creation of form through code and other digital technologies, has been a major interest of mine for a number of years. Though still an emerging term, I like to use it to refer to a category of generative, nature-inspired digital processes based on contemporary and historical research from the natural sciences.</p>
<p>Due to  the sheer complexity of phenomena in the real world, accurate modeling through digital technology often requires the use of cutting-edge advancements in graphics technology and programming, computer science, and mathematics, especially when real-time results are desired.</p>
<p>Even for an experienced technologist, staying on top of these advancements enough to make valuable cross-disciplinary connections can be a daunting task. To help make these sorts of insightful connections easier, and to selfishly help prevent myself from having to redo research that I&#8217;ve already done, I started a Github repository with a giant README file containing lists of condensed information and references on just about every topic I could think of.</p>
<div class="buttons">
  <a href="https://github.com/jasonwebb/morphogenesis-resources" class="button is-ghost has-icon" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-github" aria-hidden="true"></span> See the repository on Github</a>
</div>
<p>In the repository you&#8217;ll find a large README file with content broken down into the following sections:</p>
<ul style="margin-bottom: 60px">
<li><b>Growth algorithms</b> &#8211; high-level processes used to generate forms, such differential growth and diffusion-limited aggregation
<li><b>Math and physics topics</b> &#8211; important concepts and techniques that tend to crop up again and again in digital morphogenesis, like Delaunay/Voronoi diagrams, fractals, and geometric primitives
<li><b>Natural phenomena</b> &#8211; interesting things that happen in nature that are worth studying, like insect eggs, geological formations, minerals, and locations with bizarre properties
<li><b>Lab experiments</b> &#8211; real experiments you can do to study interesting phenomena, like the BZ reaction and Hele-Shaw cells
<li><b>Useful code patterns and techniques</b> &#8211; bits of code that you might find yourself using (or should use), like particle systems, spatial indices, and marching cubes
<li><b>Books, publications, and talks</b> &#8211; references to read and watch
<li><b>Software</b> &#8211; a quick look at free and commercial packages that are useful for morphogenesis, like Houdini, Unreal, and Unity. Also includes a list of coding frameworks to try out, like Processing / p5.js, openFrameworks, and nannou
</ul>
<div class="is-full-width has-border">
  <div style="width: 1280px;" class="wp-video">
<video class="wp-video-shortcode" id="video-12255-1" width="1280" height="720" loop="1" autoplay="1" preload="auto" controls="controls"><source type="video/webm" src="https://jwwpheadless.com/wp-content/uploads/2019/11/morphogenesis-resources-scrolling.webm?_=1" /><a href="https://jwwpheadless.com/wp-content/uploads/2019/11/morphogenesis-resources-scrolling.webm">https://jwwpheadless.com/wp-content/uploads/2019/11/morphogenesis-resources-scrolling.webm</a></video></div>
</div>

Morphogenesis resource compilation on GitHub

Radial Voronoi diagram experiments in JavaScript

Diffusion-limited aggregation experiments in JavaScript

<p><a href="https://jwwpheadless.com/wp-content/uploads/2019/05/meandering-river-1.jpeg"><img decoding="async" loading="lazy" src="https://jwwpheadless.com/wp-content/uploads/2019/05/meandering-river-1-296x206.jpeg" alt="Differential growth seen in satelite image of a river" width="296" height="206" class="alignright size-thumbnail wp-image-12411" srcset="https://jwwpheadless.com/wp-content/uploads/2019/05/meandering-river-1-296x206.jpeg 296w, https://jwwpheadless.com/wp-content/uploads/2019/05/meandering-river-1-444x309.jpeg 444w, https://jwwpheadless.com/wp-content/uploads/2019/05/meandering-river-1-888x618.jpeg 888w" sizes="(max-width: 296px) 100vw, 296px" /></a></p>
<p>Differential growth is a process seen in nature that uses overconstrained shapes to produce buckling and undulating forms that remind us of meandering rivers, rippled surface textures of fruits and seeds, foliose lichen, the space-filling behaviors of worms, snakes, intestines, and so much more.</p>
<p>Inspired by the work of <a href="https://n-e-r-v-o-u-s.com/blog/?p=6721" rel="noopener noreferrer" target="_blank">Nervous System</a>, <a href="https://inconvergent.net/generative/differential-line/" rel="noopener noreferrer" target="_blank">inconvergent</a>, and <a href="http://www.entagma.com/differential-mesh-growth/" rel="noopener noreferrer" target="_blank">Entagma</a>, I created my own 2D implementation of this algorithm using modern JavaScript (ES6) and p5.js. This means that anyone can run these experiments in their browser without any special extensions, albeit without quite the performance that is possible with dedicated tools and systems languages like Houdini, C++, or Go.</p>
<p>What I ended up with was a series of iterative experiments of increasing complexity that document the evolution of this work from a single line to multiple closed shapes, and even SVG import and export! You can run all of these experiments on our computer using the link below, or even grab a copy of the fully open-source code to adapt it for your own projects.</p>
<div class="buttons">
<a href="https://jasonwebb.github.io/2d-differential-growth-experiments/" class="button is-dark" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-external-link" aria-hidden="true"></span> Run the experiments in your browser</a> <a href="https://github.com/jasonwebb/2d-differential-growth-experiments" class="button is-ghost has-icon" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-github" aria-hidden="true"></span> See the source code on Github</a>
</div>
<p>For those of you who would like to learn exactly how this process works and how I implemented it using code, I&#8217;ve published a full technical write-up available over on Medium:</p>
<div class="buttons">
  <a href="https://medium.com/@jason.webb/2d-differential-growth-in-js-1843fd51b0ce" class="button is-info" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-medium" aria-hidden="true"></span> Read the technical article on Medum</a>
</div>
<p><a href="https://jwwpheadless.com/wp-content/uploads/2019/05/index.png"><img decoding="async" loading="lazy" width="1920" height="937" src="https://jwwpheadless.com/wp-content/uploads/2019/05/index.png" alt="" class="alignnone size-full wp-image-12147 is-full-width has-border" /></a></p>
<div id='gallery-29' class='gallery galleryid-12015 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/02/line1.gif'><img width="1400" height="300" src="https://jwwpheadless.com/wp-content/uploads/2019/02/line1.gif" class="attachment-full size-full" alt="Differential growth on a single line" decoding="async" aria-describedby="gallery-29-12024" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-29-12024'>
				Simplest possible condition &#8211; a straight line
				</dd></dl><br style="clear: both" />
		</div>

<div id='gallery-30' class='gallery galleryid-12015 gallery-columns-2 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/02/square.gif'><img width="900" height="900" src="https://jwwpheadless.com/wp-content/uploads/2019/02/square.gif" class="attachment-full size-full" alt="Growth of a square" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/02/square-trace.gif'><img width="900" height="900" src="https://jwwpheadless.com/wp-content/uploads/2019/02/square-trace.gif" class="attachment-full size-full" alt="Time plot of square growth" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<div id='gallery-31' class='gallery galleryid-12015 gallery-columns-2 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/02/circle-trace-debug.gif'><img width="900" height="900" src="https://jwwpheadless.com/wp-content/uploads/2019/02/circle-trace-debug.gif" class="attachment-full size-full" alt="Colored time plot of circle growth" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/02/triangle-inverted.gif'><img width="900" height="900" src="https://jwwpheadless.com/wp-content/uploads/2019/02/triangle-inverted.gif" class="attachment-full size-full" alt="Growth of triangle with inverted colors" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<div id='gallery-32' class='gallery galleryid-12015 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/hello-world-svg.gif'><img width="1400" height="600" src="https://jwwpheadless.com/wp-content/uploads/2019/04/hello-world-svg.gif" class="attachment-full size-full" alt="Growth of text imported via SVG file" decoding="async" aria-describedby="gallery-32-12043" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-32-12043'>
				Growth of text imported via SVG file
				</dd></dl><br style="clear: both" />
		</div>

<div id='gallery-33' class='gallery galleryid-12015 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/bounds.gif'><img width="900" height="900" src="https://jwwpheadless.com/wp-content/uploads/2019/04/bounds.gif" class="attachment-full size-full" alt="Various starting shapes growing inside circular bounds" decoding="async" aria-describedby="gallery-33-12041" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-33-12041'>
				Various starting shapes growing inside circular bounds
				</dd></dl><br style="clear: both" />
		</div>

<div id='gallery-34' class='gallery galleryid-12015 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/circle.gif'><img width="1400" height="600" src="https://jwwpheadless.com/wp-content/uploads/2019/04/circle.gif" class="attachment-full size-full" alt="Growth of lines arranged in a circle" decoding="async" aria-describedby="gallery-34-12042" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-34-12042'>
				Growth of lines arranged in a circle
				</dd></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/vertical-lines.gif'><img width="1400" height="600" src="https://jwwpheadless.com/wp-content/uploads/2019/04/vertical-lines.gif" class="attachment-full size-full" alt="Time plot of growth of vertical lines" decoding="async" aria-describedby="gallery-34-12044" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-34-12044'>
				Time plot of growth of vertical lines
				</dd></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/colliding-wavefronts.png'><img width="841" height="837" src="https://jwwpheadless.com/wp-content/uploads/2019/04/colliding-wavefronts.png" class="attachment-full size-full" alt="Colliding wavefronts of growth" decoding="async" aria-describedby="gallery-34-12045" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-34-12045'>
				Colliding wavefronts of growth
				</dd></dl><br style="clear: both" />
		</div>

<h2>Playground</h2>
<p>After iteratively building up each of my experiments I felt like I had a pretty robust system on my hands to share. However, as fun as it is to publish work on Github, that&#8217;s really only accessible to other developers, particularly those that have some experience with Git and modern JavaScript workflows. So I created a custom &#8220;playground&#8221; UI that anyone can load in the their browser to draw and grow shapes interactively with their mouse and keyboard! </p>
<p>You can use your mouse to draw freehand lines and shapes, as well as basic primitives likes rectangles and circles. A large Play button is located at the top of the screen to start or pause the differential growth process, and a few popups are available to provide more information, keyboard shortcuts, and links to the source code. I even included a fancy control panel that lets you tweak every parameter of the underlying algorithm, though its not exactly bulletproof in real-time.</p>
<p>The UI also makes it easy to export SVG files of the shapes you grow so you can cut them out on a laser cutter, carve them on a CNC router, or even do some 3D printing!</p>
<div class="buttons">
 <a href="https://jasonwebb.github.io/2d-differential-growth-experiments/experiments/playground/" class="button is-dark" target="_blank" rel="noopener noreferrer"><span class="icon fa fa-external-link" aria-hidden="true"></span> Open the Playground in your browser</a>
</div>
<p><a href="https://jwwpheadless.com/wp-content/uploads/2019/05/playground.png"><img decoding="async" loading="lazy" width="1920" height="1040" src="https://jwwpheadless.com/wp-content/uploads/2019/05/playground.png" alt="Screenshot of playground" class="alignnone size-full wp-image-12144 is-full-width has-border" /></a></p>
<div id='gallery-35' class='gallery galleryid-12015 gallery-columns-3 gallery-size-medium'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/playground-1.png'><img width="311" height="309" src="https://jwwpheadless.com/wp-content/uploads/2019/04/playground-1.png" class="attachment-medium size-medium" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/playground-2.png'><img width="311" height="309" src="https://jwwpheadless.com/wp-content/uploads/2019/04/playground-2.png" class="attachment-medium size-medium" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/playground-3.png'><img width="311" height="309" src="https://jwwpheadless.com/wp-content/uploads/2019/04/playground-3.png" class="attachment-medium size-medium" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<p></p>
<h2>Applications</h2>
<p>Using SVGs exported from various experiments I put together a few sample projects to demonstrate ways this system can be used in digital fabrication workflows. Pen plotters, T-shirt prints, 3D prints and more are all possible &#8211; I&#8217;d love to see what you create!</p>
<div id='gallery-36' class='gallery galleryid-12015 gallery-columns-2 gallery-size-medium'><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/application-inkscape.png'><img width="344" height="309" src="https://jwwpheadless.com/wp-content/uploads/2019/04/application-inkscape.png" class="attachment-medium size-medium" alt="Works with Inkscape and Illustrator!" decoding="async" aria-describedby="gallery-36-12108" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-36-12108'>
				Works with Inkscape and Illustrator!
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/application-fusion360.png'><img width="323" height="309" src="https://jwwpheadless.com/wp-content/uploads/2019/04/application-fusion360.png" class="attachment-medium size-medium" alt="Works with Fusion 360!" decoding="async" aria-describedby="gallery-36-12107" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-36-12107'>
				Works with Fusion 360!
				</dd></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/application-pen-plotter-1.jpeg'><img width="412" height="309" src="https://jwwpheadless.com/wp-content/uploads/2019/04/application-pen-plotter-1.jpeg" class="attachment-medium size-medium" alt="Drawing made with a pen plotter (1)" decoding="async" aria-describedby="gallery-36-12109" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-36-12109'>
				Drawing made with a pen plotter (1)
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/application-pen-plotter-2.jpeg'><img width="412" height="309" src="https://jwwpheadless.com/wp-content/uploads/2019/04/application-pen-plotter-2.jpeg" class="attachment-medium size-medium" alt="Drawing made with a pen plotter (2)" decoding="async" aria-describedby="gallery-36-12110" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-36-12110'>
				Drawing made with a pen plotter (2)
				</dd></dl><br style="clear: both" /><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/application-ping-pong-paddle.jpeg'><img width="412" height="309" src="https://jwwpheadless.com/wp-content/uploads/2019/04/application-ping-pong-paddle.jpeg" class="attachment-medium size-medium" alt="Embedded in a 3D printed ping pong paddle!" decoding="async" aria-describedby="gallery-36-12111" loading="lazy" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-36-12111'>
				Embedded in a 3D printed ping pong paddle!
				</dd></dl><dl class='gallery-item'>
			<dt class='gallery-icon landscape'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2019/04/2019-04-17-17.18.16.jpg'><img width="444" height="309" src="https://jwwpheadless.com/wp-content/uploads/2019/04/2019-04-17-17.18.16-444x309.jpg" class="attachment-medium size-medium" alt="" decoding="async" aria-describedby="gallery-36-12125" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2019/04/2019-04-17-17.18.16-444x309.jpg 444w, https://jwwpheadless.com/wp-content/uploads/2019/04/2019-04-17-17.18.16-296x206.jpg 296w, https://jwwpheadless.com/wp-content/uploads/2019/04/2019-04-17-17.18.16-888x618.jpg 888w" sizes="(max-width: 444px) 100vw, 444px" /></a>
			</dt>
				<dd class='wp-caption-text gallery-caption' id='gallery-36-12125'>
				Generative typography for HASCO Duo, an experimental music group, printed on a T-shirt
				</dd></dl><br style="clear: both" />
		</div>

Chroma AR: a WebAR experience for The Met(2023)

Real-time artifact web app and NFC prototype for LACMA(2023)

Felician Sisters Provinces touchscreen app(2022)

WebAR holiday card for Bluecadet(2022)

Reaction-Diffusion Playground(2021)

Space colonization branching experiments in JavaScript(2020)

Morphogenesis resource compilation on GitHub(2019)

Radial Voronoi diagram experiments in JavaScript(2019)

Diffusion-limited aggregation experiments in JavaScript(2019)

Differential growth experiments in JavaScript(2019)