
P5.js: Processing for today’s web - bpierre
http://p5js.org
======
html5web
Holy shit! This is great presentation
[http://hello.p5js.org/](http://hello.p5js.org/)

~~~
nfoz
> Your browser doesn't support all of the features required for this demo.
> Please consider using the latest version of Chrome.

I guess "today's web" is not an Open web, and has a single-point-of-failure
hard-dependency on Google (at multiple levels).

~~~
acdha
It also works in Firefox, Opera, and WebKit. The only modern browsers left out
appears to be Safari 7 (no WebGL) and IE (Web Audio).

Give it a year and both of those are likely to work.

~~~
fred_durst
Indeed. If the authors stop by, consider changing the message to something
more like

"Your browser does no appear to support a couple things required to play this
presentation(WebGL, Web Audio etc). The latest versions of several browsers
do. You might want to try one of those instead."

~~~
_lmccart
thanks, yes, working on a fix right now. we also want to make it clear that
those things are not necessarily required for p5.js itself, just the demo.

~~~
soperj
but they're obviously required to do things in the demo no?

------
bGriz
I'm naive. What makes this comparable to - or better than - D3 js, Easel js,
Three js, Raphael js, Kinetic js, Paper js, Famo.us js, Impact js... and boy
I'm sure I can think of many more. I realize they don't all share the same
feature sets... but I'm not understanding what makes this new or exciting.

Edit: Maybe I don't get the "processing" part... isn't this about creating
interactive experiences? The examples demonstrate so and I didn't see examples
of processing complex data sets or anything. Would love to hear some
elaboration on it.

I noticed the statement "p5.dom lets you interact with HTML5 objects beyond
the canvas, including video, audio, webcam, input, and text." This is
interesting. Perhaps the point here is P5 manages more interactive components
without the developer having to mash different tools together?

~~~
thathonkey
There's plenty of reasons why there would be such a state of affairs. Probably
the biggest is that there is no clear winner in this space. D3 is shoring up,
but it is quite a bit more complex for non-devs IMHO than what this looks to
be. Frankly this is a pretty lazy comment. You could just look at the link's
"Start" page for <5 minutes and see for yourself why it's different enough to
warrant existence and could legitimately be in the running with the X other JS
frameworks that have overlap in canvas drawing.

I mean it's in beta, clearly, and people are in here harping about the
accessibility of one of the presentations on the site and comparing it to
relatively mature (eg D3 is on v3) frameworks. That isn't very fair.

~~~
bGriz
| You could just look at the link's "Start" page for <5 minutes and see for
yourself why it's different enough to warrant existence

Honestly I'm not seeing what's different. I'm working on a hybrid canvas/html5
feature app right now. A good portion of the API (p5js.org/reference) feels,
well, typical.

I don't want to discredit the project, it does look nice. You're point about
beta is good.

In fairness, this appears to be targeted towards non-programmers, and having
been deep in UI for years I may be missing the simplicity sake.

Also, I had no interest in slamming them for a temp broken browser context...
rather I'm trying to understand what makes this awesome. In years of browser
UIE I hadn't heard of [http://processingjs.org/](http://processingjs.org/).

~~~
barkingcat
Yes, the "processing" refers to the name of a programming language /
programming environment originally founded / created by people at the MIT
Media Lab.

It is not referring to "processing" anything as a verb, but the name of the
programming language outlined at
[https://www.processing.org](https://www.processing.org)

processing.js and this p5js are interpreters for the processing language built
in javascript (so that people can write processing scripts in javascript).

You probably haven't heard of it in browser ui/development because it's not
specific to the browser.

Many people use it to build interactive art environments both virtually and in
the real world (tied to things like servos and light machines, etc) - and a
lot of people use it to teach interactive graphics to kids or newcomers to
programming.

So it's a totally different thing than what you are thinking of. It doesn't
compete at all with any of the graphics libraries because it's for a different
purpose.

------
ghostwords
Have you guys seen Bret Victor's criticism of Processing in
[http://worrydream.com/LearnableProgramming/](http://worrydream.com/LearnableProgramming/)?

~~~
davebees
This seems to be more a criticism of Khan Academy's live Processing editor.

~~~
ghostwords
There are lessons there for improving live editing environments (whether Khan
Academy's, or p5.js', or ...), but also a call to rethink teaching
(programming) in general.

Processing is clearly on the right track given all the wonderful things that
have already been made with it ... consider how many more people it could
reach, how much more wonder could exist, if Processing were to move beyond
`ellipse(50, 50, 80, 80)` (for example).

------
filearts
If you would like a simple environment to play with p5.js right now, I've
created a simple template in Plunker:
[http://plnkr.co/edit/tpl:ElV3rt?p=preview](http://plnkr.co/edit/tpl:ElV3rt?p=preview)

Have fun and great job on the library!

~~~
filearts
I've always loved the simplicity and beauty of Boids [1] by Craig Reynolds.

Here is the flocking demo from the p5.js website [2] for your editing
pleasure:
[http://plnkr.co/edit/C2afiQ?p=preview](http://plnkr.co/edit/C2afiQ?p=preview)

[1] [http://en.wikipedia.org/wiki/Boids](http://en.wikipedia.org/wiki/Boids)

[2]
[http://p5js.org/learn/demos/Hello_P5_Flocking.php](http://p5js.org/learn/demos/Hello_P5_Flocking.php)

------
mbrzuzy
I don't mean to be that guy, I'm genuinely curious. Is this pretty much the
same thing as [http://processingjs.org/](http://processingjs.org/) ?

~~~
shiffman
See: [https://github.com/lmccart/p5.js#how-is-this-different-
than-...](https://github.com/lmccart/p5.js#how-is-this-different-than-
processingjs)

~~~
twright
This looks more attuned for Javascript and Web development. Here's an overview
of some differences too: [https://github.com/lmccart/p5.js/wiki/Processing-
transition](https://github.com/lmccart/p5.js/wiki/Processing-transition)

------
Osmium
Shame there's no 3D; I guess it's still Three.js for now. They have plans for
it though, and it looks like a great start so far otherwise, and they have
official support from the Processing foundation too.

------
arikrak
How does this compare to [http://processingjs.org/](http://processingjs.org/)
?

~~~
jffry
See [1] (via [2])

[1] [https://github.com/lmccart/p5.js#how-is-this-different-
than-...](https://github.com/lmccart/p5.js#how-is-this-different-than-
processingjs)

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

------
SoapSeller
From the "Start" page:

    
    
      If you didn't type it correctly, you might not see anything. If this happens, make sure that you've copied the example code exactly
    

This is definitely a big no-no if your goal is "to make coding accessible for
artists, designers, educators, and beginners".

~~~
_lmccart
good feedback, what would you recommend as an alternative wording? would love
to improve it.

~~~
tomphoolery
I don't think that's what he means. I interpreted that as criticism to the way
your language handles errors. At the very least, there should be _some_ kind
of feedback to the user, especially if you're making this with the intention
of drawing in non-programmers.

After all, JavaScript was invented for this exact purpose...and we all know
how many "content creators" and non-programmers are using that...

~~~
evhan55
:)

------
smrtinsert
Is processing.js deprecated now? Are both js implementations going to co-
exist? Seems a little unfortunate that there is an obvious split without any
hard language describing the future.

------
nutate
Great return to the roots for processing. Always more of a fan from the
periphery than a user. It harkens back to the original days when they only had
the proce55ing domain.

------
WhitneyLand
It's cool. Great to have this spirit, keep going.

Feedback: The editor currently starts up showing an empty function. Would be
nice to add a line of code in there for instant gratification of seeing
something draw from code right away.

Shouldn’t have to explicitly call createCanvas() for simple apps. Why not do
it by default to match the current window size?

Can’t get the editor to refresh without stopping and starting, I assume that’s
a beta issue?

~~~
_lmccart
great feedback! command+r will refresh, but maybe we need to add an explicit
button. other good points, too. would you mind posting these thoughts here:
[https://github.com/antiboredom/jside/issues](https://github.com/antiboredom/jside/issues)

~~~
WhitneyLand
sure, done. good luck.

------
atmt
hm, im not sure what to think about this. Despite beeing another
'framework/library' that promises to ease the learning curve for non
programmers to produce graphics, i do not fully understand why using it should
be more easier than drawing to blank 'raw' canvas element with a bunch of
wrapped drawing methods. Eg. why do i need to an 'updatePixels' wrapper of
putImageData, just to ensure syntax equality, overall the abstraction layer
just seems really thin. Should we not accept that every platform has its own
tools, and stop making the ultimate crossplatforn artist drawing framework.
Wouldnt it be better to accept the languages own features and try building
stuff on top of that, instead of trying to mimic another language, also
without considering the target languages limits (eg. p5.js isnt caching
anything, constantly getting context via getContext('2d') is just slow...).

sorry for the rant

~~~
ghostwords
Accessibility matters! The fewer barriers to entry, the fewer interested
people your project will turn away.

~~~
atmt
For sure, the initial barrier is really low, but when it comes to actually
building stuff with it, you still have to deal with the js way of doing it,
handling classes, obviously totally not like the java counterpart, or
collecting your projects resources in script tags, which is messy. At some
point you also have to drop the global methods, which seems to be the obvious
first benefit. Im just not sure if teaching a dogmatic processing like way is
the way to go in js, or general

~~~
ghostwords
Agreed, I wish you didn't have to deal with JavaScript's quirks (or script
tags even).

------
cordite
The presentation was really well done, it kept my attention and the
interactivity helped make their points.

------
_nullandnull_
I am super excited about this. I don't have much background in Javascript but
I used processing back in the day. This sounds like fun to mess around with.
Thanks for posting.

------
aikah
It basically looks like processingjs without the processing language.

Couldnt they contribute to processingjs directly instead of creating yet
another framework?

~~~
_lmccart
this is a different direction than processingjs with different goals, read
more here: [https://github.com/lmccart/p5.js#how-is-this-different-
than-...](https://github.com/lmccart/p5.js#how-is-this-different-than-
processingjs)

------
msane
Looking for examples / demos.

~~~
justboxing
Demos: [http://p5js.org/learn/#demos](http://p5js.org/learn/#demos)

Getting Started Guide: [http://p5js.org/get-started/](http://p5js.org/get-
started/)

Transition Code: [https://github.com/lmccart/p5.js/wiki/Processing-
transition](https://github.com/lmccart/p5.js/wiki/Processing-transition)

~~~
legutierr
Looking through those examples, it seems like all of the functions that p5
provides are dropped into the global scope. Do you know if there is any easy
way to cause all of those functions to live inside a "p5" object or something?

~~~
saaaam
Yes - you can instantiate a p5 object:
[http://p5js.org/learn/examples/Instance_Mode_Instantiation.p...](http://p5js.org/learn/examples/Instance_Mode_Instantiation.php)

------
ausjke
awesome stuff, this is one of the best way to get kids involved in programming
too.

------
joeyspn
Really cool! Reminds me a lot of ActionScript but (finally) for the browser

------
balls187
Many of the examples did not work for me in Firefox (latest-OSX).

------
alessioalex
Too bad it's GPL licensed instead of a more permissive one :(

~~~
belorn
Poor you. You are only getting software, for no cost, offered with permission
to use it, modify it, and distribute it for no additional cost to whom you
want.

If only they would allow you to take the software and then put restriction on
it. It is after all those restrictions that really matter, not the software.
Too bad that adding restrictions is not included in the deal.

