Ask HN: Resources to learn generative art programming?

208 points by akudha ↗ HN
How/where does one learn generative/algorithmic art? I see all these stunning creativity, but don’t know where to start. Any advice?

85 comments

[ 3.2 ms ] story [ 126 ms ] thread
I started with Max for live, and it has one of the most gentle introductions to programming in general that I have ever seen. More than any one tutorial, will be the communities that help you.

Follow communities like: old.reddit.com/r/creativecoding /r/p5js /r/maxmsp /r/puredata https://forum.puredata.info/category/7/pixel https://openframeworks.cc/ (<-- highly recommend this)

Find the programming environment you want, feel them out. Do you want to focus on the simplicity and abstract a lot of the animation details away? Open frameworks and libcinder are my recommendations there, though I imagine JavaScript libraries have come to the forefront. Visual languages like VVVV are a bit better at making you reckon with how the hardware sees the code, but have smaller communities. Vsxu is for example, amazes me but is seemingly entirely undocumented. Go for the big communities before you pivot, maybe.

Google things that you'd guess are introductions. Typing creative coding JavaScript into duckduckgo yielded a bunch of university courses, whose coursework might be free. That is often the case with pure data, which I like.

Paid languages, usually based around the entertainment industry tend to have very involved and helpful communities, as they can be focused on the concepts rather than the language.

https://derivative.ca/download. <-- touch designer

https://cycling74.com/search/page/1?sortBy=rel&tags%5B0%5D=&... <-- maxmspjitter

Search forums for links to blogposts. Use generative music as well as visualizations.

Given the task of making a cool picture, achieve that algorithmically. There are depths, but ya, it really is as simple as that.

You can also generate sequences of images, thus animation. Or arrays of integers, thus sound.

You can do this in any language.

The medium is pure goosh. You just gotta try.

Here's a nice generative art thing. Video and sound. Deep but simple : https://vimeo.com/313049496

The Processing community has been around for a long time and I bet there are some good video tutorials to check out. Just watch other folks making things or talking about their art and start experimenting. This is a really good list of interesting tools and things to check out too: https://github.com/everestpipkin/tools-list
On a smaller scale, I sometimes like making (and looking for) tweetcarts. Search for the #tweetcart hashtag on Twitter; those are procedural animations made with PICO-8 in less than 280 chars. There is a code golf aspect to it, but it's a bunch of math first. If you're interested, some basics are explained here: https://demobasics.pixienop.net/tweetcarts/
Daniel Shiffman has amazing resources for Processing that apply to any language/environment. He practically invented half of the stuff out there. Jared Tarbell (who was involved with the founding of Etsy) is also a great generative artist who's made code available.

And if you were an old man like me, you would have had a forum called Dreamless to refer to, but alas, that dream is twenty years gone now.

As much as I like Shiffman’s YouTube channel, I don’t think he “invented” that many of the algorithms shown in his video. Cleverly adapted or explained? Sure.

Can you show some examples?

Draw a line. Then draw another. Write a for loop to draw the lines. Make them different widths. Now try different colors. Rotate the lines. Try making it recursive.

There's no tutorial, because it's a creative medium. Try shit out and see what you enjoy. If you're out of ideas, try recreating something else you've seen as closely as you can, to practice your craft. The mistakes you make along the journey will generate ideas for you.

There's not going to be a tutorial for the exact result someone has in their head, yes. That doesn't mean there aren't resources to learn the tools and techniques, so that a person can understand how to achieve their desired result.

We don't tell people to just throw some vegetables in a pan and expect ratatouille; or to pick up a trumpet and presto, they play jazz.

No, but you can't expect to read a recipe and suddenly make five-star dishes either. Familiarity, practice and technique are all part of the learning process, and they're things that tutorials can't help you with. You can hire as many music teachers as you want, but unless you sit there practicing your scales and arpeggios for days at a time to build familiarity with your instrument, you're not going to sound like Miles Davis.

Plenty of other people gave links to tutorials, and those are all fine. I wanted to emphasize that this is a skill that takes time, effort, a good amount of practice, and play to get comfortable with.

