CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="icon" href="/favicon.ico"/><title>Swarm at WebGL Lab - Marco Gomez</title><meta name="robots" content="index,follow"/><meta name="description" content="Swarm at Marco Gomez' WebGL Lab - @TheCodeTherapy"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@TheCodeTherapy"/><meta name="twitter:creator" content="@TheCodeTherapy"/><meta property="og:title" content="Swarm at WebGL Lab - Marco Gomez"/><meta property="og:description" content="Swarm at Marco Gomez' WebGL Lab - @TheCodeTherapy"/><meta property="og:image" content="https://mgz.me/assets/thumbnails/Swarm.jpg"/><meta property="og:image:alt" content="Swarm at WebGL Lab - @TheCodeTherapy"/><meta property="og:image:type" content="image/jpeg"/><meta property="og:image:width" content="1024"/><meta property="og:image:height" content="1024"/><meta property="og:locale" content="en"/><meta property="og:site_name" content="mgz.me"/><meta property="keywords" content="Swarm, Boids, TheCodeTherapy, Marco Gomez, WebGL, ThreeJS, NextJS, React, shaders, GLSL, javascript, demoscene, mgz.me"/><meta name="next-head-count" content="22"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-169314453-1"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-169314453-1', { page_path: window.location.pathname, });</script><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/09671da28aa56a04.css" as="style"/><link rel="stylesheet" href="/_next/static/css/09671da28aa56a04.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-edb2c4a2f993b241.js" defer=""></script><script src="/_next/static/chunks/framework-64ad27b21261a9ce.js" defer=""></script><script src="/_next/static/chunks/main-fdaa1ee0a0da5110.js" defer=""></script><script src="/_next/static/chunks/pages/_app-e5b0d1bc4a1b4a04.js" defer=""></script><script src="/_next/static/chunks/962-e60f5ac397ddcfd8.js" defer=""></script><script src="/_next/static/chunks/675-f8402c4ff683825d.js" defer=""></script><script src="/_next/static/chunks/pages/scenes/%5Bscene%5D-065109fd0275efe4.js" defer=""></script><script src="/_next/static/muC72ZvF1QV4vWLtMoECr/_buildManifest.js" defer=""></script><script src="/_next/static/muC72ZvF1QV4vWLtMoECr/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div id="asset_loader_wrapper" class="asset-loader-wrapper"></div><div id="rec_wrapper" class="rec-wrapper"></div><div id="app_root"><div class="top-bar plain"><div class="loading-bar" id="loading_bar"></div></div><div class="main-contols-wrapper" style="height:70px;line-height:70px"><div class="toggler-wrapper" style="width:70px;height:70px"><i class="fa-thin fa-power-off"></i></div><div class="control-buttons"><div id="load_audio_button" class="button fa-thin fa-circle-play inactive" style="color:#CCCCCC;text-shadow:none;animation-delay:0s;cursor:default"><span class="tooltip--triangle load_audio" data-tooltip="I'm Audio-reactive! Try my Jam 馃槂"></span></div><div id="first_scene_button" class="button fa-thin fa-circle-chevron-up inactive" style="color:#CCCCCC;text-shadow:none;animation-delay:0.12s;cursor:default"><span class="tooltip--triangle first_scene" data-tooltip="Rewind to First Scene"></span></div><div id="prev_scene_button" class="button fa-thin fa-circle-chevron-left inactive" style="color:#CCCCCC;text-shadow:none;animation-delay:0.24s;cursor:default"><span class="tooltip--triangle prev_scene" data-tooltip="Load Previous Scene"></span></div><div id="next_scene_button" class="button fa-thin fa-circle-chevron-right inactive" style="color:#CCCCCC;text-shadow:none;animation-delay:0.36s;cursor:default"><span class="tooltip--triangle next_scene" data-tooltip="Load Next Scene"></span></div><div id="rand_scene_button" class="button fa-thin fa-shuffle inactive" style="color:#CCCCCC;text-shadow:none;animation-delay:0.48s;cursor:default"><span class="tooltip--triangle rand_scene" data-tooltip="Load Random Scene"></span></div></div></div><div class="main-menu-wrapper" style="width:50vw;left:calc(100vw + 21px)"><div id="menu_toggler" class="togglebutton" style="width:70px;height:70px" role="presentation"><div role="presentation"><svg class="ham ham3 " viewBox="0 0 100 100" width="70px"><path class="ham-line top" d="m 30,33 h 40 c 13.100415,0 14.380204,31.80258 6.899646,33.421777 -24.612039,5.327373 9.016154,-52.337577 -12.75751,-30.563913 l -28.284272,28.284272"></path><path class="ham-line middle" d="m 70,50 c 0,0 -32.213436,0 -40,0 -7.786564,0 -6.428571,-4.640244 -6.428571,-8.571429 0,-5.895471 6.073743,-11.783399 12.286435,-5.570707 6.212692,6.212692 28.284272,28.284272 28.284272,28.284272"></path><path class="ham-line bottom" d="m 69.575405,67.073826 h -40 c -13.100415,0 -14.380204,-31.80258 -6.899646,-33.421777 24.612039,-5.327373 -9.016154,52.337577 12.75751,30.563913 l 28.284272,-28.284272"></path></svg></div></div><div class="main-menu" role="presentation" style="width:50vw;left:calc(100vw + 21px)"><div class="main-menu-links-wrapper"><div class="main-menu-row main-menu-row-invisible" style="transition-delay:0s"><div class="main-menu-item-wrapper main-menu-item-wrapper-invisible" style="transition-delay:0s"><div class="menu-home-link"><div class="main-menu-item"><i class="main-menu-item-icon fa-thin fa-house"></i><span class="main-menu-item-label">Home</span></div></div><div class="main-menu-separator-line main-menu-separator-line-invisible" style="transition-delay:0s"></div></div></div><div class="main-menu-row main-menu-row-invisible" style="transition-delay:0s"><div class="main-menu-item-wrapper main-menu-item-wrapper-invisible" style="transition-delay:0s"><a href="/about/"><div class="main-menu-item"><i class="main-menu-item-icon fa-thin fa-user-tag"></i><span class="main-menu-item-label">About</span></div></a><div class="main-menu-separator-line main-menu-separator-line-invisible" style="transition-delay:0s"></div></div></div><div class="main-menu-row main-menu-row-invisible" style="transition-delay:0s"><div class="main-menu-item-wrapper main-menu-item-wrapper-invisible" style="transition-delay:0s"><a href="/gallery/"><div class="main-menu-item"><i class="main-menu-item-icon fa-thin fa-rectangle-history"></i><span class="main-menu-item-label">Gallery</span></div></a><div class="main-menu-separator-line main-menu-separator-line-invisible" style="transition-delay:0s"></div></div></div><div class="main-menu-row main-menu-row-invisible" style="transition-delay:0s"><div class="main-menu-item-wrapper main-menu-item-wrapper-invisible" style="transition-delay:0s"><a href="/awards/"><div class="main-menu-item"><i class="main-menu-item-icon fa-thin fa-trophy"></i><span class="main-menu-item-label">Awards</span></div></a><div class="main-menu-separator-line main-menu-separator-line-invisible" style="transition-delay:0s"></div></div></div><div class="main-menu-row main-menu-row-invisible" style="transition-delay:0s"><div class="main-menu-item-wrapper main-menu-item-wrapper-invisible" style="transition-delay:0s"><a href="/contact/"><div class="main-menu-item"><i class="main-menu-item-icon fa-thin fa-envelope"></i><span class="main-menu-item-label">Contact</span></div></a><div class="main-menu-separator-line main-menu-separator-line-invisible" style="transition-delay:0s"></div></div></div></div></div></div><section class="route-section"><div class="route-inner"><div class="main"><div class="content"><div class="home-page"><h1>Swarm</h1><h2>Marco Gomez' WebGL Portfolio</h2><h3>#Boids</h3><h4>by @TheCodeTherapy - https://mgz.me</h4><img alt="Instanced meshes governed by a flocking behaviour controller class in a universe of instanced star textured particles." loading="lazy" width="1024" height="1024" decoding="async" data-nimg="1" class="home-page-image" style="color:transparent" src="/assets/thumbnails/Swarm.jpg"/><p>Instanced meshes governed by a flocking behaviour controller class in a universe of instanced star textured particles.</p><a class="home-page-links" href="/">Home</a><a class="home-page-links" href="/about/">About</a><a class="home-page-links" href="/gallery/">Gallery</a><a class="home-page-links" href="/awards/">Awards</a><a class="home-page-links" href="/contact/">Contact</a></div></div></div></div></section><div class="footer"><div class="copy"><span class="copy-symbol">漏</span> <a href="https://x.com/TheCodeTherapy" target="_blank" rel="noopener noreferrer">Marco Gomez (@TheCodeTherapy)</a> 2024</div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"scene":"Swarm","thumbURL":"/assets/thumbnails/Swarm.jpg"},"__N_SSG":true},"page":"/scenes/[scene]","query":{"scene":"Swarm"},"buildId":"muC72ZvF1QV4vWLtMoECr","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>