Ask HN: Resources to learn generative art programming?
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.<p>(I&#x27;m mostly linking things I&#x27;ve done myself here, not because they&#x27;re <i>better</i> than the alternatives, but because they&#x27;re very short, and most of them run in the browser, which makes them easier to copy and edit.)<p>There are lots of examples bundled with Proce55ing, on Shadertoy, on bl.ocks.org, on ObservableHQ, on Jared Tarbell&#x27;s website, in the Coding Train vlog, etc.  My own repo of examples using Python and PyGame is at <a href="https:&#x2F;&#x2F;github.com&#x2F;kragen&#x2F;pyconar-talk" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;kragen&#x2F;pyconar-talk</a>, but I&#x27;ve also done examples like <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;tweetfract" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;tweetfract</a> with &lt;canvas&gt; (you have to click on the invisible &lt;canvas&gt; to see it) and <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;plotiir.html" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;plotiir.html</a>.  Start with small things.<p>There&#x27;s probably some kind of awesome example repo out there for deepdream ANN stuff but I don&#x27;t know what to recommend.<p>But that&#x27;s just where to <i>start</i>.  Once you&#x27;re doing stuff you&#x27;ll want to understand what you&#x27;re doing and learn about more techniques (algorithmic, software design, and interfaces to libraries and devices) so you can expand your range.  There&#x27;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:<p>∙ 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.  <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;curves" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;curves</a> is an example of spreading the start angles of Bezier curves over a range.<p>∙ Adding randomness to things.  Adding randomness to pixel colors gives you &quot;graininess&quot;; 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.  <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;rectlines" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;rectlines</a> is an example of just drawing random rectangles and lines in random colors with alpha-blending; it&#x27;s nothing special but it&#x27;s a lot more interesting to look at than it would be without the randomness.<p>∙ Differential equations, especially over time.  Real-world objects don&#x27;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 <i>velocity</i> that is added to the position each timestep, it&#x27;s much easier to achieve the illusion of motion.  (This is &quot;Euler&#x27;s method&quot;, and although it&#x27;s suboptimal for accurate numerical integration of differential equations, generative art often doesn&#x27;t care.)  If the velocity itself analogously changes by adding an <i>acceleration</i> 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&#x27;s almost the whole deal in, for example, <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;metacirclesky" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;metacirclesky</a> or <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;offscreen" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;offscreen</a> ; in the latter, the things slow down as they move because of the line things.each(thing =&gt; {thing.Δx *= 0.998; thing.Δy *= 0.998}), which subtracts a small fraction of their velocity every time it runs.  The qabbits in <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;qabbits" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;qabbits</a> roam around by changing their velocity by a small random amount each timestep.<p>∙ 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.  <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;spirals" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;spirals</a> draws random monochrome spirals in a way inspired by Tarbell&#x27;s piece &quot;Substrate&quot;, which is basically a particle system, and the explosions in <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;qvaders" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;qvaders</a> are very simple particle systems.<p>∙ 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 <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;10print.py" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;10print.py</a> can generate a maze with a single line of code.  (It&#x27;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.<p>∙ 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 <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;torus" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;torus</a> if you click the &quot;Trails&quot; checkbox, or as in <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;loop" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;loop</a> (a poor derivative of one of Tarbell&#x27;s pieces).  The &quot;curves&quot; 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.<p>∙ Recursive subroutines; that&#x27;s how <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;tweetfract" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;tweetfract</a> can be visually interesting inside an old-style 140-byte tweet.  If you click on the canvas, anyway.<p>∙ Bitwise operators.  These are ready to hand in most programming languages and can generate a lot of interesting variation that&#x27;s right on the border between &quot;too ordered to be interesting&quot; and &quot;too chaotic to be interesting&quot;.  Often they are an alternative to recursion.  I&#x27;ve written a little more about this in <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;bytebeat" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;bytebeat</a>.<p>∙ Fractals in general, which aren&#x27;t always implemented by recursive subroutines or bitwise operators, are a rich source of visually interesting material.<p>∙ 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 <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;aspmisc&#x2F;my-very-first-raytracer" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;aspmisc&#x2F;my-very-first-raytra...</a> (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&#x27;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&#x27;d known more about linear algebra when I wrote the &quot;metacirclesky&quot; 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.<p>∙ 3-D printing and laser cutting make it easy to make generative art that isn&#x27;t confined to a computer screen, though generally it&#x27;s a bit more static once it&#x27;s out of the machine.  For example, the Sierpinski triangle cutout in <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;laserboot&#x2F;cut-6&#x2F;sier.pdf" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;laserboot&#x2F;cut-6&#x2F;sier.pdf</a> (described in <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;laserboot&#x2F;cut-6&#x2F;README.md.html" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;laserboot&#x2F;cut-6&#x2F;README.md.ht...</a>) 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.<p>∙ Combinatorial enumeration, where you show literally every possible variation on a theme.  <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;semicirclecollages" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;semicirclecollages</a> combinatorially enumerates a design space of &quot;semicircle collages&quot; identified by Christopher Carlson.<p>∙ Mathematical optimization, where you search a space that is too large to enumerate exhaustively for points that minimize some loss function.  For example, <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;81hacks&#x2F;see&#x2F;overnight.png" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;81hacks&#x2F;see&#x2F;overnight.png</a> is the result of using hill-climbing optimization to minimize the pixel distance from a photo by Uwe Aranas, done by <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;81hacks&#x2F;see&#x2F;" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;81hacks&#x2F;see&#x2F;</a>.<p>∙ Domain-specific languages.  For example, <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;trama" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;trama</a> is a DSL for generating black-and-white pixel art with bitwise and linear operators; <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;skitch" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;skitch</a> is a DSL for generating infinite patterns of alpha-blended lines with recursive subroutines; <a href="https:&#x2F;&#x2F;github.com&#x2F;kragen&#x2F;pytebeat" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;kragen&#x2F;pytebeat</a> is an interpreter for a small extended subset of C used as a DSL for generating PCM sounds; <a href="http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;sweetdreams.html" rel="nofollow">http:&#x2F;&#x2F;canonical.org&#x2F;~kragen&#x2F;sw&#x2F;dev3&#x2F;sweetdreams.html</a> 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.<p>You don&#x27;t have to learn <i>all</i> 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&#x27;t think of them as questions that might be on the exam.