paint-by-numbers

commit

7214c716e5c84054c99b16f4fccfaa5ef03ab713

parent

26194502cfe09dc99d20293cbeb3cd763a700614

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-02-12 18:04

draft: kinetic movement

Diffstat

1 files changed, 22 insertions, 7 deletions

diff --git a/paint.js b/paint.js

@@ -10,9 +10,11 @@ var data;
   10    10 var pencil = 0;
   11    11 
   12    12 var zoom = 1;
   13    -1 var pxsize = 15;
   -1    13 var pxsize = 12;
   14    14 var dx = 0;
   15    15 var dy = 0;
   -1    16 var speed_x = 0;
   -1    17 var speed_y = 0;
   16    18 
   17    19 var round = function(c) {
   18    20     return Math.floor(c / 51) * 3;
@@ -132,8 +134,6 @@ input.addEventListener('change', () => {
  132   134         dx = (canvas.width - offcanvas.width * zoom) / 2;
  133   135         dy = (canvas.height - offcanvas.height * zoom) / 2;
  134   136 
  135    -1         // FIXME: zoom to fit and center
  136    -1 
  137   137         var x, y;
  138   138         for (y = 0; y < data.height; y++) {
  139   139             for (x = 0; x < data.width; x++) {
@@ -162,6 +162,17 @@ var render = onAnimation(function() {
  162   162     ctx.drawImage(offcanvas, dx, dy, offcanvas.width * zoom, offcanvas.height * zoom);
  163   163 });
  164   164 
   -1   165 var applySpeed = onAnimation(function() {
   -1   166     dx += speed_x;
   -1   167     dy += speed_y;
   -1   168     render();
   -1   169     speed_x *= 0.85;
   -1   170     speed_y *= 0.85;
   -1   171     if (Math.abs(speed_x) > 0.1 || Math.abs(speed_y) > 0.1) {
   -1   172         setTimeout(applySpeed);
   -1   173     }
   -1   174 });
   -1   175 
  165   176 window.addEventListener('resize', resizeCanvas);
  166   177 resizeCanvas();
  167   178 
@@ -185,13 +196,17 @@ window.addEventListener('keydown', event => {
  185   196     // FIXME: kinetic movement;
  186   197     var step = 10;
  187   198     if (event.key === 'w') {
  188    -1         dy += step;
   -1   199         speed_y = step;
   -1   200         applySpeed();
  189   201     } else if (event.key === 'a') {
  190    -1         dx += step;
   -1   202         speed_x = step;
   -1   203         applySpeed();
  191   204     } else if (event.key === 's') {
  192    -1         dy -= step;
   -1   205         speed_y = -step;
   -1   206         applySpeed();
  193   207     } else if (event.key === 'd') {
  194    -1         dx -= step;
   -1   208         speed_x = -step;
   -1   209         applySpeed();
  195   210     } else if (event.key === 'q') {
  196   211         pencil -= 1;
  197   212     } else if (event.key === 'e') {