SHARE
TWEET

Untitled

a guest Oct 15th, 2019 87 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class App {
  2.   constructor() {
  3.     // step
  4.     this.step = 6;
  5.  
  6.     // draw source image
  7.     const img = document.querySelectorAll('img').forEach(img => {
  8.       const cvs = document.createElement('canvas');
  9.       const ctx = cvs.getContext('2d');
  10.       const w = img.naturalWidth;
  11.       const h = img.naturalHeight;
  12.       cvs.width = w;
  13.       cvs.height = h;
  14.       ctx.drawImage(img, 0, 0);
  15.  
  16.       // get image data
  17.       const data = ctx.getImageData(0, 0, w, h).data;
  18.       for (let x=0; x<w; x++) {
  19.         for (let y=0; y<h; y++) {
  20.           const i = (y * w + x) * 4;
  21.           const c = ((data[i] + data[i+1] + data[i+2]) / 3) / 255;
  22.           this.crossHatch(ctx, x, y, c);
  23.         }
  24.       }
  25.       document.documentElement.appendChild(cvs);
  26.     });
  27.  
  28.   }
  29.  
  30.   check(x, y, angle) {
  31.     const P = {x: 0, y: 0};
  32.     const Q = {x: Math.cos(angle), y: Math.sin(angle)};
  33.     const A = P.y - Q.y;
  34.     const B = Q.x - P.x;
  35.     const C = P.x * Q.y - Q.x * P.y;
  36.     const dist = Math.abs(A*x + B*y + C) / Math.sqrt(A*A + B*B);
  37.     return (dist % this.step) < 1;
  38.   }
  39.  
  40.   crossHatch(ctx, x, y, t) {
  41.     let res = false;
  42.     /*
  43.     for (let amt = 0.9; amt >= 0; amt -= 0.1) {
  44.       res = (t < amt && this.check(x, y, amt * Math.PI / 2)) || res;
  45.       if (res) {
  46.         break;
  47.       }
  48.     }
  49.     */
  50.  
  51.     res = (t < 0.9 && x % this.step == 0) || res;
  52.     res = (t < 0.8 && y % this.step == 0) || res;
  53.     res = (t < 0.7 && this.check(x, y, Math.PI / 4)) || res;
  54.     res = (t < 0.6 && this.check(x, y, 3 * Math.PI / 4)) || res;
  55.     res = (t < 0.5 && this.check(x, y, Math.PI / 6)) || res;
  56.     res = (t < 0.4 && this.check(x, y, 3 * Math.PI / 6)) || res;
  57.     res = (t < 0.3 && this.check(x, y, 5 * Math.PI / 6)) || res;
  58.     res = (t < 0.2 && this.check(x, y, Math.PI / 12)) || res;
  59.     res = (t < 0.1) || res;
  60.    
  61.  
  62.     if (res) {
  63.       ctx.fillRect(x, y, 1, 1);
  64.     } else {
  65.       ctx.clearRect(x, y, 1, 1);
  66.     }
  67.   }
  68. }
  69.  
  70. window.onload = () => { const app = new App(); };
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top