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!
This 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.
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!
Thanks 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.
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.
That book really made me fall in love with code. Nowadays I do mostly web development but I've spent many hours programming in Processing. It's a great learning environment with docs and terminology suited to beginners.
I find it so fascinating that simple rules can result in complex behaviour and natural-looking patterns. I'm keeping a sketchbook with related Processing/WebGL graphics on my website[0] if anyone is interested :)
If you enjoyed Shiffman’s “The Nature of Code”, then I highly recommend Flake’s “The Computational Beauty of Nature”, one of my all-time favourite books.
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.
I'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
He'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.
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).
I 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.
I 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?
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.
I 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/http://www.jtoy.net/sketches/
"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."
We 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.
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.
Surprisingly, 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.
Depends 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.
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.
I 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.
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
Processing 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 =)
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.
> 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.
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.
As 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.
Is 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.
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.
I 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
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