Imagine/main.js

let canvas;
let ctx;
let imports;
let settings = {
  brightness: {},
  saturate: {},
  contrast: {},
  blur: { filter: value => value * canvas.width / 100 + 'px' }
};
const img = new Image();

// wait for site to be parsed so element can be found
document.addEventListener("DOMContentLoaded", function() {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  imports = document.getElementById("imports");

  // bind listeners
  document.getElementById("take-picture").addEventListener("click", take_picture);
  document.getElementById("upload-image").addEventListener("change", upload_image)

  document.getElementById("save").addEventListener("click", save_image)
  document.getElementById("share").addEventListener("click", share_image)

  window.addEventListener("resize", () => draw(true))

  for (let setting in settings) {
    // make an array out of an iterable
    const elements = [...document.getElementsByClassName(setting)];
    settings[setting].elements = elements;
    // if filter is not definded, use identity function
    settings[setting].filter ||= value => value;
    for (let element of elements) {
      element.addEventListener("input", settings_apply);
    }
  }

})

function take_picture() {
  canvas.classList.remove("is-hidden");
  imports.classList.add("is-hidden");

}

function upload_image() {
  canvas.classList.remove("is-hidden");
  imports.classList.add("is-hidden");
  console.log(this.files[0]);

  img.src = URL.createObjectURL(this.files[0]);
  img.onload = () => draw(true);
}

function save_image() {
  draw(false);

  const dataUrl = canvas.toDataURL("image/png");
  // downloading only works with links but not window.open
  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = 'imagine.png';
  link.click();
}

function share_image() {

}

function settings_apply(event) {
  const changed_setting = event.target.id;
  const new_value = event.target.value;

  // update all inputs for that setting (mobile and desktop) to the new value
  for (let element of settings[changed_setting].elements) {
    if (element == event.target) continue;
    element.value = new_value;
  }

  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 draw(viewport_scale) {
  const filter = Object.entries(settings)
    .map(([setting, { elements, filter }]) => `${setting}(${filter(elements[0].value)})`)
    .join(" ")

  // set the resolution to the original and then scale down to the viewport to
  // only calculate the filter on pixels the user can see. 
  canvas.height = img.naturalHeight;
  canvas.width = img.naturalWidth;
  if (viewport_scale) {
    canvas.height = canvas.clientHeight;
    canvas.width = canvas.clientWidth;
  }
  ctx.filter = filter
  console.log(filter);
  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);

}