
<!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="libraries.html">
      
      
        <link rel="next" href="script.html">
      
      
      <link rel="icon" href="../src/images/logo_square.png">
      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.19">
    
    
      
        <title>JSON Configuration - 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="#json-configuration" 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">
            
              JSON Configuration
            
          </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">
      <a href="functions.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    SSF Functions
    
  </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">
    JSON Configuration
    
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="json.html" class="md-nav__link md-nav__link--active">
        
  
  
  <span class="md-ellipsis">
    JSON Configuration
    
  </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="#overview" class="md-nav__link">
    <span class="md-ellipsis">
      Overview
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#metadata" class="md-nav__link">
    <span class="md-ellipsis">
      Metadata
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#controls" class="md-nav__link">
    <span class="md-ellipsis">
      Controls
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Controls">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#control-types" class="md-nav__link">
    <span class="md-ellipsis">
      Control Types
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#control-options" class="md-nav__link">
    <span class="md-ellipsis">
      Control Options
    </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>
  
</li>
      
        <li class="md-nav__item">
  <a href="#passes" class="md-nav__link">
    <span class="md-ellipsis">
      Passes
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Passes">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#writing-multipass-code" class="md-nav__link">
    <span class="md-ellipsis">
      Writing Multipass Code
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#simple-feedback" class="md-nav__link">
    <span class="md-ellipsis">
      Simple Feedback
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#transitions" class="md-nav__link">
    <span class="md-ellipsis">
      Transitions
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Transitions">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#hard-transitions" class="md-nav__link">
    <span class="md-ellipsis">
      Hard Transitions
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#smooth-transitions" class="md-nav__link">
    <span class="md-ellipsis">
      Smooth Transitions
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#images" class="md-nav__link">
    <span class="md-ellipsis">
      Images
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </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">
      <a href="functions.html" class="md-nav__link">
        
  
  
  <span class="md-ellipsis">
    SSF Functions
    
  </span>
  

      </a>
    </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 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">
    JSON Configuration
    
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="json.html" class="md-nav__link md-nav__link--active">
        
  
  
  <span class="md-ellipsis">
    JSON Configuration
    
  </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="#overview" class="md-nav__link">
    <span class="md-ellipsis">
      Overview
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#metadata" class="md-nav__link">
    <span class="md-ellipsis">
      Metadata
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#controls" class="md-nav__link">
    <span class="md-ellipsis">
      Controls
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Controls">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#control-types" class="md-nav__link">
    <span class="md-ellipsis">
      Control Types
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#control-options" class="md-nav__link">
    <span class="md-ellipsis">
      Control Options
    </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>
  
</li>
      
        <li class="md-nav__item">
  <a href="#passes" class="md-nav__link">
    <span class="md-ellipsis">
      Passes
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Passes">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#writing-multipass-code" class="md-nav__link">
    <span class="md-ellipsis">
      Writing Multipass Code
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#simple-feedback" class="md-nav__link">
    <span class="md-ellipsis">
      Simple Feedback
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#transitions" class="md-nav__link">
    <span class="md-ellipsis">
      Transitions
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Transitions">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#hard-transitions" class="md-nav__link">
    <span class="md-ellipsis">
      Hard Transitions
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#smooth-transitions" class="md-nav__link">
    <span class="md-ellipsis">
      Smooth Transitions
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#images" class="md-nav__link">
    <span class="md-ellipsis">
      Images
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </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="#overview" class="md-nav__link">
    <span class="md-ellipsis">
      Overview
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#metadata" class="md-nav__link">
    <span class="md-ellipsis">
      Metadata
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#controls" class="md-nav__link">
    <span class="md-ellipsis">
      Controls
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Controls">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#control-types" class="md-nav__link">
    <span class="md-ellipsis">
      Control Types
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#control-options" class="md-nav__link">
    <span class="md-ellipsis">
      Control Options
    </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>
  
