Animating a path using processing js

122 views
Skip to first unread message

gatapia

unread,
Dec 22, 2009, 6:14:10 PM12/22/09
to Processing.js
Hi,

I'm currently reviewing a few technologies for a product I want to
build. As such my knowledge of processing.js is limited to 30 minutes
of looking at the web site and playing with the online IDE. Before I
invest more time I just wanted to get the opinions of the serious
users as to wether this technology will meet my needs. Basically what
I am looking for is something that will allow me to animate a path
through vertices at given points in time. I.e. to do something like:


beginShape();
curveVertex(50, 50);
curveVertex(50, 50); // I would like to add a time point here. I.e
1000ms
curveVertex(200, 50); // 2000 ms
curveVertex(200, 200); // 3000 ms
curveVertex(50, 200);
curveVertex(50, 200); // 4000 ms
endShape();

However I would like to assign time points to the vertices and then
animate this path (smoothly, hence interpolating points). Actually I
would like to animate up to 100 of these paths concurrently (each a
different colour).

I'm very excited about the possibility of using processing.js as
having a smooth path through given vertices is something I have been
after for a considerable time so hopefully the animation component can
be done somehow.

Thanks for any help

Guido

@F1LT3R

unread,
Dec 22, 2009, 11:06:37 PM12/22/09
to proces...@googlegroups.com
If you use an irc client to connect to irc.mozilla.org/processing.js you
can find mql_ who will show you how to use his easing plugin for
Processing.js. This would allow you to animate along your curve in some
really cool ways.

His blog post on the code is here...
http://quasipartikel.at/2009/11/30/motion-tweening-for-processingjs/

> --
>
> You received this message because you are subscribed to the Google Groups "Processing.js" group.
> To post to this group, send email to proces...@googlegroups.com.
> To unsubscribe from this group, send email to processingjs...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/processingjs?hl=en.
>
>
>
>


gatapia

unread,
Dec 24, 2009, 5:19:07 PM12/24/09
to Processing.js
Thanks Alistair,

I ended rolling up my own code. This allowed me to keep my library
dependencies down and the code was pretty straight forward (mainly
ported from a java open source project). However I then found that
the visual impact did not justify the performance degradation.

However I do wish I had started using processing.js from the beginning
looks like it would have made my life a lot easier.

Thanks for the help

Guido

On Dec 23, 3:06 pm, "@F1LT3R" <f1l...@hyper-metrix.com> wrote:
> If you use an irc client to connect to irc.mozilla.org/processing.js you
> can find mql_ who will show you how to use his easing plugin for
> Processing.js. This would allow you to animate along your curve in some
> really cool ways.
>

> His blog post on the code is here...http://quasipartikel.at/2009/11/30/motion-tweening-for-processingjs/

Reply all
Reply to author
Forward
0 new messages