I think too many people are scared of learning a skill, and want tutorials to guide them through the process. There was a post a week ago about an app trying to teach people how to cook by asking them to find a picture of a "scrambled egg" in a line-up. Obviously useless, and that doesn't get people any closer to what actually needs to happen -- just pick up a pan and try. No, you won't get it right the first time. Nobody does. That's what the practice is for.

Start by actually starting.

You also can’t cook five star dinners without reading recipes.
> you can't expect to read a recipe and suddenly make five-star dishes either

Who claimed that, or anything similar?

While there is no tutorial for the creativity itself, there are definitely tools and math for creative generative art that can be learned. No one is born being able to do linear algebra or write a shader.
Speaking as a guy who has done a shitload of kickass generative art, I have never touched a linear algebra or a shader.

Rudimentary coding skills, a text editor, know a little math. That will take you far.

I used those examples because they're things I've used to make art. It wasn't meant as an exhaustive list of things every artist should know; they're just two useful things that a budding code artist can learn if they want to, and reasonable things for someone to need help with.
I made generative art in the 80s on a ZX Spectrum just using for loops. Chuck in some high school trig if you like.

I guess the comment you're replying to is making the point that the tools can be very, very simple and OP probably already knows enough. The bit they are missing is "just start trying stuff"

7 red lines, all of them strictly perpendicular, some with green ink and some with transparent...
processing.org/ or p5.js are both excellent tools with lots of documented examples to help get going.

I'd also recommend the pen plotter community, which is heavily involved in generative art but also enjoys physically plotting the art with robotic tools. See https://inconvergent.net/ for examples, there are many others.

Check out Blender's Geometry Nodes - simply amazing. There are many YouTube tutorials too.
Start to think of the world as a sequence of choosing things based on probabilities. That's basically modern modern AI text, sound, and image generation. You somehow calculate logits, then sample them. Bonus points for interpreting cloud patterns, meaning to infer a similar known shape from noise, i.e. the denoising decoder like Google's imagen.

In effect, geberative art is about gently nudging noise distributions and about finding the valuable needle in a haystack of noise.

One of the better ones I've found is Tyler Hobbes [0].

I recently found the "Bridges Archive" online [1]. It's a goldmine of ideas (I won't link to them but they have tilings, space filling algorithms, multi-scale Truchet patterns and many more).

I favor the ideas rather than the implementation as I already know how to program so you may do better with learning something like processing/p5.js [2].

In terms of raw ideas, I've found Jared Tarbell to be a huge inspiration [3] [4].

I'm sure I'll get lashed on here for the mere mention of NFTs but I've found there are consistently awesome generative art being displayed on Twitter for artists showing their work and advertising their NFTs for sale. One resource that I've found to be pretty consistently good is fxhash.xyz [5] [6]. Looking for #fxhash tags on Twitter will probably give you rich results.

I also have my own NFTs whose source code I've released as CC0 if you want to take a look [7] (none are for sale right now) along with a half assed attempt at making a list of resources for generative art [8].

There's plenty of "awesome" generative art lists [9] as well as many examples and other projects on p5.js [2]. And of course there's always Reddit [10] [11].

Oh and "Coding Train" is deceptively deep, packing complex ideas in a kind of "cutesy" veneer but still managing to tackle topics that run the gamut of easy to incredibly difficult [12].

There's really too many resources to list. It depends on what level you're at. I tend to focus on Javascript and the 'ideas' rather than the implementation so much. If you're starting from a point of learning programming, you're probably better off going through a tutorial or two on how to actually program and then try and tackle some "classic" generative art examples (grids, recursive grides, flow fields, etc.).

I occasionally run into people who have all their experiments on GitHub which might be enlightening [13].

[0] https://tylerxhobbs.com/essays

[1] https://archive.bridgesmathart.org/#gsc.tab=0

[2] https://p5js.org/examples/

[3] http://www.complexification.net/gallery/

[4] http://levitated.net/

[5] https://www.fxhash.xyz/

[6] https://twitter.com/fx_hash_

[7] https://github.com/abetusk/iao

[8] https://github.com/abetusk/iao/blob/main/Notes.md