</li>
      
        <li class="md-nav__item">
  <a href="#passes" class="md-nav__link">
    <span class="md-ellipsis">
      Passes
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Passes">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#writing-multipass-code" class="md-nav__link">
    <span class="md-ellipsis">
      Writing Multipass Code
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#simple-feedback" class="md-nav__link">
    <span class="md-ellipsis">
      Simple Feedback
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#transitions" class="md-nav__link">
    <span class="md-ellipsis">
      Transitions
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Transitions">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#hard-transitions" class="md-nav__link">
    <span class="md-ellipsis">
      Hard Transitions
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#smooth-transitions" class="md-nav__link">
    <span class="md-ellipsis">
      Smooth Transitions
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#images" class="md-nav__link">
    <span class="md-ellipsis">
      Images
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  



<div><h1 id="json-configuration">JSON Configuration</h1>
<h2 id="overview">Overview</h2>
<p>Every <code>.synScene</code> directory contains a <code>scene.json</code> file, which configures the scene (<a href="link:www.w3schools.com/js/js_json_intro.asp">learn more about JSON</a>). It provides metadata, specifies the controls that will render in the control panel, and allows added functionality like multiple passes, transitions, and texture loading.</p>
<p>Generally you won't need to manually edit this JSON — you can access all of its functionality through the edit tab of the right panel.</p>
<p>Here is the complete list of JSON keys that can be included:</p>
<div class="codehilite"><pre><span></span><code>"TITLE"
"CREDIT"
"DESCRIPTION"
"IMAGE_PATH"
"WIDTH"
"HEIGHT"
"CONTROLS"
"PASSES"
"HARD_TRANSITIONS"
"SMOOTH_TRANSITIONS"
"IMAGES"
</code></pre></div>

<p>All of these keys and their values exist within <em>one</em> JSON object, like so:</p>
<div class="codehilite"><pre><span></span><code><span class="p">{</span>
<span class="w">  </span><span class="nt">"TITLE"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Mind Shredder"</span><span class="p">,</span>
<span class="w">  </span><span class="nt">"CREDIT"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Gravity Current"</span><span class="p">,</span>
<span class="w">  </span><span class="err">...</span>
<span class="p">}</span>
</code></pre></div>

<p>Read on to learn more about the usage of each JSON key.</p>
<h2 id="metadata">Metadata</h2>
<p>The first six keys define the basic metadata of the scene:</p>
<table>
<thead>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"TITLE"</code></td>
<td>The scene title that displays within Synesthesia.</td>
</tr>
<tr>
<td><code>"CREDIT"</code></td>
<td>The artist name of the scene creator.</td>
</tr>
<tr>
<td><code>"DESCRIPTION"</code></td>
<td>A text description of the scene.</td>
</tr>
<tr>
<td><code>"IMAGE_PATH"</code></td>
<td>The path to the thumbnail image that will be displayed in the scene library. By default, this will be set to <code>'new_scene.png'</code>, but you can add any image and update the path as you like.</td>
</tr>
<tr>
<td><code>"WIDTH"</code> and <code>"HEIGHT"</code></td>
<td>The final output resolution of the scene in pixels. By default, this will be set to <code>1920</code> x <code>1080</code>. Note that output resolution can also be controlled through the in-app settings, and the two resolutions will be compounded.</td>
</tr>
</tbody>
</table>
<h2 id="controls">Controls</h2>
<p>The <code>"CONTROLS"</code> key determines the controls that are rendered to the Synesthesia GUI in the control panel. The current values of these GUI controls are automatically made available in <code>main.glsl</code> as uniforms, allowing you to easily create interactive visuals. The <code>"CONTROLS"</code> value is an array of JSON values, each of which defines an individual control. Here is an overview of the structure:</p>
<div class="codehilite"><pre><span></span><code>"CONTROLS" : [{CONTROL_1}, {CONTROL_2}, ...]
</code></pre></div>

