Travelling Salesman Sketches: Cubic Pathing

script.babel

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();
    this.grid();
  }
  
  initializeCanvas() {
    this.gutter = 10;
    this.pointDi = 8;
    this.pointRad = this.pointDi / 2;
    this.$cvs = document.createElement('canvas');
    this.$ctx = this.$cvs.getContext('2d');
    this.$cvs.width = this.w + (this.gutter * 2);
    this.$cvs.height = this.h + (this.gutter * 2);
    document.body.appendChild(this.$cvs);
  }
  
  grid() {
    this.$ctx.clearRect(0, 0, this.w + this.gutter * 2, this.h + this.gutter * 2);
    this.$ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
    let steps = (this.quads * 2 + 1);
    for (let y = 0; y < steps; y++) {
      let relY = y / (steps - 1) * this.h;
      for (let x = 0; x < steps; x++) {
        let relX = x / (steps - 1) * this.w;
        this.$ctx.fillRect(
          relX + this.gutter - this.pointRad, 
          relY + this.gutter - this.pointRad,
          this.pointDi, 
          this.pointDi
        );
      }
    }
  }
  
  draw(plots, relX, relY, location) {
    this.$ctx.save();
    let transX = -(this.w + this.gutter * 2);
    let transY = -(this.h + this.gutter * 2);
    if (location == 'tl') {
      this.$ctx.scale(1, 1);
    } else if (location == 'tr') {
      this.$ctx.scale(-1, 1);
      this.$ctx.translate(transX, 0);
    } else if (location == 'br') {
      this.$ctx.scale(-1, -1);
      this.$ctx.translate(transX, transY);
    } else if (location == 'bl') {
      this.$ctx.scale(1, -1);
      this.$ctx.translate(0, transY);
    }
    this.$ctx.strokeStyle = 'white';
    this.$ctx.beginPath();
    relX *= this.quadW;
    relY *= this.quadH;
    for (let i = 0; i < plots.length; i++) {
      let method = (i === 0) ? 'moveTo' : 'lineTo';
      let plot = plots[i];
      this.$ctx[method](
        relX + plot[0] * this.quadW + this.gutter, 
        relY + plot[1] * this.quadH + this.gutter
      );
    }
    this.$ctx.stroke();
    this.$ctx.restore();
  }
}

class Pather {
  constructor() {
    this.initializeGlobals();
    this.drawer = new Drawer({
      quads: this.quads,
      width: this.w, 
      height: this.h
    });
    this.calc();
  }
  
  initializeGlobals() {
    this.quads = 4;
    this.w = 800;
    this.h = 600;
    // TODO: will come into play eventually.
    //  Currently unused.
    this.diagonalW = this.w > this.h;
  }
  
  calc() {
    let tl = this.commandTranslator('02 01 00 10 11 22 21');
    let tr = this.commandTranslator('01 00 10 20 21 11 12');
    let br = this.commandTranslator('10 20 21 22 12 11 01 02');
    let bl = this.commandTranslator('22 12 02 01 11 10 00');
    let distance = 0;
    [tl, tr, br, bl].forEach((points) => {
      points.forEach((point, i) => {
        if (i < points.length - 1)
          distance += this.distance(point, points[i + 1]);
      });
    });
    console.log(distance);
    this.drawer.draw(tl, 0, 0, 'tl');
    this.drawer.draw(tr, 1, 0, 'tl');
    this.drawer.draw(br, 1, 1, 'tl');
    this.drawer.draw(bl, 0, 1, 'tl');

    this.drawer.draw(tl, 0, 0, 'tr');
    this.drawer.draw(tr, 1, 0, 'tr');
    this.drawer.draw(br, 1, 1, 'tr');
    this.drawer.draw(bl, 0, 1, 'tr');

    this.drawer.draw(tl, 0, 0, 'br');
    this.drawer.draw(tr, 1, 0, 'br');
    this.drawer.draw(br, 1, 1, 'br');
    this.drawer.draw(bl, 0, 1, 'br');
    
    this.drawer.draw(tl, 0, 0, 'bl');
    this.drawer.draw(tr, 1, 0, 'bl');
    this.drawer.draw(br, 1, 1, 'bl');
    this.drawer.draw(bl, 0, 1, 'bl');
  }
  
  distance(point1, point2) {
    let xDist = (point2[0] - point1[0]) * this.w;
    let yDist = (point2[1] - point1[1]) * this.h;
    return Math.hypot(xDist, yDist);
  }
  
  commandTranslator(command) {
    return command.split(' ').map((cmd) => {
      return cmd.split('').map((i) => { 
        return parseInt(i) / 2;
      });
    });
  }
}

let pather = new Pather();

style.scss

html, body {
  height: 100%;
}

body {
  background: #212121;
}

canvas {
  margin: 1rem auto;
  width: calc(100% - 2rem);
  max-width: 600px;
  height: auto;
  display: block;
  background: black;
}

travelling-salesman-sketches-cubic-pathing.markdown

Travelling Salesman Sketches: Cubic Pathing

Attempting a pattern that connects cubic areas together. Obviously it isnt working yet. Transitioned to Hamlitonian Pathing

A Pen by HARUN PEHLİVAN on CodePen.

License.