<p>Minnesota United Football Club had a <a href="https://www.mnufc.com/news/minnesota-united-presents-2024-starry-night-kit" target="_blank" rel="noopener">new kit design for the 2024 season</a> and they wanted a way to reveal it to the public that was fun, interactive, and cutting-edge. In partnership with REM5 Studios, I helped bring their kit to life with a custom WebAR app and awesome code-based special effects.</p>
<p>This app was built using <b>8th Wall</b> and leveraged its world tracking capability to make it seem like the kit was right there in the room with you. A mix of <b>Three.js</b>, <b>A-Frame</b>, and <b>vanilla JS</b> was used for 3D rendering and app flow management, with some custom special effects built with <b>shaders</b> and a <b>GPGPU-based particle system</b>. Various UI controls and overlays throughout the app were built with <strong>HTML</strong>, <strong>CSS</strong>, and <strong>vanilla JS</strong>.</p>
<div class="is-full-width" style="margin-top: 60px; margin-bottom: -48px;">
  <iframe class="media is-16by9" src="https://www.youtube.com/embed/v85qEH0kcQg?vq=hd1080&#038;autoplay=0&#038;loop=1&#038;modestbranding=1&#038;rel=0&#038;iv_load_policy=3&#038;fs=0&#038;controls=1&#038;mute=1" allow="autoplay;" frameborder="0"></iframe>
</div>
<div id='gallery-1' class='gallery galleryid-12935 gallery-columns-3 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2024/06/loon.gif'><img width="324" height="720" src="https://jwwpheadless.com/wp-content/uploads/2024/06/loon.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2024/06/reveal.gif'><img width="324" height="720" src="https://jwwpheadless.com/wp-content/uploads/2024/06/reveal.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2024/06/customizing-1.gif'><img width="324" height="720" src="https://jwwpheadless.com/wp-content/uploads/2024/06/customizing-1.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<div id='gallery-2' class='gallery galleryid-12935 gallery-columns-4 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2024/06/1-loading-1.jpg'><img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2024/06/1-loading-1.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2024/06/1-loading-1.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2024/06/1-loading-1-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2024/06/1-loading-1-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2024/06/1-loading-1-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2024/06/3-intro-2-1.jpg'><img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2024/06/3-intro-2-1.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2024/06/3-intro-2-1.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2024/06/3-intro-2-1-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2024/06/3-intro-2-1-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2024/06/3-intro-2-1-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2024/06/5-kit-1.jpg'><img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2024/06/5-kit-1.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2024/06/5-kit-1.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2024/06/5-kit-1-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2024/06/5-kit-1-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2024/06/5-kit-1-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2024/06/7-screenshot-1.jpg'><img width="1080" height="2400" src="https://jwwpheadless.com/wp-content/uploads/2024/06/7-screenshot-1.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://jwwpheadless.com/wp-content/uploads/2024/06/7-screenshot-1.jpg 1080w, https://jwwpheadless.com/wp-content/uploads/2024/06/7-screenshot-1-768x1707.jpg 768w, https://jwwpheadless.com/wp-content/uploads/2024/06/7-screenshot-1-691x1536.jpg 691w, https://jwwpheadless.com/wp-content/uploads/2024/06/7-screenshot-1-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<div style="display: none">
<h2 class="h3">Kit reveal effect</h2>
<p>The most important moment in the app is when the new kit design is revealed to the user, so it had to be special. A photorealistic 3D model of the kit, made by artist Keenan Geib, is progressively revealed from the bottom up by a custom shader that mixes a noise function with the model&#8217;s color map.</p>
<p>&#8212;LARGE VIDEO CAPTURE OF KIT REVEAL EFFECT&#8212;</p>
<p></p>
<h2 class="h3">Real-time kit customization</h2>
<p>After the kit is revealed, the user is given an opportunity to see their name and number on the back using an interactive, real-time editor. As the user types, their text is drawn directly onto the kit model&#8217;s color map with the brand font while a profanity filter makes sure they haven&#8217;t typed anything objectionable.</p>
<p>&#8212;LARGE VIDEO CAPTURE OF KIT CUSTOMIZATION&#8212;</p>
<div style="background-color: rgba(0,0,0,.05); padding: 30px">
<h3 style="margin-top: 0">Easter eggs!</h3>
<p>For a bit of extra fun, if the user enters a secret passcode into the name field they can trigger a special green-screen video of a star player showing off the kit (with some sweet glitch effects made by Brian Skalak).</p>
<p>&#8212;LARGE VIDEO OF EASTER EGG&#8211;
</p></div>
<h2 class="h3">Particle effects</h2>
<p>To create a bit of hype before the kit is revealed, a custom particle system was created to swirl around the space, shrinking and exploding into different configurations. </p>
<h2 class="h3">Coaster tracking version</h2>
<p>&#8212;LARGE VIDEO CAPTURE OF IMAGE TRACKING&#8212;<br />