<p>Each control object has its own set of keys and values. Here is an example of a control object with a complete set of keys:</p>
<div class="codehilite"><pre><span></span><code><span class="p">{</span>
<span class="w">  </span><span class="nt">"TYPE"</span><span class="p">:</span><span class="w"> </span><span class="s2">"slider smooth"</span><span class="p">,</span>
<span class="w">  </span><span class="nt">"NAME"</span><span class="p">:</span><span class="w"> </span><span class="s2">"slider1"</span><span class="p">,</span>
<span class="w">  </span><span class="nt">"DEFAULT"</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="nt">"MIN"</span><span class="p">:</span><span class="w"> </span><span class="mf">0.0</span><span class="p">,</span>
<span class="w">  </span><span class="nt">"MAX"</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="nt">"UI_GROUP"</span><span class="p">:</span><span class="w"> </span><span class="s2">"crazy effects"</span><span class="p">,</span>
<span class="w">  </span><span class="nt">"DESCRIPTION"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Use at your own risk"</span><span class="p">,</span>
<span class="w">  </span><span class="nt">"PARAMS"</span><span class="p">:</span><span class="w"> </span><span class="mf">0.1</span>
<span class="p">}</span>
</code></pre></div>

<h3 id="control-types">Control Types</h3>
<p><code>"TYPE"</code> is the most important key in the control object -- it defines the type of control that will be rendered to the GUI, along with the type of uniform that will be available in <code>main.glsl</code>. There are currently 7 main types: <code>slider</code>, <code>knob</code>, <code>toggle</code>, <code>bang</code>, <code>xy</code>, <code>color</code>, and <code>dropdown</code>. Each type has additional specialized versions. For example, you can add "<code>smooth</code>" to any control type to make it smoothly transition between changes in value (see the <code>"PARAMS"</code> key to customize smoothing).</p>
<p>Here is a complete list of available control types:</p>
<table>
<thead>
<tr>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"slider"</code></td>
<td>The most common type of control. Outputs a <code>float</code> value that can range from <code>"MIN"</code> to <code>"MAX"</code>.</td>
</tr>
<tr>
<td>---- <code>"slider smooth"</code></td>
<td>Same as <code>"slider"</code> but with smooth transitions between changes in value. See <code>"PARAMS"</code> key to customize smoothing.</td>
</tr>
<tr>
<td>---- <code>"slider speed"</code></td>
<td>Outputs a constantly changing value based on the <em>speed</em> set by the slider. The speed is set in <em>units per second</em> — if the control value is 1, its output will increase by 1 per second. If it is -2, it will decrease by 2 per second. This is useful for controlling infinite movement like camera position or rotation.</td>
</tr>
<tr>
<td><code>"knob"</code></td>
<td>Provides the same functionality as <code>"slider"</code> in a smaller package -- two knobs can be stacked in a column.</td>
</tr>
<tr>
<td>---- <code>"knob smooth"</code></td>
<td>Same as <code>"knob"</code> but with smooth transitions.</td>
</tr>
<tr>
<td>---- <code>"knob speed"</code></td>
<td>Outputs a constantly changing value based on the <em>speed</em> set by the knob.</td>
</tr>
<tr>
<td><code>"toggle"</code></td>
<td>Toggles between <code>"MIN"</code> and <code>"MAX"</code> values on click. Useful for controlling booleans and settings.</td>
</tr>
<tr>
<td>---- <code>"toggle smooth"</code></td>
<td>Smoothly transitions between <code>"MIN"</code> and <code>"MAX"</code> on click.</td>
</tr>
<tr>
<td><code>"bang"</code></td>
<td>Outputs <code>"MAX"</code> for one frame on click, otherwise outputs <code>"MIN"</code>. Used to trigger events or change settings.</td>
</tr>
<tr>
<td>---- <code>"bang smooth"</code></td>
<td>Triggers a brief envelope on click (smoothly rises to <code>1.0</code> then falls to <code>0.0</code>). See <code>"PARAMS"</code> key to customize the duration of the envelope.</td>
</tr>
<tr>
<td>---- <code>"bang counter"</code></td>
<td>Increments by <code>1</code> on click. Useful for cycling through options.</td>
</tr>
<tr>
<td>---- <code>"bang counter smooth"</code></td>
<td>Same as <code>"bang counter"</code> but with smooth transitions.</td>
</tr>
<tr>
<td><code>"xy"</code></td>
<td>Outputs a <code>vec2</code> that is controlled by a two dimensional pad with individual sliders for each dimension. Useful for controlling position.</td>
</tr>
<tr>
<td>---- <code>"xy smooth"</code></td>
<td>Same as <code>"xy"</code> but with smooth transitions.</td>
</tr>
<tr>
<td>---- <code>"xy speed"</code></td>
<td>Outputs a constantly changing <code>vec2</code>, based on the <em>speeds</em> set by the values of each dimension.</td>
</tr>
<tr>
<td><code>"color"</code></td>
<td>Outputs a <code>vec3</code> color in the form <code>[r, g, b]</code>, with values in the range <code>0.0</code> to <code>1.0</code>. It creates a color picker in the control panel with a variety of input options. <strong>NOTE:</strong> to set the default value for a <code>"color"</code> control, you must use the special key <code>"DEF_COLOR"</code> (see below).</td>
</tr>
<tr>
<td>---- <code>"color smooth"</code></td>
<td>Same as <code>"color"</code> but with smooth transitions between colors.</td>
</tr>
<tr>
<td><code>"dropdown"</code></td>
<td>Creates a dropdown menu that allows the user to select one of multiple options. <strong>NOTE:</strong> this control type requires additional keys called <code>"LABELS"</code> and <code>"VALUES"</code> (see below). The <code>"DEFAULT"</code> key specifies the default <em>index value</em> -- 0 will select the first option by default, 1 the second, etc.</td>
</tr>
<tr>
<td>---- <code>"dropdown smooth"</code></td>
<td>Same as <code>"dropdown"</code>, but it smoothly interpolates between the values of each option.</td>
</tr>
</tbody>
</table>
<h3 id="control-options">Control Options</h3>
<p>Here are the rest of the keys that make up a control object:</p>
<table>
<thead>
<tr>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"NAME"</code></td>
<td>The identifier of the control, which will automatically become a uniform available in <code>main.glsl</code>. For example, if you create a control with <code>"NAME" : "slider1"</code>, you can access the current value of the slider in your shader using the variable <code>slider1</code>. This string will also be displayed as a label beneath the control in the control panel. Use an underscore to add a space in the label -- Synesthesia will automatically replace it (<code>control_name</code> -&gt; <code>control name</code>)</td>
</tr>
<tr>
<td><code>"DEFAULT"</code></td>
<td>The default value of the control. When a scene is started, the control will be initialized with this value. The value is also stored in the "default" preset, which is always available at the top of the preset tab. For multidimensional controls like <code>"xy"</code> and <code>"color"</code>, this should be an array of values defining the defaults for each dimension, like <code>"DEFAULT": [0.0, 0.5, 1.0]</code>.</td>
</tr>
<tr>
<td><code>"MIN"</code> and <code>"MAX"</code></td>
<td>The minimum and maximum values that the control can output. Much of the work of scene creation is finding this range of safe/interesting values for each control. For multidimensional controls like <code>"xy"</code> and <code>"color"</code>, these should be arrays of values defining the range for each dimension, like <code>"MIN": [0.0, 0.0], "MAX": [1.0, 2.0]</code>.</td>
</tr>
<tr>
<td><code>"UI_GROUP"</code></td>
<td>The name of the control panel group the control will be placed in. If the group name doesn't already exist in previous controls, Synesthesia will automatically create a new group.</td>
</tr>
<tr>
<td><code>"DESCRIPTION"</code></td>
<td>A text description of the control and its effects. If the user has the tooltip turned on, the description will be displayed there when a user hovers over the control.</td>
</tr>
<tr>
<td><code>"PARAMS"</code></td>
<td>For smooth controls, determines the speed of transitions between values. The smaller the value, the <em>longer</em> it will take. It takes roughly <code>1/PARAMS</code> frames to transition (<code>1.0</code> takes 1 frame, <code>.1</code> takes ten frames, etc.). The default value of <code>"PARAMS"</code> is <code>0.01</code>.</td>
</tr>
<tr>
<td><code>"LABELS"</code> and <code>"VALUES"</code></td>
<td>These keys define the options for a dropdown control. <code>"LABELS"</code> is an array of strings that appear as the options in the dropdown menu, like <code>"LABELS": ["cold", "warm", "hot"]</code>. <code>"VALUES"</code> is an array of numbers that get passed into the shader for each option, like <code>"VALUES": [0.0, 0.5, 1.0]</code>. These arrays are linked: if the user selects the second <em>label</em> in the menu, the second <em>value</em> will be outputted to the shader (<code>"warm"</code> -&gt; <code>0.5</code>). You only need one of these keys to define a dropdown control. If you only define the <code>"LABELS"</code> key, the values will automatically be set to the index value (0, 1, 2, etc.). If you only define the <code>"VALUES"</code> key, the labels will automatically be set to "option 1", "option 2", "option 3", etc.</td>
</tr>
</tbody>
</table>
<h2 id="media">Media</h2>
<p>The optional <code>MEDIA</code> key allows you to modify the texture lookup <code>WRAP</code> and <code>FILTER</code> methods used when accessing the user media with <code>syn_Media</code> or the various media loading functions provided by Synesthesia. It should be an array with one object containing the following keys (more than one media object will be supported in future versions of Synesthesia):</p>
<table>
<thead>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"WRAP"</code></td>
<td>The texture wrapping method. This determines how the texture is sampled when the UV coordinates are outside the range of 0.0 to 1.0. The default value is <code>"repeat"</code> which repeats the image in a grid, equivalent to <code>fract(uv)</code>. The other options are <code>"clamp"</code>, which will sample an edge pixel if the coordinate is out of the 0.0 to 1.0 range, and <code>"mirror"</code> which reflects out-of-range coordinates.</td>
</tr>
<tr>
<td><code>"FILTER"</code></td>
<td>The texture filtering method. This determines how the texture is sampled when the UV coordinates are between pixels. The default value is <code>"linear"</code>, which uses bilinear interpolation to smooth the texture. The other options are <code>"nearest"</code>, which uses nearest neighbor interpolation to preserve the pixelated look of the texture (like <code>texelFetch</code>), and <code>"mipmap"</code>, which uses mipmapping to provide level of detail lookups - great for minimizing aliasing when scaling down textures or creating effects that involve blurring.</td>
</tr>
</tbody>
</table>
<div class="codehilite"><pre><span></span><code><span class="nt">"MEDIA"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">  </span><span class="p">{</span>
<span class="w">    </span><span class="nt">"WRAP"</span><span class="p">:</span><span class="w"> </span><span class="s2">"mirror"</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"FILTER"</span><span class="p">:</span><span class="w"> </span><span class="s2">"mipmap"</span>
<span class="w">  </span><span class="p">}</span>
<span class="p">]</span>
</code></pre></div>

