
p5.js – A library to make coding accessible for artists, designers, educators - joeyespo
https://p5js.org/
======
bluetwo
I give them credit for putting together a fun explanation of what they are
trying to do.

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.

~~~
gizmogwai
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.

~~~
vog
_> 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.

------
jamesrom
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.

~~~
Osmium
> 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.

~~~
rspeer
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.

~~~
jamesrom
Excuse my clumsy wording. I mean p5 feels like it's out of step with modern
web development.

------
nrjames
I made a few fun tools with p5.js a little over a year ago.

Image quilting:
[http://clayheaton.github.io/p5jsTiler/index.html](http://clayheaton.github.io/p5jsTiler/index.html)

Genetic algorithm cartoon generator (that I never really finished):
[http://clayheaton.github.io/generative_cartoons/index.html](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.

------
NickRRau
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...](https://github.com/shiffman/The-Nature-of-Code-
Examples-p5.js) [http://natureofcode.com/](http://natureofcode.com/)

~~~
Fifer82
This is a great book and unique. I am impressed he ported his demos.

------
krat0sprakhar
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](https://www.youtube.com/user/shiffman)

~~~
baddox
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.

------
cocktailpeanuts
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)?

~~~
chickenfries
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/](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](https://www.youtube.com/user/shiffman)

~~~
camus2
> 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/](http://processingjs.org/) )

The book [http://natureofcode.com](http://natureofcode.com) which is a good
starting point for creative coding uses ProcessingJS

~~~
vanderZwan
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.

~~~
toisanji
their webgl is completely broken and unusable. do not use it for webgl at all,
use other libraries like threejs.

~~~
vanderZwan
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)

------
uptown
Past discussion:
[https://news.ycombinator.com/item?id=8144212](https://news.ycombinator.com/item?id=8144212)

------
ryan-allen
Developer friendly intro: [https://p5js.org/](https://p5js.org/), examples
[https://p5js.org/examples/](https://p5js.org/examples/) (this library is
ace!)

~~~
aplummer
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.

~~~
whywhywhywhy
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.

~~~
randoaccount108
...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.

~~~
lmccartz
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...](https://medium.com/@ProcessingOrg/a-p5-js-web-editor-for-
all-64aaa3f9d767)). 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 hello@5p5js.org.

~~~
aplummer
> 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!

------
greggman
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/](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

------
a1371
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.

~~~
ricardobeat
What video? I'm on mobile and there isn't one in the index page. "Request
desktop site" is not honored either, as usual.

~~~
a1371
I think they changed the landing page. Now if you click on that "Hello!", or
go to hello.p5js.org it comes up.

------
desireco42
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.

~~~
extra88
Check out this comment about p5 and accessibility :)

[https://news.ycombinator.com/item?id=14750486](https://news.ycombinator.com/item?id=14750486)

------
Xoros
There were a video ??? Waited 40s and nothing happened (iPhone + Safari)

~~~
anotheryou
[http://hello.p5js.org/](http://hello.p5js.org/)

------
Joboman555
Link took over 10 seconds to load on iPad before I gave up.

------
thomasfl
One upvote for the interactive playground on top of a video of a friendly
fellow named Dan that tells you what you can do.

------
franciscop
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!

------
toisanji
love p5js, I put together this site for practicing drawing with p5js: you get
challenges to draw:
[http://www.pushpopchallenge.com/](http://www.pushpopchallenge.com/)

------
jwarren
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.

------
falsedan
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.

------
aembleton
Firefox on MacOS and it sounds like it's about to take off.

------
colemickens
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...

------
bcruddy
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.

------
JelteF
Looks cool, but the page uses one full CPU core on Chrome on my Linux machine.

------
lousken
Can't click on links in Edge (except the top menu)

------
efficax
But the arrows don't point to their heads.

------
eng_monkey
They are really excited people.

------
jnbiche
Can we please get this link changed to the text intro, dang, or anybody? It's
at: [https://p5js.org/](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.

~~~
indigo0086
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!"

~~~
_wmd
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?

~~~
indigo0086
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/](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.

------
breerly
I just spent 30 seconds looking at a loading spinner - no thx bye p5.js

