Pixel.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. const kronecker = function(target, mask) {
  2. const result = [[Math.ceil(target[0] / mask[0]), Math.ceil(target[1] / mask[1])],
  3. [((target[0] - 1) % mask[0]) + 1, ((target[1] - 1) % mask[1]) + 1]];
  4. var quadrant = result[0].join("");
  5. switch (quadrant) {
  6. case "11": quadrant = "00"; break;
  7. case "12": quadrant = "01"; break;
  8. case "21": quadrant = "10"; break;
  9. case "22": quadrant = "11"; break;
  10. }
  11. if (mask[0] == 1)
  12. return quadrant;
  13. return (quadrant + kronecker(result[1], [mask[0] / 2, mask[1] / 2]));
  14. }
  15. const dotProduct = function(U, V) {
  16. return U.x * V.x + U.y * V.y;
  17. };
  18. const isInside = function(vertex, square) {
  19. const AB = { x: square.b.x - square.a.x, y: square.b.y - square.a.y };
  20. const AM = { x: vertex.x - square.a.x, y: vertex.y - square.a.y };
  21. const BC = { x: square.c.x - square.b.x, y: square.c.y - square.b.y };
  22. const BM = { x: vertex.x - square.b.x, y: vertex.y - square.b.y };
  23. return (0 <= dotProduct(AB, AM) && dotProduct(AB, AM) <= dotProduct(AB, AB))
  24. && (0 <= dotProduct(BC, BM) && dotProduct(BC, BM) <= dotProduct(BC, BC));
  25. };
  26. const isInsideSquare = function(vertex, square, isize) {
  27. return isInside(vertex, square)
  28. || isInside({x: vertex.x + isize.width, y: vertex.y}, square)
  29. || isInside({x: vertex.x, y: vertex.y + isize.height}, square)
  30. || isInside({x: vertex.x + isize.width, y: vertex.y + isize.height}, square);
  31. };
  32. const toBinary = function(decimal, padding) {
  33. return decimal.toString(2).padStart(padding, 0);
  34. };
  35. const getId = function (source) {
  36. return /[01]+$/.exec(source)[0];
  37. };
  38. const canvas = {
  39. get boundary() { return document.getElementById("canvas").getBoundingClientRect() },
  40. vertices: {
  41. get a() { return { x: 0, y: 0 }; },
  42. get b() { return { x: 0, y: canvas.boundary.width }; },
  43. get c() { return { x: canvas.boundary.height, y: canvas.boundary.width }; },
  44. get d() { return { x: canvas.boundary.height, y: 0 }; }
  45. },
  46. url: "http://127.0.0.1:5000/image/",
  47. width: 0,
  48. height: 0,
  49. images: [],
  50. level: 0
  51. };
  52. const mouse = {
  53. x: 0,
  54. y: 0,
  55. prevX: 0,
  56. prevY: 0
  57. };
  58. const draw = function(ctx, csize, isize, url, level, images, coords) {
  59. ctx.clearRect(0, 0, csize.width, csize.height);
  60. const seedImage = images[Math.floor((images.length - 1) / 2)] || {image: {src: "0".repeat((level + 1) * 2)}};
  61. const seedCoord = images[Math.floor((images.length - 1) / 2)]
  62. ? {x : seedImage.x + coords.x - coords.prevX, y: seedImage.y + coords.y - coords.prevY} : coords;
  63. return draw_(ctx, isize, url, level, images.map((i) => {
  64. return Object.assign(i, {drawn: false});
  65. }), [1,1], seedCoord);
  66. }
  67. const draw_ = function(ctx, isize, url, level, images, pos, coords) {
  68. if (level != canvas.level || pos.some((i) => i < 1 || i > (2 ** (level + 1)))) {
  69. return images;
  70. }
  71. const id = kronecker(pos, [2 ** (level + 1), 2 ** (level + 1)]);
  72. const index = images.findIndex((i) => (url + id) == i.image.src);
  73. if (!isInsideSquare(coords, canvas.vertices, isize)) {
  74. if (index != -1) {
  75. images.splice(index);
  76. }
  77. return images;
  78. } else {
  79. const target = images[index];
  80. if (target) {
  81. if (target.drawn) {
  82. return images;
  83. } else {
  84. if (target.image.naturalWidth) {
  85. ctx.drawImage(target.image, coords.x, coords.y);
  86. } else {
  87. target.image.onload = () => ctx.drawImage(target.image, coords.x, coords.y);
  88. }
  89. images.push({
  90. image: target.image,
  91. x: coords.x,
  92. y: coords.y,
  93. drawn: true
  94. });
  95. images.splice(index);
  96. }
  97. } else {
  98. const image = new Image();
  99. image.src = url + id;
  100. image.onload = () => ctx.drawImage(image, coords.x, coords.y);
  101. images.push({
  102. image: image,
  103. x: coords.x,
  104. y: coords.y,
  105. drawn: true
  106. });
  107. }
  108. console.log(pos);
  109. images = draw_(ctx, isize, url, level, images, [pos[0] - 1, pos[1]], { x: coords.x, y: coords.y - isize.height });
  110. images = draw_(ctx, isize, url, level, images, [pos[0], pos[1] + 1], { x: coords.x + isize.width, y: coords.y });
  111. images = draw_(ctx, isize, url, level, images, [pos[0] + 1, pos[1]], { x: coords.x, y: coords.y + isize.height });
  112. images = draw_(ctx, isize, url, level, images, [pos[0], pos[1] - 1], { x: coords.x - isize.width, y: coords.y });
  113. return images;
  114. }
  115. };
  116. const init = function(c) {
  117. const image = new Image();
  118. image.src = canvas.url + "0".repeat((canvas.level + 1) * 2)
  119. image.onload = () => {
  120. canvas.width = image.width;
  121. canvas.height = image.height;
  122. canvas.images = draw(c.getContext("2d"), canvas.boundary, canvas,
  123. canvas.url, canvas.level, canvas.images, {x: 0, y: 0});
  124. }
  125. }
  126. const main = function() {
  127. const c = document.getElementById("canvas");
  128. c.setAttribute("width", window.getComputedStyle(document.body).getPropertyValue("width"));
  129. c.setAttribute("height", window.getComputedStyle(document.body).getPropertyValue("height"));
  130. document.addEventListener("mousedown", (e) => {
  131. if (c === document.activeElement && e.button === 0) {
  132. mouse.prevX = e.clientX;
  133. mouse.prevY = e.clientY;
  134. }
  135. });
  136. document.addEventListener("mouseup", (e) => {
  137. if (c === document.activeElement && e.button === 0) {
  138. mouse.x = e.clientX;
  139. mouse.y = e.clientY;
  140. canvas.images = draw(c.getContext("2d"), canvas.boundary, canvas,
  141. canvas.url, canvas.level, canvas.images, mouse);
  142. }
  143. });
  144. document.addEventListener("wheel", (e) => {
  145. if (c === document.activeElement) {
  146. if (e.deltaY > 0) {
  147. canvas.level += 1;
  148. } else {
  149. if (canvas.level > 0) {
  150. canvas.level += -1;
  151. }
  152. }
  153. document.getElementById("level").innerText = canvas.level;
  154. init(c);
  155. }
  156. });
  157. init(c);
  158. };