art/psychotherapy
art
/
psychotherapy
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add some sort of adaptive zoom

This commit is contained in:
Florine W. Dekker 2021-10-31 16:31:59 +01:00
parent df8e29c6e3
commit c5969362ad
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/main/js/Main.ts
View File

@ -114,6 +114,7 @@ class Line {
*/
const settings = {
dotRadius: 10,
fillGoal: 0.3,
stepTime: 250,
stepsPerLevel: 5,
};
@ -133,6 +134,7 @@ doAfterLoad(() => {
const lines: Line[] = [new Line(1), new Line(5)];
let step = 0;
let lastStepTime = Date.now();
setInterval(() => {
const stepLine = Math.floor(step / (settings.stepsPerLevel ** 2));
const inductionLine = stepLine + 1;
@ -163,6 +165,7 @@ doAfterLoad(() => {
}
step++;
lastStepTime = Date.now();
}, settings.stepTime);
@ -177,6 +180,8 @@ doAfterLoad(() => {
// Draw
const startTime = Date.now();
let maxX = 0;
let zoomFactor = 1;
const draw = () => {
ctx.restore();
ctx.save();
@ -196,11 +201,10 @@ doAfterLoad(() => {
ctx.stroke();
// Zoom
// TODO: Adaptive zoom
const nowTime = Date.now();
const factor = settings.stepsPerLevel **
((nowTime - startTime) / (settings.stepsPerLevel ** 2 * settings.stepTime));
ctx.scale(1 / factor, 1 / factor);
if ((1 / zoomFactor) * maxX > canvas.width * settings.fillGoal) {
zoomFactor *= (((1 / zoomFactor) * maxX) / (canvas.width * settings.fillGoal)) ** (1 / 60);
}
ctx.scale(1 / zoomFactor, 1 / zoomFactor);
// Lines
ctx.strokeStyle = "#ffffff";
@ -213,6 +217,8 @@ doAfterLoad(() => {
for (const segment of line.segments) {
lastPos = new Point(lastPos.x + segment.x, lastPos.y + segment.y);
ctx.lineTo(lastPos.x, lastPos.y);
maxX = Math.max(maxX, lastPos.x);
}
ctx.stroke();