horizon-indicator/script.js at main · lucas458/horizon-indicator · 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
91
92
93
94
95
96
97
98
99
100
101
Math.clamp = (value, min, max) => {
    if (value < min) return min;
    if (value > max) return max;
    return value;
};


function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min) + min);
}


function map(x, in_min, in_max, out_min, out_max) {
    return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}


var currentRoll = 0;
var currentPitch = 0;


function updateScreen(){
    let tempAngle = map(currentPitch, -90, 90, -395, 395);
    fixed_needle.style.transform = `rotate(${Math.clamp(-currentRoll, -60, 60)}deg)`;
    back.style.transform = `translateY(${tempAngle}px) rotate(${-currentRoll}deg)`;
    back.style.transformOrigin = `center ${back.offsetHeight/2 - tempAngle}px`;
}


onkeydown = onkeyup = (evt) => {
    if ( controller[evt.key] ){
        controller[evt.key].pressed = evt.type == 'keydown';
    }
};


function update(){

    Object.keys(controller).forEach(key => {

        if ( controller[key].pressed ){
            controller[key].call();
            updateScreen();
        }
    });


    requestAnimationFrame(update);


}

onload = update;


const controller = {

    "ArrowLeft": {
        "pressed": false,
        "call": () => {
            currentRoll -= 2;
            if ( currentRoll < -180 ){
                currentRoll = 180;
            }
        }
    },


    "ArrowRight": {
        "pressed": false,
        "call": () => {
            currentRoll = (currentRoll + 2) % 360;
        }
    },


    "ArrowUp": {
        "pressed": false,
        "call": () => {
            currentPitch = Math.clamp(currentPitch - Math.cos(currentRoll*Math.PI/180), -90, 90);
        }
    },


    "ArrowDown": {
        "pressed": false,
        "call": () => {
            currentPitch = Math.clamp(currentPitch + Math.cos(currentRoll*Math.PI/180), -90, 90);
        }
    }

};