sample_instance.html

<div id="canvasHolder" style="border:1px solid black;width:600px;height:500px"></div>

<script src="lib/p5.js"></script>
<script src="lib/scenemanager.js"></script>
<script>

var program = new p5(Program, "canvasHolder");

// Use p5.js in "instance mode"
function Program(p)
{
    p.setup = function()
	{
		p.createCanvas(600, 500);

        var mgr = new SceneManager(p);
        mgr.wire();
        mgr.showScene( LineAnimation );
	}
}

// SceneManager can be used also when p5.js is used in "instance mode"
function LineAnimation(p)
{
    this.y = 0;
    
    this.setup = function()
    {
        p.background("teal");
    }

    this.draw = function()
    {
        p.background("teal");

        p.line(0, this.y, p.width, this.y);
        this.y++;

        if ( this.y > p.height )
            this.y = 0;
    }

    this.mousePressed = function()
    {
        console.log("Mouse Pressed");
    }
}


</script>