[HN Gopher] Ask HN: Resources to learn generative art programming?
___________________________________________________________________
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?
Author : akudha
Score : 82 points
Date : 2022-08-06 19:03 UTC (3 hours ago)
| hambos22 wrote:
| 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/
| scambier wrote:
| 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/
| kragen wrote:
| 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.
|
| 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: 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 around a circle.
|
| [?] 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.
|
| [?] 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
| http://canonical.org/~kragen/sw/dev3/offscreen, for example: the
| things slow down as they move because of the line
| things.each(thing => {thing.Dx *= 0.998; thing.Dy *= 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.
|
| [?] 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.
|
| [?] Recursion; 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.
|
| [?] 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... 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.
|
| 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.
|
| (to be continued)
| goldfeld wrote:
| Are there any newsletters about generative art? Is it a popular
| topic?
| cdr6934 wrote:
| https://generative.substack.com/
| tomduncalf wrote:
| 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!
| percentcer wrote:
| Read Shane's well-commented shaders on shadertoy:
|
| https://www.shadertoy.com/user/Shane/sort=popular&from=8&num...
| swayvil wrote:
| http://reddit.com/r/generative is a fine community.
| pen2l wrote:
| 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.
| jzellis wrote:
| 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.
| rusticpenn wrote:
| Godel Escher and Bach is an awesome book which is fundamentally
| about generative art..
| etrautmann wrote:
| 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.
| pdpi wrote:
| Inigo Quilez is one of the authors of Shadertoy, and has some
| amazing SDF-based art on youtube.
|
| https://www.youtube.com/c/InigoQuilez
| bsenftner wrote:
| Check out Blender's Geometry Nodes - simply amazing. There are
| many YouTube tutorials too.
| Jasper_ wrote:
| 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.
| fintechie wrote:
| 7 red lines, all of them strictly perpendicular, some with
| green ink and some with transparent...
| b3morales wrote:
| 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.
| Jasper_ wrote:
| 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.
| onion2k wrote:
| 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.
| swayvil wrote:
| 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.
| onion2k wrote:
| 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.
| fxtentacle wrote:
| 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.
| monetus wrote:
| 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.
| abetusk wrote:
| 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
| pacaro wrote:
| You might enjoy Context Free Art
|
| https://www.contextfreeart.org/
| gnramires wrote:
| 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.
| Cieplak wrote:
| 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
| iancmceachern wrote:
| 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
| xor99 wrote:
| 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/
| jrajav wrote:
| 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.
| xor99 wrote:
| 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).
| jrajav wrote:
| 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.
| xor99 wrote:
| 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).
| vestrigi wrote:
| 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!
| Kiro wrote:
| Because it's fun?
| xor99 wrote:
| 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.
| User23 wrote:
| DALL-E is observably a better artist than the hacks the
| money launderers in the gallery system promote.
| xor99 wrote:
| Yep true
| swayvil wrote:
| 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
| quechimba wrote:
| 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
| matsemann wrote:
| 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
| qbasic_forever wrote:
| 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
___________________________________________________________________
(page generated 2022-08-06 23:00 UTC)