class App {
  constructor() {
    // step
    this.step = 6;

    // draw source image
    const img = document.querySelectorAll('img').forEach(img => {
      const cvs = document.createElement('canvas');
      const ctx = cvs.getContext('2d');
      const w = img.naturalWidth;
      const h = img.naturalHeight;
      cvs.width = w;
      cvs.height = h;
      ctx.drawImage(img, 0, 0);

      // get image data
      const data = ctx.getImageData(0, 0, w, h).data;
      for (let x=0; x<w; x++) {
        for (let y=0; y<h; y++) {
          const i = (y * w + x) * 4;
          const c = ((data[i] + data[i+1] + data[i+2]) / 3) / 255;
          this.crossHatch(ctx, x, y, c);
        }
      }
      document.documentElement.appendChild(cvs);
    });

  }

  check(x, y, angle) {
    const P = {x: 0, y: 0};
    const Q = {x: Math.cos(angle), y: Math.sin(angle)};
    const A = P.y - Q.y;
    const B = Q.x - P.x;
    const C = P.x * Q.y - Q.x * P.y;
    const dist = Math.abs(A*x + B*y + C) / Math.sqrt(A*A + B*B);
    return (dist % this.step) < 1;
  }

  crossHatch(ctx, x, y, t) {
    let res = false;
    /*
    for (let amt = 0.9; amt >= 0; amt -= 0.1) {
      res = (t < amt && this.check(x, y, amt * Math.PI / 2)) || res;
      if (res) {
        break;
      }
    }
    */

    res = (t < 0.9 && x % this.step == 0) || res;
    res = (t < 0.8 && y % this.step == 0) || res;
    res = (t < 0.7 && this.check(x, y, Math.PI / 4)) || res;
    res = (t < 0.6 && this.check(x, y, 3 * Math.PI / 4)) || res;
    res = (t < 0.5 && this.check(x, y, Math.PI / 6)) || res;
    res = (t < 0.4 && this.check(x, y, 3 * Math.PI / 6)) || res;
    res = (t < 0.3 && this.check(x, y, 5 * Math.PI / 6)) || res;
    res = (t < 0.2 && this.check(x, y, Math.PI / 12)) || res;
    res = (t < 0.1) || res;


    if (res) {
      ctx.fillRect(x, y, 1, 1);
    } else {
      ctx.clearRect(x, y, 1, 1);
    }
  }
}

window.onload = () => { const app = new App(); };