p5.js – A library to make coding accessible for artists, designers, educators(p5js.org)
p5js.org
p5.js – A library to make coding accessible for artists, designers, educators
https://p5js.org/
82 comments
P5 is indeed the official port of Processing for Java (Processing.js being an independent attempt from John Resig).
But like Processing, P5 is more about artistic realisations than applied use, which all of your alternate descriptions tend to lead to.
> P5 is indeed the official port of Processing for Java (Processing.js being an independent attempt from John Resig). But like Processing, P5 is more about artistic realisations than applied use, which all of your alternate descriptions tend to lead to.
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.
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.
Does there have to be such a big performance penalty?
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.
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.
p5.js and processing.js are really for educational and artistic doodling, not for commercial web design.
There aren't many applications where d3 or raw js wouldn't be a more performant solution for commercial graphics.
There aren't many applications where d3 or raw js wouldn't be a more performant solution for commercial graphics.
You might be thinking of Processing.js, which is fairly slow because it tries to interpret plain processing code, which is Java, not JavaScript[0].
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/
[1] https://p5js.org/reference/#/p5/pixels
[2] http://www.pixijs.com/
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/
[1] https://p5js.org/reference/#/p5/pixels
[2] http://www.pixijs.com/
[deleted]
I think low cost prototyping is one of the best features here -
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.
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.
I've built all kinds of things with d3, I've been using it for over 4 years. It's a seriously great library.
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.
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.
> 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.
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.
I think you're agreeing with the parent. He's saying the idea that everything's supposed to be declarative is a step backwards, because indeed sometimes you just want to write some imperative code and make something happen.
Excuse my clumsy wording. I mean p5 feels like it's out of step with modern web development.
you might try d3-component (https://github.com/curran/d3-component)
I just started learning d3 today for a work project, and yeah the selections and `data()`, `enter()`, `exit()` definitely add some cognitive overhead. Now that I've (mostly) wrapped my head around it, I like it a lot (and I'm also happy with d3's documentation!) Have you used react-faux-dom? [0] I've only just started using it, but so far it feels like a good solution for marrying react and d3.
[0] https://github.com/Olical/react-faux-dom
[0] https://github.com/Olical/react-faux-dom
Having gone through the process of marrying react and d3 - IMHO it's far easier to let react do DOM diffing and manipulation, and let d3 worry about data processing. The two work great together, just so long as you don't try to shoehorn one into the other. React more or less mirrors data(), enter(), and exit() with props, componentDid(/Will)Mount, and componentWillUnmount
Having officiated the same kind of union between Ember and D3 in a few different ways, I have to agree - let Ember handle rendering, and D3 handles dynamic data binding. I've been working on an open source Ember library based on these concepts:
http://locusenergy.github.io/ember-sparkles/#/sine-wave
This may be too late for you, but this is a great library that marries d3 with React. https://github.com/tannerlinsley/react-charts
Yeah, that does exactly the thing I was describing from a quick skim. https://github.com/uber/react-vis does it as well. I've found that attempting to wrangle one of these chart libs takes more time than a quick `myData.map(d => <line path={linefunc(d)}/>)` or similar.
Can you say what is the problem with D3 and react working together?
I made a few fun tools with p5.js a little over a year ago.
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.
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.
For anyone who has previously read or seen Shiffman's book 'The Nature of Code', he's also ported the examples in the book(Processing) to p5.js
https://github.com/shiffman/The-Nature-of-Code-Examples-p5.j... http://natureofcode.com/
https://github.com/shiffman/The-Nature-of-Code-Examples-p5.j... http://natureofcode.com/
This is a great book and unique. I am impressed he ported his demos.
p5js is an awesome library! If you're looking for ideas to play with, checkout Dan Shiffman's Youtube Channel - Coding Train[0], a series in which he build ML libraries, games and lots of fun mini-projects.
0: https://www.youtube.com/user/shiffman
0: https://www.youtube.com/user/shiffman
He and Lauren also teach a couple of courses over at Kadenze:
https://www.kadenze.com/courses/introduction-to-programming-...
https://www.kadenze.com/courses/the-nature-of-code
(disclaimer: I work for Kadenze)
https://www.kadenze.com/courses/introduction-to-programming-...
https://www.kadenze.com/courses/the-nature-of-code
(disclaimer: I work for Kadenze)
His coding challenges are a source of endless entertainment for me. I swear I could watch an hour a day of his unique combination of cheery, clumsy, and informative.
I don't get why that guy in the video is so excited about this. Isn't this just some interactive JS animations overlaid on top of video?
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)?
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)?
He might be excited about it because it was a novel idea 3 years ago when this was released.
In fact, I like it how excited he is. It's so entertaining :D
Processing (from which p5 takes its inspiration) has an explicit goal of being beginner friendly. I was first introduced to it in an art class.
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.
https://www.youtube.com/user/shiffman
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.
https://www.youtube.com/user/shiffman
Dan Shiffman's youtube channel "The Coding Train", his books and website - are really great introductions/tutorials to general programming, creative programming, natural language analysis, machine learning and a whole bunch of other topics. He has this ability to make technical-sounding (or actually technical) concepts and projects interesting, non-scary for beginners (and non-math background people) and fun. In my view - his books & videos are prolly the best introductions to programming for kids and people who have a fear of programming.
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/
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 (from which p5 takes its inspiration) has an explicit goal of being beginner friendly. I was first introduced to it in an art class.
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
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
processingjs.org hasn't been updated in years, and the java-to-javascript interpreter is full of quirks.
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.
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.
their webgl is completely broken and unusable. do not use it for webgl at all, use other libraries like threejs.
Can you explain how it's broken for you? The examples work just fine in all of my available browsers, but I know that's only a limited sample:
https://p5js.org/examples/3d-sine-cosine-in-3d.html
https://p5js.org/examples/3d-sine-cosine-in-3d.html
[deleted]
It also uses p5!
[deleted]
Dan Shiffman is always excited... ;)
https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw
https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw
p5 has also been around for a while, but even then the tech isn't the cool part.
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).
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).
Past discussion: https://news.ycombinator.com/item?id=8144212
Developer friendly intro: https://p5js.org/, examples https://p5js.org/examples/ (this library is ace!)
Unfortunately, rendering all that text on a canvas even in your link makes it inaccessible to many people living with disability too - the same as the intro video without captions.
This is a really good example of how not to use canvas.
This is a really good example of how not to use canvas.
This seems like a petty thing to complain about to me considering how excellent the tech is and how it makes interactive graphics attainable for so many people.
...but it continues to apply to less than the entire human base that generally browse the Internet. Seems like it makes interactive graphics attainable to people who were already able to, just making their effort to achieve it less.
I agree. When we made this video four years ago, we didn't know much about accessibility at all. We have been working since then to improve things. While we're going to leave this video alone as it's quite outdated (and probably remove the link from the website soon), we are building a web-based p5.js code editor that aims to be accessible to blind and low-vision users. In addition to being screen reader compatible, it will make the canvas, normally impenetrable to screen readers, accessible as well by providing and option of three different types of audio feedback based on what type of sketch you're trying to create. Claire Kearney-Volpe and Mathura Govindarajan are heading up the efforts, and Cassie Tarakajian is leading the development of the editor (more here: https://medium.com/@ProcessingOrg/a-p5-js-web-editor-for-all...). We're aiming for a release very soon. We are always looking for more accessibility feature testers, so if you are interested in previewing an alpha version please email [email protected].
> it will make the canvas, normally impenetrable to screen readers, accessible as well by providing and option of three different types of audio feedback based on what type of sketch you're trying to create
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!
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!
I agree a bit, i should have clarified, background animation with this = awesome, rendering text, not so awesome. A couple p tags would solve the issue.
This. I work at a University where accessibility is a major issue when developing public-facing web apps. Any library/practice we adopt comes with a decent dose of "Will someone (minor sight issues all the way to blind) be able to use this? Someone with (minor hearing issues all the way to deaf)?" This seems promoted as a learning tool... just wouldn't fly in my department.
In Australia it's now law for all government websites to be WCAG AA
both processing and p5.js are amazing but I'm curious are they amazing by design or by effort and luck.
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
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
At first I thought it was a video until he said that the clusters are avoiding his head. It is nice to have video interactivity like this.
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.
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.
What video? I'm on mobile and there isn't one in the index page. "Request desktop site" is not honored either, as usual.
I think they changed the landing page. Now if you click on that "Hello!", or go to hello.p5js.org it comes up.
This is by far the most novel way to introduce a library that I've seen in a long time and also very impressive. It isn't accessible, and I don't think p5 can be accessible as well, so I guess that is OK. I really bow to such original presentation.
Check out this comment about p5 and accessibility :)
https://news.ycombinator.com/item?id=14750486
https://news.ycombinator.com/item?id=14750486
There were a video ??? Waited 40s and nothing happened (iPhone + Safari)
Link took over 10 seconds to load on iPad before I gave up.
One upvote for the interactive playground on top of a video of a friendly fellow named Dan that tells you what you can do.
About the web design: please value readability a lot more; now it is quite difficult to read the text with that background. Besides that, Processing was really fun to play with back when I did, I wish you the best as well!
love p5js, I put together this site for practicing drawing with p5js:
you get challenges to draw: http://www.pushpopchallenge.com/
I've seen Mike Brondbjerg speak a couple of times about iterative artistic development using Processing and p5.js. It's really cool stuff, and I'd suggest seeking it out if the area interests you.
Did… did they render the text on the landing page as an image?
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.
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.
Firefox on MacOS and it sounds like it's about to take off.
I'm a bit surprised that there aren't more comments about following the submission link and then being dropped on, what is apparently a technical product/project, with nothing but a full screen, long-form, non-transcribed video. If I hadn't read the comments here, I would've never assumed it was something technical. And I'm still not going to watch that video.
Hopefully they can put together some text that I can digest accessibly...
Hopefully they can put together some text that I can digest accessibly...
I get that this is designed to facilitate "learning to code within the context of the visual arts" and I think that's great but holy shit tone down the javascript nonsense on your website. Granted, I'm not the target audience but the site was gorgeous before the animations started. Simple, complimentary colors made me want to read the carefully chosen font face.
Looks cool, but the page uses one full CPU core on Chrome on my Linux machine.
[deleted]
Can't click on links in Edge (except the top menu)
But the arrows don't point to their heads.
They are really excited people.
[deleted]
Can we please get this link changed to the text intro, dang, or anybody? It's at: https://p5js.org/ It's a cool project, so I don't want to downvote it, but the sound is loud and not opt-in.
Or at least add a [video] tag or something. It woke up half my family.
Or at least add a [video] tag or something. It woke up half my family.
I like it.
While loud and awkward, it's one of the better ways I have been introduced to a library. I'm kind of tired of the "<x library> is a <word I don't know> for <task I'm not aware of>ing <word soup>, it's that easy!"
Perhaps I'm just old and grumpy, but the video seemed to be more about the people in it than the library itself. I guess it was pretty fun to make, but bleh, a little overkill for a JS lib?
Honestly I think it's great showing what it can do as there were parts of the video that were interactive. The point is to show that P5 allows you do do interactive visual applications and an introductory video that shows that you can do that is rather interesting. I just started checking out this http://hello.processing.org/editor/ and it is in the same spirit. I personally think this should be how all instruction should be. There really is no point in learning if doing is saved for a possible future.
I like how they "trick" you to engage with the video, and don't give you an option to get distracted trying to dig around the page. Normally I skip videos if I can and miss out on the high-level guided introduction.
The [video] tag would be a good warning for the sound though.
The [video] tag would be a good warning for the sound though.
I just spent 30 seconds looking at a loading spinner - no thx bye p5.js
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.