<html><head></head><body><div style="color:#000; background-color:#fff; font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px"><div id="yiv7491381977"><div id="yui_3_16_0_1_1451851974487_2654"><div id="yui_3_16_0_1_1451851974487_2653" style="color:#000;background-color:#fff;font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;"><div id="yui_3_16_0_1_1451851974487_3004">It's actually way more simplistic than that-- just an "animate" method that <br></div><div id="yui_3_16_0_1_1451851974487_2710" dir="ltr">wraps around whatever attribute is available to the drawing command. All <br></div><div id="yui_3_16_0_1_1451851974487_2786" dir="ltr">I'll have is a ramp time, an optional delay time, and an optional easing curve. <br></div><div id="yui_3_16_0_1_1451851974487_2997" dir="ltr">That will make it a bit like a [vline~] for GUI side animation.</div><div id="yui_3_16_0_1_1451851974487_2998" dir="ltr"><br></div><div id="yui_3_16_0_1_1451851974487_2999" dir="ltr">I'm using the web animations API because it makes things very simple, even <br></div><div id="yui_3_16_0_1_1451851974487_3000" dir="ltr">to do complex things like animating path data.</div><div id="yui_3_16_0_1_1451851974487_3094" dir="ltr"><br></div><div id="yui_3_16_0_1_1451851974487_3251" dir="ltr">The idea is that this would open up some modest visualization opportunities <br></div><div id="yui_3_16_0_1_1451851974487_3252" dir="ltr">that are otherwise too cpu intensive. For example, if you're animating <br></div><div id="yui_3_16_0_1_1451851974487_3253" dir="ltr">using [line] the socket messages can quickly get in the way of the audio.<br></div><div id="yui_3_16_0_1_1451851974487_3001" dir="ltr"><br></div><div id="yui_3_16_0_1_1451851974487_3002" dir="ltr">-Jonathan<br></div><div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451841944661_7669"><br clear="none"></div><div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451841944661_6038"><br clear="none"></div><div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451841944661_6497"><br clear="none"></div><div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451841944661_6039"><br clear="none"></div><div id="yiv7491381977yui_3_16_0_1_1451841944661_6012"><span></span></div> <div id="yui_3_16_0_1_1451851974487_2711" class="yiv7491381977qtdSeparateBR"><br clear="none"><br clear="none"></div></div></div></div><div class=".yiv7491381977yahoo_quoted"> <div style="font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;"> <div style="font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;"> <div class="qtdSeparateBR"><br><br></div><div class="yiv7491381977yqt1236546037" id="yiv7491381977yqt89869"><div dir="ltr"><font face="Arial" size="2"> On Sunday, January 3, 2016 1:08 PM, Ivica Ico Bukvic <ico@vt.edu> wrote:<br clear="none"></font></div> <br clear="none"><br clear="none"> <div class="yiv7491381977y_msg_container"><div id="yiv7491381977"><div>
I think it may make sense in addition to having a
one-shot-independent animations that have no guarantee of staying in
sync with the audio (e.g. these could be useful for mouse-over
button animations) that your animation object can also receive a
decimal value between its originator and destination, allowing for
each keyframe to be a whole number. So, 0-1 would interpolate
between the starting state and first keyframe, 1-2 between first and
second keyframes, etc., and thus allow pd to use its timing
mechanism to project changes in animation state via a line object, a
counter or something similar. IIRC most (all?) HTML5-based
animations can be triggered as independent events or can be given a
specific percentage value. The one-shot object could interact with
independent events, while the proposed object could interact with
the latter.<br clear="none">
<br clear="none">
That said, not knowing how you have imagined your animation object,
it may be tricky to implement this as it would require object to
keep track of all the keyframed events (assuming there are more than
one). If you are thinking of having the animation object track only
one single animation (e.g. something progressing from 30% to 90%),
the same could still prove useful except in this case you would only
allow for values between 0 and 1.<br clear="none">
<br clear="none">
<div class="yiv7491381977yqt1831210892" id="yiv7491381977yqt48349"><div class="yiv7491381977moz-cite-prefix">On 1/2/2016 1:12 PM, Jonathan Wilkes
via Pd-list wrote:<br clear="none">
</div>
<blockquote type="cite">
<div style="color:#000;background-color:#fff;font-family:HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;">
<div id="yiv7491381977yui_3_16_0_1_1451752408813_3953">Hi list,</div>
<div id="yiv7491381977yui_3_16_0_1_1451752408813_3952">I'm playing with
adding a simple animation api to data structure drawing
commands. <br clear="none">
</div>
<div id="yiv7491381977yui_3_16_0_1_1451752408813_3951">The parameters will be
sent to the GUI, and the GUI will take care of the ramp,
delay, etc.</div>
<div id="yiv7491381977yui_3_16_0_1_1451752408813_3950"><br clear="none">
</div>
<div id="yiv7491381977yui_3_16_0_1_1451752408813_9398">I'm thinking of just
making it a simple "set it and forget it" api. That is, you
send a message <br clear="none">
</div>
<div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451752408813_7749">with your
ramp and delay times to the GUI, and you just blindly trust
that the GUI will make <br clear="none">
</div>
<div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451752408813_9399">things
happen in the right amount of time. The alternative I can
think of is to have the GUI <br clear="none">
</div>
<div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451752408813_7739">call back
when an animation is finished, but that would encourage mixing
the two clocks <br clear="none">
</div>
<div dir="ltr">(i.e., GUI and Pd clock) in unpredictable <br clear="none">
</div>
<div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451752408813_7740">ways.</div>
<div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451752408813_9400"><br clear="none">
</div>
<div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451752408813_9401">Does this
simple approach seem like a reasonable design? The biggest
problem would be that <br clear="none">
</div>
<div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451752408813_9402">a
long-running animation could skew. But in that case you could
probably amortize the cost of</div>
<div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451752408813_9431">sending more
messages over the longer time period.<br clear="none">
</div>
<div dir="ltr" id="yiv7491381977yui_3_16_0_1_1451752408813_9403"><br clear="none">
</div>
<div dir="ltr">-Jonathan<br clear="none">
</div>
</div>
<br clear="none">
<fieldset class="yiv7491381977mimeAttachmentHeader"></fieldset>
<br clear="none">
<pre>_______________________________________________
<a rel="nofollow" shape="rect" class="yiv7491381977moz-txt-link-abbreviated" ymailto="mailto:Pd-list@lists.iem.at" target="_blank" href="mailto:Pd-list@lists.iem.at">Pd-list@lists.iem.at</a> mailing list
UNSUBSCRIBE and account-management -> <a rel="nofollow" shape="rect" class="yiv7491381977moz-txt-link-freetext" target="_blank" href="http://lists.puredata.info/listinfo/pd-list">http://lists.puredata.info/listinfo/pd-list</a>
</pre>
</blockquote></div>
<br clear="none">
</div></div><br clear="none"><div class="yiv7491381977yqt1831210892" id="yiv7491381977yqt93725">_______________________________________________<br clear="none"><a rel="nofollow" shape="rect" ymailto="mailto:Pd-list@lists.iem.at" target="_blank" href="mailto:Pd-list@lists.iem.at">Pd-list@lists.iem.at</a> mailing list<br clear="none">UNSUBSCRIBE and account-management -> <a rel="nofollow" shape="rect" target="_blank" href="http://lists.puredata.info/listinfo/pd-list">http://lists.puredata.info/listinfo/pd-list</a><br clear="none"></div><br clear="none"><br clear="none"></div></div> </div> </div> </div></div></body></html>