paint-by-numbers

commit

0d849fef93ddbcd5bab7514aaebbfddc8320084b

parent

e8e559888cf3564deb2a64be6da3229e0dd3e205

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-02-13 06:29

still more

Diffstat

6 files changed, 57 insertions, 48 deletions

diff --git a/index.html b/index.html

@@ -11,6 +11,6 @@
   11    11 	</div>
   12    12 	<canvas></canvas>
   13    13 	<form class="palette"></form>
   14    -1 	<script src="paint.js" type="module"></script>
   -1    14 	<script src="js/index.js" type="module"></script>
   15    15 </body>
   16    16 </html>

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

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

@@ -14,42 +14,38 @@ var pencil = 0;
   14    14 var speed_x = 0;
   15    15 var speed_y = 0;
   16    16 
   17    -1 input.addEventListener('change', () => {
   18    -1     // FIXME: configurable size
   19    -1     loadImage(input, 80).then(image => {
   20    -1         frame.setImage(image);
   21    -1 
   22    -1         palette.innerHTML = '';
   23    -1         for (var i = 0; i < image.colors.length; i++) {
   24    -1             var label = document.createElement('label');
   25    -1             var radio = document.createElement('input');
   26    -1             radio.type = 'radio';
   27    -1             radio.name = 'pencil';
   28    -1             radio.value = i;
   29    -1             var span = document.createElement('span');
   30    -1             span.textContent = i;
   31    -1             label.append(radio);
   32    -1             label.append(span);
   33    -1             span.style.color = image.contrasts[i];
   34    -1             span.style.backgroundColor = image.colors[i];
   35    -1             palette.append(label);
   36    -1             radio.addEventListener('change', event => {
   37    -1                 pencil = parseInt(event.target.value, 10);
   38    -1             });
   39    -1         }
   40    -1         setPencil(0);
   41    -1         view.refreshSize();
   42    -1 
   43    -1         view.zoom = view.canvas.height / frame.canvas.height * 0.8;
   44    -1         view.dx = (view.canvas.width - frame.canvas.width * view.zoom) / 2;
   45    -1         view.dy = (view.canvas.height - frame.canvas.height * view.zoom) / 2;
   46    -1 
   47    -1         speed_x = 0;
   48    -1         speed_y = 0;
   -1    17 var setupPalette = function(image) {
   -1    18     palette.innerHTML = '';
   -1    19     for (var i = 0; i < image.colors.length; i++) {
   -1    20         var radio = document.createElement('input');
   -1    21         radio.type = 'radio';
   -1    22         radio.name = 'pencil';
   -1    23         radio.value = i;
   -1    24         radio.addEventListener('change', event => {
   -1    25             pencil = parseInt(event.target.value, 10);
   -1    26         });
   -1    27 
   -1    28         var span = document.createElement('span');
   -1    29         span.textContent = i;
   -1    30         span.style.color = image.contrasts[i];
   -1    31         span.style.backgroundColor = image.colors[i];
   -1    32 
   -1    33         var label = document.createElement('label');
   -1    34         label.append(radio);
   -1    35         label.append(span);
   -1    36 
   -1    37         palette.append(label);
   -1    38     }
   -1    39     view.refreshSize();
   -1    40 };
   49    41 
   50    -1         view.render();
   51    -1     });
   52    -1 });
   -1    42 var setPencil = function(color) {
   -1    43     if (color >= 0 && color < palette.pencil.length) {
   -1    44         pencil = color;
   -1    45         palette.pencil.value = pencil;
   -1    46         palette.querySelector(':checked').parentElement.scrollIntoView();
   -1    47     }
   -1    48 };
   53    49 
   54    50 var applySpeed = utils.throttle(function() {
   55    51     view.dx += speed_x;
@@ -62,6 +58,20 @@ var applySpeed = utils.throttle(function() {
   62    58     }
   63    59 }, 'animation');
   64    60 
   -1    61 input.addEventListener('change', () => {
   -1    62     // FIXME: configurable size
   -1    63     loadImage(input, 80).then(image => {
   -1    64         setupPalette(image);
   -1    65         setPencil(0);
   -1    66 
   -1    67         frame.setImage(image);
   -1    68         view.reset();
   -1    69 
   -1    70         speed_x = 0;
   -1    71         speed_y = 0;
   -1    72     });
   -1    73 });
   -1    74 
   65    75 window.addEventListener('resize', () => view.refreshSize());
   66    76 
   67    77 canvas.addEventListener('wheel', event => {
@@ -69,14 +79,6 @@ canvas.addEventListener('wheel', event => {
   69    79     view.render();
   70    80 });
   71    81 
   72    -1 var setPencil = function(color) {
   73    -1     if (color >= 0 && color < palette.pencil.length) {
   74    -1         pencil = color;
   75    -1         palette.pencil.value = pencil;
   76    -1         palette.querySelector(':checked').parentElement.scrollIntoView();
   77    -1     }
   78    -1 };
   79    -1 
   80    82 window.addEventListener('keydown', event => {
   81    83     // FIXME: kinetic movement;
   82    84     var step = 10;
@@ -104,14 +106,14 @@ var last_click = null;
  104   106 
  105   107 var onClick = function(event) {
  106   108     if (event.buttons & 1) {
  107    -1         var [frame_x, frame_y] = view.toFrameXY(event.offsetX, event.offsetY);
   -1   109         var [x, y] = view.toFrameXY(event.offsetX, event.offsetY);
  108   110 
  109   111         if (last_click) {
  110    -1             frame.drawLine(last_click.x, last_click.y, frame_x, frame_y, pencil);
   -1   112             frame.drawLine(last_click.x, last_click.y, x, y, pencil);
  111   113         } else {
  112    -1             frame.setPixel(frame_x, frame_y, pencil);
   -1   114             frame.setPixel(x, y, pencil);
  113   115         }
  114    -1         last_click = {x: frame_x, y: frame_y};
   -1   116         last_click = {x: x, y: y};
  115   117 
  116   118         view.render();
  117   119     } else {

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

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

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

@@ -22,6 +22,13 @@ export class View {
   22    22         this.render();
   23    23     }
   24    24 
   -1    25     reset() {
   -1    26         this.zoom = this.canvas.height / this.frame.canvas.height * 0.8;
   -1    27         this.dx = (this.canvas.width - this.frame.canvas.width * this.zoom) / 2;
   -1    28         this.dy = (this.canvas.height - this.frame.canvas.height * this.zoom) / 2;
   -1    29         this.render();
   -1    30     }
   -1    31 
   25    32     toFrameXY(x, y) {
   26    33         var frame_x = (x - this.dx) / this.zoom / this.frame.pxsize;
   27    34         var frame_y = (y - this.dy) / this.zoom / this.frame.pxsize;