Hacker News new | past | comments | ask | show | jobs | submit login
P5.js: Processing for today’s web (p5js.org)
381 points by bpierre on Aug 6, 2014 | hide | past | web | favorite | 93 comments

Holy shit! This is great presentation http://hello.p5js.org/

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

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.

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

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.

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

Safari 7 has WebGL but is disabled by default. Enable developer menus, then click on "Enable WebGL".

> The only modern browsers left out appears to be Safari 7 (no WebGL)

Safari has WebGL since 5-ish but disabled by default.

To enable, Safari > Preferences > Advanced > Show Develop menu, then Develop > Enable WebGL

The presentation seems to work allright, although it suffers from some slowdowns.

I'm aware of that but it effectively doesn't exist for the public if it's gated behind a developer option. This goes double for Safari on iOS.

That said, I was happy to have it run well on my system with WebGL enabled since that should make it a smooth transition when Safari 8 is released.

Works perfectly in Safari 8 running in Yosemite Beta

Yeah, I'm expecting WebGL to be realistic for many sites in the next year. Even Microsoft is moving to automatic updates and Apple would be foolish not to release Safari 8 at least on 10.8/10.9 since the WebKit nightly builds run perfectly there.

played perfectly on Firefox (Win8.1 Firefox 31.0) for me, I think Chrome is just a suggestion.

It doesn't work in IE11. That page (not the library) does a test for Modernizr.webaudio, which IE11 fails.

For what it's worth, I was browsing with Iceweasel on Debian-stable.

Well, you're comment made me aware I'd better restart my iceweasel session, I'd already upgraded from 29 to 31, but was running old code. And then I found out I'll probably have to reboot, as firefox/iceweasel tries to pull in nouveau-based drivers... and I'm running the binary-blob nvidia drivers.

So, still no webgl, but with any luck xorg will come up with accelerated 3d on next re-boot - and webgl will work too.

I do wish more hw companies would just release free and open drivers...

This particular rig is a hand-me-down -- next gpu will be radeon, among other things for their efforts to be a better driver-citizen than nvidia. Even if for a certain set of configurations, nvidia has delivered better actual hw performance under Linux, for certain fixed configurations.

It worked for me on Firefox. 31 but there have been so many times I was disappointed.

Also the demo/intro was fantastic.

Definitely interesting, but it's unfortunately not very accessible; much of the information is only conveyed through the audio, and the video doesn't have any subtitles or a transcript.

He keeps referring to "this circle", but I think I'm missing something. Is it a metaphorical circle?

Edit: OK, eventually I saw some of the stuff he was talking about, but only around the edges of the video frame. It looks like the most of the demo part was hidden behind the video.

Further edit: After trying it in firefox, I now realize that the demo just completely doesn't work in Chrome on my machine. The video plays with a big green rectangular background that pretty much breaks the presentation.

It's video in a canvas element which overlays a background canvas visualization. It's unclear in the video if P5.js controls both the video and the visuals, I suspect it does.

However, it looks clear to me that a collision detection circle is added to the background visualization, and that the videography is designed to synchronize with that circle. The presenter's head represents the collision zone, where the circle is positioned. It makes the presenters head a "bounce away" zone. It's video/canvas orchestration.

God I wish I could scrub the video, though.

I would like to say it looks very neat. Hoping the guys chime in on how it parallels or surpasses existing tools. The canvas + feature mashup does appear to have great potential. There is limited reason to believe canvas elements are handicap accessible, unless you invest a large amount of time in custom markup configurations which the framework doesn't appear to have addressed.

Wow. At first I thought it was just a video, but its more like an "interactive intro". I remember being introduced to Processing years ago in CMU's Intro to Programming class, glad to see that it's still being used and developed.

Yeah... The interactive video is really cool. It looks like they're using popcorn.js for it (although I'm still watching, and haven't completely checked out the source).

It's a neat idea, but I wish they'd just put the normal controls on the video. I couldn't read the text fast enough to take it in along with the voiceover, there's no ability to rewind if you miss something, and there's no indication of how long the whole thing lasts or whether you'll be able to replay it when it finishes. It sounds like I missed out on something interesting that happens later, but I gave up in frustration after a minute or two, and I expect I lasted longer than a lot of people will.

Thanks, but the video file alone loses the context that is intended. In particular, you can't see the other information that is overlaid in the intended presentation.

I think this is a pretty good demonstration of combining video and non-video information, but it also demonstrates a significant weakness of doing that if you aren't careful about how to synchronize data from the different sources.


On a slow connection, between buffering and no rewind button, this was rather hard to watch.

It was good, but I don't know if I would call it great. The technology is interesting - and maybe that's what matters to most people here - but I found the male presenter (Dan?) to be... distracting, to say the least. My first thought when he started talking was, "wow, is this guy on drugs or what?" And I just couldn't focus on anything he said.

That was my first thought too. Dan might as well be wearing a "LEGALIZE LSD" t-shirt.

http://vimeo.com/channels/natureofcode/ You'll get used to Dan very quickly after a few of these videos.

I had the opposite reaction. I found him laid back, fun and refreshingly unaffected. Not stilted or 'canned' as so many speakers can often seem, myself included.

Doesn't display right for me http://i298.photobucket.com/albums/mm249/hrenistic/p5_zps408...

Either on Chromium 34 or Firefox 30 on Ubuntu.

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?

Read "The Nature of Code" [1], by Dan Shiffman (the same Dan in the Hello video linked above), and you'll instantly understand the difference between Processing (and P5.js) and other languages/frameworks.

