
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      
      
        <link rel="prev" href="standard_uniforms.html">
      
      
        <link rel="next" href="libraries.html">
      
      
      <link rel="icon" href="../src/images/logo_square.png">
      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.19">
    
    
      
        <title>SSF Functions - Synesthesia Docs</title>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/main.7e37652d.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../stylesheets/sass_output.css">
    
    <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
  </head>
  
  
    <body dir="ltr">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#ssf-functions" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="../index.html" title="Synesthesia Docs" class="md-header__button md-logo" aria-label="Synesthesia Docs" data-md-component="logo">
      
  <img src="../src/images/logo_square.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            Synesthesia Docs
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              SSF Functions
            
          </span>
        </div>
      </div>
    </div>
    
    
      <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
      
      
        <label class="md-header__button md-icon" for="__search">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
        </label>
        <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
      
    
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    



<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../index.html" title="Synesthesia Docs" class="md-nav__button md-logo" aria-label="Synesthesia Docs" data-md-component="logo">
      
  <img src="../src/images/logo_square.png" alt="logo">

    </a>
    Synesthesia Docs
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../index.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Introduction
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
        
          
          <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    Quick Links
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            Quick Links
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="audio_uniforms.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    SSF Audio Uniforms
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="standard_uniforms.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    SSF Standard Uniforms
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  
  <span class="md-ellipsis">
    SSF Functions
    
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="functions.html" class="md-nav__link md-nav__link--active">
        
  
  
  <span class="md-ellipsis">
    SSF Functions
    
  </span>
  

      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#math" class="md-nav__link">
    <span class="md-ellipsis">
      Math
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Math">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_scale" class="md-nav__link">
    <span class="md-ellipsis">
      _scale()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_map" class="md-nav__link">
    <span class="md-ellipsis">
      _map()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_smin" class="md-nav__link">
    <span class="md-ellipsis">
      _smin()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_rand" class="md-nav__link">
    <span class="md-ellipsis">
      _rand()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_pulse" class="md-nav__link">
    <span class="md-ellipsis">
      _pulse()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_sqpulse" class="md-nav__link">
    <span class="md-ellipsis">
      _sqPulse()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_inrange" class="md-nav__link">
    <span class="md-ellipsis">
      _inRange()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_triwave" class="md-nav__link">
    <span class="md-ellipsis">
      _triWave()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_pixelate" class="md-nav__link">
    <span class="md-ellipsis">
      _pixelate()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mix3" class="md-nav__link">
    <span class="md-ellipsis">
      _mix3()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mix4" class="md-nav__link">
    <span class="md-ellipsis">
      _mix4()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mix5" class="md-nav__link">
    <span class="md-ellipsis">
      _mix5()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_nsin" class="md-nav__link">
    <span class="md-ellipsis">
      _nsin()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_ncos" class="md-nav__link">
    <span class="md-ellipsis">
      _ncos()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_nclamp" class="md-nav__link">
    <span class="md-ellipsis">
      _nclamp()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#noise" class="md-nav__link">
    <span class="md-ellipsis">
      Noise
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Noise">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_noise" class="md-nav__link">
    <span class="md-ellipsis">
      _noise()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_fbm" class="md-nav__link">
    <span class="md-ellipsis">
      _fbm()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_statelesscontinuouschaotic" class="md-nav__link">
    <span class="md-ellipsis">
      _statelessContinuousChaotic()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_hashoutin" class="md-nav__link">
    <span class="md-ellipsis">
      _hash{out}{in}()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#coordinates" class="md-nav__link">
    <span class="md-ellipsis">
      Coordinates
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Coordinates">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_uv2uvc" class="md-nav__link">
    <span class="md-ellipsis">
      _uv2uvc()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_uvc2uv" class="md-nav__link">
    <span class="md-ellipsis">
      _uvc2uv()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_rotate" class="md-nav__link">
    <span class="md-ellipsis">
      _rotate()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mirror" class="md-nav__link">
    <span class="md-ellipsis">
      _mirror()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_topolar" class="md-nav__link">
    <span class="md-ellipsis">
      _toPolar()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_topolartrue" class="md-nav__link">
    <span class="md-ellipsis">
      _toPolarTrue()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_torect" class="md-nav__link">
    <span class="md-ellipsis">
      _toRect()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#color" class="md-nav__link">
    <span class="md-ellipsis">
      Color
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Color">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_rgb2hsv" class="md-nav__link">
    <span class="md-ellipsis">
      _rgb2hsv()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_hsv2rgb" class="md-nav__link">
    <span class="md-ellipsis">
      _hsv2rgb()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_normalizergb" class="md-nav__link">
    <span class="md-ellipsis">
      _normalizeRGB()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_palette" class="md-nav__link">
    <span class="md-ellipsis">
      _palette()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_brightness" class="md-nav__link">
    <span class="md-ellipsis">
      _brightness()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_gamma" class="md-nav__link">
    <span class="md-ellipsis">
      _gamma()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_contrast" class="md-nav__link">
    <span class="md-ellipsis">
      _contrast()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_saturation" class="md-nav__link">
    <span class="md-ellipsis">
      _saturation()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_huerotate" class="md-nav__link">
    <span class="md-ellipsis">
      _hueRotate()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_invert" class="md-nav__link">
    <span class="md-ellipsis">
      _invert()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_luminance" class="md-nav__link">
    <span class="md-ellipsis">
      _luminance()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_grayscale" class="md-nav__link">
    <span class="md-ellipsis">
      _grayscale()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_dichrome" class="md-nav__link">
    <span class="md-ellipsis">
      _dichrome()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#media" class="md-nav__link">
    <span class="md-ellipsis">
      Media
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Media">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_loadmedia" class="md-nav__link">
    <span class="md-ellipsis">
      _loadMedia()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_texturemedia" class="md-nav__link">
    <span class="md-ellipsis">
      _textureMedia()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_loadmediaasmask" class="md-nav__link">
    <span class="md-ellipsis">
      _loadMediaAsMask()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_texturemediaasmask" class="md-nav__link">
    <span class="md-ellipsis">
      _textureMediaAsMask()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_correctmediacoords" class="md-nav__link">
    <span class="md-ellipsis">
      _correctMediaCoords()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_ismediaactive" class="md-nav__link">
    <span class="md-ellipsis">
      _isMediaActive()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_edgedetectmedia" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetectMedia()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_edgedetectsobelmedia" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetectSobelMedia()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#multipass" class="md-nav__link">
    <span class="md-ellipsis">
      Multipass
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Multipass">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_edgedetect" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetect()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_edgedetectsobel" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetectSobel()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_hblurtiltshift" class="md-nav__link">
    <span class="md-ellipsis">
      _hBlurTiltShift()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_vblurtiltshift" class="md-nav__link">
    <span class="md-ellipsis">
      _vBlurTiltShift()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="json.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    JSON Configuration
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
        
          
          <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    FAQ
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_3">
            <span class="md-nav__icon md-icon"></span>
            FAQ
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../faq/index.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    General
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../faq/troubleshooting.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Troubleshooting
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../faq/license.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    License
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../faq/audio.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Audio
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../faq/video.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Video
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../faq/settings.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Settings
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../faq/midi_osc.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    MIDI & OSC
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
    
  
  
  
    
    
    
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
        
          
          <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    SSF Documentation
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_4">
            <span class="md-nav__icon md-icon"></span>
            SSF Documentation
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="ssf.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Synesthesia Shader Format (SSF)
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="audio_uniforms.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    SSF Audio Uniforms
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="standard_uniforms.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    SSF Standard Uniforms
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  
  <span class="md-ellipsis">
    SSF Functions
    
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="functions.html" class="md-nav__link md-nav__link--active">
        
  
  
  <span class="md-ellipsis">
    SSF Functions
    
  </span>
  

      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#math" class="md-nav__link">
    <span class="md-ellipsis">
      Math
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Math">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_scale" class="md-nav__link">
    <span class="md-ellipsis">
      _scale()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_map" class="md-nav__link">
    <span class="md-ellipsis">
      _map()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_smin" class="md-nav__link">
    <span class="md-ellipsis">
      _smin()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_rand" class="md-nav__link">
    <span class="md-ellipsis">
      _rand()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_pulse" class="md-nav__link">
    <span class="md-ellipsis">
      _pulse()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_sqpulse" class="md-nav__link">
    <span class="md-ellipsis">
      _sqPulse()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_inrange" class="md-nav__link">
    <span class="md-ellipsis">
      _inRange()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_triwave" class="md-nav__link">
    <span class="md-ellipsis">
      _triWave()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_pixelate" class="md-nav__link">
    <span class="md-ellipsis">
      _pixelate()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mix3" class="md-nav__link">
    <span class="md-ellipsis">
      _mix3()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mix4" class="md-nav__link">
    <span class="md-ellipsis">
      _mix4()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mix5" class="md-nav__link">
    <span class="md-ellipsis">
      _mix5()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_nsin" class="md-nav__link">
    <span class="md-ellipsis">
      _nsin()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_ncos" class="md-nav__link">
    <span class="md-ellipsis">
      _ncos()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_nclamp" class="md-nav__link">
    <span class="md-ellipsis">
      _nclamp()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#noise" class="md-nav__link">
    <span class="md-ellipsis">
      Noise
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Noise">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_noise" class="md-nav__link">
    <span class="md-ellipsis">
      _noise()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_fbm" class="md-nav__link">
    <span class="md-ellipsis">
      _fbm()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_statelesscontinuouschaotic" class="md-nav__link">
    <span class="md-ellipsis">
      _statelessContinuousChaotic()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_hashoutin" class="md-nav__link">
    <span class="md-ellipsis">
      _hash{out}{in}()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#coordinates" class="md-nav__link">
    <span class="md-ellipsis">
      Coordinates
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Coordinates">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_uv2uvc" class="md-nav__link">
    <span class="md-ellipsis">
      _uv2uvc()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_uvc2uv" class="md-nav__link">
    <span class="md-ellipsis">
      _uvc2uv()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_rotate" class="md-nav__link">
    <span class="md-ellipsis">
      _rotate()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mirror" class="md-nav__link">
    <span class="md-ellipsis">
      _mirror()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_topolar" class="md-nav__link">
    <span class="md-ellipsis">
      _toPolar()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_topolartrue" class="md-nav__link">
    <span class="md-ellipsis">
      _toPolarTrue()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_torect" class="md-nav__link">
    <span class="md-ellipsis">
      _toRect()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#color" class="md-nav__link">
    <span class="md-ellipsis">
      Color
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Color">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_rgb2hsv" class="md-nav__link">
    <span class="md-ellipsis">
      _rgb2hsv()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_hsv2rgb" class="md-nav__link">
    <span class="md-ellipsis">
      _hsv2rgb()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_normalizergb" class="md-nav__link">
    <span class="md-ellipsis">
      _normalizeRGB()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_palette" class="md-nav__link">
    <span class="md-ellipsis">
      _palette()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_brightness" class="md-nav__link">
    <span class="md-ellipsis">
      _brightness()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_gamma" class="md-nav__link">
    <span class="md-ellipsis">
      _gamma()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_contrast" class="md-nav__link">
    <span class="md-ellipsis">
      _contrast()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_saturation" class="md-nav__link">
    <span class="md-ellipsis">
      _saturation()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_huerotate" class="md-nav__link">
    <span class="md-ellipsis">
      _hueRotate()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_invert" class="md-nav__link">
    <span class="md-ellipsis">
      _invert()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_luminance" class="md-nav__link">
    <span class="md-ellipsis">
      _luminance()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_grayscale" class="md-nav__link">
    <span class="md-ellipsis">
      _grayscale()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_dichrome" class="md-nav__link">
    <span class="md-ellipsis">
      _dichrome()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#media" class="md-nav__link">
    <span class="md-ellipsis">
      Media
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Media">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_loadmedia" class="md-nav__link">
    <span class="md-ellipsis">
      _loadMedia()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_texturemedia" class="md-nav__link">
    <span class="md-ellipsis">
      _textureMedia()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_loadmediaasmask" class="md-nav__link">
    <span class="md-ellipsis">
      _loadMediaAsMask()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_texturemediaasmask" class="md-nav__link">
    <span class="md-ellipsis">
      _textureMediaAsMask()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_correctmediacoords" class="md-nav__link">
    <span class="md-ellipsis">
      _correctMediaCoords()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_ismediaactive" class="md-nav__link">
    <span class="md-ellipsis">
      _isMediaActive()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_edgedetectmedia" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetectMedia()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_edgedetectsobelmedia" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetectSobelMedia()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#multipass" class="md-nav__link">
    <span class="md-ellipsis">
      Multipass
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Multipass">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_edgedetect" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetect()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_edgedetectsobel" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetectSobel()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_hblurtiltshift" class="md-nav__link">
    <span class="md-ellipsis">
      _hBlurTiltShift()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_vblurtiltshift" class="md-nav__link">
    <span class="md-ellipsis">
      _vBlurTiltShift()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="libraries.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    External Libraries
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="json.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    JSON Configuration
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="script.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    JavaScript Scripting
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="best_practices.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Best Practices
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
        
          
          <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    Synesthesia Manual
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5">
            <span class="md-nav__icon md-icon"></span>
            Synesthesia Manual
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../manual/control_hotkeys.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Control Hotkeys
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../manual/osc.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    OSC
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
        
          
          <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    Tutorials
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_6">
            <span class="md-nav__icon md-icon"></span>
            Tutorials
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorials/links.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    External Links
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorials/quickstart_guide.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Quickstart Guide
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorials/first_scene.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Creating Your First Scene
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorials/presets_favslots_playlists.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    How to Use Presets, Favslots, and Playlists
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorials/control_hotkeys.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    How to Use Control Hotkeys
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorials/livestream.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    How to Add Audio Reactive Visuals to a Livestream with OBS
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorials/shadertoy_conversion.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    How to Manually Convert from Shadertoy.com to SSF
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorials/1.19_javascript.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    How to Update Controls and Use Event Handlers with JavaScript
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorials/1.16_walkthrough.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    v1.16 Feature Walkthrough
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
        
          
          <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
            
  
  
  <span class="md-ellipsis">
    Resources
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_7">
            <span class="md-nav__icon md-icon"></span>
            Resources
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../resources/syn_installers.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Synesthesia Installers
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../resources/changelogs.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Synesthesia Changelogs
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../resources/syn_resources.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    Synesthesia Resources
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../resources/glsl_resources.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    GLSL Resources
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#math" class="md-nav__link">
    <span class="md-ellipsis">
      Math
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Math">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_scale" class="md-nav__link">
    <span class="md-ellipsis">
      _scale()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_map" class="md-nav__link">
    <span class="md-ellipsis">
      _map()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_smin" class="md-nav__link">
    <span class="md-ellipsis">
      _smin()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_rand" class="md-nav__link">
    <span class="md-ellipsis">
      _rand()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_pulse" class="md-nav__link">
    <span class="md-ellipsis">
      _pulse()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_sqpulse" class="md-nav__link">
    <span class="md-ellipsis">
      _sqPulse()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_inrange" class="md-nav__link">
    <span class="md-ellipsis">
      _inRange()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_triwave" class="md-nav__link">
    <span class="md-ellipsis">
      _triWave()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_pixelate" class="md-nav__link">
    <span class="md-ellipsis">
      _pixelate()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mix3" class="md-nav__link">
    <span class="md-ellipsis">
      _mix3()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mix4" class="md-nav__link">
    <span class="md-ellipsis">
      _mix4()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mix5" class="md-nav__link">
    <span class="md-ellipsis">
      _mix5()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_nsin" class="md-nav__link">
    <span class="md-ellipsis">
      _nsin()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_ncos" class="md-nav__link">
    <span class="md-ellipsis">
      _ncos()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_nclamp" class="md-nav__link">
    <span class="md-ellipsis">
      _nclamp()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#noise" class="md-nav__link">
    <span class="md-ellipsis">
      Noise
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Noise">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_noise" class="md-nav__link">
    <span class="md-ellipsis">
      _noise()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_fbm" class="md-nav__link">
    <span class="md-ellipsis">
      _fbm()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_statelesscontinuouschaotic" class="md-nav__link">
    <span class="md-ellipsis">
      _statelessContinuousChaotic()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_hashoutin" class="md-nav__link">
    <span class="md-ellipsis">
      _hash{out}{in}()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#coordinates" class="md-nav__link">
    <span class="md-ellipsis">
      Coordinates
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Coordinates">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_uv2uvc" class="md-nav__link">
    <span class="md-ellipsis">
      _uv2uvc()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_uvc2uv" class="md-nav__link">
    <span class="md-ellipsis">
      _uvc2uv()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_rotate" class="md-nav__link">
    <span class="md-ellipsis">
      _rotate()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_mirror" class="md-nav__link">
    <span class="md-ellipsis">
      _mirror()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_topolar" class="md-nav__link">
    <span class="md-ellipsis">
      _toPolar()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_topolartrue" class="md-nav__link">
    <span class="md-ellipsis">
      _toPolarTrue()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_torect" class="md-nav__link">
    <span class="md-ellipsis">
      _toRect()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#color" class="md-nav__link">
    <span class="md-ellipsis">
      Color
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Color">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_rgb2hsv" class="md-nav__link">
    <span class="md-ellipsis">
      _rgb2hsv()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_hsv2rgb" class="md-nav__link">
    <span class="md-ellipsis">
      _hsv2rgb()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_normalizergb" class="md-nav__link">
    <span class="md-ellipsis">
      _normalizeRGB()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_palette" class="md-nav__link">
    <span class="md-ellipsis">
      _palette()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_brightness" class="md-nav__link">
    <span class="md-ellipsis">
      _brightness()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_gamma" class="md-nav__link">
    <span class="md-ellipsis">
      _gamma()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_contrast" class="md-nav__link">
    <span class="md-ellipsis">
      _contrast()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_saturation" class="md-nav__link">
    <span class="md-ellipsis">
      _saturation()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_huerotate" class="md-nav__link">
    <span class="md-ellipsis">
      _hueRotate()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_invert" class="md-nav__link">
    <span class="md-ellipsis">
      _invert()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_luminance" class="md-nav__link">
    <span class="md-ellipsis">
      _luminance()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_grayscale" class="md-nav__link">
    <span class="md-ellipsis">
      _grayscale()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_dichrome" class="md-nav__link">
    <span class="md-ellipsis">
      _dichrome()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#media" class="md-nav__link">
    <span class="md-ellipsis">
      Media
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Media">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_loadmedia" class="md-nav__link">
    <span class="md-ellipsis">
      _loadMedia()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_texturemedia" class="md-nav__link">
    <span class="md-ellipsis">
      _textureMedia()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_loadmediaasmask" class="md-nav__link">
    <span class="md-ellipsis">
      _loadMediaAsMask()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_texturemediaasmask" class="md-nav__link">
    <span class="md-ellipsis">
      _textureMediaAsMask()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_correctmediacoords" class="md-nav__link">
    <span class="md-ellipsis">
      _correctMediaCoords()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_ismediaactive" class="md-nav__link">
    <span class="md-ellipsis">
      _isMediaActive()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_edgedetectmedia" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetectMedia()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_edgedetectsobelmedia" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetectSobelMedia()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#multipass" class="md-nav__link">
    <span class="md-ellipsis">
      Multipass
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Multipass">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_edgedetect" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetect()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_edgedetectsobel" class="md-nav__link">
    <span class="md-ellipsis">
      _edgeDetectSobel()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_hblurtiltshift" class="md-nav__link">
    <span class="md-ellipsis">
      _hBlurTiltShift()
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_vblurtiltshift" class="md-nav__link">
    <span class="md-ellipsis">
      _vBlurTiltShift()
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  