[9] https://github.com/kosmos/awesome-generative-art

[10] https://www.reddit.com/r/generative

[11] https://www.reddit.com/r/proceduralgeneration/

[12] https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw

[13]

This is a great list.
I would start off by learning the Canvas API for HTML/JavaScript [1][2]. All you need is a web browser, no extra software or dependencies (well, maybe just a text editor to edit an index.html file on your Desktop). You can test out snippets from MDN and StackOverflow in your browser’s JavaScript console. Once you have a minimal, working example (e.g., a 512x512 square canvas with a color gradient), start messing around with the code and see how it affects the canvas image. For example, modify the parameters of your loops or flip the loop order of nested loops. Focus on the principles rather than on learning any particular technology. Simpler is better when learning; the “best” production software is not necessarily the best to learn with; don’t forget the Telescope Rule [3]. Once you have a foundation for basic graphics, it will be much easier to learn shaders.

[1] https://codepo8.github.io/canvas-images-and-pixels/

[2] https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

[3] https://wiki.c2.com/?TelescopeRule

Look into SVG too, as it produces vector images and later you'll be easily able to scale them up to print posters.
I've loved these books:

Generative Design: Visualize, Program, and Create with Processing by Hartmut Bohnacker

Generative Art: A Practical Guide Using Processing by Matt Pearson

Why? Shouldn't you think about whether this style is over in terms of its contribution to art? Sure all the cool AI companies drop "generative" in their press stuff but is it interesting anymore? The main advances were made in the 50s and 60s (e.g. the very idea of generative and systems art was invented). Now we can see generative systems taken to their literal extreme in DALL-E.

But if generative art is just an idea about art then what else is there?

Anyway some early generative art pioneers (I take a European mid 20th century angle because mid 2000s MIT grads did not invent this field):

https://monoskop.org/Max_Bense (his idea of information aesthetics is what we are in now and has becoming more or less boring as an idea about art imo) https://monoskop.org/Frieder_Nake Many nice examples here http://dada.compart-bremen.de/

Because it's fun?
Oh you have me there! Things that are boring (to me) are not fun (to me). If you find it fun then great :) This area of art has stagnated horrifically and because it is art as well as programming it should be critiqued via that other angle as well.
DALL-E is observably a better artist than the hacks the money launderers in the gallery system promote.
It's simply not true that the main advances in generative art were made in the 50s and 60s and nothing new is being done now. Generative art is a huge, thriving field right now with thousands of communities and subcultures around it, using traditional coding techniques or visual programming systems like TouchDesigner. Honestly, just reading through this thread for yourself should be some perspective on this.

That's not even counting new tools like DALL-E or Midjourney, though personally I don't think we can write them off as uninteresting or low-effort. They're an exciting and powerful new tool, and like any tool they can be used to make art. Maybe as an artist making art that others could not also easily make is important to you, but that is not what makes art.

