ProcGen Noise Studio

index.html

<h1>Noise Studio: Art from Code </h1>
<div id="main">
  <div id="drawspace">
    <canvas width="256" height="256" id="canvas"></canvas>
  </div>
  <div id="workspace">
    <h4 onclick="changeTab(1);" class="tabIcon" id="icon1">Noise Generation</h4>
    <div id="tab1" class="tab">
      <div>
        <h4 class="subHead">Dimensions</h4><br>
        <label for="imgWidth">Width   </label>
        <input type="number" id="imgWidth" value="128" style="width:48px;"></input>
        <label for="imgHeight">Height </label>
        <input type="number" id="imgHeight" value="128" style="width:48px;"></input>
      </div>
      <div>
        <table style="margin-top:16px;">
          <tr>
            <th>Open Oct</th>
            <td><button class="octButton" onclick="openOct(0);">0</button></td>
            <td><button class="octButton" onclick="openOct(1);">1</button></td>
            <td><button class="octButton" onclick="openOct(2);">2</button></td>
            <td><button class="octButton" onclick="openOct(3);">3</button></td>
            <td><button class="octButton" onclick="openOct(4);">4</button></td>
            <td><button class="octButton" onclick="openOct(5);">5</button></td>
            <td><button class="octButton" onclick="openOct(6);">6</button></td>
            <td><button class="octButton" onclick="openOct(7);">7</button></td>
            <td><button class="octButton" onclick="openOct(8);">8</button></td>
            <td><button class="octButton" onclick="openOct(9);">9</button></td>
          </tr>
          <tr>
            <th>Use Oct</th>
            <td><input type="checkbox" id="useOct0" checked="true"></input>
            </td>
            <td><input type="checkbox" id="useOct1" checked="true"></input>
            </td>
            <td><input type="checkbox" id="useOct2" checked="true"></input>
            </td>
            <td><input type="checkbox" id="useOct3" checked="true"></input>
            </td>
            <td><input type="checkbox" id="useOct4" checked="true"></input>
            </td>
            <td><input type="checkbox" id="useOct5"></input>
            </td>
            <td><input type="checkbox" id="useOct6"></input>
            </td>
            <td><input type="checkbox" id="useOct7"></input>
            </td>
            <td><input type="checkbox" id="useOct8"></input>
            </td>
            <td><input type="checkbox" id="useOct9"></input>
            </td>
          </tr>
        </table>
      </div>
      <h4 id="octHeader" class="subHead">Octave Settings: 0</h4><br>
      <h4 class="subHead">Octave Parameters</h4><br>
      <div class="subtab" id="octSettings">
        <label for="pointSpacing">Point Spacing</label>
        <input type="number" id="pointSpacing" style="width:48px;"></input>
        <label for="poissonTries">Poisson Tries</label>
        <input type="number" id="poissonTries" style="width:48px;"></input>
      </div><br>
      <h4 class="subHead">Summation Parameters</h4><br>
      <div class="subtab" id="sumSettings">
        <label for="simplexSum">Use Simplex</label>
        <input type="checkbox" id="simplexSum"></input>
        <label for="effRadSum">Effective Radius</label>
        <input type="number" id="effRadSum" style="width:48px;"></input><br> Summation Function: f(x,y,dot,dist)<br>
        <textarea rows="3" id="functSum" style="width:300px;"></textarea>
      </div><br>
      <h4 class="subHead">Cellular Parameters</h4><br>
      <div class="subtab" id="cellSettings">
        <label for="simplexCell">Use Simplex</label>
        <input type="checkbox" id="simplexCell"></input>
        <label for="effRadCell">Effective Radius</label>
        <input type="number" id="effRadCell" style="width:48px;"></input><br> Cellular Function: f(x,y,dot,dist)<br>
        <textarea rows="3" id="functCell" style="width:300px;"></textarea><br> Voronoi Value Function: f(x,y,vectx,vecty)<br>
        <textarea rows="3" id="functList" style="width:300px;"></textarea>
      </div><br>
      <button onclick="genOctaves()">Generate</button>
    </div>
    <h4 onclick="changeTab(2);" class="tabIcon" id="icon2">Combine Function</h4>
    <div id="tab2" class="tab">
      <h4 class="subHead">Arguments: (x,y,w,h)</h4><br>
      <textarea rows="32" cols="40" id="combineGen"></textarea><br>
      <h4 class="subHead">Returns: [height,red,green,blue]<h5><br>
      <button onclick="combine()">Generate</button>
    </div>
    <h4 onclick="changeTab(3);" class="tabIcon" id="icon3">Image Settings</h4>
      <div id="tab3" class="tab">
        <label for="grayScaleBool">Use Grayscale</label>
        <input type="checkbox" id="grayScaleBool" onclick="renderBegin()">
        <label for "2.5DBool">Use 2.5D</label>
        <input type="checkbox" id="2.5DBool" onclick="renderBegin()"><br>
        <label for="extrusion" id="extslide">Extrusion: 0.00</label>
        <input type="range" min="0" max="1" value="0" step=".01" id="extrusion"></input><br>
        <label for="shading" id="shdslide">Shading: 1.00</label>
        <input type="range" min="0" max="1" value="1" step=".01" id="shading"></input><br>
        <label for="lightBright" id="brslide">Brightness: 1.00</label>
        <input type="range" min="0" max="4" value="1" step=".01" id="lightBright"></input><br>
        <label for="lightVert" id="vrtslide">Vertical Angle: 0.00pi</label>
        <input type="range" min="0" max=".5" value="0" step=".01" id="lightVert"></input><br>
        <label for="lightHori" id="hrzslide">Horizontal Angle: 0.00pi</label>
        <input type="range" min="0" max="2" value="0" step=".01" id="lightHori"></input><br>
        <br><button onclick="renderBegin()">Render</button>
      </div>
      <h4 onclick="changeTab(4);" class="tabIcon" id="icon4">Save and Open</h4>
      <div id="tab4" class="tab">
        <button onclick="document.getElementById('loadsave').value=getProjectString()">Get Current Project</button><button onclick="executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();">Execute Code</button><br>
        <textarea rows="64" cols="40" id="loadsave"></textarea>
      </div>
      <h4 onclick="changeTab(5);" class="tabIcon" id="icon5">Examples</h4>
      <div id="tab5" class="tab">
        <button onclick="setSand()">Sand</button>
        <button onclick="setGrass()">Grass</button>
        <button onclick="setBricks()">Bricks</button>
        <button onclick="setStones()">Stones</button>
        <button onclick="setAgate()">Agate</button>
        <button onclick="setRock()">Rock</button>
        <button onclick="setLava()">Lava</button>
        <button onclick="setHive()">Hive</button>
        <button onclick="setGlass()">Glass</button>
        <button onclick="setChip()">Chip</button>
        <button onclick="setWood()">Wood</button>
        <button onclick="setWall()">Wall</button>
        <button onclick="setAlgae()">Algae</button>
        <button onclick="setMountain()">Mountain</button>
        <button onclick="setLunar()">Lunar</button>
        <button onclick="setMartian()">Martian</button>
      </div>
      <h4 onclick="changeTab(6);" class="tabIcon" id="icon6">Help</h4>
      <div id="tab6" class="tab">
        <ul>
          <li><p  onclick="aboutTool()">This Tool</p>
            <ul>
              <li  onclick="aboutHowWorks()">How it works</li>
              <li  onclick="aboutCreator()">About the creator</li>
            </ul>
          </li>
          <li><p onclick="aboutNoise()">Noise Generation</p>
            <ul>
              <li><p onclick="aboutOctaveSettings()">Octave Settings</p>
                <ul>
                  <li><p onclick="aboutOctaveParameters()">Octave Parameters<p>
                  </li>
                  <li><p onclick="aboutSummationParameters()">Summation Parameters</p>
                    <ul>
                      <li onclick="aboutSimpSum()">Simplex</li>
                      <li onclick="aboutEffRadSum()">Effective Radius</li>
                      <li onclick="aboutFunctSum()">Summation Function</li>
                    </ul>
                  </li>
                  <li><p onclick="aboutCellularParameters()">Cellular Parameters</p>
                    <ul>
                      <li onclick="aboutSimpCell()">Simplex</li>
                      <li onclick="aboutEffRadCell()">Effective Radius</li>
                      <li onclick="aboutFunctCell()">Cellular Function</li>
                      <li onclick="aboutFunctVor()">Voronoi Value Function</li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li><p onclick="aboutCombine()"> Combine Function</p>
            <ul>
              <li onclick="aboutSupported()">Useful Functions</li>
              <li onclick="aboutOutput()">How to output</li>
            </ul>
          </li>
          <li><p onclick="aboutImageSettings()">Image Settings</p>
            <ul>
              <li onclick="about2_5D()">Using 2.5D</li>
            </ul>
          </li>
          <li onclick="aboutSaveAndOpen()">Save and Open</li>
          <li onclick="aboutExamples()">Examples</li>
        </ul>
      </div>
    </div>
  <p id="info">INFORMATION<br>Click on topics within the 'Help' tab to learn.</p>  
  </div>
  
  <script>
    changeTab(5);
    function changeTab(tab) {
        for(tab2=1;tab2<=6;tab2++)
        {
        document.getElementById(`tab${tab2}`).setAttribute("style","width:0px;margin-left:0px;padding-left:0px;")
        }
      document.getElementById(`tab${tab}`).setAttribute("style","width:320px;margin-left:-4px;padding-left:4px;")
      }
    function adjust() {
      var newH = Math.max(256, document.getElementById("canvas").height);
      document.getElementById("tab1").style.height = newH + "px";
      document.getElementById("tab2").style.height = newH + "px";
      document.getElementById("tab3").style.height = newH + "px";
      document.getElementById("tab4").style.height = newH + "px";
      document.getElementById("tab5").style.height = newH + "px";
      document.getElementById("tab6").style.height = newH + "px";
    
      document.getElementById("icon1").style.height = newH + "px";
      document.getElementById("icon2").style.height = newH + "px";
      document.getElementById("icon3").style.height = newH + "px";
      document.getElementById("icon4").style.height = newH + "px";
      document.getElementById("icon5").style.height = newH + "px";
      document.getElementById("icon6").style.height = newH + "px";
    }
    
    var slider1 = document.getElementById("shading");
    slider1.oninput = function() {
      var output = document.getElementById("shdslide");
      var str = (Math.floor(100 * slider1.value) / 100).toString();
      if (str.length == 3) {
        str = str + "0";
      } else if (str.length == 1) {
        str = str + ".00";
      }
      output.innerHTML = "Shading: " + str;
      if (map.length * map[0].length <= 40000) {
        renderBegin();
      }
    };
    var slider2 = document.getElementById("extrusion");
    slider2.oninput = function() {
      var output = document.getElementById("extslide");
      var str = slider2.value.toString();
      if (str.length == 1) {
        str = str + ".00";
      }
      if (str.length == 3) {
        str = str + "0";
      }
      output.innerHTML = "Extrusion: " + str;
      if (map.length * map[0].length <= 40000) {
        renderBegin();
      }
    };
    var slider3 = document.getElementById("lightBright");
    slider3.oninput = function() {
      var output = document.getElementById("brslide");
      var str = (Math.floor(100 * slider3.value) / 100).toString();
      if (str.length == 3) {
        str = str + "0";
      } else if (str.length == 1) {
        str = str + ".00";
      }
      output.innerHTML = "Brightness: " + str;
      if (map.length * map[0].length <= 40000) {
        renderBegin();
      }
    };
    var slider4 = document.getElementById("lightVert");
    slider4.oninput = function() {
      var output = document.getElementById("vrtslide");
      var str = (Math.floor(100 * slider4.value) / 100).toString();
      if (str.length == 3) {
        str = str + "0";
      } else if (str.length == 1) {
        str = str + ".00";
      }
      output.innerHTML = "Vertical Angle: " + str + "pi";
      if (map.length * map[0].length <= 40000) {
        renderBegin();
      }
    };
    var slider5 = document.getElementById("lightHori");
    slider5.oninput = function() {
      var output = document.getElementById("hrzslide");
      var str = (Math.floor(100 * slider5.value) / 100).toString();
      if (str.length == 3) {
        str = str + "0";
      } else if (str.length == 1) {
        str = str + ".00";
      }
      output.innerHTML = "Horizontal Angle: " + str + "pi";
      if (map.length * map[0].length <= 40000) {
        renderBegin();
      }
    };
  </script>
  <script>
    aboutTool();
    function aboutTool() {
      document.getElementById("info").innerHTML = "This tool was not created for the purposes of creating high-quality content. It is intended only for the purposes of allowing people to experiment with the kinds of noise functions at the core of procedural generation, either out of their own curiosity or so that they can better formulate what they want to do in their own implementations of procedural generation. I began work towards making this tool while still using Gamemaker. I was itching to make something with the noise functions that I had implemented, but it was too tedious to write, compile, wait, judge, and try again. I needed something for quick and efficient experimentation. After creating my own equation evaluator (imagine creating something like Javascript's eval() from scratch) to allow me to experiment, but still suffering from Gamemaker's speed, I shifted to Javascript on Thanksgiving, 2017. One platform change and two new languages later, this tool is essentially complete.";
    }
    function aboutHowWorks() {
      document.getElementById("info").innerHTML = "HOW IT WORKS<br>Most noise functions are locked on a grid, with pixels checking relevant vectors/points based on what square or triangle in the lattice they are in. However, I decided to work backwards: every point/vector now scans a circular area of pixels around it. Not only does this simplify the logic of noise functions, it also allows me to abandon grids entirely: I can make both gradient and cellular noise generate from a poisson disk sample, making directional artifacts virtually impossible. Once the noisemaps are created, the string put into 'Combine Function' is turned into a function evaluated for every point in the output map, and then is rendered.";
    }
    function aboutCreator() {
      document.getElementById("info").innerHTML = "I strive to make myself somewhat of a Renaissance man. My passion is music, and I hope to pursue a degree and later a career in the Biosciences, so programming is just a hobby. I began prgoramming with GameMaker drag and drop in May of 2017, switched to GML by June, and abandoned Gamemaker entirely for Javascript and HTML as of Thanksgiving.";
    }
    function aboutNoise() {
      document.getElementById("info").innerHTML =
        "NOISE<br>Noise is the cornerstone of procedural texture and terrain generation. In this section of the UI, you can select which octaves you want to be evaluated, and change the parameters of those octaves to your liking. Here, you can make ordinary Simplex, Voronoi, and Worley noise, or make a function of your own. In order to make your procedural images interesting, you will need to generate multiple octaves, which can be accessed in 'Combine Function' to create a detailed output. First, set the width and height of the image you plan to output. Keep in mind that the output image is twice the size, in pixels, of these dimensions; I decided that high resolution was superfluous for this tool. Note that noisemaps with an area greater 40000 will not render immediately upon changing image settings, and very large areas take longer to generate. Next, choose which octaves you plan to generate and then edit their values. You can choose whether or not an octave will be generated by ticking the box, as well as open an octave to edit by clicking a button. The noisemaps created by each octave can be accessed via nSum(octave,x,y), nVor(octave,distance,x,y)[index], and nWor(octave,distance,x,y).";
    }
    function aboutOctaveSettings() {
      document.getElementById("info").innerHTML =
        "OCTAVE SETTINGS <br>These settings allow for the parameterization of each individual octave. Here, you can edit things that both affect the entire octave, but also parametrize Summation noise (including but not limited to Gradient and/or Simplex noise) and Cellular noise (including Worley and Voronoi Noise).";
    }
    function aboutOctaveParameters() {
      document.getElementById("info").innerHTML =
        "OCTAVE PARAMETERS<br>These settings affect all parts of the octave, both Summation noise and Cellular noise. 'Point Spacing' affects both the minimum distance between points in a poisson disk sample, and is also the side length of the triangles in Simplex noise. A high number for Point Spacing will result in noise with a low frequency; a low number will result in high-frequency noise. 'Poisson Tries'is primarily for optimization and does not drastically affect the overall output. What it does: in the Poisson Disk Sample algorithm, the algorithm keeps checking random coordinates until it finds a set of coordinates that is not within the radius of any other point. Poisson Tries is the number of times that the algorithm will check random coordinates before it assumes the grid to be full, ending generation of the Poisson Disk Sample. ";
    }
    function aboutSummationParameters() {
      document.getElementById("info").innerHTML =
        "SUMMATION PARAMETERS<br>This type of noise is created by adding every value evaluated for each index together. This can be used to make Poisson-based gradient noise, Simplex Noise, or metaball-like noise.";
    }
    function aboutSimpSum() {
      document.getElementById("info").innerHTML ="SIMPLEX: SUMMATION<br>Checking this box will lock the gradient vectors to the vertices of a triangular grid rather than the points of a poisson disk sample. This is useful for making Simplex noise. Please note that this will cause the noisemap to become discontinuous, causing shading artifacts at the sides of the image.";
    }
    function aboutEffRadSum() {
      document.getElementById("info").innerHTML =
        "EFFECTIVE RADIUS: Summation<br>This is the radius around the Poisson point or Simplex vertex within which the Summation function will evaluate, forming a circle of influence. This also affects the 'Dist' parameter of the value function; at the edges of the circle, Dist is always 1, and at the center, 0. It is recommended that the the effective radius of the summation is 2 to 3 times that of point point spacing.";
    }
    function aboutFunctSum() {
      document.getElementById("info").innerHTML =
        "SUMMATION FUNCTION<br>This is the equation that will be evaluated over every point in the circular domain of the Summation noise. Dist is the distance from the point or vertex as a fraction of the effective radius, x and y are the horizontal and vertical distances from the point or vertex (in pixels), dot is the dot product with the vector, and vectx and vecty are the components of the gradient vector. Make sure that this function will return a numerical value. Suggested functions are ‘dot/exp(11*pow(dist,4))’, ‘dot*(2*pow(dist,3)-3*dist*dist)’, and ‘dot*(6*pow(dist,5)-15*pow(dist,4)+10*pow(dist,3))’.Eliminating ‘dot’ from these creates metaball-like patterns.";
    }
    function aboutCellularParameters() {
      document.getElementById("info").innerHTML =
        "CELLULAR PARAMETERS<br>This is noise that is created by keeping track of the first, second, and third lowest values evaluated for a piel by the cellular value function, as well as the indexes of the points that made those values. This is useful for creating Worley an Voronoi noise.";
    }
    function aboutSimpCell() {   document.getElementById("info").innerHTML =
"SIMPLEX: CELLULAR<br>Checking this box will lock the gradient vectors to the vertices of a triangular grid rather than the points of a poisson disk sample. This is rarely used for cellular noise, and without the influence of the dot product, will generally produce a honeycomb pattern. Please note that this will cause the noisemap to become discontinuous, causing shading artifacts at the sides of the image.";
    }
    function aboutEffRadCell() {
      document.getElementById("info").innerHTML =
        "EFFECTIVE RADIUS: CELLULAR<br>This is the radius around the Poisson point or Simplex vertex within which the Cellular function will evaluate, forming a circle of influence. This also affects the dist parameter of the value function; at the edges of the circle, dist is always 1, and at the center, 0. It is recommended that the the effective radius of the scellular noise is at least 3 times that of point point spacing or the Poisson tries value is extremely high, else there will be empty patches.";
    }
    function aboutFunctCell() {document.getElementById("info").innerHTML ="CELLULAR FUNCTION<br>This is the equation that will be evaluated over every point in the circular domain of the Summation noise. Dist is the distance from the point or vertex as a fraction of the effective radius, x and y are the horizontal and vertical distances from the point or vertex (in pixels), dot is the dot product with the vector, and vectx and vecty are the components of the gradient vector. Make sure that this function will return a numerical value. A function of ‘dist’ is usually sufficient for cellular noise, but experimentation is highly encouraged.";
    }
