Circuitry Logo
Circuitry
Open Circuitry

On a Page of Your Own

visualfx.js works with any page that has a canvas: one drawn with pictures.js, with the canvas's own 2D functions, with three.js or with WebGL of your own. It is one file, visualfx.js, from the visualfx.js repository. It is not published to npm yet.

With any canvas

<canvas id="c" width="800" height="500"></canvas>
<script type="module">
  import { effects } from "./visualfx.js"
  const c = document.getElementById("c"), g = c.getContext("2d")
  const { glow, trails } = effects(c)
  glow(1); trails(1)
  requestAnimationFrame(function tick(t) {
    requestAnimationFrame(tick)
    g.fillStyle = "black"; g.fillRect(0, 0, 800, 500)
    g.fillStyle = "gold"; g.fillRect(400 + 300 * Math.sin(t / 500), 230, 40, 40)
  })
</script>

The page has to come from a web server (npx serve, or any other), because browsers do not let a page opened straight from disk import a module.

effects(canvas) gives every effect for that canvas. The result is shown on a canvas of its own, laid exactly over yours, and each frame is run after your drawing.

In a pictures.js scene of your own

In Circuitry, and with a pictures.js that has the effects, a scene is given them with nothing to import. With an older pictures.js a scene fetches the library in its first line, with visualfx.js beside the scene, and names what it wants:

const { glow, trails } = await use("visualfx.js")

glow(1)
trails(1.5)

function draw() {
  background("black")
  circle(mouse.x, mouse.y, 40, "gold")
}

Save it as scene.js and run npx pictures run scene.js.

A page that says when it has drawn

A page that knows when its scene has drawn says so itself, and the effects are then run at exactly that moment:

import { effects } from "./visualfx.js"

const fx = effects(canvas, { manual: true })
fx.glow(1)

function tick(dt) {
  drawMyScene()
  fx.frame(dt)             // after each draw: dt is the seconds since the last
}
fx.frame(dt)Run the effects over what has been drawn. dt is their whole clock
fx.pixels()The finished picture, as { width, height, data }
fx.onFrame(fn)fn is called at the moment each frame's picture is there
fx.stats()What the effects are costing
fx.close()Finished: everything on the graphics card is given back

With dials.js

On a page of your own (not in pictures.js, which names the canvas), dials.js looks for the one canvas on the page, and after an effect is on there are two. Say which one the controls are for: const { dial } = dials(canvas).

Python

pyvisualfx needs nothing on the page: the Python module carries visualfx.js and puts it in the page itself. See Using it with Python.

Related