<div><h1 id="ssf-functions">SSF Functions</h1>
<p>When a scene is compiled, Synesthesia includes a host of custom functions to make scene writing easier and more powerful.</p>
<h2 id="math">Math</h2>
<h3 id="_scale"><code>_scale()</code></h3>
<p>Scales a value within the range <code>0</code> to <code>1</code> to the new range <code>min</code> to <code>max</code></p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">scaledValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_scale</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">min</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">max</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>value <code>float</code> - the value to be scaled</li>
<li>min <code>float</code> - the lower bound for scaling</li>
<li>max <code>float</code> - the upper bound for scaling</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - the scaled value</p>
<h3 id="_map"><code>_map()</code></h3>
<p>Map a value inside of a given range to a new range, scaling the value linearly.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">scaledValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_map</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">min</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">max</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">new_min</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">new_max</span><span class="p">);</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">scaledValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_map</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">min</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">max</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">new_min</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">new_max</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">scaledValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_map</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">min</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">max</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">new_min</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">new_max</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">scaledValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_map</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">min</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">max</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">new_min</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">new_max</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>value <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - a value inside of the min and max range</li>
<li>min <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the current min value</li>
<li>max <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the current max value</li>
<li>new_min <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the new min value</li>
<li>new_max <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the new max value</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - the current value mapped to the new range</p>
<h3 id="_smin"><code>_smin()</code></h3>
<p>Similar to <code>min(float, float)</code>, but creates a smooth transition between the two values
(<a href="link:iquilezles.org/www/articles/smin/smin.htm">from Inigo Quilez</a>)</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">smoothMin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_smin</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">a</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">b</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">k</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>a <code>float</code> - the first value to compare</li>
<li>b <code>float</code> - the second value to compare</li>
<li>k <code>float</code> - the exponent on the algorithm. Higher values means a sharper transition</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - the smooth minimum of the two values  </p>
<h3 id="_rand"><code>_rand()</code></h3>
<p>Generates a pseudo-random value based on a seed</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">randomValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_rand</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">seed</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">randomValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_rand</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">seed</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>seed <code>float</code> | <code>vec2</code> - the seed used to generate a random value</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - a pseudo-random value ranging from <code>0</code> to <code>1</code>  </p>
<h3 id="_pulse"><code>_pulse()</code></h3>
<p>Generates a smooth pulse with a specific center and size. Useful for creating smooth transitions in value 
across space (using <code>_uv</code> as position) or time (using a dynamic variable as position)</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">pulseValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_pulse</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">position</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">center</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">size</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>position <code>float</code> - the place within the pulse to sample (ranges from <code>0</code> to <code>1</code>)</li>
<li>center <code>float</code> - the centerpoint of the pulse within the range <code>0</code> to <code>1</code></li>
<li>size <code>float</code> - the width or duration of the pulse</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - the value of the pulse at the given position</p>
<p><strong>Example</strong>  </p>
<div class="codehilite"><pre><span></span><code><span class="c1">// A spatial pulse, generating a gradient that moves back and forth across the screen </span>
<span class="k">return</span><span class="w"> </span><span class="kt">vec4</span><span class="p">(</span><span class="n">_pulse</span><span class="p">(</span><span class="n">_uv</span><span class="p">.</span><span class="n">x</span><span class="p">,</span><span class="w"> </span><span class="n">sin</span><span class="p">(</span><span class="n">TIME</span><span class="p">)</span><span class="o">*</span><span class="mf">0.5</span><span class="o">+</span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">));</span>
<span class="c1">// A temporal pulse, generating a ramp of color that peaks every second</span>
<span class="k">return</span><span class="w"> </span><span class="kt">vec4</span><span class="p">(</span><span class="n">_pulse</span><span class="p">(</span><span class="n">fract</span><span class="p">(</span><span class="n">TIME</span><span class="p">),</span><span class="w"> </span><span class="mf">1.0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">));</span>
</code></pre></div>

<h3 id="_sqpulse"><code>_sqPulse()</code></h3>
<p>Generates a square pulse with a specific center and size. Useful for creating sharp transitions in value 
across space (using <code>_uv</code> as position) or time (using a dynamic variable as position)</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">pulseValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_pulse</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">position</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">center</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">size</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>position <code>float</code> - the place within the pulse to sample (ranges from <code>0</code> to <code>1</code>)</li>
<li>center <code>float</code> - the centerpoint of the pulse within the range <code>0</code> to <code>1</code></li>
<li>size <code>float</code> - the width or duration of the pulse</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - the value of the pulse at the given position</p>
<h3 id="_inrange"><code>_inRange()</code></h3>
<p>Check if a value or all components of a vector are within a given range. Returns a float so it can easily be used as a mask or mix value.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">inRange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_inRange</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">value</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">inRange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_inRange</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">min</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">max</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">inRange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_inRange</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">value</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">inRange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_inRange</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">min</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">max</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">inRange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_inRange</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">value</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">inRange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_inRange</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">min</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">max</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">inRange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_inRange</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">value</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">inRange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_inRange</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">min</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">max</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong>
- value <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the value to check
- [min] <code>float</code> - the lower bound of the range (defaults to <code>0</code> if omitted)
- [max] <code>float</code> - the upper bound of the range (defaults to <code>1</code> if omitted)</p>
<p><strong>Returns</strong>: <code>float</code> - <code>1.0</code> if the value is within the range, <code>0.0</code> if it is not</p>
<h3 id="_triwave"><code>_triWave()</code></h3>
<p>Generates a triangle wave with a specific period. Useful for creating linear, periodic changes in value 
across space (using <code>_uv</code> as position) or time (using a dynamic variable as position)</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">wave</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_triWave</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">position</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">period</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>position <code>float</code> - the place within the wave to sample.</li>
<li>period <code>float</code> - the duration/width/frequency of the wave</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - the value of the wave at the given position, ranging from <code>-0.5</code> to <code>0.0</code>  </p>
<h3 id="_pixelate"><code>_pixelate()</code></h3>
<p>Clusters/quantizes values into larger "pixels"</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">pixelatedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_pixelate</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">amount</span><span class="p">);</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">pixelatedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_pixelate</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">amount</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">pixelatedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_pixelate</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">value</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">amount</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>value <code>float</code> | <code>vec2</code> | <code>vec3</code> - the value to pixelate</li>
<li>amount <code>float</code> - the number of available clusters within the range <code>0.0</code> to <code>1.0</code></li>
</ul>
<p><strong>Returns</strong>: <code>float</code> | <code>vec2</code> | <code>vec3</code> - the pixelated value</p>
<p><strong>Example</strong>  </p>
<div class="codehilite"><pre><span></span><code><span class="c1">// With an amount of 5, any input in the range 0-1 will be set to 1 of 5 values</span>
<span class="n">_pixelate</span><span class="p">(</span><span class="mf">0.2</span><span class="p">,</span><span class="w"> </span><span class="mi">5</span><span class="p">);</span><span class="w">           </span><span class="c1">// returns 0.2</span>
<span class="n">_pixelate</span><span class="p">(</span><span class="mf">0.456</span><span class="p">,</span><span class="w"> </span><span class="mi">5</span><span class="p">);</span><span class="w">         </span><span class="c1">// returns 0.4</span>
<span class="n">_pixelate</span><span class="p">({</span><span class="mf">0.3</span><span class="p">,</span><span class="w"> </span><span class="mf">0.314</span><span class="p">},</span><span class="w"> </span><span class="mi">10</span><span class="p">);</span><span class="w"> </span><span class="c1">// returns {.3, .3}</span>
</code></pre></div>

<h3 id="_mix3"><code>_mix3()</code></h3>
<p>Mixes between 3 values using a normalized mix value</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix3</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix3</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix3</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix3</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>val1 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 1st value to mix</li>
<li>val2 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 2nd value to mix</li>
<li>val3 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 3rd value to mix</li>
<li>mixVal <code>float</code> - the mix value within the range <code>0.0</code> to <code>1.0</code></li>
</ul>
<p><strong>Returns</strong>: <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the mixed value</p>
<h3 id="_mix4"><code>_mix4()</code></h3>
<p>Mixes between 4 values using a normalized mix value</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix4</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">val4</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix4</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">val4</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix4</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">val4</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix4</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">val4</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>val1 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 1st value to mix</li>
<li>val2 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 2nd value to mix</li>
<li>val3 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 3rd value to mix</li>
<li>val4 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 4th value to mix</li>
<li>mixVal <code>float</code> - the mix value within the range <code>0.0</code> to <code>1.0</code></li>
</ul>
<p><strong>Returns</strong>: <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the mixed value</p>
<h3 id="_mix5"><code>_mix5()</code></h3>
<p>Mixes between 5 values using a normalized mix value</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix5</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">val4</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">val5</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix5</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">val4</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">val5</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix5</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">val4</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">val5</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">mixedValue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mix5</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">val1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">val2</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">val3</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">val4</span><span class="p">,</span><span class="w"> </span><span class="kt">vec4</span><span class="w"> </span><span class="n">val5</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">mixVal</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>val1 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 1st value to mix</li>
<li>val2 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 2nd value to mix</li>
<li>val3 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 3rd value to mix</li>
<li>val4 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 4th value to mix</li>
<li>val5 <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the 5th value to mix</li>
<li>mixVal <code>float</code> - the mix value within the range <code>0.0</code> to <code>1.0</code></li>
</ul>
<p><strong>Returns</strong>: <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the mixed value</p>
<h3 id="_nsin"><code>_nsin()</code></h3>
<p>Generates a sine wave with values normalized between 0 and 1</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">wave</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_nsin</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">valIn</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>valIn <code>float</code> - the value inside of the <code>sin()</code> function</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - the value of the wave at the given position, ranging from <code>0</code> to <code>1</code></p>
<h3 id="_ncos"><code>_ncos()</code></h3>
<p>Generates a cosine wave with values normalized between 0 and 1</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">wave</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_ncos</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">valIn</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>valIn <code>float</code> - the value inside of the <code>cos()</code> function</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - the value of the wave at the given position, ranging from <code>0</code> to <code>1</code></p>
<h3 id="_nclamp"><code>_nclamp()</code></h3>
<p>Clamps a given value between 0 and 1. Useful with a <code>mix</code> function where a value over <code>1</code> can cause issues on some GPUs.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">clampedVal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_nclamp</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">var</span><span class="p">);</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">clampedVal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_nclamp</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">var</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">clampedVal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_nclamp</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">var</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">clampedVal</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_nclamp</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">var</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>valIn <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the value to clamp</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the clamped value</p>
<h2 id="noise">Noise</h2>
<h3 id="_noise"><code>_noise()</code></h3>
<p>Creates 1D, 2D, or 3D noise based on a seed. Useful for creating smooth, unpredictable variance 
across space (using <code>_uv</code> as seed) or time (using a dynamic variable as seed)</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">noise</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_noise</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">seed</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">noise</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_noise</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">seed</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">noise</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_noise</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">seed</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>seed <code>float</code> | <code>vec2</code> | <code>vec3</code> - the seed used to generate the noise value. Similar seeds will produce similar values, unlike <code>_rand()</code></li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - a noise value in the range <code>0</code> to <code>1</code>  </p>
<h3 id="_fbm"><code>_fbm()</code></h3>
<p>Creates 1D, 2D, or 3D fractal noise, using fractal/fractional Brownian motion (<a href="link:thebookofshaders.com/13/">learn more</a>). Generates more complex (but more expensive) noise than <code>_noise()</code>,
which looks self-similar at all scales</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">noise</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_fbm</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">seed</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">noise</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_fbm</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">seed</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">octave</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">noise</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_fbm</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">seed</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">noise</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_fbm</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">seed</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">octave</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">noise</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_fbm</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">seed</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">noise</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_fbm</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">seed</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">octave</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>seed <code>float</code> | <code>vec2</code> | <code>vec3</code> - the seed used to generate the noise value</li>
<li>[octave] <code>float</code> - the number of octaves to calculate. More octaves creates more detailed noise. Default is <code>5</code></li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - a noise value in the range <code>0</code> to <code>1</code>  </p>
<h3 id="_statelesscontinuouschaotic"><code>_statelessContinuousChaotic()</code></h3>
<p>Produces stateless, noiselike behaviour given a steadily increasing input (like <code>TIME</code>)</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">chaotic</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_statelessContinuousChaotic</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">time</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>time <code>float</code> - a steadily increasing value (like the <code>TIME</code> uniform)</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> - a continuously changing, noiselike value</p>
<h3 id="_hashoutin"><code>_hash{out}{in}()</code></h3>
<p>Takes the specified input shape and produces a hash for the specified output shape. </p>
<div class="codehilite"><pre><span></span><code><span class="c1">//1 dimensional hash</span>
<span class="kt">float</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash11</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash12</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash13</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>

<span class="c1">//2 dimensional hash</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash21</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash22</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash23</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>

<span class="c1">//3 dimensional hash</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash31</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash32</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash33</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>

<span class="c1">//4 dimensional hash</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash41</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash42</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash43</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">hash</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hash44</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">p</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>p <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the seed used to generate the hash value.</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - a hash value in the range <code>0</code> to <code>1</code>  </p>
<h2 id="coordinates">Coordinates</h2>
<h3 id="_uv2uvc"><code>_uv2uvc()</code></h3>
<p>Transforms <code>_uv</code> coordinates (with origin at the bottom left) to <code>_uvc</code> coordinates (with origin at the center of the screen)</p>
<p><strong>Directly modifies the input vector as an <code>inout</code> parameter</strong></p>
<div class="codehilite"><pre><span></span><code><span class="n">_uv2uvc</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">position</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>position <code>vec2</code> - the coordinates to be transformed</li>
</ul>
<h3 id="_uvc2uv"><code>_uvc2uv()</code></h3>
<p>Transforms <code>_uvc</code> coordinates (with origin at the center of the screen) to <code>_uv</code> coordinates (with origin at the bottom left)</p>
<p><strong>Directly modifies the input vector as an <code>inout</code> parameter</strong></p>
<div class="codehilite"><pre><span></span><code><span class="n">_uvc2uv</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">position</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>position <code>vec2</code> - the coordinates to be transformed</li>
</ul>
<h3 id="_rotate"><code>_rotate()</code></h3>
<p>Rotates a vector around the point <code>(0, 0)</code></p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec2</span><span class="w"> </span><span class="n">rotatedVector</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_rotate</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">vector</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">theta</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>vector <code>vec2</code> - the vector to be rotated</li>
<li>theta <code>float</code> - the degrees to rotate</li>
</ul>
<p><strong>Returns</strong>: <code>vec2</code> - the rotated vector</p>
<h3 id="_mirror"><code>_mirror()</code></h3>
<p>Mirrors a value or coordinate to allow seamless repetitions or tilings</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">mirrored</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mirror</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">value</span><span class="p">);</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">mirrored</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mirror</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">value</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">mirrored</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mirror</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">value</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">mirrored</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mirror</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">value</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>value <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the value to be mirrored</li>
</ul>
<p><strong>Returns</strong>: <code>float</code> | <code>vec2</code> | <code>vec3</code> | <code>vec4</code> - the mirrored value</p>
<p><strong>Example</strong>  </p>
<div class="codehilite"><pre><span></span><code><span class="c1">// sample media with mirrored coordinates so it creates a seamless tile</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">mirroredCoords</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_mirror</span><span class="p">(</span><span class="n">_uv</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">media</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">textureMedia</span><span class="p">(</span><span class="n">mirroredCoords</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mi">10</span><span class="p">);</span>
</code></pre></div>

<h3 id="_topolar"><code>_toPolar()</code></h3>
<p>Converts a cartesian vector <code>(x, y)</code> into a polar vector <code>(radius, theta)</code></p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec2</span><span class="w"> </span><span class="n">polarVector</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_toPolar</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">xy</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>xy <code>vec2</code> - the cartesian vector to convert to polar coordinates</li>
</ul>
<p><strong>Returns</strong>: <code>vec2</code> - a polar vector in the form <code>(radius, theta)</code>  </p>
<h3 id="_topolartrue"><code>_toPolarTrue()</code></h3>
<p>Converts a cartesian vector <code>(x, y)</code> into a polar vector <code>(radius, theta)</code> with quadrant correction applied, giving full range of rotation</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec2</span><span class="w"> </span><span class="n">polarVector</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_toPolarTrue</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">xy</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>xy <code>vec2</code> - the cartesian vector to convert to polar coordinates</li>
</ul>
<p><strong>Returns</strong>: <code>vec2</code> - a polar vector in the form <code>(radius, theta)</code>  </p>
<h3 id="_torect"><code>_toRect()</code></h3>
<p>Converts a polar vector <code>(radius, theta)</code> into a cartesian vector <code>(x, y)</code></p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec2</span><span class="w"> </span><span class="n">cartesianVector</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_toRect</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">rt</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>rt <code>vec2</code> - the polar vector to convert to cartesian coordinates</li>
</ul>
<p><strong>Returns</strong>: <code>vec2</code> - a cartesian vector in the form <code>(x, y)</code>  </p>
<h2 id="color">Color</h2>
<h3 id="_rgb2hsv"><code>_rgb2hsv()</code></h3>
<p>Converts an RGB color vector into an equivalent HSV color vector</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">hsv</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_rgb2hsv</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">rgb</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>rgb <code>vec3</code> - a color vector in the form <code>(red, green, blue)</code></li>
</ul>
<p><strong>Returns</strong>: <code>vec3</code> - a color vector in the form <code>(hue, saturation, value)</code>  </p>
<h3 id="_hsv2rgb"><code>_hsv2rgb()</code></h3>
<p>Converts an HSV color vector into an equivalent RGB color vector</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">rgb</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hsv2rgb</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">hsv</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>hsv <code>vec3</code> - a color vector in the form <code>(hue, saturation, value)</code></li>
</ul>
<p><strong>Returns</strong>: <code>vec3</code> - a color vector in the form <code>(red, green, blue)</code>  </p>
<h3 id="_normalizergb"><code>_normalizeRGB()</code></h3>
<p>Converts an RGB color vector in the range <code>0</code> to <code>255</code> to a vector in the range <code>0.0</code> to <code>1.0</code></p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">normalizedRGB</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_normalizeRGB</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">r</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">g</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">b</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>r <code>float</code> - a float in the range <code>0</code> to <code>255</code></li>
<li>g <code>float</code> - a float in the range <code>0</code> to <code>255</code></li>
<li>b <code>float</code> - a float in the range <code>0</code> to <code>255</code></li>
</ul>
<p><strong>Returns</strong>: <code>vec3</code> - a vector with components in the range <code>0.0</code> to <code>1.0</code>  </p>
<h3 id="_palette"><code>_palette()</code></h3>
<p>Returns a color within a palette generated by a cosine function 
(<a href="link:iquilezles.org/www/articles/palettes/palettes.htm">from Inigo Quilez</a>)</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">paletteColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_palette</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">index</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">biases</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">amps</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">freqs</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">phases</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>index <code>float</code> - the place within the palette to sample a color. Generally ranges from <code>0.0</code> to <code>1.0</code> (but doesn't need to)</li>
<li>biases <code>vec3</code> - the RGB biases in the form <code>(redBias, greenBias, blueBias)</code></li>
<li>amps <code>vec3</code> - the RGB amplitudes in the form <code>(redAmp, greenAmp, blueAmp)</code></li>
<li>freqs <code>vec3</code> - the RGB frequencies in the form <code>(redFreq, greenFreq, blueFreq)</code></li>
<li>phases <code>vec3</code> - the RGB phase offsets in the form <code>(redPhase, greenPhase, bluePhase)</code></li>
</ul>
<p><strong>Returns</strong>: <code>vec3</code> - a color within the generated palette  </p>
<h3 id="_brightness"><code>_brightness()</code></h3>
<p>Set the brightness of a color.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_brightness</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">brightness</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_brightness</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">brightness</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong>
- color <code>vec3</code> | <code>vec4</code> - the color to adjust
- brightness <code>float</code> - the brightness value to set the color to. <code>0.0</code> is black, <code>1.0</code> is no change, <code>2.0</code> is twice as bright, etc.</p>
<p><strong>Returns</strong>: <code>vec3</code> | <code>vec4</code> - the adjusted color</p>
<h3 id="_gamma"><code>_gamma()</code></h3>
<p>Apply gamma correction to a color, making the midtones brighter/darker without affecting the shadows or highlights.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_gamma</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">gamma</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_gamma</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">gamma</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong>
- color <code>vec3</code> | <code>vec4</code> - the color to adjust
- gamma <code>float</code> - the gamma correction value. <code>0.5</code> makes the color generally darker, <code>1.0</code> is no change, <code>1.5</code> makes it brighter</p>
<p><strong>Returns</strong>: <code>vec3</code> | <code>vec4</code> - the adjusted color</p>
<h3 id="_contrast"><code>_contrast()</code></h3>
<p>Adjust the contrast of a color. More contrast makes the brights brighter and the darks darker.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_contrast</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">contrast</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_contrast</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">contrast</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong>
- color <code>vec3</code> | <code>vec4</code> - the color to adjust
- contrast <code>float</code> - the contrast value. <code>0</code> is solid gray, <code>1</code> is no change, <code>2</code> is twice as much contrast, etc.</p>
<p><strong>Returns</strong>: <code>vec3</code> | <code>vec4</code> - the adjusted color</p>
<h3 id="_saturation"><code>_saturation()</code></h3>
<p>Adjust the saturation or intensity of a color by scaling it.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_saturation</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">saturation</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_saturation</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">saturation</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong>
- color <code>vec3</code> | <code>vec4</code> - the color to adjust
- saturation <code>float</code> - the saturation value. <code>0.5</code> makes it half as saturated, <code>1</code> is no change, <code>2</code> is twice as saturated, etc.</p>
<p><strong>Returns</strong>: <code>vec3</code> | <code>vec4</code> - the adjusted color</p>
<h3 id="_huerotate"><code>_hueRotate()</code></h3>
<p>Rotates a color around the hue wheel</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hueRotate</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">rot</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">adjustedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hueRotate</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">rot</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>color <code>vec3</code> | <code>vec4</code> - a normalized color vector</li>
<li>rot <code>float</code> - rotation value in degrees</li>
</ul>
<p><strong>Returns</strong>: <code>vec3</code> | <code>vec4</code> - the adjusted color</p>
<h3 id="_invert"><code>_invert()</code></h3>
<p>Invert a color</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">invertedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_invert</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">invert</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">invertedColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_invert</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">invert</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>color <code>vec3</code> | <code>vec4</code> - color to be inverted</li>
<li>invert <code>float</code> - amount to invert the color. <code>0</code> is no change, <code>1</code> is fully inverted</li>
</ul>
<p><strong>Returns</strong>: <code>vec3</code> | <code>vec4</code> - the inverted color</p>
<h3 id="_luminance"><code>_luminance()</code></h3>
<p>Calculate the luminance of a color, which approximates how bright it appears to humans.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">float</span><span class="w"> </span><span class="n">luminance</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_luminance</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">);</span>
<span class="kt">float</span><span class="w"> </span><span class="n">luminance</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_luminance</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong>
- color <code>vec3</code> | <code>vec4</code> - the color to calculate the luminance of</p>
<p><strong>Returns</strong>: <code>float</code> - the luminance of the color</p>
<h3 id="_grayscale"><code>_grayscale()</code></h3>
<p>Converts an RGB or RGBA color vector into a grayscale vector based on its luminance.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">grayscaleColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_grayscale</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">grayscaleColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_grayscale</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">);</span>
<span class="kt">vec3</span><span class="w"> </span><span class="n">grayscaleColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_grayscale</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">intensity</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">grayscaleColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_grayscale</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">intensity</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>color <code>vec3</code> | <code>vec4</code> - the color to adjust</li>
<li>[intensity] <code>float</code> - intensity of the effect. <code>1</code> is full grayscale, <code>0</code> is no change. Defaults to <code>1</code> if left out</li>
</ul>
<p><strong>Returns</strong>: <code>vec3</code> | <code>vec4</code> - the grayscaled color</p>
<h3 id="_dichrome"><code>_dichrome()</code></h3>
<p>Converts an RGB or RGBA color vector into a two tone color. Dark colors will be mapped to color1, and light colors will be mapped to color2.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">dichromeColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_diChrome</span><span class="p">(</span><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">color1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">color2</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">dichromeColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_diChrome</span><span class="p">(</span><span class="kt">vec4</span><span class="w"> </span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">color1</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="w"> </span><span class="n">color2</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>color <code>vec3</code> | <code>vec4</code> - the color to be affected</li>
<li>color1 <code>vec3</code> - the color dark colors will be mapped to</li>
<li>color2 <code>vec3</code> - the color light colors will be mapped to</li>
</ul>
<p><strong>Returns</strong>: <code>vec3</code> | <code>vec4</code> - the converted dichrome color</p>
<h2 id="media">Media</h2>
<h3 id="_loadmedia"><code>_loadMedia()</code></h3>
<p>Loads the color of the selected user media at the current pixel, optionally adjusted by an offset.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">mediaColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_loadMedia</span><span class="p">();</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">mediaColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_loadMedia</span><span class="p">(</span><span class="kt">float</span><span class="w"> </span><span class="n">lod</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">mediaColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_loadMedia</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">offset</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">mediaColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_loadMedia</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">offset</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">lod</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>[lod] <code>float</code> - the level of detail to use when sampling the texture. <strong>NOTE:</strong> only works when media filter mode is set to <code>"mipmap"</code> (see <a href="json.html#media">media JSON configuration</a>)</li>
<li>[offset] <code>vec2</code> - the offset from the current pixel to sample the texture</li>
</ul>
<p><strong>Returns</strong>: <code>vec4</code> - the color of the user media at the current pixel (adjusted by offset)</p>
<h3 id="_texturemedia"><code>_textureMedia()</code></h3>
<p>Samples user media at custom uv coordinates. Includes aspect ratio correction, so the media will not appear stretched. If you want to sample media without any correction, use <code>texture(syn_Media)</code></p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">mediaColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_textureMedia</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">mediaColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_textureMedia</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">lod</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>uv <code>vec2</code> - the uv coordinates at which to sample the user media (should be in the range 0-1)</li>
<li>[lod] <code>float</code> - the level of detail to use when sampling the texture. <strong>NOTE:</strong> only works when media filter mode is set to <code>"mipmap"</code> (see <a href="json.html#media">media JSON configuration</a>)</li>
</ul>
<p><strong>Returns</strong>: <code>vec4</code> - the color of the user media at the given uv coordinates</p>
<h3 id="_loadmediaasmask"><code>_loadMediaAsMask()</code></h3>
<p>Loads the selected user media at the current pixel as a mask, with values thresholded to be either <code>0.0</code> or <code>1.0</code>.
By multiplying a color vector by one of the output channels (<code>r</code>, <code>g</code>, and <code>b</code> are the same), you can mask the color
to only appear when the user image is prominent.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">mediaMask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_loadMediaAsMask</span><span class="p">();</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">mediaMask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_loadMediaAsMask</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">offset</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>[lod] <code>float</code> - the level of detail to use when sampling the texture. <strong>NOTE:</strong> only works when media filter mode is set to <code>"mipmap"</code> (see <a href="json.html#media">media JSON configuration</a>)</li>
<li>[offset] <code>vec2</code> - the offset from the current pixel to sample the texture</li>
</ul>
<p><strong>Returns</strong>: <code>vec4</code> - the thresholded color of the user media at the current pixel (adjusted by offset). Either <code>vec4(0.0)</code> or <code>vec4(1.0)</code>  </p>
<h3 id="_texturemediaasmask"><code>_textureMediaAsMask()</code></h3>
<p>Samples user media at the given coordinates as a mask, with values thresholded to be either <code>0.0</code> or <code>1.0</code>. By multiplying a color vector by one of the output channels (<code>r</code>, <code>g</code>, and <code>b</code> are the same), you can mask the color to only appear when the user image is prominent.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">mediaMask</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_textureMediaAsMask</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>uv <code>vec2</code> - the uv coordinates at which to sample the user media (should be in the range 0-1)</li>
</ul>
<p><strong>Returns</strong>: <code>vec4</code> - the thresholded color of the user media at the given coordinates. Either <code>vec4(0.0)</code> or <code>vec4(1.0)</code></p>
<h3 id="_correctmediacoords"><code>_correctMediaCoords()</code></h3>
<p>Correct the aspect ratio of uv coordinates so they can be used to sample user media without appearing stretched. It scales the coordinates based on the aspect ratio of <code>sampler2D syn_Media</code>, which stores user media.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec2</span><span class="w"> </span><span class="n">aspectCorrectedCoords</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_correctMediaCoords</span><span class="p">();</span>
<span class="kt">vec2</span><span class="w"> </span><span class="n">aspectCorrectedCoords</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_correctMediaCoords</span><span class="p">(</span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>[uv] <code>vec2</code> - the uv coordinates to correct. Will default to _uv if omitted</li>
</ul>
<p><strong>Returns</strong>: <code>vec2</code> - the uv coordinates corrected for aspect ratio</p>
<h3 id="_ismediaactive"><code>_isMediaActive()</code></h3>
<p>Returns whether a user has selected media in the media panel.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">bool</span><span class="w"> </span><span class="n">isMediaActive</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_isMediaActive</span><span class="p">();</span>
</code></pre></div>

<p><strong>Returns</strong>: <code>bool</code> - <code>true</code> if media is selected and <code>false</code> if "none" is selected</p>
<h3 id="_edgedetectmedia"><code>_edgeDetectMedia()</code></h3>
<p>Detects edges of the selected user media inexpensively through a bilinear method.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">mediaEdges</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_edgeDetectMedia</span><span class="p">();</span>
</code></pre></div>

<p><strong>Returns</strong>: <code>vec4</code> - the color of the edges for the selected user media. This value is likely to be small</p>
<h3 id="_edgedetectsobelmedia"><code>_edgeDetectSobelMedia()</code></h3>
<p>Detects edges of the currently selected user media using the sobel method. More info oon the sobel operator <a href="link:en.wikipedia.org/wiki/Sobel_operator">can be found here.</a>.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">mediaEdges</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_edgeDetectSobelMedia</span><span class="p">();</span>
</code></pre></div>

<p><strong>Returns</strong>: <code>vec4</code> - the edges of the currently selected media</p>
<h2 id="multipass">Multipass</h2>
<h3 id="_edgedetect"><code>_edgeDetect()</code></h3>
<p>Detects edges of a given texture or syn pass inexpensively through a bilinear method.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">passEdges</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_edgeDetect</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">passEdges</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_edgeDetect</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>texture <code>sampler2D</code> - the texture or syn pass to calculate the edges for</li>
<li>[uv] <code>vec2</code> - the coordinates to sample the texture at. Defaults to <code>_uv</code></li>
</ul>
<p><strong>Returns</strong>: <code>vec4</code> - the color of the edges for the given texture. This value is likely to be small</p>
<h3 id="_edgedetectsobel"><code>_edgeDetectSobel()</code></h3>
<p>Detects edges of a given texture or syn pass through the sobel method. This is more expensive than <code>_edgeDetect</code> but produces better edges. More info on the sobel operator can be found <a href="link:en.wikipedia.org/wiki/Sobel_operator">here</a>.</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">passEdges</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_edgeDetectSobel</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">passEdges</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_edgeDetectSobel</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>texture <code>sampler2D</code> - the texture or syn pass to calculate the edges for</li>
<li>[uv] <code>vec2</code> - the coordinates to sample the texture at. Defaults to <code>_uv</code></li>
</ul>
<p><strong>Returns</strong>: <code>vec4</code> - the color of the edges for the given texture</p>
<h3 id="_hblurtiltshift"><code>_hBlurTiltShift()</code></h3>
<p>Applies a tilt shift in the horizontal direction. Use in tandem with <code>_vBlurTiltShift()</code> in a second pass to create a tilt shift effect. Note that this effect can be very expensive!</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">blurred</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hBlurTiltShift</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">blurred</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hBlurTiltShift</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">blurred</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hBlurTiltShift</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">blurAmt</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">blurred</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_hBlurTiltShift</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">blurAmt</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">blurLoc</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>texIn <code>sampler2D</code> - the texture or pass to apply the effect to</li>
<li>[uv] <code>vec2</code> - the coordinates to sample the texture at. Defaults to <code>_uv</code></li>
<li>[blurAmt] <code>float</code> - the blur level. This will add iterations to the blur loop, so lower will be faster. Default is 5.0</li>
<li>[blurLoc] <code>float</code> - the location of the blur. Default is 0.5</li>
</ul>
<p><strong>Returns</strong>: <code>vec4</code> - the blurred texture</p>
<p><strong>Example</strong>:</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">renderMain</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
<span class="w">    </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="n">PASSINDEX</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="mo">0</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="n">_loadMedia</span><span class="p">();</span>
<span class="w">    </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="n">PASSINDEX</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="mi">1</span><span class="p">){</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="n">_hBlurTiltShift</span><span class="p">(</span><span class="n">mediaPass</span><span class="p">,</span><span class="w"> </span><span class="mf">5.0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">);</span>
<span class="w">    </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="n">PASSINDEX</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="mi">2</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">        </span><span class="k">return</span><span class="w"> </span><span class="n">_vBlurTiltShift</span><span class="p">(</span><span class="n">hPass</span><span class="p">,</span><span class="w"> </span><span class="mf">5.0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">);</span>
<span class="w">    </span><span class="p">}</span><span class="w"> </span>
<span class="p">}</span>
</code></pre></div>

<h3 id="_vblurtiltshift"><code>_vBlurTiltShift()</code></h3>
<p>Applies a tilt shift in the vertical direction. Use in tandem with <code>_vBlurTiltShift()</code> in a second pass to create a tilt shift effect. Note that this effect can be very expensive!</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">blurred</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_vBlurTiltShift</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">blurred</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_vBlurTiltShift</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">blurred</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_vBlurTiltShift</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">blurAmt</span><span class="p">);</span>
<span class="kt">vec4</span><span class="w"> </span><span class="n">blurred</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">_vBlurTiltShift</span><span class="p">(</span><span class="kt">sampler2D</span><span class="w"> </span><span class="n">texture</span><span class="p">,</span><span class="w"> </span><span class="kt">vec2</span><span class="w"> </span><span class="n">uv</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">blurAmt</span><span class="p">,</span><span class="w"> </span><span class="kt">float</span><span class="w"> </span><span class="n">blurLoc</span><span class="p">);</span>
</code></pre></div>

<p><strong>Params</strong></p>
<ul>
<li>texIn <code>sampler2D</code> - the texture or pass to apply the effect to</li>
<li>[uv] <code>vec2</code> - the coordinates to sample the texture at. Defaults to <code>_uv</code></li>
<li>[blurAmt] <code>float</code> - the blur level. This will add iterations to the blur loop, so lower will be faster. Default is 5.0</li>
<li>[blurLoc] <code>float</code> - the location of the blur. Default is 0.5</li>
</ul>
<p><strong>Returns</strong>: <code>vec4</code> - the blurred texture</p></div>












                
              </article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
  
    Made with
    <a href="link:squidfunk.github.io/mkdocs-material" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    
      
      <script id="__config" type="application/json">{"base": "..", "features": [], "search": "../assets/javascripts/workers/search.973d3a69.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
    
    
      <script src="../assets/javascripts/bundle.92b07e13.min.js"></script>
      
    
  </body>
</html>