pixels.html

   1 <!DOCTYPE html>
   2
   3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   4 <head>
   5         <meta charset="utf-8" />
   6         <title></title>
   7         <style type="text/css">
   8                 html {
   9                         background-color: #262926;
  10                 }
  11
  12                 canvas {
  13                         cursor: none;
  14                         z-index: -100;
  15                 }
  16
  17                 .palette div {
  18                         display: inline-block;
  19                         width: 2em;
  20                         height: 2em;
  21                         background-color: #ff00ff;
  22                 }
  23         </style>
  24 </head>
  25 <body>
  26
  27         <div>
  28                 <input id="offset-x" type="number" value="18" /></div>
  29         <div>
  30                 <input id="offset-y" type="number" value="20" /></div>
  31         <div>
  32                 <input id="skew-x" type="number" value="0" /></div>
  33         <div>
  34                 <input id="skew-y" type="number" value="10" /></div>
  35         <div class="palette">
  36                 <div id="color-1"></div>
  37                 <div id="color-2"></div>
  38                 <div id="color-3"></div>
  39                 <div id="color-4"></div>
  40         </div>
  41
  42         <!-- Fullscreen canvas -->
  43         <script type="text/javascript">
  44                 function fullscreenCanvas() {
  45                         var c = window.document.createElement('canvas');
  46                         window.document.body.appendChild(c);
  47
  48                         var ctx = c.getContext('2d');
  49
  50                         ctx.canvas.width = window.innerWidth;
  51                         ctx.canvas.height = window.innerHeight;
  52                         ctx.canvas.style.position = 'absolute';
  53                         ctx.canvas.style.top = 0;
  54                         ctx.canvas.style.left = 0;
  55
  56                         return ctx;
  57                 }
  58         </script>
  59
  60         <script type="text/javascript">
  61
  62                 var size = 8;
  63
  64                 var ctx = fullscreenCanvas();
  65                 var cursor = fullscreenCanvas();
  66                 cursor.fillStyle = cursor.strokeStyle = 'rgba(255, 255, 255, .7)';
  67
  68                 var colors = ['#304439', '#506a60', '#80aa89', '#d0ffd9'];
  69                 ctx.fillStyle = colors[0];
  70
  71                 colors.forEach(function (color, i) {
  72                         var e = document.getElementById('color-' + (i + 1));
  73
  74                         e.style.backgroundColor = colors[i];
  75                         var color = colors[i];
  76                         console.log(color);
  77                         e.addEventListener('mousedown', function () { ctx.fillStyle = color });
  78                 });
  79
  80                 var deltax = 18;
  81                 var deltay = 20;
  82                 var skewx = 0;
  83                 var skewy = 10;
  84
  85                 function bind(id, callback) {
  86                         var e = document.getElementById(id);
  87
  88                         var fn = function () {
  89                                 callback(parseInt(e.value, 10));
  90                         }
  91
  92                         e.addEventListener('keyup', fn);
  93                         e.addEventListener('mouseup', fn);
  94                 }
  95
  96                 bind('offset-x', function (val) { deltax = val });
  97                 bind('offset-y', function (val) { deltay = val });
  98                 bind('skew-x', function (val) { skewx = val });
  99                 bind('skew-y', function (val) { skewy = val });
 100
 101                 var next = null;
 102                 var down = null;
 103
 104                 function addPoint(x, y) {
 105                         next = [x, y];
 106
 107                         if (mouseDown > 0) down = next;
 108                 }
 109
 110                 var mouseDown = 0;
 111
 112                 function downAt(x, y) {
 113                         ++mouseDown;
 114                         down = [x, y];
 115                 }
 116
 117                 function putCursor(x, y) {
 118                         x = round(x);
 119                         y = round(y);
 120
 121                         var a = (size / 2) | 0;
 122
 123                         var dx = 10;
 124                         var dy = 10;
 125
 126                         for (var i = -dx; i <= dx; ++i) {
 127                                 for (var j = -dy; j <= dy; ++j) {
 128                                         if (i == 0 && j == 0) continue;
 129
 130                                         var p = x + i * size * deltax + a - j * size * skewx;
 131                                         var q = y + j * size * deltay + a - i * size * skewy;
 132
 133                                         cursor.fillRect(p, q, 1, 1);
 134                                 }
 135                         }
 136
 137                         cursor.strokeRect(x + .5, y + .5, size - 1, size - 1);
 138                 }
 139
 140                 function draw(x, y) {
 141                         x = round(x);
 142                         y = round(y);
 143
 144                         var dx = 10;
 145                         var dy = 10;
 146
 147                         for (var i = -dx; i <= dx; ++i) {
 148                                 for (var j = -dy; j <= dy; ++j) {
 149
 150                                         var p = x + i * size * deltax- j * size * skewx;
 151                                         var q = y + j * size * deltay- i * size * skewy;
 152
 153                                         ctx.fillRect(p, q, size, size);
 154                                 }
 155                         }
 156                 }
 157
 158                 function round(n) {
 159                         return n - n % size;
 160                 }
 161
 162                 function frame() {
 163
 164                         if (next != null) {
 165                                 cursor.clearRect(0, 0, cursor.canvas.width, cursor.canvas.height);
 166                                 putCursor(next[0], next[1]);
 167                                 next = null;
 168                         }
 169
 170                         if (down != null) {
 171                                 draw(down[0], down[1]);
 172                                 down = null;
 173                         }
 174
 175                         window.requestAnimationFrame(frame);
 176                 }
 177
 178                 window.requestAnimationFrame(frame);
 179
 180                 cursor.canvas.addEventListener('mousemove', function (e) { addPoint(e.clientX, e.clientY) });
 181                 cursor.canvas.addEventListener('mousedown', function (e) { downAt(e.clientX, e.clientY) });
 182                 cursor.canvas.addEventListener('mouseup', function (e) { --mouseDown; });
 183                 cursor.canvas.addEventListener('mouseout', function (e) { mouseDown = 0; });
 184
 185                 frame();
 186
 187         </script>
 188
 189 </body>
 190 </html>