In the same way that Arduino brought hardware hacking and IoT for the masses, Processing does the same for creative coding. There's a ton of people out there that are not experienced hard core developers using Processing to create data visualization, interactive installations, games, and experiences mixing sound, vision and graphics.

The P5.js basically unlocks the power of Processing by expanding its canvas, from a monolithic desktop app to the browser. And this is a great step forward. Besides, Lauren is doing a great job creating a community around the project.

[1] http://natureofcode.com/book/

> There's a ton of people out there that are not experienced hard core developers using Processing to create data visualization, interactive installations, games, and experiences mixing sound, vision and graphics.

Processing was more or less how I got into 'serious' coding. It was ActionScript -> Processing -> Everything Else for me. It really cuts down on the bs and the boilerplate and lets you get started with getting your thoughts visualised on the computer, without worrying about the underlying technologies.

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.

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

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

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.

If anything the community behind processing is sure to make this quite a lot different than D3.

Browse around here and you will see.


| Frankly this is a pretty lazy comment.

I agree and had been revising my comment after-the-fact. Sorry the reddit world showed its face there. Perhaps the really excited guy in the P5 hello video throws me off, because while it might enter competition with existing frameworks it showcases features that have existed through other manifestations.

Processing isn't about data. It's about graphics. The original, is a playground environment based on Java for making computer graphics and such. Think of it as programming for non-programmers.

Processing.js brought the Java toolkit to the web. You could basically insert a script tag and your Processing code would run within a Canvas object.

P5 here apparently improves upon Processing.js, letting you "escape the canvas" if you so choose.

I appreciate the point that it's oriented towards non-programmers.

> I appreciate the point that it's oriented towards non-programmers.

I dont think it's oriented towards non-programmers.It's an abstraction of web apis sure,but non-programmers wont magically turn into "creative coders" with a framework.

The original, Processing, took off because it was easy to share snippets of code and then modify variables to make it work. So indeed, non-programmers can write code, by copying and pasting. They're already creative... they want to make something that looks cool, they aren't sure how they'll get there, but they'll know it when it's done (or they run out of time to tweak).

> 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 dont think that's the goal of processing,nor p5.D3 is the data visulalization framework of the web.

Have you guys seen Bret Victor's criticism of Processing in http://worrydream.com/LearnableProgramming/?

That "ellipse" API comparison to a dialog box is one of the funniest, sharpest things I have ever seen.

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

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

Thanks for the link. His work is inspiring.

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

Have fun and great job on the library!

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

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

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

Thank you!

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

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

Asked the same question myself. P5 to Processing. The differences give you an insight to the advantages.

"... you're not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound. ..." ~ https://github.com/lmccart/p5.js#how-is-this-different-than-...

The differences b/w P5 and ProcessingJS isn't enough if P5 isn't as stable or compatible.

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.

How does this compare to http://processingjs.org/ ?

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

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

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


Apart from teaching somebody how to debug, I actually disagree - it's a very important point to make that you need to be exact when giving computer's instructions, something many people learning programming don't grasp very easily.

"Remember that the computer is the most literal-minded machine you will ever work with. Mistype any letter and it will misunderstand you."

Something like that?

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.

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.

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?

Thanks for the feedback - I'll investigate the editor refresh issue (I'm leading that project) - as you say its very much in beta.

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

sure, done. good luck.

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

I totally agree.

On top of that I think that its much more rewarding to learn the actual technology / language and not just a framework that represents one opinion about how things should get done. When trying to learn some c++ and opengl, i totally see the need for good libraries, which abstract some of the initial verbose window and shader setup, its good to directly jump into manipulating vertices and stuff. They are needed because they hide the initially complex setup. But in case of Javascript I really dont see why there needs to be another abstraction layer. The language itself is so easy, setting up a canvas is already handled well, and drawing to it is documented extensively.

Also in regards to the goals of p5.js (https://github.com/lmccart/p5.js#how-is-this-different-than-...): "It is easy to translate a sketch from Processing to p5 and the process of doing so begins to teach people the basics of JS" I dont really see how it would help teaching the basics of js, when the 'framework' itself introduces stuff like global functions, constants and so, which are considered evil in js. On top of that i think that if you try to teach someone js by porting code from java, you have to teach the fact that js itself is total different beast. Just like u said, no classes in a traditional sense, where have all the types gone?... That fact that js is so perfect for 'creative coding' is because of its dynamicness, the same reason why bindings for scripting languages are so popular in lower languages, you can just express an idea much faster and see changes immediatly. Yes a good framework can help with that, but I think that when learning js as a first language you have to be aware of its advantages right from the beginning, and not by translating it from another language.

I just love paper.js way of dealing with javascripts dynamicness, paperscript introduces some neat additions to the language like operators http://scratchdisk.com/posts/operator-overloading I could totally imagine p5.js going the same way, accepting that the environment changed, not trying to port one opinion from another language to js, but instead think about the way javascript and its advantages can be used to create a new tool.

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

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

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

haha, I see that the context is cached now ;)

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

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.

It basically looks like processingjs without the processing language.

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

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

Looking for examples / demos.

Bug in example "Interactivity 1":

In function "mousePressed", distance is checked from (360, 240) when the ellipse is actually placed at (360, 200).

Can anyone suggest how to read back the actual center location of the eclipse programmatically inside the "mousePressed" function so that the center coordinates are not duplicated? (Note: I am new to JavaScript.)

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?

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

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

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

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

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.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact