- commit
- d5af7d9a66f73ebfe9fc244cd33980901cd6849c
- parent
- b5fe756e51e6458241fd0bac1351efc472041b15
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2023-02-14 21:03
refine movement
Diffstat
| M | js/index.js | 80 | ++++++++++++++++++++++++++++++++----------------------------- |
| A | js/kinetic.js | 64 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | js/view.js | 1 | + |
3 files changed, 107 insertions, 38 deletions
diff --git a/js/index.js b/js/index.js
@@ -1,7 +1,7 @@ 1 1 import { Frame } from './frame.js'; 2 2 import { View } from './view.js'; 3 3 import { loadImage } from './loader.js';4 -1 import * as utils from './utils.js';-1 4 import { Animation } from './kinetic.js'; 5 5 6 6 var loader = document.querySelector('.loader'); 7 7 var palette = document.querySelector('.palette'); @@ -10,9 +10,16 @@ var canvas = document.querySelector('canvas'); 10 10 var frame = new Frame(); 11 11 var view = new View(canvas, frame); 12 12 -1 13 var moveX = new Animation((value, dt) => { -1 14 view.dx += value * dt * 2; -1 15 view.render(); -1 16 }); -1 17 var moveY = new Animation((value, dt) => { -1 18 view.dy += value * dt * 2; -1 19 view.render(); -1 20 }); -1 21 13 22 var pencil = 0;14 -1 var speed_x = 0;15 -1 var speed_y = 0;16 23 17 24 var setupPalette = function(image) { 18 25 palette.innerHTML = ''; @@ -47,17 +54,6 @@ var setPencil = function(color) { 47 54 } 48 55 }; 49 5650 -1 var applySpeed = utils.throttle(function() {51 -1 view.dx += speed_x;52 -1 view.dy += speed_y;53 -1 view.render();54 -1 speed_x *= 0.85;55 -1 speed_y *= 0.85;56 -1 if (Math.abs(speed_x) > 0.1 || Math.abs(speed_y) > 0.1) {57 -1 setTimeout(applySpeed);58 -1 }59 -1 }, 'animation');60 -161 57 loader.addEventListener('submit', event => { 62 58 event.preventDefault(); 63 59 var width = parseInt(loader.width.value, 10); @@ -68,34 +64,47 @@ loader.addEventListener('submit', event => { 68 64 frame.setImage(image); 69 65 view.reset(); 70 6671 -1 speed_x = 0;72 -1 speed_y = 0;-1 67 moveX.reset(); -1 68 moveY.reset(); 73 69 }); 74 70 }); 75 71 76 72 window.addEventListener('resize', () => view.refreshSize()); 77 73 78 74 window.addEventListener('keydown', event => {79 -1 // FIXME: kinetic movement;80 -1 var step = 10;81 -1 if (event.key === 'w') {82 -1 speed_y = step;83 -1 applySpeed();84 -1 } else if (event.key === 'a') {85 -1 speed_x = step;86 -1 applySpeed();87 -1 } else if (event.key === 's') {88 -1 speed_y = -step;89 -1 applySpeed();90 -1 } else if (event.key === 'd') {91 -1 speed_x = -step;92 -1 applySpeed();93 -1 } else if (event.key === 'q') {-1 75 if (['w', 'ArrowUp'].includes(event.key)) { -1 76 moveY.set(1); -1 77 } else if (['a', 'ArrowLeft'].includes(event.key)) { -1 78 moveX.set(1); -1 79 } else if (['s', 'ArrowDown'].includes(event.key)) { -1 80 moveY.set(-1); -1 81 } else if (['d', 'ArrowRight'].includes(event.key)) { -1 82 moveX.set(-1); -1 83 } else if (['q', 'PageUp'].includes(event.key)) { 94 84 setPencil(pencil - 1);95 -1 } else if (event.key === 'e') {-1 85 } else if (['e', 'PageDown'].includes(event.key)) { 96 86 setPencil(pencil + 1); -1 87 } else if (event.key === '+') { -1 88 view.setZoom(view.canvas.width / 2, view.canvas.height / 2, view.zoom * 1.2); -1 89 } else if (event.key === '-') { -1 90 view.setZoom(view.canvas.width / 2, view.canvas.height / 2, view.zoom / 1.2); 97 91 }98 -1 view.render();-1 92 }); -1 93 -1 94 window.addEventListener('keyup', event => { -1 95 if (['w', 'ArrowUp'].includes(event.key)) { -1 96 moveY.unset(1); -1 97 } else if (['a', 'ArrowLeft'].includes(event.key)) { -1 98 moveX.unset(1); -1 99 } else if (['s', 'ArrowDown'].includes(event.key)) { -1 100 moveY.unset(-1); -1 101 } else if (['d', 'ArrowRight'].includes(event.key)) { -1 102 moveX.unset(-1); -1 103 } -1 104 }); -1 105 -1 106 canvas.addEventListener('wheel', event => { -1 107 view.setZoom(event.offsetX, event.offsetY, view.zoom * Math.pow(2, -event.deltaY / 2000)); 99 108 }); 100 109 101 110 var last_click = null; @@ -119,8 +128,3 @@ var onClick = function(event) { 119 128 120 129 canvas.addEventListener('mousemove', onClick); 121 130 canvas.addEventListener('mousedown', onClick);122 -1123 -1 canvas.addEventListener('wheel', event => {124 -1 view.setZoom(event.offsetX, event.offsetY, view.zoom * Math.pow(2, -event.deltaY / 100 / 100));125 -1 view.render();126 -1 });
diff --git a/js/kinetic.js b/js/kinetic.js
@@ -0,0 +1,64 @@
-1 1 export class Animation {
-1 2 constructor(setter) {
-1 3 this.setter = setter;
-1 4 this.reset();
-1 5 }
-1 6
-1 7 reset() {
-1 8 this.startTime = 0;
-1 9 this.startValue = 0;
-1 10 this.targetValue = 0;
-1 11 this.prevTime = 0;
-1 12 this.looping = false;
-1 13 }
-1 14
-1 15 getValue(time) {
-1 16 var dt = time - this.startTime;
-1 17 var accel = this.targetValue === 0 ? 500 : 1000;
-1 18 if (this.targetValue > this.startValue) {
-1 19 return Math.min(this.startValue + dt / accel, this.targetValue);
-1 20 } else {
-1 21 return Math.max(this.startValue - dt / accel, this.targetValue);
-1 22 }
-1 23 }
-1 24
-1 25 set(value) {
-1 26 if (value !== this.targetValue) {
-1 27 var time = performance.now();
-1 28 this.startValue = this.getValue(time);
-1 29 if (value * this.startValue < 0) {
-1 30 this.startValue = 0;
-1 31 }
-1 32 this.targetValue = value;
-1 33 this.startTime = time;
-1 34 if (!this.looping) {
-1 35 this.looping = true;
-1 36 this.prevTime = time;
-1 37 requestAnimationFrame(t => this.loop(t));
-1 38 }
-1 39 }
-1 40 }
-1 41
-1 42 unset(value) {
-1 43 if (value === this.targetValue) {
-1 44 var time = performance.now();
-1 45 this.startValue = this.getValue(time);
-1 46 this.targetValue = 0;
-1 47 this.startTime = time;
-1 48 }
-1 49 }
-1 50
-1 51 loop(time) {
-1 52 if (!this.looping) {
-1 53 return;
-1 54 }
-1 55 var value = this.getValue(time);
-1 56 this.setter(value, time - this.prevTime);
-1 57 this.prevTime = time;
-1 58 if (value === 0 && this.targetValue === 0) {
-1 59 this.looping = false;
-1 60 } else {
-1 61 requestAnimationFrame(t => this.loop(t));
-1 62 }
-1 63 }
-1 64 }
diff --git a/js/view.js b/js/view.js
@@ -41,6 +41,7 @@ export class View {
41 41 this.zoom = zoom;
42 42 this.dx = stable_x - frame_x * zoom * this.frame.pxsize;
43 43 this.dy = stable_y - frame_y * zoom * this.frame.pxsize;
-1 44 this.render();
44 45 }
45 46
46 47 render() {