harunpehlivan

console.clear();

class Test {
  constructor(index) {
    this.loadTest(index);
  }
  
  loadTest(index) {
    let tests = this.tests();
    this.data = this.normalize(tests[index]);

harunpehlivan

console.clear();

class Test {
  constructor(index) {
    this.initializeGlobals();
    this.loadTest(index);
  }
  
  initializeGlobals() {
    this.finestResolution = 64;

harunpehlivan

<input type="range" min="2" max="100" step="2" value="4" />

harunpehlivan

console.clear();

class Drawer {
  constructor({ quads, height, width }) {
    this.w = width;
    this.h = height;
    this.quads = quads;
    this.quadW = width / quads;
    this.quadH = height / quads;
    this.initializeCanvas();

harunpehlivan

<button>Run</button>
<ul>
  <li data-scale="1.00000"></li>
  <li data-scale="0.50000"></li>
  <li data-scale="0.25000"></li>
  <li data-scale="0.12500"></li>
  <li data-scale="0.06250"></li>
  <li data-scale="0.03125"></li>
</ul>

harunpehlivan

<header>
  <select>
    <option value="3">3 Points</option>
    <option value="4" selected>4 Points</option>
    <option value="5">5 Points</option>
    <option value="6">6 Points</option>
  </select>

  <button>Refresh</button>
</header>

harunpehlivan

<header>
  <select>
    <option value="1">3 Points</option>
    <option value="2">9 Points</option>
    <option value="3" selected>27 Points</option>
    <option value="4">81 Points</option>
  </select>

  <button>Refresh</button>
</header>

harunpehlivan

<header>
  <input type="range" min="1" max="500" step="10" value="20" />
  <button>Refresh</button>
</header>

<main>
  <div>
    <canvas height="1200" width="1200"></canvas>
  </div>
</main>

harunpehlivan

<div>
  <select id="scale"></select>
  <select id="start"></select>
</div>
<canvas height="800" width="800"></canvas>

harunpehlivan

<div><span><strong>Life</strong> Gen 1 → Gen 8</span></div>
<div><span><strong>Message</strong> Gen 1 ← Gen 8</span></div>
<div>
  <canvas height="1200" width="1200"></canvas>
</div>