Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30629 > unrolled thread

Animated vector field...

Back to article view | Back to comp.lang.javascript

Contents

  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

#30629 — Animated vector field...

FWIW, here is a link to a crude pre-alpha test of an animated vector field. 
Can you please test this out and tell me if it works for you:

http://funwithfractals.atspace.cc/ct_fdla_anime_test_0/

You should see a vector field start to emerge in blue. Does it work for you, 
does it go too fast? Too slow?

Also, let it run until a little alert box pops up saying its done. I would 
not recommend trying this out on a phone. It will work, but should be fairly 
slow. ;^o

Thanks everybody!

:^D


FWIW, I am working on an online version of field based DLA. More info:

http://www.fractalforums.com/fractals-in-nature/field-based-dla 

[toc] | [next] | [standalone]

#30630

[...]

> FWIW, I am working on an online version of field based DLA. More info:

> http://www.fractalforums.com/fractals-in-nature/field-based-dla 

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

[toc] | [prev] | [next] | [standalone]

#30632

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.

[toc] | [prev] | [next] | [standalone]

#30633

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

> "Thomas 'PointedEars' Lahn" wrote:
> Several of us have been doing rather smooth animations with
> window.setTimeout() since the beginning of the previous decade.
> One pattern is:

I am thinking of using:
___________________________________________________
// Request animation workaround
var g_request_animation_frame = window.requestAnimationFrame;

function prv_request_animation_frame(cb) {
    if (!g_request_animation_frame) {
        g_request_animation_frame =
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame;

        if (! g_request_animation_frame) {
            var last_time = 0;

            g_request_animation_frame = function (callback) {
                var cur_time = new Date().getTime();
                var time_addend = Math.max(0, 16 - (cur_time - last_time));

                var id = window.setTimeout(function () {
                    callback(cur_time + time_addend);
                }, time_addend);

                last_time = cur_time + time_addend;

                return id;
            };
        }
    }

    g_request_animation_frame(cb);
}
___________________________________________________


It's working on older devices like my SONY Bravia TV. It's a
bit slow on these devices, but that's because I am plotting a
lot of points per-frame. I am going to tune this up, and have
it flying Cell phones, and older TV's.

It should be ready tonight or tommorrow morning. 

[toc] | [prev] | [next] | [standalone]

#30635

On Sunday, June 5, 2016 at 4:13:30 PM UTC-5, Chris M. Thomasson wrote:

> It's working on older devices like my SONY Bravia TV. It's a
> bit slow on these devices, but that's because I am plotting a
> lot of points per-frame. I am going to tune this up, and have
> it flying Cell phones, and older TV's.
> 
> It should be ready tonight or tommorrow morning.

There are plenty of places to optimize. Primarily by manipulating the pixel data directly instead of using the API:

<https://developer.mozilla.org/en-US/docs/Web/API/ImageData>

[toc] | [prev] | [next] | [standalone]

#30638

Chris M. Thomasson wrote:

