Which teaches the math concepts of y=mx+c through creating a graphing calculator in p5js.
We at Strive teach math through code. With this approach students can visualise math in real-time, they play and develop an intuition for the math. Using math + code students can create games, visualisations, music, and thousands of other projects. We try to make math inspiring and applicable to the real world.
I would love your guy’s feedback on the video!
What could be improved?
What would make the video more engaging?
What other school math topics could we cover with this approach?
Can’t agree more with you that p5 and programming in general is a nice way to teach math and computer science!
Few notes here :
What is sometimes annoying is the refresh time of the canvas and the fact that it goes white, I don’t know if it can be improved because there’s no hot reload with p5js (someone correct me if I’m wrong )
I noticed when you scaled up the coordinates with Strive.scale(...), it was stretching the text and lines but when you inverted the Y axis the axis labels were not inverted. Are you detecting when the user invert an axis and you display the labels correctly?
I know that giving students a framework (Strive) that handle all the coordinate and utility drawing stuff for them is necessary in order to learn quickly but do you plan to make videos about how to display a coordinate system, make a circle draggable or create a library with objects?
Ye I wish hot reload was an option, but unfortunately not supported by p5 yet
Yes we are doing some fancy behind the scenes work with transformations to keep track of transformations. Our intention is to make a large open-source library of utility functions like that which make it easier to teach p5.
Definitely! The math and code behind some of those concepts is really interesting actually, however it is quite advanced for beginners. So the idea is to start with these training wheels on and slowly take them off as students get more advanced.
Great initiative + quickly chiming in on the topic of those reload flashes… two suggestions to resolve it (not a p5 issue, but rather an issue with the editor being used):
1 - Set css of page background to be same as your sketch ie. body{background:#000;} and it may seem a bit more seamless when it recompiles whole sketch, which is the issue in codepen(?) since any changes to code force a rebuild on the whole iframe of rendered output.
2 - You could give P5LIVE a try (can use online or install it locally if you need lots of custom assets etc) – it’s orginally intended for VJ (live-coding) use, so the iframe’s background color is set to the same as your first usage of background() in code. That way if your background is a shade of blue… exact same color is used for webpage, making a flash less noticable. More importantly, since a while now, it has ‘softCompile’ which may be similar to ‘hot reload’ - essentially, it will overwrite just the draw() function within the iframe if that’s where you changed stuff (also functions that are used within the draw). Any changes to global space + setup still cause it to make a full ‘hardCompile’, so the whole sketch can read/react on those values. Check out the readme for details on using soft/hardCompiles + in the demos there’s an example for using a smaller canvas if you don’t want fullscreen all the time.
FYI, loading custom libraries like your Strive – just add let libs = ["path_to_lib"] to the top of your code - loads an array of those libs into the iframe too (CDN links or locally if running locally).
)