function aboutFunctVor() {
      document.getElementById("info").innerHTML =
        "VORONOI VALUE FUNCTION<br>This function will be evaluated for every point in the poisson disk sample, and its value can be accessed by nVor(octave,distance,x,y) inside the Custom Combine section. This is a powerful tool useful for creating things like colorful Voronoi noise. Because sometimes you may need it to return multiple values, this function can return arrays and strings as well.";
    }
    function aboutCombine() {document.getElementById("info").innerHTML ="COMBINE<br>Combine functions allow you to put together different noisemaps into a single coherent result. This textarea works by turning what you typed into a function and running that function on every pixel of the output image. The input arguments that your combine function can use are the coordinates (x,y) and dimensions (w,h). Note that the output image has pixels that are in fact 2 pixels wide by 2 pixels high (when not extruded).";
    }
    function aboutSupported() {document.getElementById("info").innerHTML ="USEFUL FUNCTIONS<br>This implementation has several functions that make it easier for you to make output images. There are 3 functions for accessing noisemaps. The first is nSum(octave,x,y). nSum() will retrieve the value of at a specified coordinate in the Summation noisemap of a specified octave. You don’t need to worry about the coordinates going out of bounds for any of the noise functions; they are wrapped automatically. There is also nWor(octave, n,x,y) and nVor(octave,distance,x,y). nWor() gives a height value no the ‘nth’ nearest point, specified by ‘distance’, whereas nVor returns a value set by the Voronoi Value Fuction.";
    }
    function aboutOutput() {
      document.getElementById("info").innerHTML =
        "COMBINE OUTPUT<br>There are 4 variables that are set to '0' before the combine function is evaluated and returned and stored in a grid after the function is evaluated. These are 'height', 'red', 'green', and 'blue'. Setting height allows for 3d effects, and setting red, green, and blue allow for interesting and colorful textures. All these numbers should be within the range of 0-255.";
    }
    function aboutImageSettings() {
      document.getElementById("info").innerHTML =
        "IMAGE SETTINGS<br>vThese parameters allow for the image to be displayed in different ways after it has already been generated. All of these work dynamically until the size of the image is greater than 40000. Otherwise, you will need to press the render button. If you wish to disregard what you set for red, green, and blue in 'Combine Function' and instead shade based only on what is set for height, check 'Use Grayscale'. If you wish to enable lighting effects, check 'Use 2.5D'.";
    }
    function about2_5D() {
      document.getElementById("info").innerHTML =
        "USE 2.5D<br>Checking this box allows for 3d effects without true 3d graphics. These include lighting and a simple extrusion effect for the illusion of depth. It will use the height value set in the combine function all effects. 'Extrusion' controls how much the image is ‘bumped up’ to provide a sense of depth, using the height value from the Combine function. 'Shading' varies the steepness of the normal vectors to alter the sharpness and contrast. 'Brightness' affects the intensity of the lighting vector. A value of 0 will always be pitch black and 4 will often cause the image to be mostly white.'Vertical Angle' is the vertical angle of the lighting vector. A value of 0pi will make the lighting vector perpendicular to the image, and value of .5pi will make the lighting vector completely horizontal. 'Horizontal Angle' determines the direction from which the lighting vector is pointing. From 0pi to 2pi, the light comes in from left, top, right, bottom, and back to left.";
    }
    function aboutSaveAndOpen() {
      document.getElementById("info").innerHTML =
        "SAVE AND OPEN<br>This allows you to save your parameters as a string of commands that, if placed back into the textarea, allow you to load the project. Click ‘Get Current Project’ to turn your current parameters into a string. Copy and paste a string of commands into the textarea and click in order to load them and generate. You can also use this to execute any other Javascript code, but it is recommended to use the console for that purpose.";
    }
    function aboutExamples() {
      document.getElementById("info").innerHTML = "EXAMPLES<br>These not only serve as proof that this tool is capable of making some interesting-looking image, but they also serve as inspiration. I highly recommend that you try to pick them apart so that you can make your own. Currently, there is only a relatively small handfull of examples her. However, I will continue to add more from time to time, and if anyone contacts me with a particularly good example may see theirs added.";
    }
  </script>

