HACKER Q&A
📣 akudha

Resources to learn generative art programming?


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


  👤 Cieplak Accepted Answer ✓
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


👤 jzellis
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.


👤 quechimba
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


👤 Jasper_
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.


👤 user00012-ab
Follow interesting people like https://twitter.com/beesandbombs and try to replicate the stuff you like. Avoid Reddit as most of the work isn't worth the time scrolling through due to bad moderation of all the groups, and avoid any artist that talks about NFTs; their work is usually low quality repetitive garbage and they spend most of the time going off about who just bought their latest random assortment of rectangles.

I dislike twitter, and the only reason I have an account is so feedbin can pull in the latest work of a lot of all the creative coders; seems like that's pretty much where they all post (if not on their personal websites)

Look for the people that do it just because they like doing it, and then copy what they do until you start having your own ideas. Even if your copy is crap, you still learned a lot doing it, and the next time you do something it'll be a little better and you'll know a little more.


👤 matsemann
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


👤 hambos22
I can't recommend Nature of Code enough. It's free, you can read it online and it will give you a good start

https://natureofcode.com/book/


👤 tomduncalf
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!


👤 monetus
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.


👤 kimburgess
This thread is already filled with incredible tools and inspiration. To balance that: learn the art side, not just the programming.

If you're interested in the visual domain learn about image composition, colour and perspective. There is milenea of knowledge on these topics. For audio work, learn about music theory, or for atonal areas sound design and exploration of noise. For motion, explore material on animation and film. This extends to poetry, fashion, architecture and the multitude of other domains that let computation and creativty combine.

These will all give you a tour of aesthics and techniques that you can then use to help shape yours. You can then learn (or build) the generative tools that help you realise this. This doesn't need to be a sequential process, but don't just focus on this last step as you'll miss so much of what may be influential to your work.


👤 pacaro
You might enjoy Context Free Art

https://www.contextfreeart.org/


👤 qbasic_forever
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

👤 pen2l
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.


👤 brudgers
I think it starts like all other art.

With making something and if it sucks making something else and it it doesn’t suck making something else.

I mean painting is the only way to be a painter, playing music is the only way to be a musician, and programming computers is the only way to be a computer programmer.

Downloading Processing is a simple thing that might work and can be done in half an hour.

https://processing.org/

Good luck.


👤 etrautmann
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.


👤 gnramires
I've learned a lot from trying to imitate nature. So making generative trees, animals, landscapes, whatever you like (I try to mathematically derive properties whenever I can too -- like, if a tree branches into 2, how does the thickness of the branches related to the original?). That's my small suggestion.

Depending on how committed you are, I think it's well worth it to participate (ie read lessons and material) in the wider art world (traditional drawing, painting, whatever you like). Although I also believe generative art is not very well explored or understood yet. Remember that you don't have to take any advice as a recipe, just as a springboard for ideas -- you can express yourself however you like.


👤 abetusk
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] https://github.com/anaulin/generative-art


👤 pdpi
Inigo Quilez is one of the authors of Shadertoy, and has some amazing SDF-based art on youtube.

https://www.youtube.com/c/InigoQuilez


👤 ranuzz
"Computers and the Imagination: Visual Adventures Beyond the Edge" is a great book, not exactly on generative art but very inspiring [https://www.goodreads.com/book/show/2489703.Computers_and_th...].

For implementation, I have found https://pixijs.com/ very useful.


👤 fxtentacle
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.


👤 Yenrabbit
Playing with p5 is great fun and easy to get started with, so that might be a good starting point.

If you're interested in using deep learning and pushing more towards the generative AI side, I made a free course for that: https://github.com/johnowhitaker/aiaiart, and I'd be happy to chat through the landscape and help you get started :)


👤 chaosprint
In addition to the rest of wonderful resources, I would like to promote my project here, if you are interested in algorithmic music/live coding:

https://glicol.org

In this demo, you can find how we can use logistic map function to create some random musical notes:

https://glicol.org/demo#chaos


👤 rikroots
I'm going to suggest Paul Bourke's "Fractals, Chaos, Self-Similarity" website, because I often go there to get inspiration and code snippets - http://www.paulbourke.net/fractals/

