› ›

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

benwilliamstaylorbenwilliamstaylor
edited October 2015 in p5.js Library Questions

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!

Cheers

Tagged:

Best Answer

Answers

  • GoToLoopGoToLoop
    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:
    http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text

    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'.

  • benwilliamstaylorbenwilliamstaylor

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

  • blindfishblindfish
    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...

  • _vk_vk

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

    http://p5js.org/reference/#/libraries/p5.dom

  • blindfishblindfish

    @_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

  • benwilliamstaylorbenwilliamstaylor

    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!

  • GoToLoopGoToLoop

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

  • _vk_vk

    Some fun with p5.dom.js :P

    quick and dirty

    http://kubrusly.com/fundom/

Sign In or Register to comment.