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));
	}

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