<h2 id="passes">Passes</h2>
<p>SSF allows you to easily create shaders with multiple passes. Multipass rendering is useful for creating "feedback," where the results of previous frames are used in the current frame to create iterative, compounding effects (like fractals, fluid simulation, reaction diffusion, etc.). It's also a useful way to structure shader code by separating distinct code into different passes (e.g. rendering an image in pass 1, then blurring the result in pass 2). The majority of built-in Synesthesia scenes involve multi-pass effects — <code>Churning</code>, <code>Fluid Body</code>, and <code>Biopsy</code> are good examples.</p>
<p>To create a multipass shader, add the <code>"PASSES"</code> key to the root JSON object. It should contain an array of individual objects defining each pass. Pass objects contain the following keys:</p>
<table>
<thead>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"TARGET"</code></td>
<td>The name of the rendering target. This name will automatically be available as a <code>sampler2D</code> uniform in <code>main.glsl</code>, and it can be referenced anywhere in the code. To access the color of the pass target at the current pixel, use <code>texture(target, _uv)</code>.</td>
</tr>
<tr>
<td><code>"WIDTH"</code> and <code>"HEIGHT"</code></td>
<td>The width and height of the target buffer in pixels. These values involve a tradeoff between higher resolution and faster rendering. Especially in shaders with more than a few passes, it can be a good idea to limit the resolution of some passes to optimize performance -- the final output will still come out to be the <code>"WIDTH"</code> and <code>"HEIGHT"</code> defined in the root JSON object.</td>
</tr>
<tr>
<td><code>"FLOAT"</code></td>
<td>Determines the precision of the pixel values of the pass. If <code>true</code>, the pass will use the <code>RGBA32F</code> 32-bit float format, which is suitable for high precision simulations. If <code>false</code>, the pass will use the lower-precision <code>RGBA8</code> format, which can improve performance. This is set to <code>true</code> by default.</td>
</tr>
<tr>
<td><code>"WRAP"</code></td>
<td>The texture wrapping method. This determines how the pass is sampled when the UV coordinates are outside the range of 0.0 to 1.0. The default value is <code>"repeat"</code> which repeats the image in a grid, equivalent to <code>fract(uv)</code>. The other options are <code>"clamp"</code>, which will sample an edge pixel if the coordinate is out of the 0.0 to 1.0 range, and <code>"mirror"</code> which reflects out-of-range coordinates.</td>
</tr>
<tr>
<td><code>"FILTER"</code></td>
<td>The texture filtering method. This determines how the pass is sampled when the UV coordinates are between pixels. The default value is <code>"linear"</code>, which uses bilinear interpolation to smooth the texture. The other options are <code>"nearest"</code>, which uses nearest neighbor interpolation to preserve the pixelated look of the texture (like <code>texelFetch</code>), and <code>"mipmap"</code>, which uses mipmapping to provide level of detail lookups - great for minimizing aliasing when scaling down textures or creating effects that involve blurring.</td>
</tr>
</tbody>
</table>
<p>Here's what the overall structure should look like:</p>
<div class="codehilite"><pre><span></span><code><span class="nt">"PASSES"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">  </span><span class="p">{</span>
<span class="w">    </span><span class="nt">"TARGET"</span><span class="p">:</span><span class="w"> </span><span class="s2">"buffer1"</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"WIDTH"</span><span class="p">:</span><span class="w"> </span><span class="mi">1920</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"HEIGHT"</span><span class="p">:</span><span class="w"> </span><span class="mi">1080</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"FLOAT"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"WRAP"</span><span class="p">:</span><span class="w"> </span><span class="s2">"mirror"</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"FILTER"</span><span class="p">:</span><span class="w"> </span><span class="s2">"mipmap"</span>
<span class="w">  </span><span class="p">},</span><span class="w"> </span>
<span class="w">  </span><span class="p">{</span>
<span class="w">    </span><span class="nt">"TARGET"</span><span class="p">:</span><span class="w"> </span><span class="s2">"buffer2"</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"WIDTH"</span><span class="p">:</span><span class="w"> </span><span class="mi">1280</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"HEIGHT"</span><span class="p">:</span><span class="w"> </span><span class="mi">720</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"FLOAT"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span>
<span class="w">    </span><span class="c1">// WRAP and FILTER will default to "repeat" and "linear" if excluded</span>
<span class="w">  </span><span class="p">},</span>
<span class="w">  </span><span class="err">...</span>
<span class="p">]</span>
<span class="p">}</span>
</code></pre></div>