procgen-noise-studio.markdown

ProcGen Noise Studio

Since I began programming, I have always been fascinated by procedural generation. So much so, that I started programming using GameMaker Studio, only to be so preoccupied with procgen that I never got around to making a game! After performance issues made GameMaker too slow for my interests, I switched to Javascript and HTML, and picked up where I left off.

I began work towards this tool, originally with Gamemaker, to help me more easily experiment with noise functions. I later changed my mind and decided that I wanted something for everyone else to experiment with, too. Although some fine-tuning and tinkering can produce striking images with this tool, keep in mind that its intended purpose is to allow programmers interested in procedural generation to experiment with different kinds of noise so that they can implement it elsewhere.

A Pen by MacSearlas on CodePen.

License.

script.js

var canvas=document.getElementById("canvas");
var draw=canvas.getContext('2d');
{
function saveOct(oct)//saves all the data in an octave tab
  {
  octaveData[oct]=[];
  octaveData[oct].push(document.getElementById("pointSpacing").value);
  octaveData[oct].push(document.getElementById("poissonTries").value);
  octaveData[oct].push(document.getElementById("functList").value);
  octaveData[oct].push(document.getElementById("simplexSum").checked);
  octaveData[oct].push(document.getElementById("effRadSum").value);
  octaveData[oct].push(document.getElementById("functSum").value);
  octaveData[oct].push(document.getElementById("simplexCell").checked);
  octaveData[oct].push(document.getElementById("effRadCell").value);
  octaveData[oct].push(document.getElementById("functCell").value);
  }
function defaultOct(oct)//Fills an octave tab with default data
  {
  octaveData[oct]=[];
  octaveData[oct].push(64/Math.pow(2,oct));//0
  octaveData[oct].push(64+oct);//1
  octaveData[oct].push("[x,y]");//2
  octaveData[oct].push(false);//3
  octaveData[oct].push(128/Math.pow(2,oct));//4
  octaveData[oct].push("dot/Math.exp(11*Math.pow(dist,4))");//5
  octaveData[oct].push(false);//6
  octaveData[oct].push(128/Math.pow(2,oct));//7
  octaveData[oct].push("dist");//8
  //console.log(octaveData[oct]);
  }
function loadOct(oct)//Loads an octave tab
  {
  document.getElementById("pointSpacing").value=octaveData[oct][0];
  document.getElementById("poissonTries").value=octaveData[oct][1];
  document.getElementById("functList").value=octaveData[oct][2];  
  document.getElementById("simplexSum").checked=octaveData[oct][3];
  document.getElementById("effRadSum").value=octaveData[oct][4];
  document.getElementById("functSum").value=octaveData[oct][5];
  document.getElementById("simplexCell").checked=octaveData[oct][6];
  document.getElementById("effRadCell").value=octaveData[oct][7];
  document.getElementById("functCell").value=octaveData[oct][8];  
  }
function openOct(oct)//Saves current octave and loads another
  {
  //console.log("Attempted to open");
  saveOct(octave);
  octave=oct;
  loadOct(oct);
  document.getElementById("octHeader").innerHTML = `Octave settings: ${oct}`;
  }
function openOct2(oct)
  {
  octave=oct;
  loadOct(oct);
  document.getElementById("octHeader").innerHTML = `Octave settings:${oct}`;
  }
var map=[]//Height,red,green,blue
function combine()
  {
  //console.log("combine attempted")
  var w=gridSum[0].length;
  var h=gridSum[0][0].length;
  canvas.width=w*2;
  canvas.height=h*2;
  map=gridBlank(w,h,[0,0,0,0]);
  var equ=new Function('x','y','w','h','var height=0;var red=0; var blue=0;var green=0;'+document.getElementById('combineGen').value+'return [height,red,blue,green]');
  //console.log("checkpoint 4");
  for (x=0;x<w;x++)
    {
    for (y=0;y<h;y++)
      {
      map[x][y]=equ(x,y,w,h);
      }
    }
  //console.log("Combine registered")
  renderBegin();
  }
}
//Noise Functions
{
function gridBlank(w,h,fill)
  {
   var array=[]//Declares array
   for(x=0;x<w;x++)//Cycles columns
      {
      array.push([]);//Adds a column
      for(y=0;y<h;y++)//Cycles positions of columsn
          {
          array[x].push(fill)//Makes an entry
          }
      }
   return array;
  }
function gridRescale(grid)
 {
 var max=0;
 var min=Math.pow(2,16);
 var w=grid.length;
 var h=grid[0].length;
 for(x=0;x<w;x++)//Cycles columns
      {
      for(y=0;y<h;y++)//Cycles positions of columsn
          {
          max=Math.max(grid[x][y],max);
          min=Math.min(grid[x][y],min);
          }
      }
 for(x=0;x<w;x++)//Cycles columns
      {
      for(y=0;y<h;y++)//Cycles positions of columsn
          {
          grid[x][y]=(grid[x][y]-min)/(max-min);
          }
      }
 }
var gridSum=[];
var gridWor=[];
var gridVor=[];
var vorList=[];
var poisson=gridBlank(256,256,0);
for (ind=0;ind<10;ind++)
  {
  vorList.push([]);
  gridSum.push(gridBlank(256,256,0));
  gridWor.push([gridBlank(256,256,0),gridBlank(256,256,0),gridBlank(256,256,0),]);
  gridVor.push([gridBlank(256,256,0),gridBlank(256,256,0),gridBlank(256,256,0),]);
  }
function circleNoise(oct,x,y,inSimplex,point)//Places a cirlce of values in the noisemap
  {
  var pointSpacing=octaveData[oct][0];
  var poissonTries=octaveData[oct][1];
  var functList=new Function('x','y','point','vectx','vecty',"return ("+ octaveData[oct][2]+")");
  var sumSimplex=octaveData[oct][3];
  var effRadSum=Math.floor(octaveData[oct][4]);
  var functSum=new Function('dist','dot','x','y','point','vectx','vecty',"return ("+ octaveData[oct][5]+")");
  var cellSimplex=octaveData[oct][6];
  var effRadCell=Math.floor(octaveData[oct][7]);
  var functCell=new Function('dist','dot','x','y','point','vectx','vecty',"return ("+ octaveData[oct][8]+")");
  
  //console.log(functSum); console.log(functCell);
  var width=poisson.length;
  var height=poisson[0].length;
    
  var radius=Math.floor(Math.max(effRadCell,effRadSum,pointSpacing));
  var theta=Math.random()*2*Math.PI;//Angle for gradient vector
  var vectx=Math.cos(theta);//X compnent of vector
  var vecty=Math.sin(theta);//Y component of vector
  if (cellSimplex==inSimplex)
    {vorList[oct].push(functList(x,y,point,vectx,vecty))};
  var width2;
  if (inSimplex==true){width2=pointSpacing*Math.ceil(width/(pointSpacing*Math.sqrt(3)/2))}
  else {width2=width}
  for(xx=-radius;xx<radius;xx++)
    {
    var radius2=Math.floor(Math.sqrt(Math.abs(radius*radius-xx*xx)));
    for(yy=-radius2;yy<radius2;yy++)
      {
      var arrx=x+xx-width2*Math.floor((x+xx)/width2);//Coordinates of pixel in image
      var arry=y+yy-height*Math.floor((y+yy)/height);
      if (arrx<width)
      {
      if ((Math.sqrt(xx*xx+yy*yy)<pointSpacing)&&(inSimplex==false)){poisson[arrx][arry]=1}
      if ((Math.sqrt(xx*xx+yy*yy)<effRadSum)&&(sumSimplex==inSimplex))//Adds value to summation noisemap
        {
        var eux=xx/effRadSum;
        var euy=yy/effRadSum;
        var dot=vectx*eux+vecty*euy;
        var dist=Math.sqrt(eux*eux+euy*euy);
        gridSum[oct][arrx][arry]+=functSum(dist,dot,eux,euy,point,vectx,vecty);
        }
      if ((Math.sqrt(xx*xx+yy*yy)<effRadCell)&&(cellSimplex==inSimplex))
        {
        var eux=xx/effRadCell;
        var euy=yy/effRadCell;
        var dot=vectx*eux+vecty*euy;
        var dist=Math.sqrt(eux*eux+euy*euy);
        var val=functCell(dist,dot,eux,euy,point,vectx,vecty);
        if (val<=gridWor[oct][0][arrx][arry])
          {
          gridWor[oct][2][arrx][arry]=gridWor[oct][1][arrx][arry];
          gridWor[oct][1][arrx][arry]=gridWor[oct][0][arrx][arry];
          gridWor[oct][0][arrx][arry]=val;
          gridVor[oct][2][arrx][arry]=gridVor[oct][1][arrx][arry];
          gridVor[oct][1][arrx][arry]=gridVor[oct][0][arrx][arry];
          gridVor[oct][0][arrx][arry]=point;
          }
        else if (val<=gridWor[oct][1][arrx][arry])
          {
          gridWor[oct][2][arrx][arry]=gridWor[oct][1][arrx][arry];
          gridWor[oct][1][arrx][arry]=val;
          gridVor[oct][2][arrx][arry]=gridVor[oct][1][arrx][arry];
          gridVor[oct][1][arrx][arry]=point; 
          }
        else if (val<=gridWor[oct][2][arrx][arry])
          {
          gridWor[oct][2][arrx][arry]=val;
          gridVor[oct][2][arrx][arry]=point; 
          }
        }
      }//SImplex bracket
      }
    }
  //console.log("checkpoint 3")
  }
function noiseHub(w,h,oct)
  {
  //console.log("attempting to generate one octave")
  var pointSpacing=octaveData[oct][0];
  var poissonTries=octaveData[oct][1];
  //var functList=octaveData[oct][2];
  var sumSimplex=octaveData[oct][3];
  //var effRadSum=Math.floor(octaveData[oct][4]);
  //var functSum=new Function('dist','dot','relX','relY',octaveData[oct][5]);
  var cellSimplex=octaveData[oct][6];
  //var effRadCell=Math.floor(octaveData[oct][7]);
  //var functCell=new Function('dist','dot','relX','relY',octaveData[oct][8]);
  poisson=gridBlank(w,h,0);//Poisson areas
  var done=false;
  var point=0;//ID of point. Will be used for Voronoi.
  if ((sumSimplex==false)||(cellSimplex==false))
    {
    do
      {//Finds coord in grid that are not within poisson distance of another poi
      var x=Math.floor(Math.random()*w);
      var y=Math.floor(Math.random()*h);
      var tries=0;
      do{ x=Math.floor(Math.random()*w);y=Math.floor(Math.random()*h);tries++}
      while ((poisson[x][y]==1)&&(tries<poissonTries))//Only does until grid likely full
      if (tries>=poissonTries){done=true;}//If likely full, this will be last loop
      //Places circle into noisemap
      //console.log("checkpoint 2")
      circleNoise(oct,x,y,false,point)
      point+=1;
      }
    while (done==false)
    }
   point=0;
   if ((sumSimplex==true)||(cellSimplex==true))
     {
     var hSimp=Math.ceil(h/pointSpacing);
     var wSimp=1+Math.ceil(w/(pointSpacing*Math.sqrt(3)/2));
     for(x=0;x<wSimp;x++)
       {
       for(y=0;y<hSimp;y++)
         {
         var xx=Math.floor(x*pointSpacing*Math.sqrt(3)/2);  
         var yy=Math.floor((y+(x%2)/2)*pointSpacing);
         circleNoise(oct,xx,yy,true,point);
         point+=1;
         }
       }
     }
  }
function genOctaves()
  {
  //console.log("attempting to generate octaves")
  saveOct(octave);
  var width=document.getElementById("imgWidth").value;
  var height=document.getElementById("imgHeight").value;
  vorList=[];
  gridSum=[];//Summation values
  gridWor=[];//Cellular min
  gridVor=[];
  for(octInd=0;octInd<10;octInd++) 
    {
    var fillval=Math.pow(2,16);
    vorList.push([]);
    gridSum.push(gridBlank(width,height,0));//Summation values 
   gridWor.push([gridBlank(width,height,fillval),gridBlank(width,height,fillval),gridBlank(width,height,fillval)]);//Cellular min
    gridVor.push([gridBlank(width,height,0),gridBlank(width,height,0),gridBlank(width,height,0)]);//Cellular regions
    if (document.getElementById(`useOct${octInd}`).checked==true)
      {
      //console.log("checkpoint 1");
      noiseHub(width,height,octInd);
      gridRescale(gridSum[octInd]);
      }
    }
  //console.log("Octavegen registered");
  combine();
  adjust();
  }
//For retrieving noise functions
function nSum(oct,x,y)
  {
  var grid=gridSum[oct]
  var w=grid.length;
  var h=grid[0].length;
  var nx=Math.floor(x-w*Math.floor(x/w));  
  var ny=Math.floor(y-h*Math.floor(y/h));
  return grid[nx][ny];
  }
function nWor(oct,type,x,y)
  {
  var grid=gridWor[oct][type]
  var w=grid.length;
  var h=grid[0].length;
  var nx=Math.floor(x-w*Math.floor(x/w));  
  var ny=Math.floor(y-h*Math.floor(y/h));
  return grid[nx][ny];
  }
function nVor(oct,type,x,y)
  {
  var grid=gridVor[oct][type]
  var w=grid.length;
  var h=grid[0].length;
  var nx=Math.floor(x-w*Math.floor(x/w));  
  var ny=Math.floor(y-h*Math.floor(y/h));
  var index=grid[nx][ny];
  return vorList[oct][index]
  }
}
//Draw Functions
{

function render2d()
  {
  var w=map.length;
  var h=map[0].length;
  canvas.width=2*w;
  canvas.height=2*h;
  var useGray=document.getElementById("grayScaleBool").checked;
  for (x=0;x<w;x++)
    {
    for(y=0;y<h;y++)
      {
      var dot=1;
      var color="red";
      if (useGray==true)
        {
        var shade=Math.min(255,Math.floor(map[x][y][0]));
        color=`rgb(${shade},${shade},${shade})`;
        }
      else
        {
        var red=Math.floor(Math.min(255,map[x][y][1]));
        var blue=Math.floor(Math.min(255,map[x][y][2]));
        var green=Math.floor(Math.min(255,map[x][y][3]));
        color=`rgb(${red},${green},${blue})`;
        }
      draw.fillStyle=color;
      draw.fillRect(2*x,2*y,2,2);
      }
    }
  } 
  function renderBegin()
    {
    var useDim=document.getElementById("2.5DBool").checked;
    if (useDim==false){render2d()}
    else {render3d()}
    }
}
function render3d()
  {
  var w=map.length;
  var h=map[0].length;
  var useGray=document.getElementById("grayScaleBool").checked;
  var extrusion=document.getElementById("extrusion").value/4;
    
  canvas.width=2*w;
  canvas.height=2*h;
  var lightVert=document.getElementById("lightVert").value//AsNumber
  var lightHori=document.getElementById("lightHori").value//AsNumber
  var lightBright=document.getElementById("lightBright").value//AsNumber
  var lightVectX=lightBright*Math.cos(lightHori*Math.PI)*Math.sin(lightVert*Math.PI);
  var lightVectY=lightBright*Math.sin(lightHori*Math.PI)*Math.sin(lightVert*Math.PI);
  var lightVectZ=lightBright*Math.cos(lightVert*Math.PI);
  
  //console.log(renderMap[0][0].length)
  var shading=Math.pow(document.getElementById("shading").value,2);
  for (x=0;x<w;x++)
    {
    var drawWrap=[];
    for(y=0;y<h;y++)
      {
      //Finds the lighting value
      var xLeft=x-1-w*Math.floor((x-1)/w);
      var xRight=x+1-w*Math.floor((x+1)/w);
      var yUp=y-1-h*Math.floor((y-1)/h);
      var yDown=y+1-h*Math.floor((y+1)/h);
      var slopeX=4*shading*(map[xRight][y][0]-map[xLeft][y][0])/2;//U(1,0,slope)
      var slopeY=4*shading*(map[x][yDown][0]-map[x][yUp][0])/2;//V(0,1,slope)
      var mag=Math.sqrt(slopeX*slopeX+slopeY*slopeY+1)
      var normX=slopeX/mag;
      var normY=slopeY/mag;
      var normZ=1/mag;
      var dot=(slopeX*lightVectX+slopeY*lightVectY+lightVectZ)/mag;//Dot product for lighting
      //Finds the color to draw
      var red=0;
      var green=0;
      var blue=0;
      if (useGray==true)
        {
        red=Math.floor(Math.min(255,dot*map[x][y][0]));
        green=red;blue=red;
        }
      else
        {
        red=Math.floor(Math.min(255,dot*map[x][y][1]));
        blue=Math.floor(Math.min(255,dot*map[x][y][2]));
        green=Math.floor(Math.min(255,dot*map[x][y][3]));
        }
      var color=`rgb(${red},${green},${blue})`;
      draw.fillStyle=color;
      var elevate=Math.max(2*extrusion*map[x][y][0],0);
      //Draws the pixel
      var newY=2*y-elevate;
      draw.fillRect(2*x,newY,2,2+elevate);
      if (newY<0){drawWrap.push([(-newY),color])};//Things that need to be drawn from the bottom
      }
    for(ind=0;ind<drawWrap.length;ind++)
      {
      draw.fillStyle=drawWrap[ind][1];
      var elevate=drawWrap[ind][0];
      draw.fillRect(2*x,2*h-elevate,2,2+elevate);
      }
    }
  }  
