agentscript
Version:
AgentScript Model in Model/View architecture
132 lines (108 loc) • 4.33 kB
HTML
<html>
<head>
<title>nav</title>
</head>
<body>
<script type="module">
import * as util from 'https://code.agentscript.org/src/utils.js'
import ThreeDraw from 'https://code.agentscript.org/src/ThreeDraw.js'
import Model from 'https://code.agentscript.org/models/Hello3DModel.js'
import Animator from 'https://code.agentscript.org/src/Animator.js'
import dat from 'https://code.agentscript.org/vendor/dat.gui.js'
const drawOptions = {
turtlesShape: t => (t.id === 0 ? 'Dart' : 'Sphere'),
turtlesColor: 'red',
turtlesSize: t => (t.id === 0 ? 5 : 3),
}
const model = new Model()
model.population = 2
model.linksToo = false
// model.setGeometry('degrees'https://code.agentscript.org// works fine, euclidean
await model.startup()
model.setup()
const turtle = model.turtles[0]
const target = model.turtles[1]
target.setxyz(10, -10, 10)
const view = new ThreeDraw(model, {
div: document.body, //'modelDiv',
turtles: { meshClass: 'Obj3DMesh' },
drawOptions,
})
util.toWindow({ util, model, view })
// REMIND: Move to ThreeView as a general helper.
view.perspectiveCam.position.set(0, 0, 1.5 * model.world.width)
view.orbitControls.update()
const step = runGui(turtle, target)
new Animator(
() => {
step()
view.draw()
},
-1, //500,
30
)
function runGui(turtle, target) {
const gui = new dat.GUI()
const reset = () => {
turtle.reset()
}
reset()
const controls = {
ThetaPhiPsi: '0, 0, 0',
HeadingPitchRoll: '0, 0, 0',
Position: '0, 0, 0',
DxDyDz: '0, 0, 0',
angle: 45,
speed: 5,
reset: () => reset(),
forward: () => turtle.forward(controls.speed),
backward: () => turtle.forward(-controls.speed),
lookAt: () => turtle.face(target),
right: () => turtle.right(controls.angle),
left: () => turtle.left(controls.angle),
tiltUp: () => turtle.tiltUp(controls.angle),
tiltDown: () => turtle.tiltDown(controls.angle),
rollRight: () => turtle.rollRight(controls.angle),
rollLeft: () => turtle.rollLeft(controls.angle),
}
util.toWindow({ t: turtle, target, gui, controls })
gui.add(controls, 'ThetaPhiPsi').listen()
gui.add(controls, 'HeadingPitchRoll').listen()
gui.add(controls, 'Position').listen()
gui.add(controls, 'DxDyDz').listen()
gui.add(controls, 'angle', 0, 90, 5)
gui.add(controls, 'speed', 0, 20, 5)
gui.add(controls, 'reset')
gui.add(controls, 'forward')
gui.add(controls, 'backward')
gui.add(controls, 'lookAt')
const pitchFolder = gui.addFolder('rotateZ')
pitchFolder.open()
pitchFolder.add(controls, 'right')
pitchFolder.add(controls, 'left')
const tiltFolder = gui.addFolder('rotateY')
tiltFolder.open()
tiltFolder.add(controls, 'tiltUp')
tiltFolder.add(controls, 'tiltDown')
const rollFolder = gui.addFolder('rotateX')
rollFolder.open()
rollFolder.add(controls, 'rollRight')
rollFolder.add(controls, 'rollLeft')
function step() {
function fmt(array) {
array = util.precision(array, 2)
return array.toString().replace(/,/g, ', ')
}
controls.HeadingPitchRoll = fmt(
turtle.getHeadingPitchRoll()
)
controls.ThetaPhiPsi = fmt(turtle.getThetaPhiPsi())
controls.Position = fmt(turtle.getxyz())
controls.DxDyDz = fmt(turtle.getDxDyDz())
}
return step
}
</script>
<div id="modelDiv"></div>
</body>
</html>