p5.js with velocity.js (or other external libraries)

Hello! I'm very new to Javascript but familiar with Processing. I have recently started working on a new web app/UI and have been using p5 to get going. I'm now at the point where I've created some objects but I want to animate them, I found velocity.js and it looks really powerful but I have no idea if I can incorporate it into my p5 code? I'm a bit confused about whether or not velocity.js can animate an object created by ellipse() for example? Or if you have to create a


div> - if you do then I'm a bit clueless about it. Any help would be massively appreciated!



  • edited October 2015

    When mentioning external libraries, you should at least tell us its site and what it does.
    Don't expect any1 here to know all libraries in the world! [-(

    Also post some small sample of the problem. Read about how to have code posts formatted here:

    Extra tip, when using <, replace it w/ &lt; in order to avoid format glitches. *-:)

    Another tip: replace all http:// in posted code w/ http&#58;// :P

    Generally p5.js can mix up w/ other libraries as long as their rules don't conflict w/ p5.js'.

  • Apologies, I'll repost when I've organised my problem a bit better.

  • Answer ✓

    I'm always intrigued to find out about new/popular JS libraries: there are so many it's hard to keep up!

    It looks like velocity.js is intended for animating DOM elements (e.g. divs) and CSS; and not elements within a canvas (as in p5js). I haven't looked at the API but I'd assume that this makes it unlikely velocity.js will be very useful alongside p5js.

    Unless your web app idea has a particular requirement for drawing things like ellipses to a canvas it may be you're better off doing it in pure JS with suitable libraries...

  • p5.js has it's own DOM library that allow one to control DOM elements


  • @_vk: looking at the docs the DOM library is mostly just wrappers around a few native methods to make life easy for beginners: to create HTML elements, respond to events and embed audio/video. I don't think it's expected to compete with JS libraries focused on web apps/UI. As such it would be hard to recommend if that is the main aim of @benwilliamstaylor

  • Really appreciate the responses, I think you're right, I need to look at these UI libraries. Ideally I wanted to use p5 because I'm so familiar with processing but I think it'd be more productive to just get stuck in at the base level and learn how HTML DOM elements work with velocity.js etc Thanks again guys!

  • If your webpage uses at least 1 canvas too, p5.js is a good option even if you're using other DOM libraries.

  • Some fun with p5.dom.js :P

    quick and dirty


Sign In or Register to comment.