console.log("hello")
//genOctaves()
 
function getProjectString()
  {
  var width=document.getElementById('imgWidth').value;
  var height=document.getElementById('imgHeight').value;
  var grayscale=document.getElementById('grayScaleBool').checked;
  var dimension=document.getElementById('2.5DBool').checked;
  var extrusion=document.getElementById('extrusion').value;
  var shading=document.getElementById('shading').value;
  var brightness=document.getElementById('lightBright').value;
  var vertical=document.getElementById('lightVert').value;
  var horizontal=document.getElementById('lightVert').value;
  var str1=`setGlobals(${width},${height},${grayscale},${dimension},${extrusion},${shading},${brightness},${vertical},${horizontal});`
for(octInd=0;octInd<10;octInd++)
  {
  if (document.getElementById(`useOct${octInd}`).checked)
    {
    //str1=str1+`document.getElementById(${octstr}).checked=true;`
    str1=str1+`document.getElementById("useOct${octInd}").checked=true;octaveData[${octInd}]=[`;
    for (ind=0;ind<9;ind++)
      {
      if (ind==2||ind==5||ind==8)
        {str1=str1+'"'+octaveData[octInd][ind]+'"';}
      else {str1=str1+octaveData[octInd][ind];}
      if (ind!=8){str1=str1+','}
     }
    str1=str1+"];"
    //str1=str1+`octaveData[${octInd}]=[${octaveData[octInd]}]`;
    }
  }
str1=str1+`document.getElementById('combineGen').value="`+document.getElementById("combineGen").value+';"';
str1=str1.replace(/(\r\n|\n|\r)/gm," ");
return str1; 
  }
function setGlobals(width,height,grayscale,dimension,extrusion,shading,brightness,vertical,horizontal)
  {
  document.getElementById('imgWidth').value=width;
  document.getElementById('imgHeight').value=height;
  document.getElementById('grayScaleBool').checked=grayscale;
  document.getElementById('2.5DBool').checked=dimension;
  document.getElementById('extrusion').value=extrusion;
  document.getElementById('shading').value=shading;
  document.getElementById('lightBright').value=brightness;
  document.getElementById('lightVert').value=vertical;
  document.getElementById('lightVert').value=horizontal;
  }
function executeString(string)
  {
  var str1=string.replace(/(\r\n|\n|\r)/gm," ");
  var funct=new Function(str1);
  funct();
  }
  
function cos(n){return Math.cos(n)}  
function sin(n){return Math.sin(n)}
function tan(n){return Math.tan(n)}
function acos(n){return Math.acos(n)}  
function asin(n){return Math.asin(n)}
function atan(n){return Math.atan(n)}
function atan2(n,m){return Math.atan2(n,m)}
function abs(n){return Math.abs(n)}  
function floor(n){return Math.floor(n)}
function ceil(n){return Math.ceil(n)}
function round(n){return Math.round(n)}  
function random(){return Math.random()}
function randomRange(n,m){return (n+(m-n)*Math.random())}
function pow(n,m){return Math.pow(n,m)}  
function sqrt(n){return Math.sqrt(n)}
function sqr(n){return n*n}
function cube(n){return n*n*n}  
function cbrt(n){return Math.pown(n,1/3)}
function exp(n){return Math.exp(n)}
function log(n){return Math.log(n)/Math.log(10)}  
function ln(n){return Math.log(n)}
function logBase(n,m){return Math.log(n)/Math.log(m)}
function exp(n){return Math.exp(n)}
function equ(n,m){if (n==m){return 1} else{return 0}}
function more(n,m){if (n>m){return 1} else{return 0}}
function less(n,m){if (n<m){return 1} else{return 0}}
function atleast(n,m){if (n>=m){return 1} else{return 0}}
function atmost(n,m){if (n<=m){return 1} else{return 0}}
  
