summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorOrangerot <purple@orangerot.dev>2024-12-08 07:04:03 +0100
committerOrangerot <purple@orangerot.dev>2024-12-08 07:04:03 +0100
commitc53ad39df83c89928cc2dbd1e7786b4fbd607e97 (patch)
tree990a667082e1b9c661f28f6c2067b98851928001
parentf2b10db05532b2bb7edd0c560a51ad0e052382b8 (diff)
feat: lensflare shader. but is very slow :(
-rw-r--r--main.js93
1 files changed, 91 insertions, 2 deletions
diff --git a/main.js b/main.js
index 2e94bfe..31043c7 100644
--- a/main.js
+++ b/main.js
@@ -5,7 +5,7 @@ let settings = {
brightness: {},
saturate: {},
contrast: {},
- blur: {filter: value => value * canvas.width / 100 + 'px'}
+ blur: { filter: value => value * canvas.width / 100 + 'px' }
};
const img = new Image();
@@ -80,9 +80,65 @@ 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));
+}
+
+// https://www.shadertoy.com/view/ldSXWK
+function lensflare(uv, pos) {
+ const intensity = 1.5;
+ // const main = add(uv, mul(pos, -1));
+ const uvd = mul(uv, length(uv));
+
+ // let dist = length(main); dist = Math.pow(dist, .1);
+
+ // const f1 = max(0.01-Math.pow(length(add(uv,mul(pos,1.2))),1.9),.0)*7.0;
+
+ const f2 = Math.max(1.0 / (1.0 + 32.0 * Math.pow(length(add(uvd, mul(pos, 0.8))), 2.0)), .0) * 0.1;
+ const f22 = Math.max(1.0 / (1.0 + 32.0 * Math.pow(length(add(uvd, mul(pos, 0.85))), 2.0)), .0) * 0.08;
+ const f23 = Math.max(1.0 / (1.0 + 32.0 * Math.pow(length(add(uvd, mul(pos, 0.9))), 2.0)), .0) * 0.06;
+
+ let uvx = mix(uv, uvd, -0.5);
+
+ const f4 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.4))), 2.4), .0) * 6.0;
+ const f42 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.45))), 2.4), .0) * 5.0;
+ const f43 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.5))), 2.4), .0) * 3.0;
+
+ uvx = mix(uv, uvd, -.4);
+
+ const f5 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.2))), 5.5), .0) * 2.0;
+ const f52 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.4))), 5.5), .0) * 2.0;
+ const f53 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, 0.6))), 5.5), .0) * 2.0;
+
+ uvx = mix(uv, uvd, -0.5);
+
+ const f6 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, -0.3))), 1.6), .0) * 6.0;
+ const f62 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, -0.325))), 1.6), .0) * 3.0;
+ const f63 = Math.max(0.01 - Math.pow(length(add(uvx, mul(pos, -0.35))), 1.6), .0) * 5.0;
+
+ let c = [
+ f2 + f4 + f5 + f6,
+ f22 + f42 + f52 + f62,
+ f23 + f43 + f53 + f63
+ ];
+
+ c = mul(c, 1.3).map(e => e - length(uvd) * .05);
+
+ return mul(c, intensity);
+}
+
function draw(viewport_scale) {
const filter = Object.entries(settings)
- .map(([setting, {elements, filter}]) => `${setting}(${filter(elements[0].value)})`)
+ .map(([setting, { elements, filter }]) => `${setting}(${filter(elements[0].value)})`)
.join(" ")
// set the resolution to the original and then scale down to the viewport to
@@ -96,5 +152,38 @@ function draw(viewport_scale) {
ctx.filter = filter
console.log(filter);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+ ctx.filter = '';
+
+ // for (let y = 0; y < canvas.height; y++) {
+ // for (let x = 0; x < canvas.width; x++) {
+ // let uv = [x / canvas.width, y / canvas.height];
+ // // uv[0] *= canvas.width / canvas.height;
+ // // let color = lensflare(uv, [.5,.5]);
+ // ctx.fillStyle = `rgb(${[...uv,0].map(e => Math.floor(e * 255)).join()})`;
+ // ctx.fillRect(x,y,1,1);
+ // }
+ // }
+
+ 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;
+
+ // imgdata.data[4*i] = u * 255;
+ // imgdata.data[4*i+1] = v * 255;
+ // imgdata.data[4*i+2] = 0
+ // imgdata.data[4*i+3] = 255;
+
+ let color = lensflare([u, v], [0.3, 0.3]);
+ imgdata.data[4 * i] = color[0] * 255;
+ imgdata.data[4 * i + 1] = color[1] * 255;
+ imgdata.data[4 * i + 2] = color[2] * 255;
+ imgdata.data[4 * i + 3] = 255;
+ }
+ ctx.putImageData(imgdata, 0, 0);
+
}