1 | <html>
|
2 |
|
3 | <head>
|
4 | <title>plot</title>
|
5 | |
6 |
|
7 |
|
8 |
|
9 |
|
10 | </head>
|
11 |
|
12 | <body>
|
13 | <div id="modelDiv"></div>
|
14 | <canvas id="plotCanvas"></canvas>
|
15 |
|
16 | <script type="module">
|
17 | import * as util from 'https://code.agentscript.org/src/utils.js'
|
18 | import Color from 'https://code.agentscript.org/src/Color.js'
|
19 | import ThreeDraw from 'https://code.agentscript.org/src/ThreeDraw.js'
|
20 | import Animator from 'https://code.agentscript.org/src/Animator.js'
|
21 | import Model from 'https://code.agentscript.org/models/Camera3DModel.js'
|
22 | import Chart from 'https://cdn.skypack.dev/chart.js@2.9.4'
|
23 | import dat from 'https://code.agentscript.org/vendor/dat.gui.js'
|
24 |
|
25 | const toDeg = 180 / Math.PI
|
26 |
|
27 | const isPixel = t => t.breed.name === 'pixels'
|
28 | const uvToColor = t => {
|
29 | const { u, v } = t
|
30 | const r = Math.sqrt(u ** 2 + v ** 2)
|
31 | return Color.toTypedColor(`hsl(${(r * 240) % 240}, 100%, 50%)`)
|
32 | }
|
33 | const drawOptions = {
|
34 | turtlesMesh: 'Obj3DMesh',
|
35 | turtlesShape: t => (isPixel(t) ? 'Cube' : 'Dart'),
|
36 | turtlesColor: t =>
|
37 | isPixel(t) ? uvToColor(t) : Color.toTypedColor('red'),
|
38 | turtlesSize: t => (isPixel(t) ? 0.35 : 3),
|
39 | linksColor: l => uvToColor(l.end0),
|
40 | }
|
41 |
|
42 | const model = new Model()
|
43 | await model.startup()
|
44 | model.setup()
|
45 |
|
46 | const view = new ThreeDraw(model, {
|
47 | div: 'modelDiv',
|
48 | drawOptions,
|
49 | })
|
50 |
|
51 | util.toWindow({ util, model, view })
|
52 |
|
53 | const chart = initPlot()
|
54 | const gui = runGui(model, view, chart)
|
55 | plot(chart, model)
|
56 |
|
57 | await new Animator(
|
58 | () => {
|
59 | model.step()
|
60 | view.draw()
|
61 | },
|
62 | -1,
|
63 | 30
|
64 | )
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | function runGui(model, view, chart) {
|
70 | const gui = new dat.GUI()
|
71 |
|
72 |
|
73 |
|
74 |
|
75 | const guiAddVal = (obj, name, start, stop, step) => {
|
76 | gui.add(obj, name, start, stop, step)
|
77 | .listen()
|
78 | .onChange(val => {
|
79 | model.moveCamera()
|
80 | plot(chart, model)
|
81 | })
|
82 | }
|
83 |
|
84 | guiAddVal(model, 'heading', -180, 180, 5)
|
85 | guiAddVal(model, 'pitch', -180, 180, 5)
|
86 | guiAddVal(model, 'roll', -180, 180, 5)
|
87 | guiAddVal(model, 'sphereRadius', 0, 16, 1)
|
88 | guiAddVal(model, 'fieldOfView', 1, 180, 1)
|
89 |
|
90 | gui.add(model, 'toggleLinks')
|
91 | gui.add(model, 'reset').onFinishChange(() => {
|
92 | plot(chart, model)
|
93 | })
|
94 |
|
95 | return gui
|
96 | }
|
97 |
|
98 | function initPlot() {
|
99 | const canvas = document.getElementById('plotCanvas')
|
100 | const chart = new Chart(canvas, {
|
101 | type: 'scatter',
|
102 | data: {
|
103 |
|
104 | datasets: [
|
105 | {
|
106 | data: [],
|
107 | label: 'PhiTheta',
|
108 | backgroundColor: 'red',
|
109 | borderColor: 'red',
|
110 | },
|
111 | ],
|
112 | },
|
113 | })
|
114 | return chart
|
115 | }
|
116 |
|
117 | function plot(chart, model) {
|
118 | chart.clear()
|
119 | const points = model.pixels.map(t => ({
|
120 | x: t.theta * toDeg,
|
121 | y: t.pitch * toDeg,
|
122 | }))
|
123 | chart.data.datasets[0].data = points
|
124 | chart.update()
|
125 | }
|
126 | </script>
|
127 | </body>
|
128 |
|
129 | </html> |
\ | No newline at end of file |