P5.js – A library to make coding accessible for artists, designers, educators

This 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://ojack.xyz/PIXELSYNTH/

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

I hope one day I’ll be cool enough to get into live coding audio.

This looks fun. We played with a lot of csound and max/msp at school but I never made the jump to live coding audio. Now that I have more experience under my belt maybes it's time to revisit this!

I 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!

The Coding Train just launched a new website with their entire archive! https://thecodingtrain.com/

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

Shiffman'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/

this is how i learned to code

He also wrote a book which you can buy for 0$ if you want https://natureofcode.com/

or read it online for free https://natureofcode.com/book/

There are libraries (i.e. https://github.com/zenozeng/p5.js-svg) that give you a SVG runtime. I find it very useful!

Another tool for doing this is https://github.com/mattdesl/canvas-sketch ... for example, check out 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.

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

There's links to lots of canvas libraries here: https://github.com/slaylines/canvas-engines-comparison

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

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

Yes, 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

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

I've heard people say coding is the "modern day construction job". Anyone can do it.

So is pretty much anything regular people struggle to budget time and money for, such as exercise.

Learning how to code on your own is an enormous waste of one's time, assuming you are an adult and need to use that time to support yourself.

I remember my Treehouse HTML/CSS course in 2014. It took me months to complete it while working full-time, and the end result was a completely static website that looked like it was from 1997. It was incredibly discouraging. I stuck with it because I had the interest, and later moved on to more fun things like interaction design.

Most people however will stop and move on, because it's hard to see the bigger picture if you have to learn every building block.

> Coding is accessible to artists designers and educators

I don't think that "accessible" is the same as "possible". Yes, it's possible for artists, designers, and educators to learn programming in any environment. But "possible" is boolean—like Turing complete. "Accessible" is a more of gradient—are the kinds of things that you want to to do easy or hard? Is it a good environment for learning and exploration? Etc.

Processing has been available to Java as a library since the beginning.

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