This repo provides a PainShapeVisualization
class that can be used to display visual pain shapes on a given asset. It uses pixijs and some custom built shaders. For now, the library is distributed in one .js
file. Checkout the dist
folder to get the minified js file.
To see it in action, checkout the pain app repo
- Import the .js file.
const PainVisualization = require("painshapevisualization.js")
- Create an object an pass the a div node in the constructor. PainVis will create a canvas element inside this container.
const painVis = new PainVisualization(document.getElementById("div-container"))
- Start the async setup process by calling start and passing the src to the background asset. Both .png and .jpg files are supported. In theory, all file formats supported by pixijs's
Asset
class should work too.
await painVis.start("assets/background.jpg")
- Update the model parameters by calling
updateModel
. Check outUserParameters
type in./src/model.ts
to see the possible parameters.
painVis.updateModel({
"animation-behavior": "linear-in",
"color": "blue"
// and so on... Be sure to set all parameters.
})