fix: moved all shader logic into lensflare function

1 files changed, 60 insertions, 90 deletions

diff --git a/main.js b/main.js
index 09f3f13..d1e0684 100644
--- a/main.js
+++ b/main.js
@@ -80,81 +80,66 @@ function settings_apply(event) {
   draw(true);
 }
 
-function length(vec) {
-  return Math.sqrt(vec.reduce((acc, e) => acc + e * e, 0))
-}
-function mul(vec, scalar) {
-  return vec.map(e => e * scalar);
-}
-function add(vec_a, vec_b) {
-  return vec_a.map((e, i) => e + vec_b[i]);
-}
-function mix(vec_x, vec_y, scalar) {
-  return add(mul(vec_x, 1 - scalar), mul(vec_y, scalar));
-}
-
-function len_add_mul(vev_a, vec_b, scalar) {
-  
-}
-
 // https://www.shadertoy.com/view/ldSXWK
-function lensflare(u, v, pos_x, pos_y) {
-  const intensity = 1.5;
-  const uv_len = Math.sqrt(u * u + v * v);
-  const uvd_x = u * uv_len;
-  const uvd_y = v * uv_len;
-  const uvd_len = Math.sqrt(uvd_x * uvd_x + uvd_y * uvd_y);
-
-  const uvd_pos_x = uvd_x + pos_x;
-  const uvd_pos_y = uvd_y + pos_y;
-  let temp = (uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y) * .8 * .8
-  const f2 = Math.max(1.0 / (1.0 + 32.0 * (temp)), .0) * 0.1;
-  temp = (uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y) * .85 * .85
-  const f22 = Math.max(1.0 / (1.0 + 32.0 * (temp)), .0) * 0.08;
-  temp = (uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y) * .9 * .9
-  const f23 = Math.max(1.0 / (1.0 + 32.0 * (temp)), .0) * 0.06;
-
-  let uvx_x = u * (1 + 0.5) + uvd_x * 0.5;
-  let uvx_y = v * (1 + 0.5) + uvd_y * 0.5;
-  let uvx_pos_x = uvx_x + pos_x;
-  let uvx_pos_y = uvx_y + pos_y;
-
-  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .4 * .4
-  const f4 = Math.max(0.01 - Math.pow((temp), 1.2), .0) * 6.0;
-  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .45 * .45
-  const f42 = Math.max(0.01 - Math.pow((temp), 1.2), .0) * 5.0;
-  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .5 * .5
-  const f43 = Math.max(0.01 - Math.pow((temp), 1.2), .0) * 3.0;
-
-  uvx_x = u * (1 + 0.4) + uvd_x * 0.4;
-  uvx_y = v * (1 + 0.4) + uvd_y * 0.4;
-  uvx_pos_x = uvx_x + pos_x;
-  uvx_pos_y = uvx_y + pos_y;
-
-  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .2 * .2
-  const f5 = Math.max(0.01 - Math.pow((temp), 2.475), .0) * 2.0;
-  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .4 * .4
-  const f52 = Math.max(0.01 - Math.pow((temp), 2.475), .0) * 2.0;
-  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .6 * .6
-  const f53 = Math.max(0.01 - Math.pow((temp), 2.75), .0) * 2.0;
-
-  uvx_x = u * (1 + 0.5) + uvd_x * 0.5;
-  uvx_y = v * (1 + 0.5) + uvd_y * 0.5;
-  uvx_pos_x = uvx_x - pos_x;
-  uvx_pos_y = uvx_y - pos_y;
-
-  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .3 * .3
-  const f6 = Math.max(0.01 - Math.pow(temp, 0.8), .0) * 6.0;
-  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .325 * .325
-  const f62 = Math.max(0.01 - Math.pow(temp, 0.8), .0) * 3.0;
-  temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .35 * .35
-  const f63 = Math.max(0.01 - Math.pow(temp, 0.8), .0) * 5.0;
-
-  return [
-    ((f2 + f4 + f5 + f6) * 1.3 - uvd_len * .05) * intensity,
-    ((f22 + f42 + f52 + f62) * 1.3 - uvd_len * .05) * intensity,
-    ((f23 + f43 + f53 + f63) * 1.3 - uvd_len * .05) * intensity
-  ];
+function lensflare(pos_x, pos_y) {
+  const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const pixel_count = imgdata.data.length / 4;
+  const aspect_ratio = canvas.width / canvas.height;
+  for (let i = 0; i < pixel_count; i++) {
+    const x = i % canvas.width;
+    const y = i / canvas.width;
+    const u = (x / canvas.width - .5) * aspect_ratio;
+    const v = y / canvas.height - .5;
+
+    const intensity = 1.5;
+    const uv_len = Math.sqrt(u * u + v * v);
+    const uvd_x = u * uv_len;
+    const uvd_y = v * uv_len;
+    const uvd_len = Math.sqrt(uvd_x * uvd_x + uvd_y * uvd_y);
+
+    const uvd_pos_x = uvd_x + pos_x;
+    const uvd_pos_y = uvd_y + pos_y;
+    let temp = uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y
+    const f2 = Math.max(1.0 / (1.0 + 32.0 * (temp * .64)), .0) * 0.1;
+    const f22 = Math.max(1.0 / (1.0 + 32.0 * (temp * .72)), .0) * 0.08;
+    const f23 = Math.max(1.0 / (1.0 + 32.0 * (temp * .81)), .0) * 0.06;
+
+    let uvx_x = u * (1 + 0.5) + uvd_x * 0.5;
+    let uvx_y = v * (1 + 0.5) + uvd_y * 0.5;
+    let uvx_pos_x = uvx_x + pos_x;
+    let uvx_pos_y = uvx_y + pos_y;
+
+    temp = uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y
+    const f4 = Math.max(0.01 - Math.pow((temp * .16), 1.2), .0) * 6.0;
+    const f42 = Math.max(0.01 - Math.pow((temp * .2025), 1.2), .0) * 5.0;
+    const f43 = Math.max(0.01 - Math.pow((temp * .25), 1.2), .0) * 3.0;
+
+    uvx_x = u * (1 + 0.4) + uvd_x * 0.4;
+    uvx_y = v * (1 + 0.4) + uvd_y * 0.4;
+    uvx_pos_x = uvx_x + pos_x;
+    uvx_pos_y = uvx_y + pos_y;
+
+    temp = uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y
+    const f5 = Math.max(0.01 - Math.pow((temp * .04), 2.475), .0) * 2.0;
+    const f52 = Math.max(0.01 - Math.pow((temp * .16), 2.475), .0) * 2.0;
+    const f53 = Math.max(0.01 - Math.pow((temp * .36), 2.75), .0) * 2.0;
+
+    uvx_x = u * (1 + 0.5) + uvd_x * 0.5;
+    uvx_y = v * (1 + 0.5) + uvd_y * 0.5;
+    uvx_pos_x = uvx_x - pos_x;
+    uvx_pos_y = uvx_y - pos_y;
+
+    temp = uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y
+    const f6 = Math.max(0.01 - Math.pow(temp * .9, 0.8), .0) * 6.0;
+    const f62 = Math.max(0.01 - Math.pow(temp * .1, 0.8), .0) * 3.0;
+    const f63 = Math.max(0.01 - Math.pow(temp * .12, 0.8), .0) * 5.0;
+
+    imgdata.data[4 * i + 0] += 1.2 * ((f2 + f4 + f5 + f6) * 1.3 - uvd_len * .05) * intensity * 255;
+    imgdata.data[4 * i + 1] += 1.5 * ((f22 + f42 + f52 + f62) * 1.3 - uvd_len * .05) * intensity * 255;
+    imgdata.data[4 * i + 2] += 1.3 * ((f23 + f43 + f53 + f63) * 1.3 - uvd_len * .05) * intensity * 255;
+    imgdata.data[4 * i + 3] = 255;
+  }
+  ctx.putImageData(imgdata, 0, 0);
 }
 
 function draw(viewport_scale) {
@@ -175,22 +160,7 @@ function draw(viewport_scale) {
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   ctx.filter = '';
 
-  var imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  const pixel_count = imgdata.data.length / 4;
-  for (let i = 0; i < pixel_count; i++) {
-    let x = i % canvas.width;
-    let y = i / canvas.width;
-    let u = (x / canvas.width - .5) * canvas.width / canvas.height;
-    let v = y / canvas.height - .5;
-
-    let color = lensflare(u, v, 0.3, 0.3);
-    const a = (color[0] + color[1] + color[2]) / 3;
-    imgdata.data[4 * i] += 1.2 * color[0] * 255;
-    imgdata.data[4 * i + 1] += 1.5 * color[1] * 255;
-    imgdata.data[4 * i + 2] += 1.3 * color[2] * 255;
-    imgdata.data[4 * i + 3] = 255;
-  }
-  ctx.putImageData(imgdata, 0, 0);
+  lensflare(.3,.3);
 
 }