chemicalcrux
/
macrovision


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Macrovision</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="macrovision.css">
  <script src="https://kit.fontawesome.com/10a16c6083.js" crossorigin="anonymous"></script>
  <script src="math.min.js"></script>
  <script src="presets/characters.js"></script>
  <script src="presets/buildings.js"></script>
  <script src="presets/landmarks.js"></script>
  <script src="presets/species.js"></script>
  <script src="presets/objects.js"></script>
  <script src="presets/fiction.js"></script>
  <script src="presets/food.js"></script>
  <script src="presets/naturals.js"></script>
  <script src="presets/vehicles.js"></script>
  <script src="presets/cities.js"></script>
  <script src="presets/pokemon.js"></script>
  <script src="presets/scenes.js"></script>
  <script src="media/attribution.js"></script>
  <script src="macrovision.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=0.75, user-scalable=0" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="How big are they anyway?" />
  <meta property="og:title" content="Macrovision" />
  <meta property="og:description" content="How big are they anyway?" />
  <meta property="og:image" content="https://crux.sexy/images/macrovision.png" />
  <link rel="icon" href="https://crux.sexy/images/macrovision.ico">
</head>

<body class="toggle-bottom-name toggle-top-name toggle-scale">
  <script type="text/javascript">
    window.onerror = function(msg, url, line, col, error) {
      alert("An error occured. Show all of this to chemicalcrux:\n\n" + msg + "\n" + url + "\n" + "line: " + line + "\n" + "col: " + col + "\nerror: " + error);
    }
  </script>
  <input hidden id="file-upload-picker" type='file' multiple>
  <div id="help-menu">
    <div id="table-of-contents-holder">
      <ul id="table-of-contents">
        <li><button id="close-help"><i class="fas fa-times"></i></button></li>
      </ul>
    </div>
    <div id="help-contents-holder">
      <div id="help-contents">
        <h2>Overview</h2>

        <p>Macrovision is a tool for visualizing sizes. You can create, scale, and pose a variety of silhouettes,
          ranging from galactic structures to individual atoms.</p>

        <p>This tool was created by me, <b>chemicalcrux</b>!</p>

        <p>You can join the Discord server to report bugs and see what's new. If you've found the site helpful, consider
          supporting me on Ko-Fi, too!</p>

        <a href="https://discord.gg/vqcKVV6"><img src="./logos/discord.svg" alt="Link to Discord"></a>
        <a href="https://ko-fi.com/chemicalcrux"><img src="./logos/ko-fi.svg" alt="Link to Ko-Fi"></a>

        <h2>Adjusting the View</h2>

        <p>Zoom in and out with the scroll wheel. You can also manually change the size of the world in the sidebar, or
          use the <i class="fas fa-search-minus"></i> and <i class="fas fa-search-plus"></i> buttons on the sides of the
          viewer.</p>

        <p>Shift+scroll without anything selected to move horizontally. You can also use the <i
            class="fas fa-arrow-left"></i> and <i class="fas fa-arrow-right"></i> buttons to scroll.</p>

        <p>Alt+scroll to make the world larger or smaller without changing where things are positioned on the screen.
        </p>

        <h2>Creating Entities</h2>

        <p>Each thing in the world is an <b>entity</b>. Macrovision comes with many of these, grouped into categories.
          For example, in the Naturals category, you'll find large bodies such as stars, country borders, and planets.
        </p>

        <p>Each entity has one or more views. For example, many characters have a front view and a back view. Some
          entities are collections of things, like countries &mdash; these have one view for each thing they represent!
        </p>

        <p>If you want to compare something that doesn't exist yet, you can create a custom entity. There are three ways
          you can do this:</p>

        <ul>
          <li>Drop an image into the window</li>
          <li>Select a file from the <i class="fas fa-bars"></i> menu</li>
          <li>Paste an image from your clipboard</li>
        </ul>

        <p>Custom entities aren't saved or exported.</p>

        <h2>Changing Entities</h2>

        <p>Shift+scroll with an entity selected to grow or shrink it. You can also use the <i
            class="fas fa-compress-arrows-alt"></i> and <i class="fas fa-expand-arrows-alt"></i> buttons to adjust size.
        </p>

        <p>When you have an entity selected, you'll see additional sections in the sidebar: one for the entity itself,
          and one for its current view.</p>

        <p>The entity options control things like scale (how big the entity is compared to normal) and display name. You
          can also pick from one or more default sizes.</p>
        <h2>Sharing</h2>

        <p>You can take a screenshot of the current scene with the <b>Screenshot</b> <i class="fas fa-camera"></i>
          button. The screenshot will be copied to your clipboard. You can also use the <b>Download</b> <i
            class="fas fa-download"></i> button to download the current scene as an image. This currently only includes
          the scale and the silhouettes themselves; it won't include things like names.</p>

        <p>If you want to show a scene to someone else, you can use <b>Permalink</b> <i class="fas fa-link"></i> to get
          a permalink. It'll be pretty large, since it represents where everything is. I'll probably add a link
          shortener at some point!</p>

        <p>You can also export the current scene as text with <b>Export</b> <i class="fas fa-share"></i>, copying it to
          your clipboard. You can import a scene from the clipboard with <b>Import</b> <i
            class="fas fa-share flipped"></i>.</p>
      </div>
    </div>
  </div>
  <div id="popout-menu">

  </div>
  <div id="menubar">
    <button id="toggle-menu">
      <i class="fas fa-bars"></i>
    </button>
    <span class="menubar-group">
      <button id="copy-screenshot">
        <i class="fas fa-camera"></i>
      </button>
      <button id="save-screenshot">
        <i class="fas fa-download"></i>
      </button>
    </span>
    <span class="menubar-group" id="spawners">

    </span>
    <span class="menubar-group">
      <button id="open-help">
        <i class="far fa-question-circle"></i>
        <span class="sr-only">Help</span>
      </button>
    </span>
  </div>
  <div id="main-area">
    <div id="options" class="">
      <a href="https://docs.google.com/forms/d/e/1FAIpQLScRC-okDZ3FtzDTkbqSrpj5_OGD-1Vl-VYizOK3QM6quus11g/viewform?usp=sf_link"
        class="options-banner">Submit your<br>character!</a>
      <h3 class="options-header">World Info</h3>
      <div id="options-world">
        <div class="options-label">
          World height
        </div>
        <div class="options-row">
          <input class="options-field-numeric" type="number" id="options-height-value" min="1" value="10">
          <select class="options-field-unit" id="options-height-unit">
          </select>
        </div>
        <div class="options-row">
          <button class="options-button" id="options-world-fit">Fit to entities</button>
        </div>
        <div class="options-row">
          <input type="checkbox" id="options-show-extra">
          <label for="options-show-extra">Show extra options</label>
        </div>
        <div class="options-block options-block-optional">
          <div class="options-row">
            <input type="checkbox" id="options-world-autofit">
            <label for="options-world-autofit">Auto-size world</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-names">
            <label for="options-world-show-names">Names over entities</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-bottom-names" checked>
            <label for="options-world-show-bottom-names">Names at bottom</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-top-names" checked>
            <label for="options-world-show-top-names">Arrows for very large entities</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-height-bars">
            <label for="options-world-show-height-bars">Height bars</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-entity-glow">
            <label for="options-world-show-entity-glow">Glowing edges</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-bottom-cover">
            <label for="options-world-show-bottom-cover">Opaque ground</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-scale" checked>
            <label for="options-world-show-scale">Scale</label>
          </div>
        </div>
      </div>
      <div class="options-label">
        Selection:
      </div>
      <div class="options-row">
        <select id="options-selected-entity" class="options-selector">
          <option id="options-selected-entity-none">None</option>
        </select>
      </div>
      <div class="options-row">
        <button id="delete-entity">
          <i class="fas fa-trash-alt symbol-button"></i>
          <span class="sr-only">Delete Entity</span>
        </button>
      </div>
      <h3 class="options-header" id="entity-category-header">Entity Options</h3>
      <div class="options-category" id="entity-category">
        <div class="options-label">
          View
        </div>
        <select class="options-selector" id="entity-view"></select>
        <div class="options-label">
          Ordering
        </div>
        <div class="options-two-buttons" id="options-ordering">
          <button id="options-order-back">Toward back</button>
          <div id="options-order-display"></div>
          <button id="options-order-forward">Toward front</button>
        </div>
        <div class="options-label">
          Sizes
        </div>
        <div class="options-block" id="options-entity-defaults">
        </div>
        <span id="options-entity">
        </span>
      </div>
      <h3 class="options-header" id="view-category-header">View Options</h3>
      <div class="options-category" id="view-category">
        <span id="options-view">
        </span>
      </div>
      <h3 class="options-header" id="attribution-category-header">Source</h3>
      <div id="options-attribution">
        <div class="options-label">
          Authors
        </div>
        <div id="options-attribution-authors">
        </div>
        <div class="options-label">
          Owners
        </div>
        <div id="options-attribution-owners">
        </div>
        <div class="options-label">
          Source
        </div>
        <div id="options-attribution-source">
        </div>
      </div>
      <h3 class="options-header" id="scenes-category-header">Preset Scenes</h3>
      <div id="options-scenes">
        <div class="options-row">
          <select class="options-field-picker" id="scene-choices">

          </select>
        </div>
        <div class="options-row">
          <button id="load-scene">
            <i class="fas fa-play-circle symbol-button"></i>
            <span class="sr-only">Load Scene</span>
          </button>
        </div>
      </div>
    </div>
    <div id="world">
      <button class="scroll-button" id="zoom-in">
        <i class="fas fa-search-plus"></i>
      </button>
      <button class="scroll-button" id="zoom-out">
        <i class="fas fa-search-minus"></i>
      </button>
      <button class="scroll-button" id="scroll-left">
        <i class="fas fa-arrow-left"></i>
      </button>
      <button class="scroll-button" id="scroll-right">
        <i class="fas fa-arrow-right"></i>
      </button>
      <button class="scroll-button" disabled id="shrink">
        <i class="fas fa-compress-arrows-alt"></i>
      </button>
      <button class="scroll-button" disabled id="grow">
        <i class="fas fa-expand-arrows-alt"></i>
      </button>
      <button class="scroll-button" disabled id="fit">
        <i class="fas fa-search"></i>
      </button>
      <div id="entities">

      </div>
      <canvas id="display">
      </canvas>
      <div class="bottom-cover"></div>
    </div>
  </div>

</body>

</html>