p5.js library with Adobe Animate?

[ProfDraw]

Hi, I have learned a bit of code using p5.js. I would like to include some of my scripts written in p5.js in  Adobe Animate html5 projects. I have added p5.js using the include. And I can copy and paste a script into animate and run it it but it only works if I create a separate canvas, obviously I need to draw to the Animate canvas instead.

Any advice would be appreciated. Here's an example of a script I'd like to draw directly into an Animate project.

https://editor.p5js.org/daniellefcourt/sketches/lDnqYHvuF

[kglad]

you should be able to use any canvas project, include your libraries and code (after those libraries load) using those library dependencies.

what problem are you having doing that?

[ProfDraw]

Thanks for the reply.

Here's a sample. I can create this simple ellipse in p5.js

When I add the code to AA it creates a new canvas, under the AA one.

If I delete createCanvas it still doesn't render to AA canvas.

 

 

[ClayUUID · Accepted solution]

P5 is a framework for drawing on the canvas.

Animate uses its own framework for drawing on the canvas, CreateJS.

You cannot have two frameworks controlling the same canvas, because they will fight each other for control of it. The best you could hope for is to have two identical canvases stacked on top of each other, each controlled by a different framework, with the top one set transparent so you can see both of them. This would be a horrible, wasteful solution.

If you really want to created scripted animations in Animate, you should give up on P5 and get learning CreateJS.

[ProfDraw]

OK. Thanks for your help. That's what I wasn't understanding.

[ProfDraw]

One question. As a beginner, would you recommend I learn ActionScript first, or just dive into javascript using CreateJS?

[ClayUUID]

ActionScript is only for ActionScript documents. JavaScript/CreateJS is only for HTML5 Canvas documents.