P5.js Crash Course: Recreate Art You Love(blog.kadenze.com)
blog.kadenze.com
P5.js Crash Course: Recreate Art You Love
https://blog.kadenze.com/creative-technology/p5-js-crash-course-recreate-art-you-love/
28 comments
I really love Processing (and its derivative P5.js) but I never really have any ideas to what to build with these tools in order to get truly dexterous and acquainted with them. I’ve recently set myself the goal of implementing the ”Wave Function Collapse Algorithm” (https://github.com/mxgmn/WaveFunctionCollapse/blob/master/RE...) in P5.js as a kind of catalyst to get me going.
This was a while ago, right? It's pretty cool, could be used for a procedural demo, maybe with music in a similar way.
The algorithm was discovered/invented by analogy to Quantum Mechanics (with which it shares many similarities, but also important differences: the algorithm deals with probabilities, while the actual quantum physics deals with amplitudes, of which probabilities are the square).
Most of the stuff on that repository dates back about a year, and I first read about it about then here on Hacker News, but searching for the actual article has me swamped with references to quantum mechanics and physics.
Anyway, it has very general and broad applications indeed. Audio, 3D voxel spaces, et cetera, beyond the obvious 2D pixel space.
UPDATE: found the original entry on Hacker News, it was indeed first mentioned a year ago (with a few subsequent reposts): https://news.ycombinator.com/item?id=12612246
Most of the stuff on that repository dates back about a year, and I first read about it about then here on Hacker News, but searching for the actual article has me swamped with references to quantum mechanics and physics.
Anyway, it has very general and broad applications indeed. Audio, 3D voxel spaces, et cetera, beyond the obvious 2D pixel space.
UPDATE: found the original entry on Hacker News, it was indeed first mentioned a year ago (with a few subsequent reposts): https://news.ycombinator.com/item?id=12612246
is there an online comunity for processing.js like wonderfl for flash?
Unrelated to the article itself, but I hate how it hijacks the scroll to add some kind of easing. It adds nothing and just made reading through the article feel weird
Sorry about that, just fixed it!
This is awesome. I loved building little apps in Processing in college, looking forward to trying this out.
Nice! For those who aren't too familiar with P5.js, you may enjoy this introduction: http://hello.p5js.org/
however, do note that the real-time video compositing is done with a different library (https://github.com/brianchirls/Seriously.js/
however, do note that the real-time video compositing is done with a different library (https://github.com/brianchirls/Seriously.js/
To maybe save people a bit of time who do what I did:
The video compositing library seems to no longer have a main website.
The video drawing library, popcorn.js was run by mozilla but they no longer maintain it. There is a fork however. On the github page for this, it links to a js fiddle to try it out which fails to do the simple demo. The reason it fails is because the location it's pulling popcorn.js from is now just serving up HTML (js fiddle could make this clearer there's an issue). You may have to try things out locally to get it working.
The video compositing library seems to no longer have a main website.
The video drawing library, popcorn.js was run by mozilla but they no longer maintain it. There is a fork however. On the github page for this, it links to a js fiddle to try it out which fails to do the simple demo. The reason it fails is because the location it's pulling popcorn.js from is now just serving up HTML (js fiddle could make this clearer there's an issue). You may have to try things out locally to get it working.
be careful with that Seriously repository. The link to seriouslyjs(dot)org appears to be trying to install malware.
Seriously!?!
[deleted]
Is there anything I can read rather than watch a video?
This is great for learning Processing. http://natureofcode.com/book/
[deleted]
Dan Shiffman has a great YouTube channel on Processing stuff (mostly P5 these days).
https://www.youtube.com/user/shiffman/
https://www.youtube.com/user/shiffman/
I have watched so many hours of Dan's videos because he inspires a fervency of the acquisition of knowledge. I absolutely wish that I had his videos whenever I was first starting to program. His attitude is so endearing as it is clear that he simply can't contain his excitement about programming.
His Youtube channel used to be called "Coding Rainbow", but he was unfortunately forced to change it. He really does a great job at capturing the sense of wonder that "Reading Rainbow" inspired in me as a kid.
His Youtube channel used to be called "Coding Rainbow", but he was unfortunately forced to change it. He really does a great job at capturing the sense of wonder that "Reading Rainbow" inspired in me as a kid.
I just watched him last weekend - he triggers the curious learner, without avoiding mistakes, and walking as a discoverer he teaches difficult concepts with fun.
Hope he really launches some big online learning thing covering more areas.
Hope he really launches some big online learning thing covering more areas.
Dan is the man! He also has a great follow up course in p5.js on Kadenze based on his Nature of Code book as well which is really great! https://www.kadenze.com/courses/the-nature-of-code/info
Nice tip. I've started this course a couple of days ago: https://www.kadenze.com/courses/introduction-to-programming-...
I think I'm going to do that one next
I think I'm going to do that one next
Love that guy. Worth watching just for the comedy.
His recent arrays one was really great.
here is a site I built to teach people how to code and draw with p5js: http://www.pushpopchallenge.com/
To everybody interested, check out paper.js. It's also programmatic design but everything can be an object, making animations/interactivity easier, along with some other neat features.
http://paperjs.org/
http://paperjs.org/
I put together a very crude scaffold for p5 a long time ago in hopes it might encourage students to dive in and edit code, share/remix. It was an aid to teach client/server things but hopefully have a point to it.
Didn't really take off though: https://github.com/BirkdaleHigh/sketch
Didn't really take off though: https://github.com/BirkdaleHigh/sketch
Bret Victor had some thoughts on ways P5 could be improved
http://worrydream.com/LearnableProgramming/
http://worrydream.com/LearnableProgramming/
This is beautiful. It captures the immediacy of writing some code and seeing something on the screen that I remember (and miss) from the ZX Spectrum.