Guest User

Untitled

a guest
Oct 15th, 2019
96
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