As an activity art implements ideas that have been formulated conceptually previously ("conceptual" here could be a drunk artist taking a pic of their butt and isn't philosophical + more related to surprisal). The immediately exciting thing about art is the experience of the product but that experience gives way to a more conceptual excitement (its interesting because they are exploring this idea!). When an idea is repeated x amount of times as an artistic expression it gets boring. Generative art is boring on these terms, to me, right now, even if many technical advancements relating to the speed or complexity of the generative system are made.

H/w this is just a fun argument about art which is basically impossible to concretely describe anyway and i'm prob wrong (e.g. some kid is going to make something incredible with a new idea about generative art x AI).

I see what you're saying, and defining what makes art is nebulous to the point of being impossible. Rather than a positive proof, I would just counter by asking whether you think art can be defined purely by its aesthetics, or by virtue of the methods used to make it - that is, without considering at all any concepts or ideas put forward by it.
It's got to be a combination of both (e.g. made from wood and shaped like a ball but feels like this in this room etc) but maybe that is too neurotic and not conducive to new aesthetic experience. I think my pattern recognition for generative art would be quite high based on how many times I've seen it as a style of art previously. For most images i've seen DALL-E has all of the fingerprints of generative art and on some level I notice that even if the fidelity is approaching something that takes over aesthetically (e.g. where those kinds of perceptual fingerprints fade away a little bit).
I don‘t think any particular style of art is ever finished. That just assumes is all about differentiation from what was there before. OP is obviously showing interest in generative art and is probably doing it for fun and that’s required for doing anything great in my opinion, that you’re in for yourself. Everything else would just be manufacturing.

Other than that great recommendations! I had the pleasure to attend a course of Frieder and must say that he is one of the kindest, inspiring people I’ve met!

Here are some of my favorite YouTube channels, I've learned a lot from them

- The Coding Train, mostly p5.js: https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw

- The Art of Code, glsl: https://www.youtube.com/c/TheArtofCodeIsCool

- Inigo Quilez, glsl: https://www.youtube.com/c/InigoQuilez

I've never understood videos as a medium for learning coding. Spoken word is just such low bandwidth.
It's great for learning how to use an IDE and seeing the bits that people leave out of text tutorials because they assume you already know them.
Low bandwidth for consuming, but very high bandwidth for publishing.

Takes way less time to demonstrate something in a video than write up a blog complete with code samples, etc.

It's spoken words + visual stuff
Yeah - I've got no problem with video as medium - it's the "listen to someone talking instead of reading words" thing that I've never understood. But as others have said - it's the effort needed to produce that might be the key factor here.
The low bandwidth of audio means that you can jump around with more aplomb and still get a smart foot where you are and if you missed anything, than if it were more information dense. You can also listen to it at 1.2 or 1.5 speed to up the density.
See - that doesn't make sense to me. It's also the difficulty with random access that really annoys me about video tutorials. I can jump down a page of text+images and quickly figure out where to start. If I lose my place in a video I inevitably have to roughly find the spot and listen to some stuff I've already heard.
Some people learn by watching, some people by listening.

That's why we have different mediums for different people.

For example I can never learn visual things by listening. I learn much better by seeing or watching things.

But you can "see and watch" things in a text-based tutorial. Short video clips and images are a key part of it. Like I've said elsewhere - it's the "person talking" bit and the linear format that I struggle with. I can skim text+images whereas video+speech forces me to consume it in large chunks at a predetermined speed (1.5x not withstanding. That's only a minor improvement)
I used to not like videos, but then I started leaving them on in the background. I don't think it's too different from having a teacher draw on a board in front of a class.

For me, these videos are about problem solving. It's nice to watch other people solve problems, and explain difficult topics as they solve the problems in that domain...

Second for Inigo Quilez. Wonderful presentation for procedurally generated at. He’s also ex-Pixar and creator of https://shadertoy.com (which is also a great resource) and https://graphtoy.com
Inigo is amazing. He explains difficult things really well. I really appreciate his live coding videos where he recreates some of his famous shadertoys.

Inigo and Martijn (the art of code) are really good teachers. I've learned a lot about shader programming by watching their videos

A couple of books I enjoyed for inspiration many years ago were Generative Design: Visualize, Program, and Create with Processing by Benedikt Gross et al, and Form+Code by Casey Reas. Not sure how they’ve aged but the former was a nice tutorial type book and the latter a great overview of the scene.

But really you can’t beat downloading Processing or p5.js and whatever and just start playing around, I always found it quite fun as you didn’t really need to worry too much about code structure etc, instead just bang out a few hundred lines in a single file which create a cool end result!

This presentation is what got me started. Tim Holman - Generative Art Speedrun [0].

It gives a nice introduction and you end up with a nice tool belt of simple techniques to later experiment with. Like drawing simple shapes. Then repeating them. Then adding noise etc. A very simple and gradual approach. Highly recommend watching.

[0]: https://youtu.be/4Se0_w0ISYk

I was going to mention this one. It’s a great primer on how you actually just work with really basic concepts but tie a few of them together for interesting results.
Gödel Escher and Bach is an awesome book which is fundamentally about generative art..
Start by copying some existing example code and running it locally, then edit it and see what changes. Comment pieces out, look at the results. Change magic numbers to understand the effect. It probably has some calls to a random number generator in it; add more calls to the random number generator.

(I'm mostly linking things I've done myself here, not because they're better than the alternatives, but because they're very short, and most of them run in the browser, which makes them easier to copy and edit.)

There are lots of examples bundled with Proce55ing, on Shadertoy, on bl.ocks.org, on ObservableHQ, on Jared Tarbell's website, in the Coding Train vlog, etc. My own repo of examples using Python and PyGame is at https://github.com/kragen/pyconar-talk, but I've also done examples like http://canonical.org/~kragen/sw/dev3/tweetfract with <canvas> (you have to click on the invisible <canvas> to see it) and http://canonical.org/~kragen/sw/dev3/plotiir.html. Start with small things.

There's probably some kind of awesome example repo out there for deepdream ANN stuff but I don't know what to recommend.

But that's just where to start. Once you're doing stuff you'll want to understand what you're doing and learn about more techniques (algorithmic, software design, and interfaces to libraries and devices) so you can expand your range. There's lots of resources out there (Tarbell in particular has given an hour lecture you can find on YouTube about what techniques he finds useful) but I can suggest, as techniques that give a large bang for the buck:

∙ Multiplicity with variation: many instances of the same thing that differ, for example by incrementing a variable from one instance to the next. For example, you can create 64 particles that move from point A to point B at successive points in time 30 milliseconds apart, or at the same point in time at 64 different velocities, or 64 Bezier curves from point A to point B that start at 64 angles evenly spaced across some range. http://canonical.org/~kragen/sw/dev3/curves is an example of spreading the start angles of Bezier curves over a range.

∙ Adding randomness to things. Adding randomness to pixel colors gives you "graininess"; adding randomness to object positions gives you spatial dispersion or, if the randomness varies over time, jittering; adding randomness to the angles of different objects gives you visual variety. Perlin noise and simplex noise are especially nice kinds of randomness for some purposes because they have a kind of local coherence. http://canonical.org/~kragen/sw/dev3/rectlines is an example of just drawing random rectangles and lines in random colors with alpha-blending; it's nothing special but it's a lot more interesting to look at than it would be without the randomness.

∙ Differential equations, especially over time. Real-world objects don't suddenly teleport from one position to another; if objects in your generative art do that, people will have a hard time seeing them as the same object in a new position, which may or may not be what you want. If instead you have a relatively small velocity that is added to the position each timestep, it's much easier to achieve the illusion of motion. (This is "Euler's method", and although it'...

I ran out of editing time and lost my last edit, but I want to add a few more candidates: production systems, which go beyond just L-systems, for example linguistic (http://canonical.org/~kragen/sw/dev3/dramaticphrase.py) or architectural (CityEngine computer-generated architecture); topological optimization; collision detection (in use in the spirals, offscreen, qabbits, and qvaders examples above); camera input (live or prestored); fields other than noise functions (continuous functions of position, for example temperature or flow velocity); colormaps (mappings from spaces defined by one or more continuous variables, such as temperature, to color); force-directed layout; Delaunay triangulation; mathematical morphology; median filtering; rejection sampling (generate and test).
Learn a polygon-modeling tool. The obvious choice is Blender, but Houdini and Cinema4d are also good alternatives if you're willing to pay up.

Learn the basics, a little bit of sub-division modeling (it'll take a month of youtube tutorials to get that down), a little bit of particles work, a little bit of lighting setups, a little bit of generator/matrix/cloner functions, flow fields and forces, etc. in your chosen modeling tool.

When you have this down, dive into programming -- Blender and Cinema4d can let you do a lot with python coding and geometry/scene nodes; likewise for Houdini but with a custom DSL called 'Vex'. And that's where a lot of magic is done.

If you're a particularly talented programmer, you can skip that part and write your own ray-tracing code like Michl (https://www.instagram.com/iamasoyboy/) or otherwise do 2d-stuff like Tyler: https://tylerxhobbs.com/essays/2020/flow-fields

Keep exploring and checking out what others are doing. There's r/generative: https://www.reddit.com/r/generative/top/?t=all et al. for inspiration.

In comments, artists will more often than not share the code they use to come up with their art.