var octave=0;
var octaveData=[];
for(oct=0;oct<10;oct++){defaultOct(oct);}
loadOct(0);
document.getElementById("combineGen").value="height=128*nSum(0,x,y)*(1+nSum(1,x,y)*(1+nSum(2,x,y)*(1+nSum(3,x,y)*(1+nSum(4,x,y)+(1+nSum(5,x,y))))));var gray=height;red=gray;blue=gray;green=gray;";
setGlobals(128,128,false,true,0.69,0.28,1.04,0.21,0.21);
//genOctaves(0);
  
 function cancelOct()
  {
    for(oct=0;oct<10;oct++)
      {
        document.getElementById(`useOct${oct}`).checked=false;
      }
  }
  
function setSand(){
  cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,1,0.15,1.55,0.35,0.35);document.getElementById("useOct0").checked=true;octaveData[0]=[8,64,"[x,y]",false,16,"dot/Math.exp(11*Math.pow(dist,4))",false,128,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[32,65,"[x,y]",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,64,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[16,66,"floor(2*sqr(random()))",false,32,"dot/Math.exp(11*Math.pow(dist,4))",false,32,"dist"];document.getElementById('combineGen').value="var nx=x+16*cos(6*nSum(1,x,y));var ny=y+16*sin(6*nSum(1,x,y));var sand=128*(sqr(nWor(1,0,nx,ny)));var grit=1/2+nSum(0,8*x,8*y);var pebble=64*Math.max(0,nVor(2,0,x,y)*(nWor(2,1,x,y)-nWor(2,0,x,y))-1/3);height=pebble+sand;if (pebble==0){red=220*grit; green=200*grit; blue=140*grit;};if (pebble>0){red=140; green=120; blue=90;};;"`
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();}
  
function setGrass(){cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,false,0.07,0.1,1.04,0.25,0.25);document.getElementById("useOct0").checked=true;octaveData[0]=[16,64,"[x,y]",false,128,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"dot*(atmost(x*vecty-y*vectx-(1-dist)/8,0)*atleast(x*vecty-y*vectx+(1-dist)/8,0)+atmost(x*vecty-y*vectx-(1-dist)/64,0)*atleast(x*vecty-y*vectx+(1-dist)/64,0)/4)"];document.getElementById("useOct1").checked=true;octaveData[1]=[8,65,"[x,y]",false,16,"dot/Math.exp(11*Math.pow(dist,4))",false,64,"dist"];document.getElementById('combineGen').value="var grass=128*(1/4-nWor(0,0,x,y)); var grit=nSum(1,4*x,4*y); if (nWor(0,0,x,y)<-1/16){red=grass;green=2*grass;} if (nWor(0,0,x,y)>-1/16){red=grit*140;green=grit*120;blue=grit*90} ;;"`
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();}  
  
function setBricks()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0.09,0.17,1.55,0.3,0.3);document.getElementById("useOct0").checked=true;octaveData[0]=[2,64,"[x,y]",false,8,"y/exp(11*dist*dist)",false,32,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[16,65,"[x,y]",false,32,"dot/Math.exp(11*Math.pow(dist,4))",false,64,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[4,66,"[x,y]",false,8,"dot/Math.exp(11*Math.pow(dist,4))",false,32,"dist"];document.getElementById('combineGen').value="var yscale=16; var brick1=(yscale-abs((y%(2*yscale))-yscale)); var xscale=32; var brick2=(xscale-abs(((x+xscale*(floor(y/yscale/2)))%(2*xscale))-xscale)); brick=Math.min(4,brick1,brick2); drip=nSum(0,x,y); height=8*brick*(1+drip/2); var shade=1/2+sqr(nSum(1,x+xscale*(floor(y/yscale/2)),y)); var grit=24*(1+nSum(2,2*x,2*y)); var shade2=6; if (brick==4){shade2=2}; if (height>grit){red=220*shade;green=90*shade;blue=50*shade;}; if (height<=grit){red=shade2*grit;blue=shade2*grit;green=shade2*grit;if(height<32){height=grit-16;}else{height=height-grit/8}};;;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
}
  
function setStones()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0.06,0.51,1.44,0.12,0.12);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"[x,y]",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,64,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[8,65,"[x,y]",false,16,"dot/Math.exp(11*Math.pow(dist,4))",false,24,"dist"];document.getElementById('combineGen').value="var tile=pow(nWor(0,2,x,y)-nWor(0,1,x,y),1/32); height=256*tile*(1+(1+nWor(1,2,x,y))*(nSum(1,x,y))/16); var grit=1+nSum(1,4*x,4*y)*nSum(0,4*x,4*y)-nWor(1,0,x,y); red=100*grit;green=90*sqr(grit);blue=60*sqrt(grit/4);;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
}
  
function setAgate()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,false,0.36,0.01,1.48,0.3,0.3);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"[randomRange(0,255),randomRange(0,255),randomRange(0,255),]",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,64,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[8,65,"[randomRange(0,255),randomRange(0,255),randomRange(0,255),]",false,16,"dot/Math.exp(11*Math.pow(dist,4))",false,24,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[64,66,"[x,y]",false,32,"dot/Math.exp(11*Math.pow(dist,4))",false,128,"dist"];document.getElementById('combineGen').value="var deposit=1-nWor(2,0,x,y)*(1/2+nWor(0,0,x,y)*(1+nWor(1,0,x,y))); var step=128; var color=[nVor(1,0,step*deposit,step*deposit),nVor(1,1,step*deposit,step*deposit),nVor(1,2,step*deposit,step*deposit)]; red=(color[0][0]+color[0][1]+color[0][2])/3; green=(color[1][0]+color[1][1]+color[1][2])/3; blue=(color[2][0]+color[2][1]+color[2][2])/3; height=128*deposit;;;;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
}
  
