瀏覽代碼

Improve the smoothness of the gradient

It now approximates an exponential falloff with 21 colorstops.
master
Fen Dweller 5 年之前
父節點
當前提交
1e33614cf9
共有 1 個檔案被更改,包括 11 行新增2 行删除
  1. +11
    -2
      xray.js

+ 11
- 2
xray.js 查看文件

@@ -384,6 +384,10 @@ function setup() {
console.log("Done");
}

function ease(t, k) {
return 1 - Math.pow(2, -k * (1 - t));
}

function updateOverlay(points, clicked) {

const overlay = document.querySelector("#overlay");
@@ -412,8 +416,13 @@ function updateOverlay(points, clicked) {
overlayCtx.ellipse(x, y, radius * scale, radius * scale, 0, 0, 2 * Math.PI);
const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, Math.floor(radius * scale));
gradient.addColorStop((100-softness)/100, '#000000FF');
gradient.addColorStop(1, '#00000000');

const maxOpacity = ease(0, 1 / (0.001 + softness / 100));
for (let t=0 ; t <= 20; t+= 1) {
let eased = ease(t/20.0, 1 / (0.001 + softness / 100)) / maxOpacity;
gradient.addColorStop(t/20.0, `rgba(0, 0, 0, ${eased}`);
}
overlayCtx.fillStyle = gradient;
overlayCtx.fill();


Loading…
取消
儲存