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