Summary
There are many free vector/SVG images on the web, but they very rarely match the art style you want; can we get an AI to generate custom images interactively, in 2D, as vectors?
Usefulness: Practical/Productive
Activities
- I’m making a small game for friends, I need custom art for it – but all using vector graphics (i.e. they are rendered and animated by scripts, using procedural/codegen techniques), so they dynamically are re-coloured/re-sized/etc to match in-game effects
Techniques
- Ask the LLM to generate a vector image, “using only vector rendering commands (draw line, draw arc, draw triangle, etc)”
- Get the LLM to convert that to a bitmap render, and display it for us (so I don’t have to keep going back and forth between a vector editor / SVG viewer and chatGPT)
Discoveries
- SUCCESS: very easy to get good output; also, the LLM automatically generates SVG for tweaking (I’m not using SVG, but SVG code is very easy to convert to any standard vector-graphics API calls)
- Without being asked, the LLM code-comments the SVG, making it extremely easy to customise the vector art by hand afterwards
- The LLM resists rendering an image – it keeps wanting to give you SVG source code – until/unless you expressly ask for “a bitmap”
- After making the sheep, I wanted to modify it; the LLM’s output was technically poor SVG, since it failed to use the “<G>” element that is core to good SVG’s.
- Was this a result of my originally telling it to use “lines, arcs, triangles, etc” — did it need me to also specify “G elements with relative positioning where appropriate”? – one to try next time
- If you don’t know how to write good SVG’s you’d never guess this, but if you do … it’s easy to tell the LLM to do it properly:
- First I had to explicitly tell it where to use G
- Second I had to explicitly tell it to position the child-elements ‘relatively’ – it kept positioning them absolute, which ruins the purpose of G.
Details / Example
Here’s a “sheep” 😀
Comments:
- is that a good sheep? NO!
- BUT: … that head with the cute ears — I can use those, very good … and the legs are trivial to fix … and the body just needs a tiny amount of repositioning
…and here’s the same sheep after manually tweaking it:
Here’s the prompt and the output:
Prompt
…to get it to also fix the lack of G, I had to add:
ChatGPT-4 response
…and after me correcting the LLM’s weak use of SVG primitives:
