7 ms·
P5.js – A library to make coding accessible for artists, designers, educators
- soegaard 4y agoIn case you would like to try Processing using Racket, try out Sketching: https://soegaard.github.io/sketching/ https://soegaard.github.io/sketching/
- tony-allan 4y agop5.js has been around for about 8 years. "p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone. Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound."
- hackarama 4y agoDuring my university courses at University of London, we made a side-scrolling video game, a sound visualizer, as well as a MS Paint clone using P5. It's definitely accessible for beginning JavaScript programmers.
- tough 4y agoHow much would the MS Paint take to the average coder to ship?
- Crespyl 4y agoDepends on how feature complete you want it to be. Back when I was working in Processing a lot, I could probably have whipped up something decent in an easy weekend. If I wanted to have more complicated features like flood fill, cutting/moving regions etc, I might need an extra day to figure it out. If all you want is a bare minimum scribbling lines in a limited palette, that could probably be done in a matter of minutes.
- hackarama 4y agoSurprisingly, if you keep the feature set down, time to ship wasn't bad. The project was done in about half a semester and that's only working on it here and there. For the final project we had to implement three "advanced" drawing tools, I think one of the ones I came up with was to draw Bezier curves, now that wasn't exactly trivial and could definitely add some time to ship.
- tough 4y agoI was thinking mostly photoshop brushes, not paint tbh. Thanks for sharing. might try at home!
- wrycoder 4y agoWe are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, disability, class, religion, culture, subculture, political opinion, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners.
- tony-allan 4y agoPrevious discussion: https://news.ycombinator.com/item?id=14749527 https://news.ycombinator.com/item?id=14749527
- jonas-w 4y agoThanks for bringing this up again. This brings back some nostalgia, as i've learned much through the Youtube Channel "Coding Train" which used this library for literally anything. Haven't watched his videos in a while, was definitely one of those people that made me fall in love with programming.
- _micheee 4y agoI really enjoy watching his videos, if only just for pure entertainment. I never really touched processing or p5js, still I like the way Daniel introduces and teaches core programming concepts. Seems to be a great guy!
- runemadsen 4y agoThe Coding Train just launched a new website with their entire archive! https://thecodingtrain.com/ https://thecodingtrain.com/
- _HMCB_ 4y agoWhoa! Awesome. Thank you.
- sC3DX 4y agoStumbling upon the coding train a few years ago is the reason I'm an engineer today. Shiffman showed me how problem solving can be fun! I owe him a lot.
- Crespyl 4y agoShiffman's book "The Nature of Code"[0] is another great resource for learning programming with Processing/p5js, and covers some cool topics like cellular automata, steering agents/boids, simple neural networks, drawing fractals, and so on. I had a lot of fun early in my own education following along with his guides. Coding Train looks like another great resource, thanks for sharing it. [0] https://natureofcode.com/book/ https://natureofcode.com/book/
- woudsma 4y ago
- beingflo 4y agoI have recently been looking to try some creative coding / generative art. I've found that most libraries focus on interactive or animated applications, whereas I would like to generate a static image for print. Are there any recommendations for this specific use case? E.g. maybe svg-based libraries like Paper.js are more appropriate to generate high quality files instead of canvas-based ones like P5.js?
- 0xdada 4y agoThere are libraries (i.e. https://github.com/zenozeng/p5.js-svg https://github.com/zenozeng/p5.js-svg) that give you a SVG runtime. I find it very useful!
- mcphage 4y agoAnother tool for doing this is https://github.com/mattdesl/canvas-sketch https://github.com/mattdesl/canvas-sketch ... for example, check out https://github.com/mattdesl/canvas-sketch/blob/master/examples/pen-plotter-patchwork.js https://github.com/mattdesl/canvas-sketch/blob/master/exampl... from its examples. What you do is, run the script, and then hit Command-S (at least on a mac), and it'll save a screenshot and an SVG into your downloads folder. You can then send the SVG to your plotter however it is you do that. It doesn't require p5.js, but does play nicely with it. And you can use it with Typescript, too—although that's still rough around the edges.
- nrjames 4y agoThis is easy to do with p5.js. You create a canvas at whatever size you want to print and draw to that canvas. Each frame, you take an image of the canvas and show it on screen in the browser. Wire up a key to save the full-sized canvas out to a PDF or PNG (or whatever) when you're ready to export for print. It's done very commonly by generative artists. There are several other ways to handle similar issues, too.
- rikroots 4y agoThere's links to lots of canvas libraries here: https://github.com/slaylines/canvas-engines-comparison https://github.com/slaylines/canvas-engines-comparison
- ivanjermakov 4y agoVery nice tool for starters. It got me into programming ~5 years ago, together with the Coding Train[1] YouTube channel [1]: https://www.youtube.com/c/TheCodingTrain https://www.youtube.com/c/TheCodingTrain
- drux 4y agoHe also wrote a book which you can buy for 0$ if you want https://natureofcode.com/ https://natureofcode.com/ or read it online for free https://natureofcode.com/book/ https://natureofcode.com/book/
- acomjean 4y agoHe's working on version 2.0 of the Nature Of Code which is more P5.js based than "processing" based (processing is p5's faster, platform native, but non web based sibling.). I've used p5.js to make my nieces animated birthday notes. There is a video series on the 2.0 (p5.js): https://thecodingtrain.com/tracks/the-nature-of-code-2 https://thecodingtrain.com/tracks/the-nature-of-code-2 github repo for version 2 of the books site (which doesn't appear to be live yet..) https://github.com/nature-of-code/book-website-2nd-edition https://github.com/nature-of-code/book-website-2nd-edition Dan Shiffman is pretty great at explaining and introducing things. Coding Train videos get kinda advanced, which is slightly at odds with the "kid" like graphics. The processing foundation is the umbrella group for p5.js, processing and some other tools (android and python based). https://processing.org/ https://processing.org/
- latexr 4y ago> processing is p5's faster, platform native, but non web based sibling. Platform independent might be clearer. It’s Java.
- acomjean 4y agolamentably to late to edit.. The Java part of it is pretty well obfuscated/hidden, its much easier to install and get running than java for the most part.
- chaosprint 4y agoFor art performance in browsers, you may want to check hydra synth: https://hydra.ojack.xyz/ https://hydra.ojack.xyz/ Here is the live coding performance I did for the Algorave 10th birthday online 24h streaming where I used Hydra for visuals: https://youtu.be/atoTujbQdwI?t=317 https://youtu.be/atoTujbQdwI?t=317
- tough 4y agoThis is so cool! thanks for sharing it Olivia I had found this other cool project of yours from 2007 recently when looking into making generative music from generative art done with stable diffusion. Great stuff too! https://github.com/ojack/PIXELSYNTH https://github.com/ojack/PIXELSYNTH https://ojack.xyz/PIXELSYNTH/ https://ojack.xyz/PIXELSYNTH/
- chaosprint 4y agoOh I am not Oliva :) Btw for music you can check my project Glicol as well. It may be useful as either an interface or an audio lib. https://github.com/chaosprint/glicol https://github.com/chaosprint/glicol
- flanbiscuit 4y agoThis is awesome! I just spent way too much time on this. I grasp the simple things but to do anything more creative/interesting I feel like there's a bit of a learning curve. I'm going to keep at it though, just takes practice.
- pkdpic 4y agoI misread that at first as "the live coding performance that I did for a 10th (birthday)..." and it made me extremely happy. Then I actually read it and was still reasonably happy.
- makeitrain 4y agoI hope one day I’ll be cool enough to get into live coding audio.
- hackarama 4y agoI made extensive use of P5.js during my time at University of London. We designed a side-scrolling video game in the Intro to Programming courses using this library. It was really easy to work with and is a great library for those looking to get their hands dirty with some JavaScript.
- pkdpic 4y agoI know what they mean and I love p5 but... Coding *is* accessible to artists designers and educators! The idea that they can't is a false (destructive) narrative. Especially given that those three groups in particular have an astronomically difficult time establishing a reliable adult income in their field.
- bibanez 4y agoYes, but having an easy and non-destructive environment to connect brain to code is good. We used Processing (predecessor to p5js) to learn coding at school, and it's really good for drawing programatically
- TheRealPomax 4y agoProcessing is not really the "predecessor", it's still maintained and actively being developed. P5.js just exists in parallel and was a student-imagining of "what if Processing, but designed for the web from the get-go" that caught on and got folded into the official Processing offering =)
- michaericalribo 4y agoI’ve always thought the “better accessibility” relates to getting meaningful outputs from your coding. There’s typically a complex set of arcane incantations necessary to get visuals, much less interactive ones…Processing really elevates an API for visual/interactive applications of coding, so things work out of the box.
- racl101 4y agoI've heard people say coding is the "modern day construction job". Anyone can do it.
- rchaud 4y agoTell that to the junior devs that just paid $10k to attend a React bootcamp, and are wondering why they can't find work.
- 4y ago
- whywhywhywhy 4y agoP5 is amazing, used it a ton in my work to build prototypes and creative tooling.
- bdickason 4y agoAs someone who previously found art very inaccessible, I loved diving in with p5 and feeling like I finally found a medium (gen art) that I can freely create and experiment within.
- smrtinsert 4y agoIs first class Processing java a thing yet? I prefer a Java api. I always forget the names of the api since I don't use processing that often and I generally prefer the java editing experience.
- bmitc 4y agoProcessing has been available to Java as a library since the beginning.
- throw_m239339 4y agoYou could always used Processing without the editor, directly in your favorite Java IDE. Same with Processing for Android. Unfortunately, a lot of Processing libs aren't compatible with Android, especially anything related to audio.
- jcelerier 4y agoI've used p5.js to teach classes of entire newcomers to programming - people who really disliked maths and anything science-related, in a graphics design school. It worked super well. My classes online aren't up-to-date and the slide system I used kinda stopped working in newer browsers, but if that can be useful to anyone feel free to reuse. https://interactive-design.jcelerier.name/b3 https://interactive-design.jcelerier.name/b3
- toisanji 4y agoI love p5js, I recommend it all the time for new programmers because it allows you to to program something immediately and to see feedback in real time. Here are hundreds of little programs I wrote for fun: https://concepts.jtoy.net/ https://concepts.jtoy.net/ http://www.jtoy.net/sketches/ http://www.jtoy.net/sketches/
- greggman3 4y agoVictor Bret seemed to think p5 (and p5.js) succeeded despite being poorly designed for learning. http://worrydream.com/#!/LearnableProgramming http://worrydream.com/#!/LearnableProgramming I'm not saying he's right though I thought he had some good points I do wonder if it succeeds more based on community than design though
- xyzzy_plugh 4y agoOn some fundamental level Processing and its ilk succeeded because it just worked and the time from opening the main web page to typing some code and seeing a graphical, animated result was as close to zero as anything could be, which is nearly true today even. It's impressive. The documentation was exceptionally good: every method documented with multiple graphical examples, almost exhaustively. I can't think of anything as accessible from the same era. From previous eras, maybe Flash, Visual Basic, QBasic and friends -- but they were nothing like Processing. No real need for libraries, a huge batteries-included standard library. You can practically do rudimentary computer vision with a small subset of the builtins, all of which fit on a single monitor. It's pretty nuts.
- bullen 4y ago2.5MB unobfuscated! Maybe splitting it up by feature?
- miniBill 4y agoI have a friend who's learning to program using P5.js. She's an art student, and having immediate feedback and a (relatively) simple language is a huge plus