CINXE.COM
Scan Sequencer Javascript by JeongHo Park - Experiments with Google
<!DOCTYPE html><html><head><title>Scan Sequencer Javascript by JeongHo Park - Experiments with Google</title><meta name="description" content="Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, WebVR, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments."><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><link rel="icon" type="image/png" href="/static/img/favicon.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Scan Sequencer Javascript by JeongHo Park - Experiments with Google"><meta name="twitter:site" content="@google"><meta name="twitter:description" content="Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, WebVR, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments."><meta name="twitter:image" content="https://lh3.googleusercontent.com/z8MsStUnz9cymaYizD8tgD_rPFFvLa3F-TzDFv6Bf4rr2Sjotlnqzh0yAIF4UKLbl7l4ycihKfBpSUtibojL4J0h2HJdUGQ"><meta property="og:title" content="Scan Sequencer Javascript by JeongHo Park - Experiments with Google"><meta property="og:type" content="website"><meta property="og:url" content="https://experiments.withgoogle.com/scan-sequencer"><meta property="og:image" content="https://lh3.googleusercontent.com/z8MsStUnz9cymaYizD8tgD_rPFFvLa3F-TzDFv6Bf4rr2Sjotlnqzh0yAIF4UKLbl7l4ycihKfBpSUtibojL4J0h2HJdUGQ"><meta property="og:image:type" content="image/jpeg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:description" content="Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, WebVR, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments."><meta itemscope itemtype="http://schema.org/Article"><meta itemprop="title" content="Scan Sequencer Javascript by JeongHo Park - Experiments with Google"><meta itemprop="name" content="Experiments with Google"><meta itemprop="description" content="Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, WebVR, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments."><meta itemprop="image" content="https://lh3.googleusercontent.com/z8MsStUnz9cymaYizD8tgD_rPFFvLa3F-TzDFv6Bf4rr2Sjotlnqzh0yAIF4UKLbl7l4ycihKfBpSUtibojL4J0h2HJdUGQ"><link href="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.css" rel="stylesheet"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700|Source+Code+Pro:300,400,500,600,700" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS"><link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&Google+Sans+Mono" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS"><link rel="stylesheet" href="/static/css/vendors.css" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS"><link rel="stylesheet" href="/static/css/style.css" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS"><script nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">!function(e,t,n,a,r){e[a]=e[a]||[],e[a].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var o=t.getElementsByTagName(n)[0],c=t.createElement(n),g="dataLayer"!=a?"&l="+a:"";c.async=!0,c.src="https://www.googletagmanager.com/gtm.js?id="+r+g;var s=t.querySelector("[nonce]");s&&c.setAttribute("nonce",s.nonce||s.getAttribute("nonce")),o.parentNode.insertBefore(c,o)}(window,document,"script","dataLayer","GTM-WSXK4F2");</script></head><body class="experiment hide-butterbar" data-coll-name=""><header> <div class="wrapper"><div id="logo-holder"><a href="/"><nav id="logo" role="navigation" aria-label="Homepage">Experiments with Google</nav></a></div><div id="menuoverlay"><nav id="mainmenu" role="navigation" aria-label="main navigation"><ul id="collection-menu" style="padding:0"><li style="padding:0" class="menuitem coll-options"><a href="/collections" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">Collections</a><div class="triangle-down">▾</div></li><ul id="home-menu"> <li class="home-menuitem" data-coll-name="tfliteformicrocontrollers"><a href="/collection/tfliteformicrocontrollers" title="TensorFlow Lite for Microcontrollers" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">TensorFlow Lite for Microcontrollers</a></li> <li class="home-menuitem" data-coll-name="startwithone"><a href="/collection/startwithone" title="Start With One" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">Start With One</a></li> <li class="home-menuitem" data-coll-name="creatability"><a href="/collection/creatability" title="Creatability" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">Creatability</a></li> <li class="home-menuitem" data-coll-name="digitalwellbeing"><a href="/collection/digitalwellbeing" title="Digital Wellbeing Experiments" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">Digital Wellbeing Experiments</a></li> <li class="home-menuitem" data-coll-name="webxr"><a href="/collection/webxr" title="WebXR Experiments" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">WebXR Experiments</a></li> <li class="home-menuitem" data-coll-name="arts-culture"><a href="/collection/arts-culture" title="Arts & Culture Experiments" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">Arts & Culture Experiments</a></li> <li class="home-menuitem" data-coll-name="ar"><a href="/collection/ar" title="AR Experiments" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">AR Experiments</a></li> <li class="home-menuitem" data-coll-name="ai"><a href="/collection/ai" title="AI Experiments" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">AI Experiments</a></li> <li class="home-menuitem" data-coll-name="android"><a href="/collection/android" title="Android Experiments" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">Android Experiments</a></li> <li class="home-menuitem" data-coll-name="chrome"><a href="/collection/chrome" title="Chrome Experiments" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">Chrome Experiments</a></li> <li class="home-menuitem" data-coll-name="All Collections"><a href="/collections" title="View all <built-in method count of list object at 0x3e78a84f6500> collections" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">VIEW ALL 17 COLLECTIONS</a></li></ul></ul><a class="menuitem" href="/experiments" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">Experiments</a><div id="searchwrap"><div class="menuitem" id="search"></div><input type="text" name="search" id="searchbox" value="" aria-label="Search experiments" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search" onfocus="this.placeholder=""" onblur="this.placeholder="Search""></div><a class="menuitem submit-btn border" href="https://labs.google/submit-experiment" target="_blank" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS">Submit Experiment</a></nav><div class="google-logo"></div></div></div></header><div id="main" class=""><div class="wrapper"><div id="exp-intro"><div class="cont-left displaytext"><h1 class="title">Scan Sequencer Javascript</h1><p class="gray">November 2017 | By <a href="http://jeonghopark.de" target="_blank">JeongHo Park</a> </p><p style="margin-top:10px;width:90%">Using a webcam, make real-time music with your movements</p> <div class="action-button-holder" style="margin-top:25px"> <a class="button hollow caps" href="https://jeonghopark.github.io/scanseqjs/" target="_blank" onclick="ga("send","event","Experiment Launch Button","Click","Scan Sequencer Javascript")" aria-label="Launch Scan Sequencer Javascript Experiment" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS"> Launch experiment </a> <a class="button hollow caps" href="https://github.com/jeonghopark/scanseqjs" target="_blank" onclick="ga('send', 'event', 'Experiment Get Code Button', 'Click', 'Scan Sequencer Javascript)" aria-label="View Scan Sequencer Javascript Experiment Source Code" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS"> Get the code </a> </div></div><div class="cont-right"><h3 class="caps small">Collection:</h3><div id="collections-holder" style="display:block"> <a class="collection" href="/collection/chrome">Chrome Experiments</a> </div></div></div> <div class="video-holder" data-exp-name="Scan Sequencer Javascript" style="cursor:default"> <img class="video-cover-image" src="https://lh3.googleusercontent.com/MkgSM9h1EcwAV890_f-_YtpTM-Ce7-2F6JKoFLMttMykDZ2-PyUs5mPPqaaS_qXWMQzJCZrPX4x_EIyTZNsBF9riB1kq3w" style="position:static" alt="" data-img-alt=""> </div> <div id="featured-holder"><div class="featured-img-holder"><img class="featured-img" src="https://lh3.googleusercontent.com/WqrOHL-dMDxSsdhuDISVVfxpJlQkFfYObEVqgPP47FitBMvdGkyavStViZcF6Kgc_l-K9aBRISee0DcvDkqn3fgbfvua" alt="" data-img-alt=""></div> <div class="featured-img-holder"><img class="featured-img" src="https://lh3.googleusercontent.com/u92dYfmq8mJIJD-HA0H-QLu8vn0RSZnQBrYh2FnfIZ2vGHjHv9YKn-S9G9olGid4IUSwnkobdgUfVBCY7j7Fef_cJ1yGFQ" alt="" data-img-alt=""></div> </div><div class="content-wrap single"><div class="content-twothird"><div class="content-block displaytext">Scan Sequencer Javascript takes a realtime web cam image and in turn makes real-time music. It works like a virtual keyboard, the vertical keyboard is recognizing a change of the color of pixels and make a trigger signal. The circles made by trigger signals move to from left to right and when they cross the middle threshold, they play a note.聽<div><br></div><div>It is written based on the p5js and tonejs libraries.</div></div> </div><div class="content-onethird"><h4 class="caps small">Built with: </h4><div id="tags-holder" style="display:block"> <a class="tag" href="/experiments?tag=P5.js">P5.js</a>, <a class="tag" href="/experiments?tag=Tone.js">Tone.js</a>, <a class="tag" href="/experiments?tag=Javascript">Javascript</a> </div></div></div></div></div><footer><div class="wrapper"><div class="google-logo"></div><div id="social-holder"><a href="https://www.google.com/policies/" target="_blank" class="social-icon">Privacy & Terms</a><div id="social-icons"><a class="social-icon" href="https://www.facebook.com/ExpWithGoogle/" target="_blank" aria-label="Link to our Facebook page"><img src="/static/img/social-fb.png" alt="facebook icon"></a></div></div></div></footer><div id="page-loader"><div id="txt-submitting">Submitting...</div><div id="txt-saving">Saving...</div></div><div id="sitemenu-icon"><span class="line1"></span> <span class="line2"></span> <span class="line3"></span></div><div id="overlay"><div id="overlay-closebtn"></div><div id="overlay-content-wrap"><div class="wrapper"><div id="overlay-content"></div></div></div></div><script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS"></script><script src="/static/js/vendors.js" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS"></script><script src="/static/js/script.min.js" nonce="jdGVcjqxSsMSO5kYMM4IROPOulFTr9yS"></script><script src="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.js" data-glue-cookie-notification-bar-category="2B"></script></body></html>