<h3 id="writing-multipass-code">Writing Multipass Code</h3>
<p>The <code>renderMain()</code> function defined in <code>main.glsl</code> gets called once per pass. To run different code for each pass, use the <a href="standard_uniforms.html#multipass-uniforms"><code>PASSINDEX</code> uniform</a>, which gets incremented by 1 for each successive pass:</p>
<div class="codehilite"><pre><span></span><code><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="c1">//...code for first pass...</span>
<span class="p">}</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="p">{</span>
<span class="w"> </span><span class="c1">//...code for second pass...</span>
<span class="p">}</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="n">x</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="c1">//...code for (x+1)th pass...</span>
<span class="p">}</span>
</code></pre></div>

<p>When a scene is started, all passes initialize to <code>vec4(0.0)</code> for every pixel. To create multipass effects, you will likely want to access the results of the first pass within the code for the second pass (and so on), using code like this: </p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec4</span><span class="w"> </span><span class="n">firstPassColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">texture</span><span class="p">(</span><span class="n">firstPassTarget</span><span class="p">,</span><span class="w"> </span><span class="n">_uv</span><span class="p">);</span>
</code></pre></div>

<h3 id="simple-feedback">Simple Feedback</h3>
<p>You can create simple feedback shaders even without using the <code>"PASSES"</code> key. Every shader's previous frame is automatically made available as a <code>sampler2D</code> uniform called <a href="standard_uniforms.html#multipass-uniforms"><code>syn_FinalPass</code></a>. You can access the previous value of the current pixel with <code>texture(syn_FinalPass, _uv)</code>, allowing you to create feedback effects as you would with multiple passes.</p>
<h2 id="transitions">Transitions</h2>
<h3 id="hard-transitions">Hard Transitions</h3>
<ul>
<li>Define a variable with X number of preset values. The variable will only ever be set to one of these values. When a significant song change is detected, the variable randomly chooses a new value from the list provided.</li>
<li>Any number of values from 1 to X is allowed.</li>
<li>Every time a song transition is detected, it will select a NEW value. However, you can put in the same value twice to increase the odds of that being chosen.</li>
<li>When a song transition is detected, all "HARD_TRANSITION" variables change at the same time.</li>
</ul>
<div class="codehilite"><pre><span></span><code><span class="nt">"HARD_TRANSITIONS"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">  </span><span class="p">{</span>
<span class="w">    </span><span class="nt">"UNIFORM"</span><span class="p">:</span><span class="w"> </span><span class="s2">"myVariable"</span><span class="p">,</span>
<span class="w">    </span><span class="nt">"VALUES"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="mf">0.9</span><span class="p">,</span><span class="w"> </span><span class="mf">0.8</span><span class="p">,</span><span class="w"> </span><span class="mf">0.2</span><span class="p">,</span><span class="w"> </span><span class="mf">0.0</span><span class="p">]</span>
<span class="w">  </span><span class="p">},</span>
<span class="w">  </span><span class="err">...</span>
<span class="p">],</span>
</code></pre></div>

