writing function implementation

[two-ticks]

Which syntax we should use to call the animation functions?
We can avoid creating many functions for animations by implementing text animations in some what similar manner to manim

let text1 = addText(text, x, y); // adds text to the scene (not visible on screen)
text1.play(fadeOut, 1);          // play(‘animation-type’, duration)

In the proposal we have following (web-editor example writing)

fadeOut(object, duration) //every animation having unique function

manim has following syntax

        self.play(FadeOut(first_line)) #fadeOut animation 
        self.wait(1)

[JithinKS97]

Some of the points that I want to note
Unlike manim the fade in / fade out should be event triggered
My idea of doing this is like

let myText, in = true

function setup() {
  myText = createText(text, textConfig)
  // Adding this myText to a scene or not is something that we should also think
}

function mousePressed() {
  if (in) {
    fadeIn(myText, fadeConfig)
  } else {
    fadeOut(myText, fadeConfig)
  }
  in = !in
}

Let me know your thoughts @two-ticks @nick

We have to decide how textConfig and fadeConfig looks like. Since its typescript we can even define interfaces for the same

[two-ticks]

Event triggered method

I tried something like this example. Mouse press plays the animation.

let click = true;
let a, b;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  a = new writeText("Circle : x² + y² = 4²", width / 4, height / 3);
  b = new writeText("Circle : (x-1)² + y² = 4²", width / 5, height / 2);

  noLoop(); 
}

function mousePressed() {
  if (click) {
    a.play(); //default delay duration = 180
  } else {
    b.play(600); //delay duration = 600
  }
  click = !click;
}

Time delay method

another way of doing it without event triggers is example

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  let a = new writeText("Circle : x² + y² = 4²", width / 4, height / 3);
  let b = new writeText("Circle : (x-1)² + y² = 4²", width / 5, height / 2);

  a.play(); //default delay duration = 180
  b.play(3600); //delay duration = 3600

  noLoop();
}

What are your thoughts on this ? @JithinKS97 @nickmcintyre

[JithinKS97]

If we have to always provide the delay input in the animation, we should always understand how much time the previous animations play right? Can you see if we can make use of promises to do this in a way so that this delay time parameter is not specified?

let a, b

function setup() {
  a = createText("Circle : x² + y² = 4²", 100, 100)
  b = createText("Circle : (x-1)² + y² = 4²", 100, 400)

  scene()
}

function async scene() {
  await a.fadeIn()
  await b.fadeIn()

  await a.fadeOut()
  await b.fadeOut()
}

See this
https://editor.p5js.org/jithunni.ks/sketches/cV9d3x9hs

We need to have more discussion about these interface. I'm not sure how much async await syntaxes will be familiar to the common users of the library.

@two-ticks @nickmcintyre

[two-ticks]

I will try to use promises. promises would be very useful to accurately time animations as I can see from the example.

I'm not sure how much async await syntaxes will be familiar to the common users of the library.

I am also learning about async and await so I think my reaction would be similar to other common users of library.

[nickmcintyre]

I don’t recall coming across much use of async and await in p5.js libraries. The programming model may be a hurdle for beginners or people coming from MATLAB, etc.

[JithinKS97]

Okay, then we have to think of some other ways to do this. But I think providing delay time for all the functions is a very tedious thing to do.