Re: Animated vector field...

Path	csiph.com!weretis.net!feeder4.news.weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From	Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups	comp.lang.javascript
Subject	Re: Animated vector field...
Date	Sat, 04 Jun 2016 13:45:10 +0200
Organization	PointedEars Software (PES)
Lines	52
Message-ID	<1650761.fOrR8oP7AL@PointedEars.de> (permalink)
References	<nitnvj$mko$1@gioia.aioe.org> <nito4t$mo7$1@gioia.aioe.org>
Reply-To	Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version	1.0
Content-Type	text/plain; charset="ISO-8859-1"
Content-Transfer-Encoding	7Bit
X-Trace	solani.org 1465040712 14179 eJwFwYEBgDAIA7CXVKCFcxij/59gEoYXQ0fAQ6GbzB1vPvQJ6m6l8nARsipUXzP29qfFWfwnHRHC (4 Jun 2016 11:45:12 GMT)
X-Complaints-To	abuse@news.solani.org
NNTP-Posting-Date	Sat, 4 Jun 2016 11:45:12 +0000 (UTC)
User-Agent	KNode/4.14.2
X-User-ID	eJwFwYEBwDAEBMCVEt5jHFL2H6F3prx8Dhpha5vtX5ZiRupFCoMttFyc276yO6Us+4aqPQnvhuY8aY/A+QFegBWt
Cancel-Lock	sha1:BXXlr4MMYuAImkVXIP+ZsWlji6E=
X-NNTP-Posting-Host	eJwFwQEBADAEBMBKNjziYPSPsDtlHLQJFKKr6+zJiGjKaZ13nvjGpjlzOW5MOV0k1d5isg8ehBEN
Xref	csiph.com comp.lang.javascript:30632

Show key headers only | View raw

Chris M. Thomasson wrote:

> I forgot to mention that it will not work if your browser does not have
> (requestAnimationFrame). I do not have a workaround function for this as
> of yet.  :^o

Several of us have been doing rather smooth animations with 
window.setTimeout() since the beginning of the previous decade.
One pattern is:

  /* Should not be less than 10 ms */
  var step = 10;

  var timeout = window.setTimeout(function animate () {
    window.clearTimeout(timeout);

    /* modify properties according to a timing function */

    if (!stopCondition)
    {
      timeout = window.setTimeout(animate, step);
    }
  }, step);

More elaborate example:

<http://PointedEars.de/scripts/test/ani>

Note that the script console slows everything down, so you do not want to 
have it open when you test those animations.

That said, consider doing animations with pure CSS now.  My favorite example 
so far:

<http://codepen.io/yukulele/pen/Bheou>

Another one:

<https://cssanimation.rocks/spheres/>

A great one that only uses CSS 3D transformations and scripting (no Canvas):

<http://www.michaelbromley.co.uk/experiments/css-space-shooter/>

Some nice pure-CSS animations and transitions can also be found in the LCARS 
interface on my Web site.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Thread

Animated vector field... "Chris M. Thomasson" <nospam@nospam.no> - 2016-06-03 22:12 -0700
  Re: Animated vector field... "Chris M. Thomasson" <nospam@nospam.no> - 2016-06-03 22:15 -0700
    Re: Animated vector field... Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-06-04 13:45 +0200
      Re: Animated vector field... "Chris M. Thomasson" <nospam@nospam.no> - 2016-06-05 14:13 -0700
        Re: Animated vector field... "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-06-05 21:33 -0700
        Re: Animated vector field... Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-06-06 21:55 +0200
  Re: Animated vector field... Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-06-04 10:47 +0100
    Re: Animated vector field... "Chris M. Thomasson" <nospam@nospam.no> - 2016-06-05 14:16 -0700
  Re: Animated vector field... chris.m.thomasson.1@gmail.com - 2016-06-05 21:37 -0700
  Re: Animated vector field... "Chris M. Thomasson" <nospam@nospam.com> - 2016-06-09 16:02 -0700

csiph-web