agentscript
Version:
AgentScript Model in Model/View architecture
89 lines (54 loc) • 3.06 kB
Markdown
<!-- # AnimatorControl -->
Controls are functions that let you manage your Model and View .. the "C" in "MVC".
<!-- We've already used one in the [View tutorial](</docs/tutorial-5 - View.html#twodraw-html>). It's the Animator near the bottom. -->
We've already used one in the View tutorial. It's the Animator in the _TwoDraw HTML_ section.
To explore the Animator control, we'll use the browser's Developer Console along with the [pheromone.html](https://code.agentscript.org/views2mv/pheromone.html) page used in the View tutorial. You can use the local version we downloaded and modified instead if you'd like. (You should remove the changes we made or re-download it for a fresh start.)
## Animator
The Animator looks like this:
```javascript
const anim = new Animator(
() => {
model.step()
view.draw()
},
500, // run 500 steps
30 // 30 fps
)
```
It controls both the model and view as you can see. In this case it is set up to
run 500 steps, at 30 fps.
## Developer Console
The last line in the the View's HTML section has this:
```javascript
util.toWindow({ util, model, view, anim })
```
It puts these 4 properties in the global window object.
The anim object is the one we'll be working with.
## pheromone.html
Make sure pheromone.html is running in the browser and the Developer Console is open.
It probably has completed it's 500 steps.
You can check by typing "anim.isRunning()" in the Developer Console.
Lets restart it. Start by typing "anim" and hit return. It should show:
`> Animator {steps: 500, fps: 30, timeoutID: null, ticks: 500, fcn: ƒ}`
To restart it, first type in `anim.reset(-1, 20)`
The two parameters are how many steps to take before stopping and at what fps (frames per second) to run.
Using -1 steps means `forever`, and 20 means at 20 fps.
Then `anim.start()` to restart with the new parameters.
## Other Functions
Surprisingly, we've used all the typical Animator functions! Here are some more:
`anim.idle(fcn)` // When animator is stopped, use idle to perform fcn at 4 fps
This is primarily used in some GUIs where users can stop/start the animator.
Generally the fcn redraws the model so that if stopped, and changes are made
in the GUI, the view is updated.
A few more functions:
`anim.startStats()` // puts a fps widget on screen
This is very useful: it puts a performance widget in the browser.
`anim.toggle()` // if running, stop(). Otherwise start()
`anim.once()` // If running, stop(). Run animator once. Use start() to restart.
We'll now go on to look at three more controls: Keyboard, Gui, and Mouse. And we have a fairly simple "hello world" demo for each:
- Keyboard: [helloKeys.html](https://code.agentscript.org/mvc/helloKeys.html)
- Gui: [helloGui.html](https://code.agentscript.org/mvc/helloGui.html)
- Mouse: [helloMouse.html](https://code.agentscript.org/mvc/helloMouse.html)