Somebody else has already mentioned the excellent @beesandbombs on Twitter. I sometimes spend too much time trying to work out how Dave achieves a particular effect - https://twitter.com/beesandbombs

If you're going to be drawing into the browser using the canvas element, I suggest you check out the Slaylines canvas comparison test page. There's a link to the GitHub repo which includes links to all the canvas libraries demoed there. Try out several libraries, settle for the ones which fit easiest into your preferred working style - https://benchmarks.slaylines.io/


👤 iancmceachern
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


👤 omar12
1. I would start here: https://www.notion.so/That-Creative-Code-Page-c5550ef2f75741...

2. Joshua Davis is a great instructor and you can buy some of this lessons: https://joshuadavis.gumroad.com/

3. The kitchen sink, awesome-creative-coding: https://github.com/terkelg/awesome-creative-coding


👤 percentcer
Read Shane’s well-commented shaders on shadertoy:

https://www.shadertoy.com/user/Shane/sort=popular&from=8&num...


👤 nick__m
I suggest you start with l-system¹, it's easy to implement and understand. Have a look at my own artisanal library-less implementation, but be warned that I don't do fronted code professionally: https://m__nick.gitlab.io/l-systems/

1) https://en.wikipedia.org/wiki/L-system


👤 ww520
It's easy to put out something algorithmic generated. It's more difficult to make them approaching art. It's even more difficult to make it seemingly creative.

👤 scambier
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/

👤 swayvil
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


👤 swayvil
http://reddit.com/r/generative is a fine community.

👤 mfi
Here's a generative art project I did a while back: https://github.com/maxvfischer/DIY-ai-art

It's not so much about creating the generative algorithms, but more if you wanna wrap the learning around a fun project.


👤 adultSwim
In addition to traditional algorithmic art, you may also want to consider machine learning methods.

One way to dip your toe in is to run the Disco Diffusion colab notebook. I haven't yet found a good resource about training your own model, or about fine tuning an existing model.


👤 TheOtherHobbes
The coding part is easy - almost trivial.

Producing something non-trivial that's worth looking at and isn't disposable is a much tougher challenge.

IMO avoid the obvious entry points like Processing and JS and the gen art culture around them. If you have to go through them, don't stop there.

Learn something harder like Photoshop or Illustrator scripting - more challenging, but many more features and options and more likely to produce unusual results with high production values.

Look at art. Lots and lots and lots of art. Investigate form, composition, perspective, light and tone, and colour theory.

Look at generative art - lots and lots of it. Learn to recognise the cliches (Perlin noise, flow fields, simple geometric manipulations) and also look at how the best gen artists either avoid them or transcend them.

Make a list of the best gen artists and deconstruct their styles and techniques.

Set yourself projects. Experiment a lot. Don't be afraid of failures. Get into a flow state and improvise with code.

Finally - get the fastest hardware you can afford.

If you want click-bang gen art something like Midjourney is hard to beat - good results, but it's a bit ready meal, when you could be learning how to cook from scratch.


👤 jzer0cool
To the author, what is your end goals and interest in this?

For everyone else: Any job roles tailored to those liking creating these? I can see some scientific applications in visualizing the data, maybe a cross with data analytics, but maybe someone here can spot some other applications.


👤 thih9
For beginners that want an old school approach, there is Logo: https://en.m.wikipedia.org/wiki/Logo_(programming_language)

👤 bsenftner
Check out Blender's Geometry Nodes - simply amazing. There are many YouTube tutorials too.

👤 mbrodersen
Download and learn the free edition of Houdini. It is probably the most advanced generative art programming software out there. You can start our using the built—in nodes and then start programming your own nodes to make even more advanced things.

👤 swayvil
I would start off by making something with a RNG, a loop and a setPixel(x,y) in your favorite language. You'll be Picassoing it up in mere minutes.

👤 goldfeld
Are there any newsletters about generative art? Is it a popular topic?

👤 fragmede
Haven’t you heard? English phrases into the right ML model will replace the whole industry. And some of the creations already are wild.

👤 rusticpenn
Gödel Escher and Bach is an awesome book which is fundamentally about generative art..

👤 mhh__
I read somewhere that you shouldn't try to generate something that you can't already play.

My personal experiences have agreed with that, really.


👤 xor99
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/