UNPKG

3.91 kBHTMLView Raw
1<html>
2
3<head>
4 <title>plot</title>
5 <!-- <style>
6 #modelDiv {
7 height: 400px;
8 }
9 </style> -->
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 // view.idle()
67
68
69 function runGui(model, view, chart) {
70 const gui = new dat.GUI()
71
72 // Helper for adding variables to gui.
73 // "listen" to make reset values to appear in gui menu
74 // "onChange" to have model update camera for each change.
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 // labels: ticks,
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