function setRock()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0,0.28,0.9,0.11,0.11);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"[randomRange(0,255),randomRange(0,255),randomRange(0,255),]",false,96,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[16,65,"[randomRange(0,255),randomRange(0,255),randomRange(0,255),]",false,48,"dot/Math.exp(11*Math.pow(dist,4))",false,48,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[8,66,"[x,y]",false,24,"dot/Math.exp(11*Math.pow(dist,4))",false,28,"dist"];document.getElementById("useOct3").checked=true;octaveData[3]=[4,67,"[x,y]",false,12,"dot/Math.exp(11*Math.pow(dist,4))",false,12,"dist"];document.getElementById("useOct4").checked=true;octaveData[4]=[2,68,"[x,y]",false,6,"dot/Math.exp(11*Math.pow(dist,4))",false,8,"dist"];document.getElementById('combineGen').value="var stone=(1-nWor(0,2,x,y))*(1+(1-nWor(1,2,x,y))*(1+(1-nWor(2,2,x,y))*(1-nWor(3,2,x,y))*(1+(1-nWor(4,2,x,y)/2)/2)/2)/2);  var tex=(nSum(0,x,y)+nSum(1,x,y)/2+nSum(2,x,y)/3+nSum(3,x,y)/4+nSum(4,x,y)/5)/3; height=stone*128; red=144*(1+tex);green=144*(1+tex);blue=154*(1+tex);;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
  
function setLava()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0.24,0.11,2.73,0.3,0.3);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"[randomRange(0,255),randomRange(0,255),randomRange(0,255),]",false,96,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[16,65,"[randomRange(0,255),randomRange(0,255),randomRange(0,255),]",false,48,"dot/Math.exp(11*Math.pow(dist,4))",false,48,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[8,66,"[x,y]",false,24,"dot/Math.exp(11*Math.pow(dist,4))",false,28,"dist"];document.getElementById("useOct3").checked=true;octaveData[3]=[4,67,"[x,y]",false,12,"dot/Math.exp(11*Math.pow(dist,4))",false,12,"dist"];document.getElementById("useOct4").checked=true;octaveData[4]=[2,68,"[x,y]",false,6,"dot/Math.exp(11*Math.pow(dist,4))",false,8,"dist"];document.getElementById('combineGen').value="var theta=6.28*nSum(0,x,y); var nx=x+16*cos(theta); var ny=y+16*sin(theta); var lava=pow(1-sqrt(abs(nSum(0,nx,ny)*2-1))*sqrt(abs(nSum(1,nx,ny)*2-1))*sqrt(abs(nSum(2,nx,ny)*2-1))*sqrt(abs(nSum(3,nx,ny)*2-1)),24);   var blob=(abs(nSum(0,nx,ny)*2-1))*(1+abs(nSum(1,nx,ny)*2-1)*(1+abs(nSum(2,nx,ny)*2-1)*(1+abs(nSum(3,nx,ny)*2-1)*(1+abs(nSum(4,nx,ny)*2-1))))); height=128*(blob-lava/8); red=(lava+1/16)*128;green=(lava+1/8)*32;;;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
  
function setHive()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0,0.04,4,0.45,0.45);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"[randomRange(0,255),randomRange(0,255),randomRange(0,255),]",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[12,65,"floor(random()*2)",false,48,"dot/Math.exp(11*Math.pow(dist,4))",true,24,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[10,66,"floor(random()*4/3)",false,24,"dot/Math.exp(11*Math.pow(dist,4))",true,20,"dist"];document.getElementById("useOct3").checked=true;octaveData[3]=[32,67,"floor(random()*4/3)",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,12,"dist"];document.getElementById("useOct4").checked=true;octaveData[4]=[14,68,"floor(random()*4/3)",false,64,"dot/Math.exp(11*Math.pow(dist,4))",true,28,"dist"];document.getElementById('combineGen').value="var hex1=Math.max(4*sqr(nWor(1,0,x,y)),nVor(1,0,x,y)/6); var hex2=Math.max(4*sqr(nWor(2,0,x,y)),nVor(2,0,x,y)/6); var hex3=Math.max(4*sqr(nWor(4,0,x,y)),nVor(4,0,x,y)/6); var blob1=pow(2*Math.max(0,nSum(0,x,y)-1/2),1/8); var blob2=pow(2*Math.max(0,nSum(3,x,y)-1/2),1/8); red=255;green=200; if(blob2>0){height=128*(1+blob2*hex3);} else if(blob1>0){height=128*(1/2+blob1*hex1);} else{height=128*hex2;} red=2*height;green=height*8/5; ;;;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
function setGlass()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0,0.31,1.75,0.08,0.08);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"[randomRange(0,255),randomRange(0,255),randomRange(0,255),x,y]",false,4,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[8,65,"[randomRange(0,255),randomRange(0,255),randomRange(0,255)]",false,24,"dot/Math.exp(11*Math.pow(dist,4))",false,24,"dist"];document.getElementById('combineGen').value=" var p1=nVor(0,0,x,y);  var p2=nVor(0,1,x,y);  var x1=p1[3];var y1=p1[4];  var x2=p2[3]; var y2=p2[4];   if(abs(x1-x2)>(w/2)){if (x2>x1){x2-=w}else{x2+=w}} if(abs(x1-x)>(w/2)){if (x2>x){x1-=w;x2-=w}else{x1+=w;x2+=w}}   if(abs(y1-y2)>(h/2)){if (y2>y1){y2-=h}else{y2+=h}} if(abs(y1-y)>(h/2)){if (y2>y){y1-=h;y2-=h}else{y1+=h;y2+=h}}   var poly1=abs(((y1-y2)*(y-(y1+y2)/2)+(x1-x2)*(x-(x1+x2)/2))/32); p3=nVor(1,0,x,y); p4=nVor(1,1,x,y);  red=(3*(p1[0]*2+p2[0])/3+(p3[0]*2+p4[0])/3)/4; green=(3*(p1[1]*2+p2[1])/3+(p3[1]*2+p4[1])/3)/3; blue=(3*(p1[2]*2+p2[2])/3+(p3[2]*2+p4[2])/3)/4; height=(poly1-4)*(1+(1-abs(2*nSum(1,x,y)-1)/2));  if (poly1<4){var gray=16*(4-poly1);red=gray;green=gray;blue=gray;height=(4-poly1)*(8*nSum(1,4*x,4*y))};;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
  
