Linear Algebra

[nickmcintyre]

I think creating an interactive version of 3b1b's Essence of linear algebra series is a good starting point for a few reasons:

1. The topic is widely applicable and challenging for many.
2. Creating the simulations will give us a good idea of what manim features we need to bring to the p5.js ecosystem.
3. I happen to be reviewing linear algebra, so teaching it back would aid my own understanding.

What do you think @JithinKS97?

[JithinKS97]

Yeah definitely. I was always thinking of doing this someday. I'm fairly sure that somebody might have already tried doing something like this or at least would have thought about this.

I'm definitely ready to jump in and help. Even I myself wanted to improve my understanding of Linear algebra. We can definitely discuss more about how do we want to approach this.

One thing that I would like to say is when we are creating simulations, definitely, there would be elements that we can reuse in the later projects. So prior to coding, if we have some plans, we can write the code for these elements in a reusable way (Or maybe even create a library of these kind of elements). An example of this is p5.rnd that I created. I created trajectory-lab using this reusable component.

If you can, would you be able to plan such reusable components?

[nickmcintyre]

Cool! I'll start hacking on this.

I believe I floated the SDK idea when you proposed rewriting the app. It may make more sense to curate a set of libraries and examples for developers to build upon. For math, I'll work to bring número, p5.plot, and p5.TeX up to par.

You're more than welcome to help but I don't want to divert too much of your attention from the rewrite. I'll be happy to incorporate your feedback once I've had the chance to build a simulation or two.

[JithinKS97]

Building an SDK is the ideal thing that we should do. But I think we are not there yet. I think we should reach there by building a set of libraries and building many simulations using that. So in the process we will know the pain points of building simulations. We will also know what are the elements that appear again and again for which we can build reusable pieces.

A plotting library in p5 is something that I'll love to work on. If you can create some issues in the repo. I can take a look whenever I get time.

[JithinKS97]

Hey @nickmcintyre I'm planning to write a 2d graph plotting library similar to this.
https://www.dynamiclearning.io/workbookeditor/9qGz7QBQgFfB5qqCh

This was created very rapidly and the code is not well structure. My plan is to create a more structured library with more features like graph zooming and panning. I'm going to use typescript

Sharing the Repo here
https://github.com/JithinKS97/p5.graph

I saw the p5.plot library that you are creating. Can we combine these two so that we can share ideas and create a single plotting library?

[nickmcintyre]

@JithinKS97 certainly! One consideration as you get started:

I studied manim while laying out the basic structure of p5.plot and it makes sense. But I struggle to justify not just using D3.js... seems to have everything we need and then some. Thoughts?

[JithinKS97]

Yeah, you are right. D3 has plenty of helper functions to draw graphs. We can make use of that. That is what you meant right? Or we don't need a p5.graph / p5.plot library as such and instead just use d3 in p5 sketch?

[JithinKS97]

D3 is used for drawing using SVG elements right? Or does it help in Canvas also? My idea is to create a library that helps to embed a graph within p5 sketch itself.

[nickmcintyre]

D3 can render to the canvas as well. Here is a quick example of the two libraries working together on the same canvas.

What do you think about creating a minimal wrapper around D3? We could figure out what subset of its API is essential for typical math visualizations and make it simple to use.

[JithinKS97]

Yeah, we can do that.
But I've already created a basic version. In the graph, you have a grid and also pan and zoom functionality
https://p52dgraph.netlify.app/

Here is the p5 sketch
https://github.com/JithinKS97/p5.graph/blob/master/sketch.js

Here is the typescript library code
https://github.com/JithinKS97/p5.graph/blob/master/lib/src/index.ts

[JithinKS97]

Hey, @nickmcintyre How is the work coming along. Were you able to make any progress? I was planning to add some simulations to the Simulations repo section of dynamic learning (https://www.dynamiclearning.io/simulations). I thought I'd get your suggestions.