Lusion - Surface Floater

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lusion - Surface Floater</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Surface Floater is an experiment created by Lusion Ltd. It is a WebGL artwork to demonstrate our creative coding workflow at Lusion"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta property="og:title" content="Lusion - Surface Floater" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Lusion" /> <meta property="og:description" content="Surface Floater is an experiment created by Lusion Ltd. It is a WebGL artwork to demonstrate our creative coding workflow at Lusion" /> <meta property="og:image:type" content="image/jpg" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="720" /> <meta property="og:image" content="https://surface-floater.lusion.co/images/share.jpg" /> <meta property="og:url" content="https://surface-floater.lusion.co/" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@lusionltd"> <meta name="twitter:url" content="https://surface-floater.lusion.co/"> <meta name="twitter:title" content="Lusion - Surface Floater"> <meta name="twitter:description" content="Surface Floater is an experiment created by Lusion Ltd. It is a WebGL artwork to demonstrate our creative coding workflow at Lusion"> <meta name="twitter:image" content="https://surface-floater.lusion.co/images/share.jpg"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/favicons/favicon-144.png"> <link rel="icon" href="/favicons/favicon-32.png" sizes="32x32"> <link rel="icon" href="/favicons/favicon-128.png" sizes="128x128"> <link rel="icon" href="/favicons/favicon-144.png" sizes="144x144"> <link rel="icon" href="/favicons/favicon-152.png" sizes="152x152"> <link rel="icon" href="/favicons/favicon-196.png" sizes="196x196"> <link rel="apple-touch-icon-precomposed" href="/favicons/favicon-152.png"> <script src="js/dat.gui.min.js"></script> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> <script src="https://use.typekit.net/jir7bau.js"></script> </head> <body> <main id="app"> <canvas id="background-canvas"></canvas> <div id="prelaoder">Now Loading</div> <div id="header-logo-title" class="logo-title"> <a href="https://labs.lusion.co/" target="_blank"> <div class="logo-title--lab"> <svg xmlns="http://www.w3.org/2000/svg" width="425" height="45" viewBox="0 0 425 45" fill="none" > <g fill="#fff" class="lablogo-labs"> <path d="M273.691.506h6.2v6.2h-6.2v-6.2ZM273.691 6.706h6.2v6.2h-6.2v-6.2ZM273.691 12.906h6.2v6.2h-6.2v-6.2Z" /> <path d="M273.691 19.105h6.2v6.2h-6.2v-6.2ZM273.691 25.306h6.2v6.2h-6.2v-6.2ZM273.691 31.506h6.2v6.2h-6.2v-6.2ZM279.892 37.706h6.2v6.2h-6.2v-6.2ZM286.092 37.706h6.2v6.2h-6.2v-6.2ZM292.292 37.706h6.2v6.2h-6.2v-6.2ZM298.492 37.706h6.2v6.2h-6.2v-6.2ZM313.691 12.906h6.2v6.2h-6.2v-6.2Z" /> <path d="M313.691 19.105h6.2v6.2h-6.2v-6.2ZM313.691 25.306h6.2v6.2h-6.2v-6.2ZM313.691 31.506h6.2v6.2h-6.2v-6.2ZM313.691 37.706h6.2v6.2h-6.2v-6.2ZM319.892 6.706h6.2v6.2h-6.2v-6.2ZM319.892 25.306h6.2v6.2h-6.2v-6.2ZM326.091.506h6.2v6.2h-6.2v-6.2Z" /> <path d="M326.091 25.306h6.2v6.2h-6.2v-6.2ZM332.292 6.706h6.2v6.2h-6.2v-6.2ZM332.292 25.306h6.2v6.2h-6.2v-6.2ZM338.491 12.906h6.2v6.2h-6.2v-6.2Z" /> <path d="M338.491 19.105h6.2v6.2h-6.2v-6.2ZM338.491 25.306h6.2v6.2h-6.2v-6.2ZM338.491 31.506h6.2v6.2h-6.2v-6.2ZM338.491 37.706h6.2v6.2h-6.2v-6.2ZM353.691.506h6.2v6.2h-6.2v-6.2ZM353.691 6.706h6.2v6.2h-6.2v-6.2ZM353.691 12.906h6.2v6.2h-6.2v-6.2Z" /> <path d="M353.691 19.105h6.2v6.2h-6.2v-6.2ZM353.691 25.306h6.2v6.2h-6.2v-6.2ZM353.691 31.506h6.2v6.2h-6.2v-6.2ZM353.691 37.706h6.2v6.2h-6.2v-6.2ZM359.892.506h6.2v6.2h-6.2v-6.2ZM359.892 19.105h6.2v6.2h-6.2v-6.2ZM359.892 37.706h6.2v6.2h-6.2v-6.2Z" /> <path d="M366.091.506h6.2v6.2h-6.2v-6.2ZM366.091 19.105h6.2v6.2h-6.2v-6.2ZM366.091 37.706h6.2v6.2h-6.2v-6.2ZM372.292.506h6.2v6.2h-6.2v-6.2ZM372.292 19.105h6.2v6.2h-6.2v-6.2ZM372.292 37.706h6.2v6.2h-6.2v-6.2ZM378.491 6.706h6.2v6.2h-6.2v-6.2Z" /> <path d="M378.491 12.906h6.2v6.2h-6.2v-6.2ZM378.491 25.306h6.2v6.2h-6.2v-6.2ZM378.491 31.506h6.2v6.2h-6.2v-6.2ZM393.691 6.706h6.2v6.2h-6.2v-6.2ZM393.691 12.906h6.2v6.2h-6.2v-6.2ZM393.691 31.506h6.2v6.2h-6.2v-6.2ZM399.892.506h6.2v6.2h-6.2v-6.2ZM399.892 19.105h6.2v6.2h-6.2v-6.2ZM399.892 37.706h6.2v6.2h-6.2v-6.2Z" /> <path d="M406.091.506h6.2v6.2h-6.2v-6.2ZM406.091 19.105h6.2v6.2h-6.2v-6.2ZM406.091 37.706h6.2v6.2h-6.2v-6.2ZM412.292.506h6.2v6.2h-6.2v-6.2ZM412.292 19.105h6.2v6.2h-6.2v-6.2ZM412.292 37.706h6.2v6.2h-6.2v-6.2ZM418.491 6.706h6.2v6.2h-6.2v-6.2ZM418.491 25.306h6.2v6.2h-6.2v-6.2ZM418.491 31.506h6.2v6.2h-6.2v-6.2Z" /> </g> <g fill="#fff" class="lablogo-dots"> <path d="M247.943 6.104a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM247.943 27.104a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z" /> </g> <g fill="#fff" class="lablogo-lusion"> <path d="M0 43.803V.403h7.13V37.48h18.662v6.324H0ZM41.923.217v25.172c0 4.092.806 7.171 2.418 9.238 1.612 2.025 4.113 3.038 7.502 3.038 3.43 0 5.952-1.013 7.564-3.038 1.653-2.067 2.48-5.146 2.48-9.238V.217h7.13v24.8c0 6.2-1.467 10.912-4.402 14.136-2.893 3.224-7.15 4.836-12.772 4.836-5.58 0-9.817-1.612-12.71-4.836-2.893-3.224-4.34-7.936-4.34-14.136V.217h7.13ZM85.022 29.698c.206 2.563 1.24 4.63 3.1 6.2 1.901 1.53 4.36 2.294 7.378 2.294 2.645 0 4.774-.558 6.386-1.674 1.653-1.157 2.48-2.749 2.48-4.774 0-1.447-.455-2.583-1.364-3.41-.868-.868-2.067-1.53-3.596-1.984-1.53-.455-3.679-.93-6.448-1.426-2.811-.496-5.229-1.137-7.254-1.922-1.984-.827-3.617-2.067-4.898-3.72-1.24-1.653-1.86-3.823-1.86-6.51 0-2.48.64-4.691 1.922-6.634 1.322-1.943 3.141-3.451 5.456-4.526C88.68.537 91.366 0 94.384 0c3.1 0 5.869.579 8.308 1.736 2.438 1.157 4.36 2.749 5.766 4.774 1.405 2.025 2.17 4.34 2.294 6.944h-7.006c-.248-2.232-1.22-4.03-2.914-5.394-1.695-1.364-3.844-2.046-6.448-2.046-2.522 0-4.547.558-6.076 1.674-1.488 1.075-2.232 2.604-2.232 4.588 0 1.405.434 2.521 1.302 3.348.909.827 2.108 1.447 3.596 1.86 1.488.413 3.616.868 6.386 1.364 2.81.496 5.228 1.157 7.254 1.984 2.025.827 3.678 2.046 4.96 3.658 1.281 1.612 1.922 3.74 1.922 6.386 0 2.563-.682 4.857-2.046 6.882-1.364 2.025-3.266 3.617-5.704 4.774-2.439 1.116-5.208 1.674-8.308 1.674-3.431 0-6.448-.62-9.052-1.86-2.604-1.24-4.65-2.955-6.138-5.146-1.447-2.232-2.191-4.774-2.232-7.626l7.006.124ZM120.496.403h7.13v43.4h-7.13V.403ZM178.785 22.103c0 4.216-.889 7.998-2.666 11.346s-4.278 5.973-7.502 7.874c-3.183 1.902-6.82 2.852-10.912 2.852-4.092 0-7.75-.95-10.974-2.852-3.183-1.901-5.663-4.526-7.44-7.874-1.777-3.348-2.666-7.13-2.666-11.346s.889-7.998 2.666-11.346 4.257-5.972 7.44-7.874C149.955.982 153.613.031 157.705.031c4.092 0 7.729.95 10.912 2.852 3.224 1.902 5.725 4.526 7.502 7.874 1.777 3.348 2.666 7.13 2.666 11.346Zm-34.844 0c0 3.018.579 5.746 1.736 8.184 1.157 2.398 2.769 4.278 4.836 5.642 2.108 1.323 4.505 1.984 7.192 1.984 2.687 0 5.063-.661 7.13-1.984 2.108-1.364 3.741-3.244 4.898-5.642 1.157-2.438 1.736-5.166 1.736-8.184 0-3.017-.579-5.724-1.736-8.122-1.157-2.438-2.79-4.32-4.898-5.642-2.067-1.364-4.443-2.046-7.13-2.046-2.687 0-5.084.682-7.192 2.046-2.067 1.323-3.679 3.204-4.836 5.642-1.157 2.398-1.736 5.105-1.736 8.122ZM187.785 43.803V.403h6.51l21.142 30.752V.403h7.006v43.4h-6.51l-21.142-30.752v30.752h-7.006Z" /> </g> </svg> </div> </a> </div> <footer id="footer" class="hide-on-fallback"> <canvas id="footer-canvas"></canvas> <div id="footer-inner"> <a id="footer-logo-container" href="https://lusion.co" target="_blank"><img id="footer-logo" src="images/full-logo.svg" alt="logo"/></a> <div id="footer-socials"> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsurface-floater.lusion.co" target="_blank" alt="facebook"><span class="social-icon is-facebook"></span></a> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fsurface-floater.lusion.co&text=Check%20out%20this%20generative%20%23WebGL%20experiment%20by%20%40lusionltd" target="_blank" alt="twitter"><span class="social-icon is-twitter"></span></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fsurface-floater.lusion.co&title=Check%20out%20this%20generative%20%23WebGL%20experiment%20by%20%40lusionltd" target="_blank" alt="linkedin"><span class="social-icon is-linkedin"></span></a> <a href="https://vimeo.com/239449648" target="_blank" alt="vimeo"><span class="social-icon is-vimeo"></span></a> <a href="https://medium.com/@lusionltd/from-concept-prototyping-to-production-in-a-creative-studio-f2083e96c4b9" target="_blank" alt="medium"><span class="social-icon is-medium"></span></a> </div> </div> </footer> <div id="overlay"> <div id="overlay-left" class="overlay-block"><img id="overlay-logo" src="images/logo.svg" alt="logo"></div> <div id="overlay-right" class="overlay-block"><p class="show-on-fallback"><span>Oops!</span> It looks like the experiment is not compatible with your device. Have a look at the rendering at <a href="https://vimeo.com/239449648" target="_blank">Vimeo</a>.</p><p class="hide-on-fallback"><span>Surface Floater</span> is a WebGL artwork to demonstrate our creative coding workflow at <a href="https://lusion.co" target="_blank">Lusion Ltd</a>.</p><p>For more information, check out our medium article:<br/><a href="https://medium.com/@lusionltd/from-concept-prototyping-to-production-in-a-creative-studio-f2083e96c4b9" target="_blank">From Concept Prototyping to Production in a Creative聽Studio</a>.</p></div> <div id="overlay-close-btn" class="hide-on-fallback"><div class="overlay-close-btn-part is-part-1"></div><div class="overlay-close-btn-part is-part-2"></div></div> </div> </main> <script src="js/TweenMax.min.js"></script> <script src="js/index.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-F6MSQKFD9E"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-F6MSQKFD9E'); </script> </body> </html>

CINXE.COM

Lusion - Surface Floater