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