P5.js: Processing for today’s web
p5js.org
p5js.org
I guess "today's web" is not an Open web, and has a single-point-of-failure hard-dependency on Google (at multiple levels).
Give it a year and both of those are likely to work.
"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."
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.
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.
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.
Also the demo/intro was fantastic.
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.
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.
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.
Either on Chromium 34 or Firefox 30 on Ubuntu.
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?
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.
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.
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/.
Browse around here and you will see.
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.
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 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.
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.
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.
I dont think that's the goal of processing,nor p5.D3 is the data visulalization framework of the web.
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).
Have fun and great job on the library!
Here is the flocking demo from the p5.js website [2] for your editing pleasure: http://plnkr.co/edit/C2afiQ?p=preview
"... 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.
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
After all, JavaScript was invented for this exact purpose...and we all know how many "content creators" and non-programmers are using that...
Something like that?
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?
sorry for the rant
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.
Couldnt they contribute to processingjs directly instead of creating yet another framework?
Getting Started Guide: http://p5js.org/get-started/
Transition Code: https://github.com/lmccart/p5.js/wiki/Processing-transition
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.)
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.