<h3 id="smooth-transitions">Smooth Transitions</h3>
<ul>
<li>Define a list of variables in one "family" that will be codependent.</li>
<li>Within a family, only one variable will be set to 1.0 (or "ON"), the others will be set to 0.0.</li>
<li>When a song transition is detected, a new member of the family will be randomly chosen to be the new variable that is "ON".</li>
<li>A linear interpolation between the old "ON" variable and the new "ON" variable will take place, smoothly transitioning between 1.0 and 0.0.</li>
<li>The duration of the transition is set in the variable "DURATION", which is given in seconds.</li>
<li>A great way to use these is alongside the built-in GLSL <code>mix(thing1, thing2, mixVar)</code> function.</li>
</ul>
<div class="codehilite"><pre><span></span><code><span class="nt">"SMOOTH_TRANSITIONS"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">  </span><span class="p">{</span>
<span class="w">    </span><span class="nt">"UNIFORMS"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"color1"</span><span class="p">,</span><span class="w"> </span><span class="s2">"color2"</span><span class="p">,</span><span class="w"> </span><span class="s2">"color3"</span><span class="p">],</span>
<span class="w">    </span><span class="nt">"DURATION"</span><span class="p">:</span><span class="w"> </span><span class="mf">3.0</span>
<span class="w">  </span><span class="p">},</span>
<span class="w">  </span><span class="err">...</span>
<span class="p">],</span>
</code></pre></div>

