Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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(); };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement