vector-concepts/index.html at master · sean-codes/vector-concepts · 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
<doctype html>
<html>
   <head>
      <link rel="stylesheet" href="./style.css">
   </head>
   <body>
      <h2>Experimenting with Vectors</h2>
      <display>
         <canvas id="canvas" width="500"; height="225"></canvas>
         <settings></settings>
      </display>
      <a href="https://github.com/sean-codes/vector-concepts" id="viewsource-link">view source<img src="./github.png"></a>
      <script src="resources/Scene.js"></script>
      <script src="resources/Vector.js"></script>
      <script src="resources/Shapes.js"></script>
      <script src="resources/Settings.js"></script>
      <script>
         // Add more experiments here!
         var experiments = [
            { title: 'bounce', src: '/experiments/bounce.js' },
            { title: 'UNIT Circle', src: '/experiments/unitcircle.js' },
            { title: 'Draw a Circle', src: '/experiments/drawCircle.js' },
            { title: 'Rotate Point', src: '/experiments/rotatePoint.js' },
            { title: 'Rotation', src: '/experiments/rotating.js' },
            { title: 'Space Ship', src: '/experiments/ship.js' },
            { title: 'Dot Product', src: '/experiments/dotproduct.js' },
            { title: 'Projection', src: '/experiments/projection.js' },
            { title: 'Axis Aligned', src: '/experiments/AABB.js' },
            { title: 'Separating Axis', src: '/experiments/SAT.js' },
            { title: 'Separating Axis Move', src: '/experiments/SAT2.js' },
            { title: 'Separating Axis Info', src: '/experiments/satInfo.js' },
				{ title: 'Line Weighted AVG', src: '/experiments/lineWeightedAvg.js' },
            { title: 'Intersection Slope Intercept', src: '/experiments/intersectionSlopeIntercept.js' },
            { title: 'Point in shape', src: '/experiments/pointInShape.js' },
            { title: 'Line Intersection Parametric', src: '/experiments/intersectionParametric.js' },
            { title: 'Using Line Intersection', src: '/experiments/intersectionUsage.js' },
            { title: 'RayCast 2D', src: '/experiments/RayCast2D.js' },
            { title: 'Closest Point to Line', src: '/experiments/closestPointToLine.js' },
            { title: 'Reflection', src: '/experiments/reflection.js' },
            { title: 'Using Reflection', src: '/experiments/usingReflection.js' },
            { title: 'Verlet Dots', src: '/experiments/verletDots.js' },
            { title: 'Verlet Box', src: '/experiments/verletBox.js' },
            { title: 'Verlet Chain', src: '/experiments/verletChain.js' },
            { title: 'Verlet Collision', src: '/experiments/verletBoxCollision.js' },
            { title: 'Verlet Stacking', src: '/experiments/verletStacking.js' },
            { title: 'Verlet Side', src: '/experiments/verletSides.js' },
            { title: 'Verlet Friction', src: '/experiments/verletFriction.js' },
            { title: 'Facing Sides', src: '/experiments/sideFacingShape.js' },
            { title: 'elastic', src: '/experiments/elastic.js' },
            { title: 'circle collision', src: '/experiments/circleCollision.js' },
         ]

         // Some interesting manuevering
         document.body.onload = function() {
            // Load the current script
            var script = document.createElement('script')
            script.src = window.location.hash.replace('#', '.')
            document.body.appendChild(script)

            // Load all the links
            for (var experiment of experiments) {
               var button = document.createElement('button')
               button.innerHTML = experiment.title
               button.dataset.src = experiment.src
               if (script.src.endsWith(experiment.src)) {
                  button.classList.add('active')

                  var htmlViewSourceLink = document.getElementById('viewsource-link')
                  htmlViewSourceLink.href += '/tree/master' + experiment.src
               }

               button.onclick = function() {
                  window.location.hash = this.dataset.src
                  window.location.reload()
               }

               document.body.appendChild(button)
            }
         }
      </script>
   </body>
</html>