</div>

MNUFC 2024 kit reveal WebAR app

<p></p>
<p>In partnership with <a href="https://toolofna.com/work/featured/kindness-is-all-around/" target="_blank" rel="noopener">Tool of North America</a>, this web app was built for Starbucks to help customers share acts of kindness and celebrate baristas as part of a nationwide campaign. Visitors accessed the app by scanning QR codes placed in every Starbucks store in the US (over 16,000!).</p>
<p>My role in the project was to create a way for visitors to access all of the content and features available in AR even if they can&#8217;t (or don&#8217;t want to) use their camera or physically move their phone around. Although this is most useful for visitors with disabilities, it&#8217;s also useful for anyone with an older phone or who just doesn&#8217;t feel like waving their phone around in a public place.</p>
<div class="is-full-width" style="margin-top: 60px; margin-bottom: 80px;">
  <iframe class="media is-16by9" src="https://www.youtube.com/embed/-A4fzlJoQGk?vq=hd1080&#038;autoplay=0&#038;loop=1&#038;modestbranding=1&#038;rel=0&#038;iv_load_policy=3&#038;fs=0&#038;controls=1&#038;mute=1" allow="autoplay;" frameborder="0"></iframe>
</div>
<div class="press-items">
<div class="press-item">
    <a href="https://www.adweek.com/brand-marketing/starbucks-augmented-reality-to-celebrate-and-encourage-kindness/" target="_blank" rel="noopener"><img decoding="async" loading="lazy" width="2560" height="921" src="https://jwwpheadless.com/wp-content/uploads/2023/07/adweek-logo.png" alt="" class="alignnone size-full wp-image-12980" srcset="https://jwwpheadless.com/wp-content/uploads/2023/07/adweek-logo.png 2560w, https://jwwpheadless.com/wp-content/uploads/2023/07/adweek-logo-768x276.png 768w, https://jwwpheadless.com/wp-content/uploads/2023/07/adweek-logo-1536x553.png 1536w, https://jwwpheadless.com/wp-content/uploads/2023/07/adweek-logo-2048x737.png 2048w" sizes="(max-width: 2560px) 100vw, 2560px" /></a></p>
<div class="press-item-caption">
      <a href="https://www.adweek.com/brand-marketing/starbucks-augmented-reality-to-celebrate-and-encourage-kindness/" target="_blank" rel="noopener">Starbucks Uses Augmented Reality to Celebrate and Encourage Kindness</a> in Adweek.
    </div>
</p></div>
<div class="press-item">
    <a href="https://stories.starbucks.com/stories/2023/a-little-kindness-is-never-really-little/" target="_blank" rel="noopener"><img decoding="async" loading="lazy" width="1200" height="1215" src="https://jwwpheadless.com/wp-content/uploads/2023/07/starbucks-logo.png" alt="" class="alignnone size-full wp-image-12988" srcset="https://jwwpheadless.com/wp-content/uploads/2023/07/starbucks-logo.png 1200w, https://jwwpheadless.com/wp-content/uploads/2023/07/starbucks-logo-768x778.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></a></p>
