p5.js – A library to make coding accessible for artists, designers, educators
p5js.org
p5js.org
I've used Processing Java and Processing.js, so I assume this is some continuation or extension of those projects.
It might be more effective if the explanation focused on the benefits of using p5, rather than just saying "It makes a circle" or "It draws a slider" (which are features).
For instance, maybe some of these are true:
- p5 speeds the creation of animations on your site
- p5 allows beginners to create complex interactions compatible across devices
- p5 allows low-cost prototyping of game designs
- p5 shrinks site size by replacing videos with animations
Of course you would have to look to the community and beyond to figure of which resonate with potential users.
This sounds unnecessarily negative. Even in the light of pure artistic realisation, I found 3 of the 4 points still very good.
The first point _is_ very much about artistic realisation:
- p5 speeds the creation of animations on your site
The second and last point are about the accessibility of the artistic stuff. Some don't care, but others want to show their stuff and all their intermediate stuff to the widest audience possible:
- p5 allows beginners to create complex interactions compatible across devices
- p5 shrinks site size by replacing videos with animations
But as gp said, this list is just an inspiration and the real list of benefits needs to be determined empirically with the community of (potential) users.
I remember flash games working really fast on my phone. However, when a bunch of (~100?) circles appeared on the screen, the video started lagging.
I wonder if games/animations compiled to webassembly would work a lot faster.
There aren't many applications where d3 or raw js wouldn't be a more performant solution for commercial graphics.
p5 defaults to either canvas or WebGL and uses abstractions barely add any overhead to raw JS. Where sensible it uses typed arrays internally[1], for example. By comparison, d3 uses SVG and DOM manipulation by default, and everything is trees of objects (as a consequence, creating datavisualisations is also done an entirely different style, btw, since p5 uses a draw-loop for each frame, and d3 uses an enter/update/exit paradigm).
So unless you manually take steps to use the canvas (which is possible, but not the default), I doubt that d3 usually beats p5 (pixi however, is another story[2]).
But really, as long as you know how to write fast JS code, you can write fast p5 code. EDIT: note that the examples are not necessarily the fastest possible code, since they are more about showing code examples.
[0] http://processingjs.org/learning/
I work in an academic environment and was introduced to web development as part of the projects I am working on. The simple interface made it easy to put something together under tight deadlines with little/no Web experience, but experience working with GUIs in other systems.
However, there's a cognitive overhead of thinking in selections and update patterns... It's hard to remove state and make composable components that can work well in React, Angular, et al.
While p5 sounds like the answer. We've been stripping away imperative programming on the web for the best part of it's history. Modern web development is more and more declarative every day... I just can't help shake the feeling it's a step backwards.
Maybe, but I really like it -- a use case I'm looking at is making interactive versions of the types of figures you'd normally find in textbooks, and there's no one good library for this kind of thing. Each case is unique and has a large illustrative element. p5.js (and, before that, Processing) just allows you to get stuff done. I think that's why Processing took off so much in the artistic community too.
Image quilting: http://clayheaton.github.io/p5jsTiler/index.html
Genetic algorithm cartoon generator (that I never really finished): http://clayheaton.github.io/generative_cartoons/index.html
I love both Processing and p5.js. They're great tools for fun creative coding and also both are useful other types of prototyping and app development.
Some day I'll get around to extending the image quilting sketch to generate Wang tiles.
https://github.com/shiffman/The-Nature-of-Code-Examples-p5.j... http://natureofcode.com/
https://www.kadenze.com/courses/introduction-to-programming-...
https://www.kadenze.com/courses/the-nature-of-code
(disclaimer: I work for Kadenze)
I say this because at first I was also excited just by watching that guy get excited, and then suddenly I was like "wait..isn't this already possible with pretty much 100s of libraries out there?"
Maybe someone can explain what makes this unique (so much so that the guy is so excited about it)?
From the processing website: > For the past fourteen years, Processing has promoted software literacy, particularly within the visual arts, and visual literacy within technology. Initially created to serve as a software sketchbook and to teach programming fundamentals within a visual context, Processing has also evolved into a development tool for professionals.
https://processing.org/overview/
They (Shiffman, in the video) have a pretty cool youtube channel where they use processing, p5, etc to teach programming, visualization, graphics, that kind of thing. I think it used to be called "coding rainbow" but he ran into copyright trouble I'm assuming.
openframeworks.cc is a vastly superior library IMHO (C++ though) for serious visual work.
Processing already has a JS port which can be used both with Javascript and a Java like language ( http://processingjs.org/ )
The book http://natureofcode.com which is a good starting point for creative coding uses ProcessingJS
With p5 you can get as close to the metal as you can in JS (for example, it has a WebGL based renderer if you want, and you can use typed arrays for your data). So it's a lot better.
Regarding OF: yes, for computationally intense stuff it's a lot faster, a native OpenGL application written in C++ should be faster than using JS in the browser.
However, it's also a lot more painful to develop in IMO. I tend to work out my sketches in p5js these days, then when I need performance port it over to OF. Given that most of the time the performance bottleneck is either "how many particles" or "how high-res is the input video", testing in p5 is a simple matter of scaling down.
If you read the various blog posts and interviews - the history of Processing at his department (NYU Tisch ITP) had a purpose of encouraging 'creative' people to explore and gain an exposure to programming.
All link to above can be found on his personal site - http://shiffman.net/
Processing was well thought out from a learnability standpoint, and p5 takes that and allows you to build some _very_ compelling lessons, modules and even whole CS courses that can be delivered and completed online. Because it's also JS, it means that if you can always augment an exercise with any of the rest of the JS ecosystem (for better or worse).
This is a really good example of how not to use canvas.
So impressive and great to hear! This will open up the canvas to so many applications currently we can't use it for. You could build so many web components running at a smooth 60fps that are currently janky!
Bret Victor went over many of the reasons why Processing is poorly designed in his opinion
http://worrydream.com/LearnableProgramming/
it kind of made I feel like more of right place at right time for success rather than by design
not that I have any hope of supplanting it with something better anymore than 8086 assembly being replaced something more elegant.
note: much of that linked article is not related so search in page for Processing
Also, my opinion might not be popular but kudos to them for making the introduction so dumb-proof with the video and the visuals. More projects have to do this.
edit oh no, I see the <p> elements… but the page makes the text non-selectable, and the right-click context menu acts like I clicked on the background image.
Hopefully they can put together some text that I can digest accessibly...
Or at least add a [video] tag or something. It woke up half my family.
The [video] tag would be a good warning for the sound though.