Travelling Salesman Sketches: Hamiltonian Zoning

index.html

<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>

script.babel

console.clear();

class Solver {
  constructor() {}
  
  draw(point) {
    let w = 600;
    let h = 600;
    let g = 8;
    let di = 6;
    let rad = di / 2;
    if (!this.$cvs) {
      this.$cvs = document.createElement('canvas');
      this.$ctx = this.$cvs.getContext('2d');
      this.$cvs.width = w + (g * 2);
      this.$cvs.height = h + (g * 2);
      document.body.appendChild(this.$cvs);
    } else {
      this.$ctx.clearRect(0, 0, this.$cvs.width, this.$cvs.height);
    }
    
    let x = point[0] * w + g - (di / 2);
    let y = point[1] * h + g - (di / 2);
    let data = {
      x: point[0],
      y: point[1],
      zones: {}
    }
    for (let i = 1; i >= 0.03125; i /= 2) {
      data.zones[i.toFixed(5)] = this.plotter(point[0], point[1], i);
    }

    console.log(data)

    for (let key in data.zones) {
      let zone = data.zones[key]; 
      let size = parseFloat(key);
      let $el = document.querySelector(`[data-scale="${key}"]`);
      let color = `hsl(${size * 240}, 100%, 50%)`;
      $el.style.color = color;
      $el.innerHTML = zone.isCenter ? 'CENTER' : zone.origin.toUpperCase();
      this.$ctx.fillStyle = color;
      this.$ctx.fillRect(
        zone.xoff * (size * w) + g + (w * size / 2) - rad, 
        zone.yoff * (size * h) + g + (h * size / 2) - rad, 
        di, 
        di
      );
      this.$ctx.strokeStyle = color;
      this.$ctx.strokeRect(
        zone.xoff * (size * w) + g, 
        zone.yoff * (size * h) + g, 
        w * size, 
        h * size
      );
    }
    
    this.$ctx.fillStyle = '#fff';
    this.$ctx.beginPath();
    this.$ctx.arc(
      (data.x * w) + g,
      (data.y * h) + g,
      rad, 0, 2 * Math.PI, false
    );
    this.$ctx.fill();
  }
  
  plotter(x, y, whole) {
    let centerProx = 0.3535533905932738;
    let half = whole / 2;
    let relx = (x % whole) / whole;
    let rely = (y % whole) / whole;
    let xoff = Math.floor(x / whole);
    let yoff = Math.floor(y / whole);
    let proxC = safeFloat(Math.hypot(0.5 - relx, 0.5 - rely));
    let isCenter = proxC <= centerProx;
    let origin;

    // top left
    if (relx < 0.5 && rely < 0.5) {
      origin = 'nw';
    // top right
    } else if (relx >= 0.5 && rely < 0.5) {
      origin = 'ne';
    // bottom right
    } else if (relx < 0.5 && rely >= 0.5) {
      origin = 'sw';
    // bottom left
    } else { 
      origin = 'se';
    }
    relx = safeFloat(relx);
    rely = safeFloat(rely);
    let point = { relx, rely, xoff, yoff, proxC, isCenter, origin };
    return point;
  }
}


let solver = new Solver();
solver.draw([Math.random(), Math.random()]);

let $btn = document.querySelector('button');
$btn.addEventListener('click', () => {
  solver.draw([Math.random(), Math.random()]);
});


function safeFloat(float) {
  let res = 1000000000000000;
  return Math.round(float * res) / res;
}

style.scss

html, body {
  height: 100%;
}

body {
  background: #212121;
}

button {
  position: absolute;
  top: 1rem;
  left: calc(50% - 100px);
  width: 200px;
  border: none;
  background: black;
  color: white;
  padding: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.0125em;
  cursor: pointer;
  &:hover {
    opacity: 0.5;
  }
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 9;
}

canvas {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
  max-width: 600px;
  height: auto;
  display: block;
  background: black;
}

travelling-salesman-sketches-hamiltonian-zoning.markdown

Travelling Salesman Sketches: Hamiltonian Zoning

Taking a point and orienting it inside of different scales of square in an effort to associate it with a nw, ne, se, sw corner or the center, whichever it is closest to.

A Pen by HARUN PEHLİVAN on CodePen.

License.