On this page

## 6 - 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. It's the Animator near the bottom.

To explore the Animator control, we'll use the browser's Developer Console

## Animator

The Animator looks like this:

    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.

The last line in the the View's HTML section has this:

    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.

Making sure you're still on pheromone.html page. It probably has completed it's 500 steps. You can check by typing "anim.isRunning()"

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 stoppine and at what fps (frames per second) to run.

Using -1 steps means `foreveer`, and at 20 fps.

Then `anim.start()` to restart with the new parameters.

The animator also provides an idle() function

`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, not the Model, the view is updated.

A few more functions:

`anim.startStats()` // puts a fps widget on screen

`anim.toggle()` // if running, stop(). Otherwise start()

`anim.once()` // If running, stop(). Run animator once. Use start() to restart.

Type anything to view search result