Plotting API

[nickmcintyre]

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.

[JithinKS97]

Yeah, we really need to think through this thoroughly. Let me do some research and get back.

[two-ticks]

Canvas, SVG, or both?

SVG is making things simpler for animating in anime.js but in my opinion canvas should also be used for graphing because of already existing support for canvas from p5js library(shapes, rotations, bezier). Incase of SVG we will need to build more from scratch or use an external library.

How do we facilitate interactivity?

I am experimenting with the SVG and p5. I have made a sketch for interactivity in Fourier demo. Its just a specific solution we will need to generalize it. sketch

let signalAmp = 2;
let signalFreq = 2;
let grp2;
function setup() {
  createCanvas(400, 400);
  reel();
  slider = createSlider(0, 20, 2);
  slider.input(() => {
    signalFreq = slider.value();
    grp2.remove();
    reel();
  });
}

function draw() {
  background(120);
}

function reel() {
  grp2 = create2DPolarGraph(
    (t) => 15 * (signalAmp * Math.sin(signalFreq * t) + signalAmp),
    [0, 2 * Math.PI]
  );
  grp2.stroke("yellow");
  grp2.plot();
  grp2.position(50, 50);
  //grp2.play();
  grp2.arrow((t) => 15 * (signalAmp * Math.sin(signalFreq * t) + signalAmp));
}

I think faceting can be done with SVG, and a lot more as mentioned in grammar of graphics can be achieved with SVG. We need to discuss it more and then can start distilling the library further.

@JithinKS97 @nickmcintyre

[nickmcintyre]

@two-ticks nice demo! It seems like there's a path forward for supporting both rendering backends but I'm not sure which should get priority. Two possible downsides I see for SVG are 1) interoperability with p5's drawing primitives, events, etc., and 2) complexity in constructing 3D plots. The second point could be addressed by making 3D plots WebGL only.

I did a little reading this morning and came across these posts on using anime.js with JavaScript Objects and libraries that render to the canvas.

• Weaving Fabric.js and anime.js
• Using three.js and anime.js
• anime.js documentation