Skip to main content
Participant
December 2, 2021
Answered

p5.js library with Adobe Animate?

  • December 2, 2021
  • 2 replies
  • 1251 views

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

    This topic has been closed for replies.
    Correct answer ClayUUID

    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.

    2 replies

    ClayUUIDCorrect answer
    Legend
    December 2, 2021

    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.

    ProfDrawAuthor
    Participant
    December 2, 2021

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

     

    kglad
    Community Expert
    Community Expert
    December 2, 2021

    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?

    ProfDrawAuthor
    Participant
    December 2, 2021

    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.