FlockingSim/part2.html at main · abecker96/FlockingSim · 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
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <style type="text/css">
            canvas {
                padding: auto;
            }
            body {
                margin: 0;
                color: #FFFFFF;
            }
            .slidecontainer {
                color: #FFFFFF;
                width: auto;
                padding: 20px;
                position: absolute; left: 200; top: 0; z-index: 1;
                background: #181818;
                opacity: 0.9;
                border-radius: 20px;
            }
        </style>
        <canvas id="myCanvas" width="1" height="1"
            style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
        <div class="slidecontainer">
            <h3>Control Panel</h3>
            <p>Number of boids:</p>
            <input id=numBoids value="200"/>
            <p id=flockRangeOut></p>
            <input id=flockRangeSlider type="range" min="0" max="100" value="10" class="slider">
            <p id=boidMoveSpeedOut></p>
            <input id=boidMoveSpeedSlider type="range" min="1" max="100" value="50" class="slider">
            <p id=rotationOut></p>
            <input id=rotationSlider type="range" min="0" max="100" value="50" class="slider">
            <p id=boidSizeOut></p>
            <input id=boidSizeSlider type="range" min="1" max="100" value="50" class="slider">
            <p id=separationOut></p>
            <input id=separationSlider type="range" min="0" max="100" value="50" class="slider">
            <p id=cohesionOut></p>
            <input id=cohesionSlider type="range" min="0" max="100" value="50" class="slider">
            <p id=alignmentOut></p>
            <input id=alignmentSlider type="range" min="0" max="100" value="50" class="slider">
            <p id=alphaOut></p>
            <input id=alphaSlider type="range" min="0" max="10" value="9" class="slider">
            <p id=mouseInputOut></p>
            <input id=mouseInputBox class="slider" type="checkbox" checked="true">
            <p id=flockingColorsOut>Color-specific flocking?</p>
            <input id=flockingColorsBox class="slider" type="checkbox" checked="false">
            <p id=avoidWallsOut></p>
            <input id=avoidWallsBox class="slider" type="checkbox">
        </div>
        <script src="part2.js"></script>
    </body>
</html>