About 6 months ago, I had no idea how to program interactive web apps with JavaScript. Thanks to p5.js’ easy-to-learn platform and Daniel Shiffman’s awesome Coding Train videos on YouTube, I was able to learn web development completely on my own. So hopefully I can inspire some of you with a project that I am working on right now:
This is an app I made using p5.js. The purpose is to help students visualize vectors. The target audience is undergraduate engineering students. It’s got a lot of work left, as I plan on tidying it up and adding plenty of “tips” on how to use it. Here’s a link:
(Best viewed in a window that is at least 800 x 800 pixels. Sorry, mobile users)
Also - I just realized that you may need to zoom out in order to see the LaTeX at the bottom of the screen, which is one of the coolest parts! Normally the app is contained within an iframe
https://learncheme.github.io/demos/vectors/app.min.html
- drag the vectors by their “head” and “tail” to move them around, and use the buttons to perform actions.
- on the 3D WebGL part, you can use your mouse to zoom in/out and move the camera around.
- if you have any questions or suggestions, please post them here, I desperately need feedback to make this the best it can be.
Let me know what you think! The source code is here: https://github.com/LearnChemE/LearnChemE.github.io/tree/master/demos/vectors
It uses the Grafica.js library from the p5.js website, as well as the MathJax library (https://www.mathjax.org/) for creating those pretty LaTeX equations at the bottom.