majikayogames.github.io/ezdraw_test.html at main · majikayogames/majikayogames.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>

<head>
    <title>EZDraw</title>
    <style>
        /* canvas {
            border: 1px solid black;
        } */
    </style>
</head>

<body>
    <script src="ezdraw.js"></script>
    <script>
        let drawCanvas = ez.createCanvasAndAddToPage()
        let mainCanvas = ez.createCanvasAndAddToPage()
        ez.centerOrigin = true
        ez.camera.setOrigin(0,0,10);
        ez.camera = ez.camera.scaled(vec3(1/100, 1/-100, 1)); // y is up and 100 px = 1 unit

        ez.onMouseDown(() => {
            ez.save()
            ez.centerOrigin = false
            ez.canvas = drawCanvas
            ez.camera = mat3x4()
            ez.rect(ez.getMousePos(), vec2(10, 10)).fill()
            ez.restore()
        })
        ez.onMouseDrag((deltaPos) => {
            ez.save()
            ez.centerOrigin = false
            ez.canvas = drawCanvas
            ez.camera = mat3x4()
            ez.bresenhamLineConnect(ez.lastMousePos, ez.mousePos).slice(1).forEach(pt => {
                let r = ez.rect(pt, vec2(10, 10))
                r.fill("#000000")
            })
            ez.restore()
        })

        function draw() {
            ez.clear()
            ez.grid(1,50).stroke(0xbbbbbb)
            let interp = (Date.now() % 10000) / 10000 * (Math.PI*2);
            ez.rect(ez.getMousePosWorld(),[1,1], interp).fillAndStroke("#aaddddaa")
            //ez.useProjectionMatrix = 1;

            ez.rect(vec2(1,0).rotated(interp), [0.1,0.1]).fillAndStroke("red")

            ez.ctx.lineWidth = 1.5
            ez.line(vec2(0,-1000), vec2(0,1000)).stroke("grey")
            ez.line(vec2(-1000, 0), vec2(1000,0)).stroke("grey")
            ez.ctx.lineWidth = 3
            ez.arrow(vec2(0,0),vec2(0,1),15).fillAndStroke("green", "green")
            ez.arrow(vec2(0,0),vec2(1,0),15).fillAndStroke("red", "red")
            ez.ctx.lineWidth = 1

            let tri = ez.triangle(vec2(1,2), [-1,-1, 0,0, 1,-1], ["purple", "grey", "orange"]);
            tri.transform = tri.transform.rotated(vec3(0,0,1), interp);
            tri.fillAndStroke();
            ez.triangle(vec2(1,2), [-1,-1, 0,-2, 1,-1], ["turquoise", "maroon", "#00ff00"]).fillAndStroke();

            const quad = ez.quad(vec2(-1,-2), [-1,1, 1,1, 1,-1, -1,-1], ["black", "white", "white", "black"]);
            quad.transform = quad.transform.rotated(vec3(0,0,1), -interp);
            quad.fillAndStroke();

            ez.quad(vec2(-3,2), [-1,1, 1,1, 1,-1, -1,-1], ["#FF0000", "#00FF00", "#0000FF", "#FFFF00"]).fillAndStroke();

            //ez.camera = ez.camera.rotated(vec3(0,1,0), 0.002)
            requestAnimationFrame(draw);
        }
        draw();
    </script>
</body>

</html>