Pixel.js 7.8 KB

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