Ask HN: 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?
[1] https://codepo8.github.io/canvas-images-and-pixels/
[2] https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
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.
Can you show some examples?
- 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
Takes way less time to demonstrate something in a video than write up a blog complete with code samples, etc.
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.
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...
Inigo and Martijn (the art of code) are really good teachers. I've learned a lot about shader programming by watching their videos
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.
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.
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.
Who claimed that, or anything similar?
Rudimentary coding skills, a text editor, know a little math. That will take you far.
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"
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.
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.
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!
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.
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.
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.
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.
Good luck.
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.
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.
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/
[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
For implementation, I have found https://pixijs.com/ very useful.
In effect, geberative art is about gently nudging noise distributions and about finding the valuable needle in a haystack of noise.
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 :)
In this demo, you can find how we can use logistic map function to create some random musical notes:
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/
Generative Design: Visualize, Program, and Create with Processing by Hartmut Bohnacker
Generative Art: A Practical Guide Using Processing by Matt Pearson
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
https://www.shadertoy.com/user/Shane/sort=popular&from=8&num...
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
It's not so much about creating the generative algorithms, but more if you wanna wrap the learning around a fun project.
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.
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.
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.
(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's suboptimal for accurate numerical integration of differential equations, generative art often doesn't care.) If the velocity itself analogously changes by adding an acceleration to it each timestep, the movement can look a lot more natural. These differences or derivatives can often be computed as linear functions of other objects. That's almost the whole deal in, for example, http://canonical.org/~kragen/sw/dev3/metacirclesky or http://canonical.org/~kragen/sw/dev3/offscreen ; in the latter, the things slow down as they move because of the line things.each(thing => {thing.Δx *= 0.998; thing.Δy *= 0.998}), which subtracts a small fraction of their velocity every time it runs. The qabbits in http://canonical.org/~kragen/sw/dev3/qabbits roam around by changing their velocity by a small random amount each timestep.
∙ Particle systems are a combination of the three previous items: a multiplicity of mostly-identical objects, with random variation from object to object, whose states evolve over time according to differential equations. http://canonical.org/~kragen/sw/dev3/spirals draws random monochrome spirals in a way inspired by Tarbell's piece "Substrate", which is basically a particle system, and the explosions in http://canonical.org/~kragen/sw/dev3/qvaders are very simple particle systems.
∙ Tiles: tesselating some space with a shape (often just a square or rectangle) and putting different images in the different tiles. That, plus randomness, is how http://canonical.org/~kragen/sw/dev3/10print.py can generate a maze with a single line of code. (It's a Python Unicode translation of a well-known one-line BASIC program for the Commodore PET from the 01970s.) This is of course how typewriters give the illusion of neat printing with a very simple mechanical system that generates pages from human keypresses.
∙ Alpha blending can go a long way to getting interesting visual effects: antialiasing, layering, translucency, glow. Also, gradients. The cheapest technique in the world is to generate a series of frames, but instead of directly displaying them, alpha-composite each new frame on top of the currently-displayed image, as in http://canonical.org/~kragen/sw/torus if you click the "Trails" checkbox, or as in http://canonical.org/~kragen/sw/dev3/loop (a poor derivative of one of Tarbell's pieces). The "curves" example I linked above uses alpha blending for antialiasing; differential equations to make the curves move smoothly; randomness to pick the control points and accelerations; and multiplicity with variation to separate the curves.
∙ Recursive subroutines; that's how http://canonical.org/~kragen/sw/dev3/tweetfract can be visually interesting inside an old-style 140-byte tweet. If you click on the canvas, anyway.
∙ Bitwise operators. These are ready to hand in most programming languages and can generate a lot of interesting variation that's right on the border between "too ordered to be interesting" and "too chaotic to be interesting". Often they are an alternative to recursion. I've written a little more about this in http://canonical.org/~kragen/bytebeat.
∙ Fractals in general, which aren't always implemented by recursive subroutines or bitwise operators, are a rich source of visually interesting material.
∙ Linear algebra is interesting in a few different ways. Scaling, rotating, and squishing a 2-D image is just matrix multiplication; moving it is just vector addition. Alpha blending is linear interpolation between colors, and Bezier curves are recursively applied linear interpolation between points. A minimal amount of linear algebra in three dimensions gives you a raytracer http://canonical.org/~kragen/sw/aspmisc/my-very-first-raytra... (using bitwise operators for quick and dirty textures) or a rasterizer (see torus example above). Convolution is linear, though a linear algebra course often doesn't teach it, and convolution gives you FIR filtering of sound including both frequency response changes and reverb, as well as image filtering (sharpen, blur, emboss, bokeh). Iterated function systems generate fractals nonrecursively as the fixpoint of the union of a small collection of affine transformations. If I'd known more about linear algebra when I wrote the "metacirclesky" guilloche generator I linked above, I could have easily fixed the cases where the point spirals off to infinity: those are just the cases where the transformation matrix has an eigenvalue greater than 1.
∙ 3-D printing and laser cutting make it easy to make generative art that isn't confined to a computer screen, though generally it's a bit more static once it's out of the machine. For example, the Sierpinski triangle cutout in http://canonical.org/~kragen/sw/laserboot/cut-6/sier.pdf (described in http://canonical.org/~kragen/sw/laserboot/cut-6/README.md.ht...) is generated from 19 lines of code (in PostScript, in sier.ps) implementing an L-system. I took the PDF to a sign shop, paid them US$17, and in ten minutes of laser cutting I got a meter-sized fractal to hang on the wall at home.
∙ Combinatorial enumeration, where you show literally every possible variation on a theme. http://canonical.org/~kragen/sw/dev3/semicirclecollages combinatorially enumerates a design space of "semicircle collages" identified by Christopher Carlson.
∙ Mathematical optimization, where you search a space that is too large to enumerate exhaustively for points that minimize some loss function. For example, http://canonical.org/~kragen/sw/81hacks/see/overnight.png is the result of using hill-climbing optimization to minimize the pixel distance from a photo by Uwe Aranas, done by http://canonical.org/~kragen/sw/81hacks/see/.
∙ Domain-specific languages. For example, http://canonical.org/~kragen/sw/dev3/trama is a DSL for generating black-and-white pixel art with bitwise and linear operators; http://canonical.org/~kragen/sw/dev3/skitch is a DSL for generating infinite patterns of alpha-blended lines with recursive subroutines; https://github.com/kragen/pytebeat is an interpreter for a small extended subset of C used as a DSL for generating PCM sounds; http://canonical.org/~kragen/sw/dev3/sweetdreams.html is a DSL embedded in C++ for generating PCM sounds; the raytracer linked above implements a very simple DSL for describing 3-D scenes; etc.
You don't have to learn all of these! Think of them as magical items you receive one at a time on a quest, each one augmenting your powers and granting you new opportunities as you learn how to use it; don't think of them as questions that might be on the exam.
My personal experiences have agreed with that, really.
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/
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.
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).
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!