Learning How to Code (Part 1)
7 years ago
So, I play Flight Rising and for those that don’t know it’s basically a pet website that auto creates pets based on a set list of parameters. For example, you pick the color blue and say it has tiger stripes and the website generates a dragon image that’s blue with tiger stripes. Anyways~ I got to thinking, can I make something like that? I used to work in other adoptable communities as a coloring artist, but we’d always have to do the markings and the colors ourselves. Well, I love making things easy for myself so I decided to take a crack at learning how to code (cuz that’s easy right? /s)
Python. I’m starting at ground zero with coding, but I have heard that if you’re gonna learn how to code, python is the easiest language out of them all. My understanding is that it took all the mumbo-jumbo out of the stupid little characters all over the place and packed them into nice, easy to understand command words. Easy peesy, but I wanna create images, not words. Turns out python has a pretty sweet image processing package called pillow. Double sweet. Enough talking, time for pretty pictures.
The artwork.
I got my hands on some pretty awesome deer (and later flying tiger) lineart from a gaia user named “breedable art by V”. All the lineart you’re about to see was originally drawn by this person.
With artwork in hand I started writing my script. I broke the deer down to four levels, body color, marks, accent stuff, and the lineart. So that’s three colors and the ink. Turned out to be pretty easy to get the code to prompt the user to ask for a rgb value and then color the artwork.
IMAGE LINK
Boom! Mission accomplished. The image on the left I colored in photoshop and the image on the right was generated using the code I just scripted. I can’t tell the difference. I was so excited and happy that I actually did what I set out to do that I wanted to take it to the next level. I commissioned a bit more complicated lineart and set up the script to work with the new artwork.
IMAGE LINK
Done. Now, this image is actually a lot more complicated than the deer image. I’ve broken down the artwork to primary, secondary, and tertiary (much like FR). With coding you have to stay super organized or else everything can turn into a hot mess super quickly so there’s three levels with sub levels in each section. In primary, you have the base color of the body with the second level of markings that are colored slightly differently. Notice the legs and face markings. Those are the 2nd level in the primary level. I’ll take another term from FR and call this gene basic. The wings are made up of three levels in their basic gene. By breaking the artwork down like this, I’m able to get the code to create more complicated images.
Now the fun part, creating a list of colors and organizing the code in a way to accept more gene artwork. After basic I made tiger stripes (they are based on tigers after all… well, with wings).
IMAGE LINK
The code works! I always do a little victory dance when I add to the code and it works because I’ve found that adding tends to break things. The script can now recognize the colors I picked and named, while also understanding what I mean when I say ‘basic’ or ‘tiger’. I don’t have to actually type in the three numbers for the rgb color code (that was super tedious btw). I made a list of 55 colors, gave them names, and generated a compliment and accent color list based off the main colors. You can see the color lists in action with the wings. The color fire is made up of an orange, yellow-orange, and super orange color. If that makes sense.
Now that I got the code organized to accept new genes, it’s time to expand. New gene: cloud and tint.
IMAGE LINK
So I pretty much got the code working good for one set of lineart, how would it handle another set? Time to get the code to ask the user if they wanted male or female lines.
IMAGE LINK
Now it can do both, no problem. Next step: adding in blend modes. So in photoshop, you can tell the layers how to interact with one another using layer blend modes (multiply, soft light, etc.). Right now the code just adds images on top of images and spits out a final file that has everything together. Well, I want the script to calculate layers. It’s how you change the black lineart to another color. In photoshop, I’d set the layer to soft light. I figured out how to do it in the code and before long I got the script to spit out an image that was much richer than the simple black lines.
IMAGE LINK
It was also at this point I added the shadow layer since I multiply my shadows on the artwork. The artwork is a little messy because the black lines covered up a lot of coloring mistakes, but I went through and fixed it.
Here’s what the program can do right now:
IMAGE LINK
I’m super pleased with how things have turned out so far. I have plans to add in a child stage and get the program to generate a random child image based on the parent’s colors and markings, but that’s the next stage. Right now I’m having fun generating a bunch of cool images and thinking up ideas for new genes to add. Thanks for reading and don’t be afraid to learn something new!
Python. I’m starting at ground zero with coding, but I have heard that if you’re gonna learn how to code, python is the easiest language out of them all. My understanding is that it took all the mumbo-jumbo out of the stupid little characters all over the place and packed them into nice, easy to understand command words. Easy peesy, but I wanna create images, not words. Turns out python has a pretty sweet image processing package called pillow. Double sweet. Enough talking, time for pretty pictures.
The artwork.
I got my hands on some pretty awesome deer (and later flying tiger) lineart from a gaia user named “breedable art by V”. All the lineart you’re about to see was originally drawn by this person.
With artwork in hand I started writing my script. I broke the deer down to four levels, body color, marks, accent stuff, and the lineart. So that’s three colors and the ink. Turned out to be pretty easy to get the code to prompt the user to ask for a rgb value and then color the artwork.
IMAGE LINK
Boom! Mission accomplished. The image on the left I colored in photoshop and the image on the right was generated using the code I just scripted. I can’t tell the difference. I was so excited and happy that I actually did what I set out to do that I wanted to take it to the next level. I commissioned a bit more complicated lineart and set up the script to work with the new artwork.
IMAGE LINK
Done. Now, this image is actually a lot more complicated than the deer image. I’ve broken down the artwork to primary, secondary, and tertiary (much like FR). With coding you have to stay super organized or else everything can turn into a hot mess super quickly so there’s three levels with sub levels in each section. In primary, you have the base color of the body with the second level of markings that are colored slightly differently. Notice the legs and face markings. Those are the 2nd level in the primary level. I’ll take another term from FR and call this gene basic. The wings are made up of three levels in their basic gene. By breaking the artwork down like this, I’m able to get the code to create more complicated images.
Now the fun part, creating a list of colors and organizing the code in a way to accept more gene artwork. After basic I made tiger stripes (they are based on tigers after all… well, with wings).
IMAGE LINK
The code works! I always do a little victory dance when I add to the code and it works because I’ve found that adding tends to break things. The script can now recognize the colors I picked and named, while also understanding what I mean when I say ‘basic’ or ‘tiger’. I don’t have to actually type in the three numbers for the rgb color code (that was super tedious btw). I made a list of 55 colors, gave them names, and generated a compliment and accent color list based off the main colors. You can see the color lists in action with the wings. The color fire is made up of an orange, yellow-orange, and super orange color. If that makes sense.
Now that I got the code organized to accept new genes, it’s time to expand. New gene: cloud and tint.
IMAGE LINK
So I pretty much got the code working good for one set of lineart, how would it handle another set? Time to get the code to ask the user if they wanted male or female lines.
IMAGE LINK
Now it can do both, no problem. Next step: adding in blend modes. So in photoshop, you can tell the layers how to interact with one another using layer blend modes (multiply, soft light, etc.). Right now the code just adds images on top of images and spits out a final file that has everything together. Well, I want the script to calculate layers. It’s how you change the black lineart to another color. In photoshop, I’d set the layer to soft light. I figured out how to do it in the code and before long I got the script to spit out an image that was much richer than the simple black lines.
IMAGE LINK
It was also at this point I added the shadow layer since I multiply my shadows on the artwork. The artwork is a little messy because the black lines covered up a lot of coloring mistakes, but I went through and fixed it.
Here’s what the program can do right now:
IMAGE LINK
I’m super pleased with how things have turned out so far. I have plans to add in a child stage and get the program to generate a random child image based on the parent’s colors and markings, but that’s the next stage. Right now I’m having fun generating a bunch of cool images and thinking up ideas for new genes to add. Thanks for reading and don’t be afraid to learn something new!
Are you a member of thegaminglist.com ? It's a forum for virtual pet and sim game developers and fans. If you wanted to show off progress, get help with art, offer your own services, or ask a programming/game related question, that'd be a good place to do it!
That's especially awesome that you got the code to imitate blending modes though, best of luck as you continue your project! Definitely seems like a rewarding way to learn :D
If you're interested in testing it out it's skyflu.pythonanywhere.com
I've got big plans to build it out with user profiles and pet inventories. The whole sha-bang, but I'm at baby steps right now. I work on it when I have down time at work and things have been busy this month. But soon!
Seriously, thanks again. I'm totally gonna check it out.
If you wanted to put me down as a referral, I'm Pepper-Head - but no worries if you already registered :D It'll be great to see you there!!!