pull request #20

GObject can deal with 2D, polar and parametric plots, but lacks primary shapes such as lines, rectangles and ellipses. p5.js shapes are difficult to animate and would be slow. SVGs can be easily animated.

What should be the syntax to add rectangle, circle, lines and arrows to graphs (or outside the graph) ?

Do we even need SVG shapes?

• one of the problem I noticed is SVG elements hide the canvas elements there for if you need to add some shape over the graph it would not be possible with p5.js shapes

Example APIs :

graph.rect(x, y, width, height) //this would work but how to remove this object or reference it

Currently p5.teach doesn't support p5 instance mode. How can we go forward to add support p5 instance mode?

I tried this but it is not working.

p5.prototype.creatText =  function createText(...args: any[])

What changes to environment should I make ?

branch : develop-instance

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)

@two-ticks I'm trying to use IBM's color blind safe palette for visualizations in my book whenever possible and find myself copying the hex colors to new sketches a lot. What do you think about exporting the following constants?

export const ULTRAMARINE40 = '#648fff';
export const MAGENTA50 = '#dc267f';
export const GOLD20 = '#ffb000';
export const INDIGO50 = '#785ef0';
export const ORANGE40 = '#fe6100';

A function that accepts the same parameters as line and draws an arrow is very useful. In math and physics, there are a lot of places where this can come handy.

arrow(x1, y1, x2, y2) will be the function

I think we should make it simple to generate nice plots. @two-ticks just created a SVG grapher, @JithinKS97 previously wrote p5.2DGraph, and I tried to distill mainim's 2D and 3D primitives when I started planning p5.plot.

A few questions come to mind:

• What are the right primitives?
• Canvas, SVG, or both?
• How do we facilitate interactivity?
• What's the plan for 3D surface plots, vector fields, etc.?

Personally, I've wanted to implement the grammar of graphics for p5.js for awhile now but haven't had the occasion. Here is an introductory chapter for visualizing data in R with ggplot2.

I want to test whether add method is called or not. I have tried these ways but all are giving the same error.

it('add should be called', () => {
  const tex = createTeX('2^2');
  const spy = jest.spyOn(tex, 'add');
  tex.add();
  expect(spy).toHaveBeenCalled();
  //expect(tex.position()).toEqual([10, 20]);
});

it('add should be called', () => {
  const tex = createTeX('2^2');
  const element = createDiv();
  global.createDiv = function(html){return element}
  const spy = jest.spyOn(tex, 'add');
  tex.add();
  expect(spy).toHaveBeenCalled();
  //expect(tex.position()).toEqual([10, 20]);
});

other working tests in commit : 0ed4891

The broken logo "assets/p5-astrik-teach.png" is visible on the docs page:

https://two-ticks.github.io/p5.teach.js/docs/index.html

and the bad link line is here:

https://github.com/two-ticks/p5.teach.js/blob/main/docs/index.html#L64

We can use event triggers for scenes. For example this sketch uses space bar for scene switching https://editor.p5js.org/radium.scientist/sketches/g7oDq0M87

we can use all these possibilities

• event triggered animations (issue #1 )
• event triggered scenes
• can define a driving parameter like time for long scenes where event triggering can be tedious

we can decide how to implement scenes and how to add individual animations to the scene