Slow down rendering !

[BasicHtmlCoder]

Hi,
I'm using this example

window.addEventListener("load", () => {
  const canvas = <HTMLCanvasElement>document.getElementById("animation");
  const player = new a.AnimationPlayer(canvas);
  player.Resize(800, 600);
  player.Play(Animation);
});

async function* Animation(c) {
  const square = new f.Rect(0, 0, 30, 30, a.HexColor("#000000")); 
  for await (let n of context.delayedGenerator({ generator: app.naturals })) {
    square.x = n * 10
    square.y = 1
    yield square;
  }
}

DelayedGenerator just adds a sleep to a normal generator. This is how I implemented it:

  public async *delayedGenerator({ generator }: { generator: any }): AsyncGenerator<any, void, unknown> {
    const combined = (function* (genA: any, genB: any) {
      let nextGenA: any, nextGenB: any;
      while (!(nextGenA = genA.next()).done && !(nextGenB = genB.next()).done) {
        yield { a: nextGenA.value, b: nextGenB.value };
      }
    })(generator(), this.authority(this));
    for (let wee_wee of combined) {
      yield Promise.all([wee_wee.a, wee_wee.b]);
    }
  }

My issue as you can see is that it is a AsyncGenerator and not a Generator ! Which is not accepted !
How to resolve this.

[Marco4413]

Each frame the event loop runs, so each time you yield Promises advance.

You can check each frame if the Promise you're awaiting is done, if so you can do something with it.

Look at the following example:

GeneratorCanvas/examples/003-async/script.js

Lines 16 to 51 in 2ec82fb

	/** @param {a.AnimationContext} c */
	function* Animation(c) {
	const view = new f.FrameView();
	const square = view.Add(new f.Rect(-12.5, -12.5, 25, 25, a.HexColor("#e6e2e1")));
	const work = WrapPromise(AsyncWait(2500).then(() => {
	if (Math.random() >= 0.5)
	return a.HexColor("#a3ffa1");
	else throw a.HexColor("#ffa2a1");
	}));
	while (!work.done) {
	c.ctx.translate(c.width/2, c.height/2);
	yield view;
	}
	square.color = work.resolved ? work.value : work.error;
	c.ctx.translate(c.width/2, c.height/2);
	yield view;
	}
	function WrapPromise(promise) {
	const wrap = {
	resolved: false, value: undefined,
	rejected: false, error: undefined,
	promise
	};
	promise.then(val => {wrap.resolved = true; wrap.value = val;})
	.catch(err => {wrap.rejected = true; wrap.error = err;});
	return Object.defineProperty(wrap, "done", { get() { return this.resolved || this.rejected; } });
	}
	function AsyncWait(ms) {
	return new Promise(res => setTimeout(res, ms));
	}

[BasicHtmlCoder]

In this case, why not accept Promise (AsyncGenerator) natively. I think this would be a cool addition to the library.

[Marco4413]

This library went through a lot of iterations before being published to GitHub. At one point it did support async generators for animations, even async frame generators. See:

GeneratorCanvas/animation.js

Lines 502 to 503 in 2ec82fb

	if (frame[Symbol.asyncIterator]) {
	throw new TypeError("Async iterators for iterable frames are not supported.");

Though the hassle to support both was too much mainly because of the AnimationGroup function which needed a separate version to handle async in a clean way.

[Marco4413]

In the examples delay is done by using delta time and accumulating it in a variable.

[Marco4413]

I'm also going to delete this issue once you've read my response. I've opened the "Discussions" tab so you can move any question there.

EDIT: Apparently I can move it to Discussions, so I don't have to delete it.

[BasicHtmlCoder]

thank you for clarifications !