<p>And then in your GLSL:</p>
<div class="codehilite"><pre><span></span><code><span class="kt">vec3</span><span class="w"> </span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kt">vec3</span><span class="p">(</span><span class="mf">0.0</span><span class="p">);</span>
<span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">mix</span><span class="p">(</span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="p">(</span><span class="mf">1.0</span><span class="p">,</span><span class="mf">0.5</span><span class="p">,</span><span class="mf">0.0</span><span class="p">),</span><span class="w"> </span><span class="n">color1</span><span class="p">);</span>
<span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">mix</span><span class="p">(</span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="p">(</span><span class="mf">0.0</span><span class="p">,</span><span class="mf">1.0</span><span class="p">,</span><span class="mf">0.5</span><span class="p">),</span><span class="w"> </span><span class="n">color2</span><span class="p">);</span>
<span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">mix</span><span class="p">(</span><span class="n">color</span><span class="p">,</span><span class="w"> </span><span class="kt">vec3</span><span class="p">(</span><span class="mf">0.5</span><span class="p">,</span><span class="mf">0.0</span><span class="p">,</span><span class="mf">1.0</span><span class="p">),</span><span class="w"> </span><span class="n">color3</span><span class="p">);</span>
</code></pre></div>

<h2 id="images">Images</h2>
<p>The <code>"IMAGES"</code> key allows you to bundle image files with your scene and easily access them as <code>sampler2D</code> uniforms in the shader. Image files should be added to a directory within the <code>.synScene</code> folder called <code>"images"</code>. They must be one of the following formats: <code>.jpg</code>, <code>.jpeg</code>, <code>.png</code>. Synesthesia will load the image at any given resolution.</p>
<p>The <code>"IMAGES"</code> key should contain an array of objects, each of which defines an individual image to import. Each image object should have two keys:</p>
<table>
<thead>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>"NAME"</code></td>
<td>The variable name assigned to the image. This string will automatically become available as a <code>sampler2D</code> uniform in <code>main.glsl</code>. To sample the image at the current pixel, use <code>texture(imageName, _uv);</code></td>
</tr>
<tr>
<td><code>"PATH"</code></td>
<td>The path to the image file in relation to <code>scene.json</code></td>
</tr>
</tbody>
</table>
<p>The overall structure should look something like this:</p>
<div class="codehilite"><pre><span></span><code><span class="nt">"IMAGES"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w">  </span><span class="p">{</span><span class="nt">"NAME"</span><span class="p">:</span><span class="w"> </span><span class="s2">"myTexture"</span><span class="p">,</span><span class="w"> </span><span class="nt">"PATH"</span><span class="p">:</span><span class="s2">"images/asphalt.png"</span><span class="p">},</span>
<span class="w">  </span><span class="p">{</span><span class="nt">"NAME"</span><span class="p">:</span><span class="w"> </span><span class="s2">"cityScape"</span><span class="p">,</span><span class="w"> </span><span class="nt">"PATH"</span><span class="p">:</span><span class="s2">"images/bwcity.jpg"</span><span class="p">},</span>
<span class="w">  </span><span class="err">...</span>
<span class="p">]</span>
</code></pre></div></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>