> I am thinking of using:
> ___________________________________________________
> // Request animation workaround
> var g_request_animation_frame = window.requestAnimationFrame;
> 
> function prv_request_animation_frame(cb) {
>     if (!g_request_animation_frame) {
>         g_request_animation_frame =
>             window.webkitRequestAnimationFrame ||
>             window.mozRequestAnimationFrame ||
>             window.oRequestAnimationFrame ||
>             window.msRequestAnimationFrame;

If you call g_request_animation_frame(), you will call one of these methods 
as functions.  In strict mode, “this” will be undefined.  In non-strict 
mode, “this” will refer to the global object; that might work because of 
internal wrappers.  But you should always call object’s methods as such, 
i.e. in this case you should call them as methods of the object referred to 
by “window” explicitly.  The least you should do is to call them using 
Function.prototype.call/.apply(), but with host objects, all bets are off.

I recommend that you define at least

        g_request_animation_frame = window.webkitRequestAnimationFrame
          ? function (callback) {
              window.webkitRequestAnimationFrame(callback);
            }
          : window.mozRequestAnimationFrame
              ? function (callback) {
                  window.mozRequestAnimationFrame(callback);
                }
              : window.oRequestAnimationFrame
                  ? function (callback) {
                      window.oRequestAnimationFrame(callback);
                    }
                  : window.msRequestAnimationFrame
                      ? function (callback) {
                          window.msRequestAnimationFrame(callback);
                        }
                      : null;

instead.  An alternative that needs to be thoroughly tested:

       g_request_animation_frame =
         window.requestAnimationFrame
         || window.webkitRequestAnimationFrame
         || window.mozRequestAnimationFrame
         || window.oRequestAnimationFrame
         || window.msRequestAnimationFrame;

       var fpCall = Function.prototype.call;

       var native_request_animation_frame = function (callback) {
         fpCall.call(g_request_animation_frame, window, callback);
       };

It is not a good idea to access host object’s methods in a type-converting 
test; see implementations of isHostMethod() for an alternative.

However, you should check if attempting to call prefixed methods makes 
sense.  For example, Opera has switched to Blink; if they do not have 
window.oRequestAnimationFrame() now, they are not going to have it later, 
but, at most, window.webkitRequestAnimationFrame().

>             g_request_animation_frame = function (callback) {
>                 var cur_time = new Date().getTime();
>                 var time_addend = Math.max(0, 16 - (cur_time -
>                 last_time));

It is a good idea to consider that more time may have elapsed, but what are 
you getting at with the Math.max(…)?
 
>                 var id = window.setTimeout(function () {
>                     callback(cur_time + time_addend);
>                 }, time_addend);
> 
>                 last_time = cur_time + time_addend;
> 
>                 return id;
>             };
>         }
>     }
> 
>     g_request_animation_frame(cb);
> }
> […]

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

[toc] | [prev] | [next] | [standalone]

#30631

On 04/06/2016 06:12, Chris M. Thomasson wrote:
> FWIW, here is a link to a crude pre-alpha test of an animated vector
> field. Can you please test this out and tell me if it works for you:
>
> http://funwithfractals.atspace.cc/ct_fdla_anime_test_0/
>
> You should see a vector field start to emerge in blue. Does it work for
> you, does it go too fast? Too slow?
[...]

I've tested on OS X El Capitan using following browsers:

1. Chrome 51.0.2704.79 (64-bit) - quite fast, very smooth rendering
2. Safari 9.1.1 (11601.6.17) - quite fast, very smooth rendering
3. Firefox 46.0.1 - very slow; it's like #1 and #2 rendered in slow montion

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#30634

> > "Cezary Tomczyk"  wrote in message 

> On 04/06/2016 06:12, Chris M. Thomasson wrote:
> FWIW, here is a link to a crude pre-alpha test of an animated vector
> field. Can you please test this out and tell me if it works for you:
>
> http://funwithfractals.atspace.cc/ct_fdla_anime_test_0/
>
> You should see a vector field start to emerge in blue. Does it work for
> you, does it go too fast? Too slow?
[...]

> > I've tested on OS X El Capitan using following browsers:

> > 1. Chrome 51.0.2704.79 (64-bit) - quite fast, very smooth rendering
> > 2. Safari 9.1.1 (11601.6.17) - quite fast, very smooth rendering
> > 3. Firefox 46.0.1 - very slow; it's like #1 and #2 rendered in slow 
> > montion

Thank you. For some reason Firefox 46.0.1 is not that slow on Windows 10.

Its not as fast as Chrome, but it is fairly smooth.

Humm... Weird! 

[toc] | [prev] | [next] | [standalone]

#30636

FWIW, here is a test page that should show a fairly smooth 
animation on a phone:

http://funwithfractals.atspace.cc/ct_fdla_anime_test_0_cp/

The end result is the following rendering:

https://plus.google.com/101799841244447089430/posts/ZDr3iwRifsq

This should work way faster than the previous test on a phone.

:^o

[toc] | [prev] | [next] | [standalone]

#30648

I finally got around to animating actual DLA cluster growth 
using field lines. Here is an experimental test:

http://funwithfractals.atspace.cc/ct_fdla_pa_t0

This program should create something like the following rendering:

https://plus.google.com/101799841244447089430/posts/YCJCaq7zjyw

then an alert box should pop up saying that its finished. Can 
you see the DLA forming? The actual field lines are in purple 
alpha 0.1.

I would not use this on a phone quite yet... :^o

Thanks!

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web