Open-Source-Studio-at-ITP / Final-Projects

For tracking final projects and documentation

MIT License

10 stars 8 forks source link

Idea: p5.js Programming concepts visualization #16

Closed vince19972 closed 5 years ago

vince19972 commented 5 years ago

p5.js: Programming concepts visualization

From some recent discussions with classmates, I find that many programming concepts are too abstract for beginners to comprehend. Most of them are doing assignments without truly understanding of the concepts but only replicating the shallow pattern/form from example codes. With such a great visualization power, I think we could design a series of interactive tutorials that visualize concepts relating to array, objects or class. Ideally, I suppose visualization could help people understand certain concepts faster.

This is probably related to processing/p5.js#2865.

WenheLI commented 5 years ago

VisuAlgo is a very interesting algorithm visualization website. I hope that will be a good reference for your project.

vince19972 commented 5 years ago

@WenheLI Thanks! It's a perfect reference for what I have in mind!

shiffman commented 5 years ago

Here are two additional references for this idea:

The work of Nicky Case who makes "Explorable Explanations".
The work of Bret Victor specifically Inventing on Principle and Learnable Programming

shiffman commented 5 years ago

Is "new project" the right label for this? Would it be a new set of tutorials about code or a tutorial contribution to the p5.js website?

vince19972 commented 5 years ago

@shiffman Thanks for the references! It could be great to be integrated to p5.js website, but I'm not sure if it's appropriate or not. If possible, I prefer this as an contribution rather than independent site.

shiffman commented 5 years ago

A good place to start for a tutorial on the p5.js website itself would be porting one from https://processing.org/tutorials/ that has not yet been ported. A new topic is also possible but it should probably be filed as a proposal at p5.js-website/issues first. You can also create the tutorial as a stand-alone page (hosted maybe with GitHub pages) and bring it to p5.js for discussion and possible integration into the site itself. Happy to help facilitate any of this!

shiffman commented 5 years ago

I think some of your creative format ideas (like visualizing the algorithms themselves) would be really exciting to explore and might make sense to prototype off the p5.js website first?

vince19972 commented 5 years ago

@shiffman Thanks for the information! Right, I'll make it off the official site first. It's gonna be easier.

shiffman commented 5 years ago

I'll also tag @lmccart since she has been so kind to reply to other ideas around p5.js here!

lmccart commented 5 years ago

@vince19972 sounds great! please let me know if I can help answer any questions. looking forward to seeing what you come up with and hoping we can feature it on the p5.js site eventually too!

vince19972 commented 5 years ago

@lmccart thanks! will definitely let u know when i have a clearer plan or questions!

shiffman commented 5 years ago

@craigprotzel joining as mentor!