turtle-graphics/index.html at main · datag/turtle-graphics · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/logo.svg">
    <title>Turtle Graphics</title>
  </head>

  <body>
    <canvas id="simCanvas"></canvas>

    <div id="controls">
        <button id="moveForward" title="Move forward">
            <svg class="icon"><use xlink:href="#icon-arrow-up"></use></svg>
        </button>
        <button id="moveBackward" title="Move backward">
            <svg class="icon"><use xlink:href="#icon-arrow-down"></use></svg>
        </button>
        <button id="turnLeft90" title="Turn left 90°">
            <svg class="icon"><use xlink:href="#icon-turn-left-90"></use></svg>
        </button>
        <button id="turnRight90" title="Turn right 90°">
            <svg class="icon"><use xlink:href="#icon-turn-right-90"></use></svg>
        </button>
        <button id="turnLeft45" title="Turn left 45°">
            <svg class="icon"><use xlink:href="#icon-turn-left-45"></use></svg>
        </button>
        <button id="turnRight45" title="Turn right 45°">
            <svg class="icon"><use xlink:href="#icon-turn-right-45"></use></svg>
        </button>

        <button id="penDown" title="Pen down">
            <svg class="icon"><use xlink:href="#icon-pencil"></use></svg>
        </button>
        <button id="penUp" title="Pen up">
            <svg class="icon"><use xlink:href="#icon-pencil-crossed"></use></svg>
        </button>
        <button id="lineWidthSmaller" title="Line width smaller">
            <svg class="icon"><use xlink:href="#icon-smaller"></use></svg>
        </button>
        <button id="lineWidthLarger" title="Line width larger">
            <svg class="icon"><use xlink:href="#icon-larger"></use></svg>
        </button>
        <button id="colorBlack" title="Color black" data-color="black" class="color">
            <svg class="icon" style="color: black;"><use xlink:href="#icon-circle-solid"></use></svg>
        </button>
        <button id="colorRed" title="Color red" data-color="red" class="color">
            <svg class="icon" style="color: red;"><use xlink:href="#icon-circle-solid"></use></svg>
        </button>
        <button id="colorGreen" title="Color green" data-color="green" class="color">
            <svg class="icon" style="color: green;"><use xlink:href="#icon-circle-solid"></use></svg>
        </button>
        <button id="colorBlue" title="Color blue" data-color="blue" class="color">
            <svg class="icon" style="color: blue;"><use xlink:href="#icon-circle-solid"></use></svg>
        </button>
        <button id="colorOrange" title="Color orange" data-color="orange" class="color">
            <svg class="icon" style="color: orange;"><use xlink:href="#icon-circle-solid"></use></svg>
        </button>
        <button id="colorYellow" title="Color yellow" data-color="yellow" class="color">
            <svg class="icon" style="color: yellow;"><use xlink:href="#icon-circle-solid"></use></svg>
        </button>
        <button id="colorPurple" title="Color purple" data-color="purple" class="color">
            <svg class="icon" style="color: purple;"><use xlink:href="#icon-circle-solid"></use></svg>
        </button>
        <button id="colorBrown" title="Color brown" data-color="brown" class="color">
            <svg class="icon" style="color: brown;"><use xlink:href="#icon-circle-solid"></use></svg>
        </button>

        <button id="undo" title="Undo last action">
            <svg class="icon"><use xlink:href="#icon-backspace"></use></svg>
        </button>
    </div>
    <hr>
    <div id="actions">
        <button id="reset" title="Reset">
            <svg class="icon"><use xlink:href="#icon-arrow-path"></use></svg>
        </button>
        <button id="replay" title="Replay">
            <svg class="icon"><use xlink:href="#icon-play"></use></svg>
        </button>
        <label><input id="skipAnimation" type="checkbox" /> Skip animation</label> |
        <label>Speed: <input type="range" id="speed" min="0.0" max="1.0" value="0.5" step="0.01" /></label>
    </div>
    <hr>
    <div id="examples"></div>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>