p5.js Web Editor & Mathemagical.js Library

[ThirDecade2020]

Happy weekend. This is an interesting and helpful project, so I'm happy to contribute where I can.

Do I extract code from mathemagical-prototype.js, lower portion of README, or both, and insert into web editor for trial?

Once I've selected which function I want to tinker with, how exactly does it fit into the editor - I am getting errors when I run the code. A small demo vid for developer-contributors might be helpful on this aspect?

Thanks!

Jason

[GregStanton]

Hi Jason!

Thanks so much for starting this discussion! I appreciate the kind words, and I'll try to answer your questions below.

How to tinker with the prototype and demos:

1. The easiest way to tinker with the library is to open one of the links provided in the README. The How to Contribute section provides a link to a blank project, and each demo section provides a link to a project with the working demo code. Each project is hosted in the p5.js Web Editor, as you've noted.
2. Once you open a link, you'll see a file called sketch.js. This file contains the code for a particular sketch, like the rotating square. In the top left of the editor (see image below), you can click to expand the project directory.
3. The directory includes supporting files, including mathemagical-prototype.js, as well as index.html and style.css. So, you don't need to load any code; it's already there.
4. I suggest starting with one of the demo sketches. That way, you can click the play button to run the code and see the demo in action. After that, you can try changing some values and running the code again to see their effect. For example, if you load the rotating square demo, you can try changing the value of myAngle.
5. You shouldn't run into too much trouble by simply changing variable values, but don't be surprised if more extensive changes to the sketch cause errors. We're using the prototype to quickly test out our ideas and get early feedback on the interface. So, currently, features supported by one shape might not be supported yet by other shapes, etc.

Notes:

• Sample code in the interface proposal: The code samples in the README aren't intended as working programs. They're just lists of example commands to provide an idea of the interface (i.e. the API). I can revise the README if that wasn't clear!
• p5.js: Mathemagical.js is built on p5.js. So, for example, you'll notice that the drawing commands are located inside the p5.js draw() function, also known as the draw loop. This function runs the code inside of it over and over, once per frame. If you aren't familiar with p5.js and prefer to learn on an as-needed basis, you can use the interactive p5.js reference. It's excellent. If you prefer to learn p5.js more systematically, I highly recommend the playlist Code! Programming with p5.js from The Coding Train. This is how I first learned. That playlist contains more than enough knowledge to get started with p5.js, but if you like that one, I also recommend the follow-up playlist on working with HTML, CSS, and the DOM via p5.js. In the long run, we'd like to have user tutorials tailored to Mathemagical.js, so that users can start making things immediately without prerequisite knowledge, but we're not there yet.

Demo vid
A demo vid for developers is a great idea. In the long run, we want to have more extensive developer materials, but a quick intro vid could be helpful at this early stage. Let's use this discussion as a place to gather ideas for what could go into such a video. If there's anything else you'd like to see in it, or if you have any other questions, just let me know!

Soon I'll publish upcoming tasks in GitHub Issues, which should help contributors to find areas to work on. After that, we may be ready to start sharing the repo more widely.

Community form and meetups
If you want to receive major updates, such as dates for free online meetups related to Mathemagical, just fill out our community form to be added to the mailing list.

I hope this helps.

Thanks again!
Greg

[ThirDecade2020]

OK got it figured out now hopefully these screenshots help direct users where to look. Perhaps next steps for new contributors would be manipulating values in demo code as a simple test to familiarize more with code, or work on issues? Keep posted looks like we have a useful thread going for newcomers!

[GregStanton]

This is great! Thank you so much for making the time, and I appreciate you adding the screenshots! By the way, I use the Pomodoro Technique too :)

Update: The name change I mentioned is currently sitting in PR #15. It's ready to go pending review, and you're welcome to check it out. It does affect the animation and rotation demos, but it'll just be a name change, so your screenshots are still helpful.

Regarding first steps for newcomers, manipulating values in the demo code is a great idea.

I'm now thinking that I'll try to get the project management system set up by Tuesday; I'm not sure how ambitious this is, but I should certainly be able to start adding some GitHub Issues in the coming days. Basically, we have a lot of internal notes, and I need to get them all up on GitHub so that it's all open and accessible to everyone.

Once I have that done, I plan to share the project more widely, and I'll encourage people to try changing some values or try working on an issue, as you suggested. Go team!

[ThirDecade2020]

I will take a look at the open pull requests to get up to speed there. These days it seems common to run into a variety of languages and tools that you might utilize for projects, so learning how to dive right into unfamiliar code itself is a useful skill for example if you're new to Javascript and p5.js here. One small way to do that I find is changing values around. For a deeper understanding tools like GPT are available to help explain clearly.

[GregStanton]

Yeah, learning to dig into unfamiliar code is definitely a useful skill!

We merged the PR I mentioned to you, which leaves just one PR open right now. Just FYI, that one is probably not the best place to start; it's quite a bit behind the main branch and may not get merged. Basically, it involves a feature that's relatively simple to implement in isolation, but engineering it in a generalizable way will likely require several fundamental additions to the prototype.

We're still going to work on the feature, but I'll be posting issues over the coming days to address the various additions that need to be made. So we may end up reworking that PR or breaking it up into smaller PRs.

[ThirDecade2020]

Let's add learning to dig into unfamiliar math a useful skill too, it's one reason why I joined this project seeking more intuitive ways to absorb math naturally and to incorporate into programming for example in Qiskit.

It's all good, take your time and get setup properly I think we've sparked a good entrance into project collaboration here, the key is consistency and follow-through versus pressure filled deadlines if you ask me especially if you have other big priorities. I'll stay tuned for the Issues and just let me know if you need any input on whatever, have a great weekend!