<div class="press-item-caption">
      <a href="https://stories.starbucks.com/stories/2023/a-little-kindness-is-never-really-little/" target="_blank" rel="noopener">A little kindness is never really little</a> on Starbucks&#8217; site.
    </div>
</p></div>
<div class="press-item">
    <a href="https://www.qsrmagazine.com/food/beverage/starbucks-lets-customers-explore-notes-of-kindness-with-new-augmented-reality-experience" target="_blank" rel="noopener"><img decoding="async" loading="lazy" width="836" height="200" src="https://jwwpheadless.com/wp-content/uploads/2023/07/qsr-logo.png" alt="" class="alignnone size-full wp-image-12981" srcset="https://jwwpheadless.com/wp-content/uploads/2023/07/qsr-logo.png 836w, https://jwwpheadless.com/wp-content/uploads/2023/07/qsr-logo-768x184.png 768w" sizes="(max-width: 836px) 100vw, 836px" /></a></p>
<div class="press-item-caption">
      <a href="https://www.qsrmagazine.com/food/beverage/starbucks-lets-customers-explore-notes-of-kindness-with-new-augmented-reality-experience" target="_blank" rel="noopener">Starbucks Lets Customers Explore Notes of Kindness with New Augmented Reality Experience</a> in QSR.
    </div>
</p></div>
<p>
</div>
<p></p>
<hr style="width: 30%; margin: 0 auto 60px auto" />
<p>For the Starbucks team, <b>accessibility</b> was a must-have for this project. But there&#8217;s just one small problem: there is currently no practical way to make AR accessible for disabled users. It requires users to both see the screen and physically move their phone to access content, which inherently means users with vision or motion impairments are excluded from the experience.</p>
<p>Currently, the technology just does not exist yet to convey interactive spatial experiences to common assistive technologies like screen readers, so instead I built an alternative UI that conforms to <b>WCAG 2.1 level AA</b>, allowing anyone to access all the same content and features in a more typical 2D format. Users could seamlessly switch between the AR and non-AR versions at any time with a toggle switch, depending on their needs.</p>
<div id='gallery-3' class='gallery galleryid-12931 gallery-columns-3 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2023/07/ezgif-1-0b3cb03a79.gif'><img width="324" height="652" src="https://jwwpheadless.com/wp-content/uploads/2023/07/ezgif-1-0b3cb03a79.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.10-5.png'><img width="486" height="977" src="https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.10-5.png" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.10-4.png'><img width="486" height="977" src="https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.10-4.png" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

<div id='gallery-4' class='gallery galleryid-12931 gallery-columns-4 gallery-size-full'><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.12-3.png'><img width="486" height="977" src="https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.12-3.png" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.12-2.png'><img width="486" height="977" src="https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.12-2.png" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.12.png'><img width="486" height="977" src="https://jwwpheadless.com/wp-content/uploads/2023/07/2024-06-04-16.12.png" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><dl class='gallery-item'>
			<dt class='gallery-icon portrait'>
				<a href='https://jwwpheadless.com/wp-content/uploads/2023/07/ezgif-1-c2b9375a00.gif'><img width="324" height="650" src="https://jwwpheadless.com/wp-content/uploads/2023/07/ezgif-1-c2b9375a00.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy" /></a>
			</dt></dl><br style="clear: both" />
		</div>

Starbucks Kindness campaign WebAR app

<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-5' 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-6' 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-7' 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-8' 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-9' 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-9-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-9-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-9-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-9-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-9-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-9-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-10' 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-11' 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-12' 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-13' 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-14' 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-15' 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-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/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-17' 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-18' 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-19' 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-20' 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>