function setChip()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0,0.31,1.31,0.2,0.2);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"floor(2*random())",false,4,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"abs(x)+abs(y)"];document.getElementById("useOct1").checked=true;octaveData[1]=[32,65,"[x,y]",false,24,"dot/Math.exp(11*Math.pow(dist,4))",false,64,"dist"];document.getElementById('combineGen').value="var wire=floor(2*sin(64*(nWor(0,2,x,y)-nWor(0,1,x,y)))); var node=128*(Math.max(0,1/16-abs(Math.max(nWor(1,0,x,y),1/16)-1/12))); var core=nVor(0,0,x,y)*Math.min(Math.max(128*(nWor(0,1,x,y)-nWor(0,0,x,y)-1/6),0),4); if (wire==1){red=200;green=200;blue=128} else {green=64-16*(x%2)*(y%2)} if (Math.max(core,node)>0){red=200;green=200;blue=160} height=Math.max(core,node); if (nWor(1,0,x,y)<1/24){red=0;green=0;blue=0;};;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
function setWood()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0,0.08,0.63,0.09,0.09);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"floor(2*random())",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[16,65,"[x,y]",false,32,"dot/Math.exp(11*Math.pow(dist,4))",false,64,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[4,66,"floor(random()*4/3)",false,8,"dot/Math.exp(11*Math.pow(dist,4))",true,8,"dist"];document.getElementById('combineGen').value="var rings=(6*((y/32+nSum(0,x,y)+nSum(1,x,y)/2+2*pow(1-nWor(0,0,x,y),12))%(1/4)+1/16)); var nx=x+4*cos(rings); var ny=y+16*sin(rings); var light=nSum(2,nx,ny); var shade; if (floor(rings)==1){shade=2*light} else {shade=nSum(2,4*x,4*y)/2} red=187*shade;green=85*shade; height=rings*64;;;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
function setWall()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0.09,0.13,3.38,0.27,0.27);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"abs(y)+x*x",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"sqrt(y*y+x*x*x*x*x*x)"];document.getElementById("useOct1").checked=true;octaveData[1]=[16,65,"[x,y]",false,32,"dot/Math.exp(11*Math.pow(dist,4))",false,48,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[8,66,"floor(random()*4/3)",false,16,"dot/Math.exp(11*Math.pow(dist,4))",false,24,"dist"];document.getElementById('combineGen').value="var stone=pow(4*(nWor(0,1,x,y)-nWor(0,0,x,y)),1/2)*(1+nWor(1,1,x,y)*(1+nWor(2,1,x,y)*(1+nWor(1,2,2*x,2*y)*(1+nWor(2,2,2*x,2*y))))); var stone2=pow(4*(nWor(0,1,x,y+1)-nWor(0,0,x,y+1)),1/2)*(1+nWor(1,1,x,y+1)*(1+nWor(2,1,x,y+1)*(1+nWor(1,2,2*x,2*y+2)*(1+nWor(2,2,2*x,2*y+2))))); var slope=8*(stone2-stone); var moss=stone*slope*(1-nWor(1,0,x,y))*(2-nWor(2,0,x,y))-1/2; red=64;green=64;blue=56; if (moss>0){red=16;green=8*sqrt(Math.max(64*moss,72));blue=16} height=128*stone;;;;;;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
function setAlgae()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0,0.12,1.17,0,0);document.getElementById("useOct0").checked=true;octaveData[0]=[32,64,"[x,y]",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,128,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[16,65,"[x,y]",false,32,"dot/Math.exp(11*Math.pow(dist,4))",false,64,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[8,66,"[x,y]",false,16,"dot/Math.exp(11*Math.pow(dist,4))",false,32,"dist"];document.getElementById("useOct3").checked=true;octaveData[3]=[4,67,"[x,y]",false,8,"dot/Math.exp(11*Math.pow(dist,4))",false,16,"dist"];document.getElementById('combineGen').value="var ex=1/3; var strands=Math.max(4/3-(pow(abs(2*nSum(0,x,y)-1),ex)+pow(abs(2*nSum(1,x,y)-1),ex)/2+pow(abs(2*nSum(2,x,y)-1),ex)/3+pow(abs(2*nSum(3,x,y)-1),ex)/4),0); var cells=(2-(6*nWor(0,0,x,y)))*(3/2-(6*nWor(1,0,x,y)))*(3/2-(6*nWor(2,0,x,y)))*(3/2-(6*nWor(3,0,x,y))); var alga=Math.max(3*strands,cells/2); red=139*(1-alga/2);green=222*(1-alga)+128*alga;blue=199*(Math.max(1-alga*2,0)); height=128*alga;;;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
function setMountain()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0.5,0.22,1.21,0.3,0.3);document.getElementById("useOct0").checked=true;octaveData[0]=[64,64,"[x,y]",false,128,"dot/Math.exp(11*Math.pow(dist,4))",false,192,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[32,65,"[x,y]",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[16,66,"[x,y]",false,32,"dot/Math.exp(11*Math.pow(dist,4))",false,48,"dist"];document.getElementById("useOct3").checked=true;octaveData[3]=[8,67,"[x,y]",false,16,"dot/Math.exp(11*Math.pow(dist,4))",false,24,"dist"];document.getElementById("useOct4").checked=true;octaveData[4]=[4,68,"[x,y]",false,8,"dot/Math.exp(11*Math.pow(dist,4))",false,12,"dist"];document.getElementById("useOct5").checked=true;octaveData[5]=[4,69,"[x,y]",false,24,"dist",false,24,"-atmost(abs(dot),1/32)*(1-dist)"];document.getElementById('combineGen').value="var mount1=nSum(0,x,y)*(1+nSum(1,x,y)*(1+nSum(2,x,y)*(1+nSum(3,x,y)*(1+nSum(4,x,y)+(1+nSum(5,x,y)))))); var mount2=nSum(0,x+1,y)*(1+nSum(1,x+1,y)*(1+nSum(2,x+1,y)*(1+nSum(3,x+1,y)*(1+nSum(4,x+1,y)+(1+nSum(5,x+1,y)))))); var mount3=nSum(0,x,y+1)*(1+nSum(1,x,y+1)*(1+nSum(2,x,y+1)*(1+nSum(3,x,y+1)*(1+nSum(4,x,y+1)+(1+nSum(5,x,y+1)))))); var steep=64*sqrt(sqr(mount1-mount2)+sqr(mount1-mount3)); var grass=1-nWor(5,0,2*x,2*y); height=128*mount1; if (steep<2){if (height<96){green=96*grass;red=32*grass}else{red=128*grass;green=128*grass;blue=128*grass}} else{red=128;green=128;blue=128}; ;;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
function setLunar()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,true,true,0.38,0.27,0.9,0.25,0.25);document.getElementById("useOct0").checked=true;octaveData[0]=[48,64,"floor(2*random())",false,96,"dot/Math.exp(11*Math.pow(dist,4))",false,128,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[24,65,"floor(2*random())",false,48,"dot/Math.exp(11*Math.pow(dist,4))",false,48,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[12,66,"floor(2*random())",false,24,"dot/Math.exp(11*Math.pow(dist,4))",false,24,"dist"];document.getElementById("useOct3").checked=true;octaveData[3]=[24,67,"[x,y]",false,24,"(11*dist*dist*dist*dist-1/8)/exp(14*dist*dist)",false,72,"dist"];document.getElementById('combineGen').value="var crater1=1*nSum(3,x,y)/4-1/8; var rough=(1-nWor(3,2,2*x,2*y))*(1-nWor(3,1,3*x,3*y))*(nWor(3,0,x,y)); var crater2=1.5*nVor(2,0,x,y)*Math.min(sqr(nWor(2,0,x,y))-1/24,0)/2+nVor(1,0,x,y)*Math.min(sqr(nWor(1,0,x,y))-1/24,0); var terra=Math.max((4/3+nSum(0,x,y))/2,sqrt(nSum(1,x,y)+nSum(2,x,y)/2+crater1)); height=128*(terra*(1+rough/2)+crater2);;"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
function setMartian()
{cancelOct();document.getElementById('loadsave').value=`setGlobals(128,128,false,true,0.36,0.18,0.97,0.07,0.07);document.getElementById("useOct0").checked=true;octaveData[0]=[64,64,"[x,y]",false,128,"dot/Math.exp(11*Math.pow(dist,4))",false,192,"dist"];document.getElementById("useOct1").checked=true;octaveData[1]=[32,65,"[x,y]",false,64,"dot/Math.exp(11*Math.pow(dist,4))",false,96,"dist"];document.getElementById("useOct2").checked=true;octaveData[2]=[16,66,"floor(1.1*random())",false,32,"dot/Math.exp(11*Math.pow(dist,4))",false,48,"dist"];document.getElementById("useOct3").checked=true;octaveData[3]=[8,67,"[x,y]",false,16,"dot/Math.exp(11*Math.pow(dist,4))",false,24,"dist"];document.getElementById("useOct4").checked=true;octaveData[4]=[4,68,"[x,y]",false,8,"dot/Math.exp(11*Math.pow(dist,4))",false,12,"dist"];document.getElementById('combineGen').value="var distort=6*(nSum(0,x,y)+nSum(1,x,y)/2+nSum(2,x,y)/4+nSum(3,x,y)/8+nSum(4,x,y)/16); var nx=x+32*cos(distort); var ny=y+32*sin(distort); var terra=(nSum(0,nx,ny)+nSum(1,nx,ny)/2+nSum(2,nx,ny)/4+nSum(3,nx,ny)/8); terra=nSum(0,nx,ny)*(1+nSum(1,nx,ny)*(1+nSum(2,nx,ny)*(1+nSum(3,nx,ny)*(1+nSum(4,nx,ny)/2)/2)/2)/2); var rocks=(4*nVor(2,0,x+nx/2,y+ny/2)*(nWor(2,1,x+nx/2,y+ny/2)-nWor(2,0,x+nx/2,y+ny/2))+nWor(1,2,x,y)/2)*(1-nWor(2,2,x,y))*(1-nWor(3,2,x,y))*(1-nWor(4,2,x,y)); height=128*(terra+2*rocks); if (nVor(2,0,x+nx/2,y+ny/2)==1){shade=4*(1/16+rocks);red=shade*86;green=shade*81;blue=shade*75} else {shade=12*(1/16+rocks);red=shade*199;green=shade*133;blue=shade*101};"`;
executeString(document.getElementById('loadsave').value);openOct2(0);genOctaves();
} 
function setRandom()
  {
  var rand=Math.floor(16*Math.random())
  switch (rand)
    {
    case 0:setSand();break;
    case 1:setGrass();break;
    case 2:setBricks();break;
    case 3:setStones();break;
    case 4:setAgate();reak;
    case 6:setLava();break;
    case 7:setHive();break;
    case 8:setGlass();break;
    case 9:setChip();break;
    case 10:setWood();break;
    case 12:setAlgae();break;
    case 13:setMountain();break;
    case 14:setLunar();break;
    case 15:setMartian();break;
    default:setMartian();break;
    }
  }
 setRandom();

style.css

body{
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/%3E%3Cpath d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
.tab{
  width:320px;
  height:256px;
  overflow-x: hidden;
  transition:.4s;
  writing-mode: horizontal-tb;
  margin-left: -4px;
  padding-left: 4px;
  margin-top:4px;
  border: 2px solid #000;
  border-left: none;
  background-color:rgb(200,200,200);
}
#main{
  display:flex;
  fles-wrap:wrap;
}
canvas{
  border:2px solid #000;
  margin-top:2px;
  background-color:white;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath fill-rule="evenodd" d="M0 0h4v4H0V0zm4 4h4v4H4V4z"/%3E%3C/g%3E%3C/svg%3E');
}
.tabIcon{
  margin: 2px;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  height:256px;
  border:2px solid #000;
  border-radius:5px;
  padding-top:8px;
  background-color:rgb(200,200,200);
}
.subHead{
 margin:0px;
 padding:0px;
 margin-bottom:-12px;
 text-align:center;
}
#workspace{
  margin-left:12px;
  writing-mode: vertical-lr;
}
.octButton{
  padding-top:0px;
  padding-bottom:0px;
  padding-left:2px;
  padding-right:2px;
  margin:0px;
}
td{
  text-align:center;
  padding-top:0px;
  padding-bottom:0px;
  padding-left:0px;
  padding-right:0px;
  margin:0px;
}
p{
  padding:0px;
  margin:0px; 
}
#info{
  margin-top:2px;
  border: 2px solid #000;
  border-radius:5px;
  background-color:rgb(200,200,200);
}