11 ms·
P5.js: Processing for today’s web
- msane 12y agoLooking for examples / demos.
- html5web 12y agohttp://p5js.org/learn/#demos http://p5js.org/learn/#demos
- justboxing 12y agoDemos: 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 12y agoLooking 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 12y agoYes - you can instantiate a p5 object: http://p5js.org/learn/examples/Instance_Mode_Instantiation.php http://p5js.org/learn/examples/Instance_Mode_Instantiation.p...
- alok-g 12y agoBug 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.)
- html5web 12y agoHoly shit! This is great presentation http://hello.p5js.org/ http://hello.p5js.org/
- Flux159 12y agoWow. 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.
- BinaryBullet 12y agoYeah... 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).
- deleted 12y ago[deleted]
- nfoz 12y ago> 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).
- lccarrasco 12y agoplayed perfectly on Firefox (Win8.1 Firefox 31.0) for me, I think Chrome is just a suggestion.
- acdha 12y agoIt 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.
- 12y ago
- mbrzuzy 12y agoI 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 12y agoSee: https://github.com/lmccart/p5.js#how-is-this-different-than-processingjs https://github.com/lmccart/p5.js#how-is-this-different-than-...
- twright 12y agoThis 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
- deleted 12y ago[deleted]
- bootload 12y agoAsked 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-processingjs 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.
- cordite 12y agoThe presentation was really well done, it kept my attention and the interactivity helped make their points.
- filearts 12y agoIf 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 12y agoI'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
- detroitcoder 12y agoThank you!
- WhitneyLand 12y agoIt'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 12y agogreat 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 12y agosure, done. good luck.
- saaaam 12y agoThanks for the feedback - I'll investigate the editor refresh issue (I'm leading that project) - as you say its very much in beta.
- deleted 12y ago[deleted]
- Osmium 12y agoShame 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.
- SoapSeller 12y agoFrom 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 12y agogood feedback, what would you recommend as an alternative wording? would love to improve it.
- tomphoolery 12y agoI 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 12y ago:)
- gravity13 12y agoApart 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.
- vanderZwan 12y ago"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?
- _nullandnull_ 12y agoI 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.
- joeyspn 12y agoReally cool! Reminds me a lot of ActionScript but (finally) for the browser
- ausjke 12y agoawesome stuff, this is one of the best way to get kids involved in programming too.
- arikrak 12y agoHow does this compare to http://processingjs.org/ http://processingjs.org/ ?
- jffry 12y agoSee [1] (via [2]) [1] https://github.com/lmccart/p5.js#how-is-this-different-than-processingjs https://github.com/lmccart/p5.js#how-is-this-different-than-... [2] https://news.ycombinator.com/item?id=8144626 https://news.ycombinator.com/item?id=8144626
- balls187 12y agoMany of the examples did not work for me in Firefox (latest-OSX).
- ghostwords 12y agoHave you guys seen Bret Victor's criticism of Processing in http://worrydream.com/LearnableProgramming/ http://worrydream.com/LearnableProgramming/?
- evhan55 12y agoThat "ellipse" API comparison to a dialog box is one of the funniest, sharpest things I have ever seen.
- SolarUpNote 12y agoThanks for the link. His work is inspiring.
- davebees 12y agoThis seems to be more a criticism of Khan Academy's live Processing editor.
- ghostwords 12y agoThere 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).
- nutate 12y agoGreat 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.
- bGriz 12y agoI'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 12y agoThere'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 12y ago| 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.
- bGriz 12y ago| 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/.
- aikah 12y agoIt basically looks like processingjs without the processing language. Couldnt they contribute to processingjs directly instead of creating yet another framework?
- _lmccart 12y agothis is a different direction than processingjs with different goals, read more here: https://github.com/lmccart/p5.js#how-is-this-different-than-processingjs https://github.com/lmccart/p5.js#how-is-this-different-than-...
- alessioalex 12y agoToo bad it's GPL licensed instead of a more permissive one :(
- belorn 12y agoPoor 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.
- deleted 12y ago[deleted]
- smrtinsert 12y agoIs 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.
- atmt 12y agohm, 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 12y agoAccessibility matters! The fewer barriers to entry, the fewer interested people your project will turn away.
- atmt 12y agoFor 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 12y agoAgreed, I wish you didn't have to deal with JavaScript's quirks (or script tags even).
- atmt 12y agohaha, I see that the context is cached now ;)