Last active
November 11, 2022 11:14
-
-
Save cache-tlb/c78eb93f9bc24d2b54ecbca52e6e1f94 to your computer and use it in GitHub Desktop.
generate Hilbert Curve on a canvas
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>test</title> | |
| </head> | |
| <body> | |
| <canvas id="canvas"> </canvas> | |
| <script> | |
| const canvas = document.getElementById("canvas"); | |
| const ctx = canvas.getContext("2d"); | |
| // states | |
| var mouse_state = 0; // 0: not pressed, 1: pressed | |
| var mouse_x = 0; | |
| var mouse_y = 0; | |
| function init() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| function IsMousePressed() { | |
| return mouse_state == 1; | |
| } | |
| init(); | |
| function Vector2(x, y) { | |
| this.x = (x === undefined) ? 0 : x; | |
| this.y = (y === undefined) ? 0 : y; | |
| } | |
| Vector2.prototype = { | |
| add: function(vector) { | |
| return new Vector2(this.x + vector.x, this.y + vector.y); | |
| }, | |
| mult: function(scalar) { | |
| return new Vector2(this.x * scalar, this.y * scalar); | |
| } | |
| }; | |
| var index = 0; | |
| var last = 0; | |
| function line(ax, ay, bx, by) { | |
| ctx.beginPath(); | |
| ctx.lineJoin = "round"; | |
| ctx.lineCap = "round"; | |
| ctx.lineWidth = 2; | |
| ctx.moveTo(ax*8, ay*8); | |
| ctx.lineTo(bx*8, by*8); | |
| ctx.stroke(); | |
| } | |
| function v(x,y) { | |
| return new Vector2(x,y); | |
| } | |
| function h(i) { | |
| var a = v((i&3)>>1,[0,1,1][i&3]); | |
| for(j = 1; j < 8;){ | |
| i=Math.floor(i/4); | |
| k=i&3; | |
| l=2**j; | |
| j++; | |
| !k?a=v(a.y,a.x):k<2?a.y+=l:k==2?a=a.add(v(l,l)):a=v(l-1-a.y+l,l-1-a.x) | |
| } | |
| return a; | |
| } | |
| /* | |
| i=n=a=0;draw=_=>{i||createCanvas(q=512,q);colorMode(HSB,1);v=createVector;h(i++);m=a.mult(4).add(2);stroke(i/4**7,1,1);line(m.x,m.y,n.x,n.y);n=m};h=i=>{a=v((i&3)>>1,[0,1,1][i&3]);for(j=1;j<8;){i/=4;k=i&3;l=2**j++;!k?a=v(a.y,a.x):k<2?a.y+=l:k==2?a.add(l,l):a=v(l-1-a.y+l,l-1-a.x)}} | |
| */ | |
| function draw() { | |
| var cur = h(index++); | |
| line(cur.x + 1,cur.y + 1, last.x + 1, last.y + 1); | |
| last = cur; | |
| } | |
| function render() { | |
| draw(); | |
| window.requestAnimationFrame(render); | |
| } | |
| window.requestAnimationFrame(render); | |
| canvas.addEventListener('mousedown', function (event) { | |
| mouse_state = 1; | |
| mouse_x = event.clientX; | |
| mouse_y = event.clientY; | |
| }, false); | |
| canvas.addEventListener('mousemove', function (event) { | |
| mouse_x = event.clientX; | |
| mouse_y = event.clientY; | |
| }, false); | |
| canvas.addEventListener('mouseup', function (event) { | |
| mouse_state = 0; | |
| mouse_x = event.clientX; | |
| mouse_y = event.clientY; | |
| }, false); | |
| function getTouchPos(canvasDom, touchEvent) { | |
| var rect = canvasDom.getBoundingClientRect(); | |
| return { | |
| x: touchEvent.touches[0].clientX - rect.left, | |
| y: touchEvent.touches[0].clientY - rect.top | |
| }; | |
| } | |
| canvas.addEventListener("touchstart", function (e) { | |
| mousePos = getTouchPos(canvas, e); | |
| var touch = e.touches[0]; | |
| var mouseEvent = new MouseEvent("mousedown", { | |
| clientX: touch.clientX, | |
| clientY: touch.clientY | |
| }); | |
| canvas.dispatchEvent(mouseEvent); | |
| event.preventDefault(); | |
| }, false); | |
| canvas.addEventListener("touchend", function (e) { | |
| var mouseEvent = new MouseEvent("mouseup", {}); | |
| canvas.dispatchEvent(mouseEvent); | |
| event.preventDefault(); | |
| }, false); | |
| canvas.addEventListener("touchmove", function (e) { | |
| var touch = e.touches[0]; | |
| var mouseEvent = new MouseEvent("mousemove", { | |
| clientX: touch.clientX, | |
| clientY: touch.clientY | |
| }); | |
| canvas.dispatchEvent(mouseEvent); | |
| event.preventDefault(); | |
| }, false); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment