index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Visual Noises @ ramesaliyev</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
</head>
<body>
  <canvas id="canvas"></canvas>
  <div class="root">
    <div class="panel">
      <div class="panel-header">
        <h2 class="page-title">Visual<br />Noises</h2>
      </div>
      <div class="panel-body">
        <div>
          <div class="input-wrapper">
            <div class="input-name">Preset</div>
            <div class="input-content">
              <select id="presetSelect" class="input-element input-select">
                <option value="none" selected>Custom</option>
                <option value="dancing-mountains">Dancing Mountains</option>
                <option value="rainy-clouds">Rainy Clouds</option>
                <option value="dream-clouds">Dream Clouds</option>
              </select>
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Visualisation</div>
            <div class="input-content">
              <select id="visualisationSelect" class="input-element input-select">
                <option value="1d-line" selected>1D Line</option>
                <option value="1d-colorful-line">1D Colorful Line</option>
                <option value="1d-color-gradient">1D Color Gradient</option>
                <option value="1d-rgb-lines">1D RGB Lines</option>
                <option value="1d-ball">1D Ball</option>
                <option value="1d-colorful-ball">1D Colorful Ball</option>
                <option value="1d-radius-ball">1D Radius Ball</option>
                <option value="1d-colorful-triangle">1D Colorful Triangle</option>
                <option value="2d-grayscale-image">2D Grayscale</option>
                <option value="2d-colorful-image">2D Colorful</option>
                <option value="2d-marble-image">2D Marble</option>
                <option value="2d-colorful-marble-image">2D Colorful Marble</option>
                <option value="2d-wood-image">2D Wood</option>
                <option value="2d-colorful-wood-image">2D Colorful Wood</option>
                <option value="2d-terrain">2D Terrain</option>
              </select>
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Noise Algorithm</div>
            <div class="input-content">
              <select id="methodSelect" class="input-element input-select">
                <option value="white-noise">White Noise</option>
                <option value="value-noise-2d" selected>Value Noise</option>
                <option value="perlin-noise-2d">Perlin Noise</option>
              </select>
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Filter</div>
            <div class="input-content">
              <select id="filterSelect" class="input-element input-select">
                <option value="none">None</option>
                <option value="cosine">Cosine</option>
                <option value="smoothstep" selected>SmoothStep</option>
                <option value="fade">Fade</option>
              </select>
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Output Filter</div>
            <div class="input-content">
              <select id="outputFilterSelect" class="input-element input-select">
                <option value="none" selected>None</option>
                <option value="turbulance">Turbulance</option>
              </select>
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Offset</div>
            <div class="input-content">
              <input id="offsetInput" class="input-element" type="number" />
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Offset Increment Speed</div>
            <div class="input-content">
              <input id="speedInput" class="input-element" type="number" />
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Frequency</div>
            <div class="input-content">
              <input id="frequencyInput" class="input-element" type="number" />
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Amplitude</div>
            <div class="input-content">
              <input id="amplitudeInput" class="input-element" type="number" />
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Octave</div>
            <div class="input-content">
              <input id="octaveInput" class="input-element" type="number" />
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Octave Lacunarity</div>
            <div class="input-content">
              <input id="lacunarityInput" class="input-element" type="number" />
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Octave Gain</div>
            <div class="input-content">
              <input id="gainInput" class="input-element" type="number" />
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Actions</div>
            <div class="input-content">
              <button id="drawButton" class="input-element input-button">Draw</button>
              <button id="playPauseButton" class="input-element input-button" style="color:yellowgreen">Auto Draw</button>
              <button id="incrementOffsetButton" class="input-element input-button">Increment Offset</button>
              <button id="resetOffsetButton" class="input-element input-button">Reset Offset</button>
            </div>
          </div>
          <div class="input-wrapper">
            <div class="input-name">Seed</div>
            <div class="input-content">
              <input id="seedInput" class="input-element" type="number" />
            </div>
          </div>
          <div class="input-wrapper input-checkbox-wrapper">
            <label class="input-content pointer-cursor flex-row">
              <input id="leaveTailInput" class="input-element input-checkbox" type="checkbox" />
              <div class="input-label">Leave Tail</div>
            </label>
          </div>
          <div class="input-wrapper input-checkbox-wrapper">
            <label class="input-content pointer-cursor flex-row">
              <input id="applyDefaultsInput" class="input-element input-checkbox" type="checkbox" checked />
              <div class="input-label">Apply Defaults</div>
            </label>
          </div>
          <div class="input-wrapper input-checkbox-wrapper">
            <label class="input-content pointer-cursor flex-row">
              <input id="syncOffsetsInput" class="input-element input-checkbox" type="checkbox" />
              <div class="input-label">Sync Offsets XY</div>
            </label>
          </div>
        </div>
      </div>
      <div class="panel-footer">
        <a class="github-button" href="https://github.com/ramesaliyev/visual-noises" data-icon="octicon-star" data-show-count="true" aria-label="Star ramesaliyev/visual-noises on GitHub">Star</a>
        <a class="github-button" href="https://github.com/ramesaliyev/visual-noises/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork ramesaliyev/visual-noises on GitHub">Fork</a>
      </div>
    </div>
  </div>

  <!-- Utils -->
  <script src="utils/misc.js"></script>
  <script src="utils/math.js"></script>
  <script src="utils/draw.js"></script>
  <script src="utils/worker.js"></script>

  <!-- Procedural Generation Methods -->
  <script src="methods/white-noise.js"></script>
  <script src="methods/value-noise.js"></script>
  <script src="methods/perlin-noise.js"></script>

  <!-- Procedural Generation Visualisations -->
  <script src="visualisations/1d-line.js"></script>
  <script src="visualisations/1d-colorful-line.js"></script>
  <script src="visualisations/1d-color-gradient.js"></script>
  <script src="visualisations/1d-rgb-lines.js"></script>
  <script src="visualisations/1d-ball.js"></script>
  <script src="visualisations/1d-colorful-ball.js"></script>
  <script src="visualisations/1d-radius-ball.js"></script>
  <script src="visualisations/1d-colorful-triangle.js"></script>
  <script src="visualisations/2d-grayscale-image.js"></script>
  <script src="visualisations/2d-colorful-image.js"></script>
  <script src="visualisations/2d-marble-image.js"></script>
  <script src="visualisations/2d-colorful-marble-image.js"></script>
  <script src="visualisations/2d-wood-image.js"></script>
  <script src="visualisations/2d-colorful-wood-image.js"></script>
  <script src="visualisations/2d-terrain.js"></script>

  <!-- Screen -->
  <script src="screen/globals.js"></script>
  <script src="screen/canvas.js"></script>
  <script src="screen/ui.js"></script>

  <!-- Core -->
  <script src="core/draw.js"></script>

  <!-- 3rd Party -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html