Generative Art

Out of context: Reply #112

  • Started
  • Last post
  • 133 Responses
  • mg3312

    Where do you guys stand on using AI to write code to create generative art? That's what I spent a lot of time last year doing while I was out of work, and it kept me focused, engaged and happy to do that and offset the stress of looking for a new job.

    I've built two tools / applications / whatever you want to call them that are web based built with HTML, CSS, and JS. They're running on a local server on my NAS now and basically do this:

    Collage tool:
    - HTML canvas can be 1:1, A1-A4 sizes, and 11x17. Background images are selected from a huge list of paper textures.
    - I've got local folders mapped to multi-selects in the UI where I can select from different categories like nature, paper textures, mountains, custom SVG shapes, etc.
    - I can choose a min and max width and a random width is chosen from those parameters. I can choose number of images, so if multiple are selected, that's randomized as well. Can also chose whether it uses original image, or crops to circle or square, or randomizes that.
    - Ability to set number of square, circle, and line shapes to render on the canvas. Can set min/max size and randomize widths based on that, can rotate squares and lines 45 degrees.
    - Can override specific randomization of shapes and input a number from which the tool randomly chooses shapes based on that number.
    - Color palettes - huge set of palettes saved in JS that can be selected form a picker and applied to shapes in real-time. Colors are shown in small circles that can be unselected to remove from the canvas. Also has an "update" button that will randomize the colors amongst shapes with each click.
    - Mixed blend modes - exclusion, difference, multiply, and normal applied to shapes and images, with ability to still display images as normal, but shapes in other modes.
    - Generate button that renders images and shapes on the canvas based on all the parameters.
    - HTML canvas is interactive to allow shapes and images to be moved.
    - Export canvas as image to local folder.

    UI controls.



    Shapes Pattern Tool:
    - Same canvas approach as Collage tool, and ability to select backgrounds from a drop down.
    - Canvas is set up as an adjustable grid from an input field that specifies number of columns.
    - Shapes picker offering: squares, circles, randomized rotated eq. triangles, another combo of square, circle, triangle, and a custom shapes selector that pulls from a set of SVG shapes, patterns, etc. that can be selected in a multi-select field.
    - Padding control - can be both positive value and negative (the negative padding was a "happy accident" and allows for all sorts of color interaction based on palette and mixed-blend mode.
    - Color palettes (same functionality as collage tool)
    - Randomize rotation - button to randomly rotate shapes within their grid cell.
    - Ability to save as PNG, export composite / layered SVG file. The SVG export is great for taking these images and bringing them into InkScape and drawing with my pen plotter. More on that another time.

    UI controls and some output:




    Some thoughts:
    - Learning how to do this last year kept me focused on, well, being focused in a year I spent 8 months out of work.
    - Admittedly, I could have written maybe one line of JS to do this. Both of these tools are pushing 1,000 lines of JS now.
    - I hit roadblocks with Chat GPT, which I started with. Someone suggested Claude back in January and that changed everything. Better accuracy, and it was impressive to upload my original code from ChatGPT (and custom code) and ask it to tell me what it thought the tool did. It surmised that it was a collage tool, explained the JS, etc.
    - I mentioned having a pen plotter. That's what somewhat kicked off all of this exploration, because I wanted to try and do something a bit more minimalistic and basic than going down the road of complex generative art, truchet tiles, and that sort of thing. I'm a big fan of bauhaus and brutalist art, and collage art, so that's where a lot of inspiration came from.
    - I used to make art like this in PS all the time years and years ago. Loved layer interactions with color and transparency and blend modes. These tools either help me generate images quickly, which would take so much more time in PS (that's why I'm happy with all the parameters that are real-time updates, the color palettes, ability to swap backgrounds, etc.
    - I've been using some images as idea-starters that I will edit further in PS or Illustrator. Trying to use these approaches for the artwork related to my music project, The Ageless Sea.
    - I had both tools running on my live website for a few months, but moved them to my NAS and a local server, which runs so much better since I can map asset multi-selects to folders in my Design Assets folder. I've been using Bridge to manage most of that, and can easily drop image assets into a Temp folder to work through specific ideas.

    Anyhow, I know this was a lot, but it's been a blast and continues to be really satisfying to evolve it further and make imagery this way. Maybe I'll post some pen plotter art soon. It takes a while to create that stuff.

    Lastly, someone in this thread or another one mentioned someone who is using AI to create stuff they're selling online. That's one of my goals, but I feel better about this stuff not being created with AI. The code was, of course, but not the images. It's all built on choices, randomization, and assets I actually have.

    Someone also had a comment in another thread a while back where I shared some of these images, along the lines of "I could do this in PS in 5 minutes..." Yeah, most of us could, but I find the benefits and fun of this to be the quick nature of the randomization, the ease of bringing in multiple image assets, and ability to swap things out so quickly. I don't have any idea in PS or Illustrator how to swap palettes applied to shapes, or randomize colors applied to shapes instantly. I imagine it's a pain. All in all, I just find this method to be faster and more enjoyable, and though the intention in what's created is different than starting from a blank canvas in PS or Illustrator and deciding on every aspect of art on a canvas, the randomized nature of this is what I prefer, whether an image is good immediately, or whether I want to refine it further.

    I continue to be unsure what to call all of this... is it generative? Is there a nuance because AI wrote the code? I think about all the crazy generative art being made, Josh Davis' years of processing.org work, and stuff made by others, and is there a big difference when it comes to some people editing their parameters in code, and my having a GUI to control the parameters?

    Thanks for reading.

    mg33 12Permalink
    UpvoteDownvote
    Flag
    • Cool journey
      ********
    • Yes, developing your own tools to make creative stuff is way better than just asking chatgpt
      ********
    • Myself, built two tools so far for my uses in projects: halftone+pixelate script with controls for the effects and font pairing app
      ********
    • Both in Claude, but it's basically React code
      ********
    • Took like an hour total for BOTH, Claude is that good
      ********
    • Very cool. I don't think you need to be too concerned that you are using AI to realize your vision, it's a tool. Just call it 'art'.monNom
    • I think it's precisely this kind of exploration and building of new capabilities that leads to creative breakthroughs. You aren't doing what everyone else is...monNom
    • therefore you are going to get different results, have different inspiration, and you'll have different capabilities to execute your ideas. Keep going!monNom
    • I appreciate your thoughts! I've got a ton of stuff I need to get uploaded to my IG page, but it's here if you'd like to follow: https://www.instagra…mg33
    • If you want to check out one of the early versions I still have on my site:
      https://mg33.com/gen…      mg33
    • I need to pull this down to free up some storage space, but I'll keep it up for a couple of days. Reminder that the canvas shapes can be dragged.mg33
    • Congratulations on finding a job withing the last year. I can't even imagine that happening for me. Luckily, I still have a job.CyBrainX
    • ^ Thank you. :) Was out of work from March - November after the agency I worked at was sold. Such a slog but doing so much better now than I was at my previousmg33
    • job. It's just so much work finding a job, but I got my portfolio site updated and I won't need to do that again for quite a while, which feels good.mg33
    • Very interesting what you have done. Respect.renderedred
    • you could/should be posting on github :). you can also go openGL or p5.js (processing to js port) or any language! I think web is awesome! cool projects!uan
    • call it open source and cc :)uan
    • Cool!skinny_puppy
    • Superb. Love the idea of building interfaces to create the art. The generative art I make is based on my 20+ yr old actionscript knowledge...microkorg
    • ..its been accelerated massively since I've been using ChatGPT to help me code.microkorg
    • Where do I stand? I stand on the side of this. This is exactly the sort of use of AI that we should be aspiring to. Microkorg did something similar, didn't you?Nairn
    • Thank you for your amazing post. Great stuff.SimonFFM
    • Simon, Nairn, microkorg, uan, skinnypuppy, renderedred, thanks so much. :)mg33
    • Dude you need to move to Cursor, it'll be your Claude moment all over again. It admittedly uses Claude to write code but they fashioned it in such a way thatkalkal
    • it can write code to full repos, multiple files, substantially longer files because etc, you could have thousands of lines of code.kalkal
    • vscode style interface that supports all the vscode extensions too.kalkal
    • Love it, congrats mgutopian
    • Yeah, really nice shapes these.robthelad
    Show [[ numHiddenNotes ]] more notesAdd Note
    SaveCancel

View thread