graviti_model

1
const EX_PRES = 5
2
const DEBUG = false
3
const CLEAN = true
4

5
let scope = {
6
    width: 0,
7
    height: 0,
8
    ctx: null
9
}
10

11
function initGUI () {
12
    let canvas = document.getElementById('view')
13
    if (canvas && canvas.getContext) {
14
        scope.width = window.innerWidth - 4
15
        scope.height = window.innerHeight - 4
16
        scope.center = {
17
            x: Math.round(scope.width / 2),
18
            y: Math.round(scope.height / 2)
19
        }
20

21
        canvas.width = scope.width
22
        canvas.height = scope.height
23

24
        scope.ctx = canvas.getContext('2d')
25

26
        scope.ctx.fillStyle = 'black'
27
        scope.ctx.fillRect(0,0,scope.width,scope.height)
28

29
        return true
30
    } else {
31
        return false
32
    }
33
}
34

35
function clean (ctx) {
36
    if (CLEAN) {
37
        ctx.fillStyle = 'black'
38
        ctx.fillRect(0,0,scope.width,scope.height)
39
    }
40
}
41

42
function draw (points, view) {
43
    let ctx = scope.ctx
44
    clean(ctx)
45

46
    // let rect = getDrawRect(points)
47
    const POINT_SIZE = 1
48

49
    for (let i = 0; i < points.length; i++) {
50
        // ctx.fillStyle = randomColor()
51
        ctx.fillStyle = 'white'
52
        let x = points[i].x - view.x
53
        let y = points[i].y - view.y
54

55
        let kx = scope.width / view.width
56
        let ky = scope.height / view.height
57

58
        let screenX = Math.round(scope.center.x + x * kx)
59
        let screenY = Math.round(scope.center.y - y * ky)
60
        ctx.fillRect(
61
            screenX,
62
            screenY,
63
            POINT_SIZE,
64
            POINT_SIZE
65
        )
66
        printPointInfo(ctx, screenX, screenY, points[i])
67
    }
68

69
    printDataInfo(ctx, points, view)
70
}
71

72
function printPointInfo (ctx, screenX, screenY, point) {
73
    if (DEBUG) {
74
        ctx.fillText(
75
            `${point.m.toExponential(EX_PRES)}`,
76
            screenX + 10, screenY + 10
77
        )
78
        ctx.fillText(
79
            `(${point.x.toExponential(EX_PRES)}, ${point.y.toExponential(EX_PRES)}, ${point.z.toExponential(EX_PRES)})`,
80
            screenX + 10, screenY + 20
81
        )
82
        ctx.fillText(
83
            `(${point.vx.toExponential(EX_PRES)}, ${point.vy.toExponential(EX_PRES)}, ${point.vz.toExponential(EX_PRES)})`,
84
            screenX + 10, screenY + 30
85
        )
86
    }
87
}
88

89
function printDataInfo (ctx, points, view) {
90
    ctx.fillStyle = '#000000'
91
    ctx.fillRect(0, 0, 120, 100)
92
    ctx.fillStyle = '#ffffff'
93
    ctx.fillText(`points: ${points.length.toExponential(EX_PRES)}`, 10,10)
94
    ctx.fillText(`width: ${view.width.toExponential(EX_PRES)}`, 10,20)
95
    ctx.fillText(`height: ${view.height.toExponential(EX_PRES)}`, 10,30)
96
    ctx.fillText(`x: ${view.x.toExponential(EX_PRES)}`, 10,40)
97
    ctx.fillText(`y: ${view.y.toExponential(EX_PRES)}`, 10,50)
98
}
99

100
function randomColor () {
101
    const MIN = 100
102
    const MAX = 255
103

104
    let r = Math.round(MIN + Math.random() * (MAX - MIN))
105
    let g = Math.round(MIN + Math.random() * (MAX - MIN))
106
    let b = Math.round(MIN + Math.random() * (MAX - MIN))
107

108
    r = r.toString(16)
109
    g = g.toString(16)
110
    b = b.toString(16)
111

112
    r = r.length === 1 ? `0${r}` : r
113
    g = g.length === 1 ? `0${g}` : g
114
    b = b.length === 1 ? `0${b}` : b
115

116
    return `#${r}${g}${b}`
117
}
118