 So, I'm going to talk to you about a project I created, it's called Character Creator, so basically it's not free, well it is free software, but the idea is to provide some free assets for free software. So just a bit of history, it started in 2014, actually the online version started in 2014, I actually had the idea for it around 2007, and today we, it's slowly gaining traction and we've got about 100,000 users every month. This is what I use it for, so I basically built it for myself, stretching my own age to make comics, here's a sample, I've got a few sample pages of what I use it for, some illustrations used with the application, so basically it's to, I use it to make comics but I think it's going to mostly be used for people at indie game developers who are trying to get a game off the ground, but are having a hard time finding assets, so that's the main threshold, so there's a lot of, there's a lot of art online you can find, but the main problem is finding art that's unifying, that fits together, that doesn't look, get disjointed when you bring it together in the same project, and also there's a fact that if you are looking for an artist to have a uniform style, well artists can sometimes be expensive or unreliable, I know I am, I'm way too costly and I lose interest in projects sometimes, so it's a problem I see a lot of people having. So we use code, so why don't we reuse art, and with SVG we believe it is that the art is now also code, the goals of my project was twofold mainly, I wanted to have a user interface that was very simple, so a child pick it up, even someone who doesn't, who can't read could go into the application and figure it out, so the application interface was sort of a game at the same time, so it looks kind of those like Barbie doll, paper doll games where you can build a character with a few options, but at the same time of having a simple UI, I wanted the quality of the art that is provided to be good enough so people can use it in games and even if they wanted to sell the games later on, it would be good enough to meet a certain standard of quality, arbitrary of course, but I use my own judgment for that, and I wanted to be free for everyone to use, even for commercials, so yeah, just having characters is not enough, that's why it shows SVG because you can draw characters by hand and have PNGs and stack them up, but then you have a difficulty with raster images when you want to scale them up and down and it can get really problematic really quick, so that's why I thought SVG was the perfect solution for that because it's free license, it's integrated in HTML5, so basically that means you can have access to every device that can run the web, which is a whole lot of devices, and on top of that SVG is easy to edit, convert and export even outside the web, so you can download it, have it in your application and put it into your program, you can put it into all sorts of final products basically, and modifying SVG is really fun, it's code so you can, you can even have it in Git, which you can't do with raster files, you can scale your images, so you can have your foreground characters and background characters reused, and if the shapes provided in the character creator are not to your liking, you can modify them pretty easily using no tools. Now, when I started, I had no idea what it, I thought it was going to be, I thought it was gonna, I saw a lot of potential in SVG when I learned about it, but still I didn't know how it worked, how to use it, so I started to draw, draw, draw, learn, and just started to accumulate a lot of assets, I had a general idea of what I wanted to do, but I had to get there first, so I had to figure out how the whole thing worked. Now, the first version was just basically a Python script, so I would have a few options that you could choose from and command line with no UI, and that was a problematic because trying to figure out what you want your character to look like, it's just a few text options, it's not the best, and obviously, like hardly anyone was going to download it and use it. So, that was the first wall I hit. So, it's hard to create visuals without a UI, wouldn't get people's attention, but at least I knew that it worked, I knew that I could have a few options and get a final result. Now, that's when I decided to switch, I couldn't figure out how to get a UI to work in Python, and I also thought that just downloading the application was going to be an extra step that some people wouldn't be willing to take. So, I figured that by having it as a web application, people would load up the web page and will have the application running right then and there, so they'd already be using it as soon as it was loaded. So, yeah, works on all platforms and also allows me to get a little bit of feedback through statistics on what people are using, what they're not using, so it gives me some type of feedback to improve the application. Now, SVG has a lot of advantages, but in the context of my character creator is I can divide every element of clothing, of body shapes, everything can be divided into layers, reused, and SVG is very easy to eject into the DOM and also to remove. So, what you see on screen is always lightweight. I never have any images in the web page that you're not using, or just the menu you're using to select is injected at one time, so it stays lightweight, and when it's time to download, it's very simple. I just basically give you a download of what's in the DOM. So, yeah, a few things to consider is I had to use JavaScript to manage the SVG. At the time, I did not know JavaScript at all, but I'm very persistent and headstrong, so I figured, all right, well, let's just learn. So, I wrote everything, and I had some help from some friends to try to figure out. So, the code was very, very ugly in the beginning. Some parts are still very ugly, but I think I've made some progress in some areas. So, the gist of it is having CSS classes on the different elements that allow me to select the items to change colors and to be able to edit. So, that's basically just what I use to select the items when you want to change color. Very simple. Here's an example of a menu that I use. So, basically, I just think of different sections and add the possibilities that are there, and that's the complete options of each template character. So, I have a male and female template at the moment, and I have everything listed in there in order of zindex, if you will. So, everything that's in the back would be at the top, and everything that will be shown at the front will be at the bottom in the file. All right. So, I had to figure out how I was going to do this. So, I decided I was going to have some simple class names. So, I have a skin class, which works for, obviously, the skin, and everything else will be, I use Greek letters like alpha, beta, everything like that. And so, that's how I separate the different colors on each layer, basically. Now, to have varying degrees of light and dark, I added some suffixes like dark, darker, darkest, and lighter, lightest, which gives me a range of seven colors, which, for me, was enough to get the level of quality that I was looking for. Also, some 2D layers are partly in front of the character, and others partly in the back. So, I had to separate some of the layers into parts like this. So, I have one of two, and two of two, et cetera, as suffixes into the ID. Now, when I started, I had to make some decisions of arbitrary defaults that were not necessarily educated guesses, which is basically I needed something to start with. So, I have a random view box, which is a pretty ugly. If I was going to start over and start with something more standard like 0, 0, 1,000, 1,000, which gives you a better understanding. But these were the choices I made in the beginning, and that's what I'm stuck with without totally redoing all the images. Same with the class names. I made some choices, and actually the class names work out pretty well for my needs. And also, one of the arbitrary defaults was the position of the characters. Now, the male character is pretty basic, but the female character has one leg up, and a little arm like this. So, if I was to redo it, I'd probably choose something a little bit more front-facing too, but I made some decisions in the beginning, and now I'm stuck with them. This is what the positions are, so hopefully I'll be able to add new positions in the future, and you'll have more choices than this. So, some things work pretty straightforward like I mentioned, but other things like getting emotions and expressions to change that on the character is pretty complicated. Just the eyes are always the same, so I don't have different eyes. I always have the same eyes, but all the eye shapes, the exterior eye shapes are masks, so that I eventually can animate the eyes in the application, and you can also change the eye positions, which is not implemented yet, but half of the work is done, so it's coming. And same thing with body shapes. If I start adding new body shapes, I have to draw all the different clothings on those body shapes too, so that's going to take time. I'm waiting for the right moment to start digging into that part of the application. Now, one of the features that I found interesting is that you can actually, it's a random feature. I think I'll give you a quick demo of this. So, if I start the character creator, I'll go to skin color, body type, click on the part here, and I added a little random function that, if you have no idea what kind of character you want to build, you can click on random to go through all those. Now, this part is a lot of ideas in my head, and I want to hopefully, eventually, I hope to add different options for the random, so you can control the random a little bit better. So this, if you have no clue where you want to go, could possibly be an alternative way to think up and dream up new characters. Obviously, once you have the cape, it hides everything else. So, if you want to see more of it, you can play with it. Pause, and pause here. Yeah, the pause button sometimes. It's still ready. What are you going to do? I'll fix it. All right, so the random feature. I also have a hashing system in the URL, so basically each time you add an option, it's added in the hash of the website. So, after the URL. Now, this goes for the items you choose. The colors also are included in the hash. So, that gives you some nifty features. So, if I make a character and I'm like, oh, this is really cool. I want to show it to my friend. I can copy the URL, give it to my friend over any messaging service, email whatever, and once they enter the URL, they'll give them exactly the same character that I created. So, that's a nifty way of sharing characters pretty quickly without any sign up, without any accessing with zero clicks, basically. It also allows for some Easter eggs, because some people ask me to have all the female hairstyles on the mail. So, I did, but I found that if I put those in the menu, it would kind of complicate things a little bit. I wanted to keep it simple, but since they're there, you can access it through the hash. So, I can put a female hairstyle. Well, no, female, obviously. It's a relative term. But I can put these things in the hash, and it'll pop up even though it's not in the menu. So, you've got some Easter eggs, and you can hack a little bit of the hash URL. And it's an alternative way to save your characters also. Now, I've got a login feature. You can actually have a bunch of characters you want to save. But in the beginning, all I had was the hash, and you can actually copy the URL into a text file and come back to the website anytime and get the character you created just by entering the URL. So, exporting is super easy. It's an SVG. Although I get a lot of demand for raster images, because in the general public, not everyone knows vector art, how it works, and how to deal with it. So, I'm thinking about adding a little bit of documentation or, you know, information on how to open SVGs, but I still get a demand for raster images. I don't really want to do the work, because it doesn't interest me. But if someone else wants to, or eventually if I'm a bit tired of being asked, I'll get it done. So, Inkscape, obviously, is the reason this project exists. I discovered vector art, well, I'm not sure what I discovered years before with Adobe, but once I moved to free software and discovered Inkscape, that's when I realized that my comic book process could involve vector graphics, because I was moving around a lot and carrying a big drawing table was problematic, and it's very hard to reuse drawings when they're all, you know, sketches and scans. It's problematic. So, the fact that Inkscape exists in SVGs, I think allows for new ways to design comics. So, I didn't do items that's still a bit hard and problematic. I'm the only one who adds items for the moment. I got an email asking how to do it, so I think I'm going to sit down and write how to do this, but you need to get into the code still. I'm looking forward to the day while the code will be able to just take the file names and inject them and do the behind the scenes things automatically so that artists won't have to open up an intimidating code place. So basically, you can download a character template so you just choose a character and don't put any items on it and you just draw the item and then you go to the code and you add the classes on the items and the different colors and then you inject it. That's how you add one. And yeah, so I'm looking forward to, right now you can only change one color per item but I'm halfway done on that feature too so that's coming where you can handle multiple color items. The animations are coming and the mail template has now sectioned arms that will eventually be able to be moved, same with the eyes and mobility in the arms. I hope to add rotating heads eventually. And one of the things that's not so easy is actually getting users to understand this feature as I mentioned. So some of the cons it takes a long time to create items right now. I hope to change that in the future. Different body types requires drawing all the items and what the future holds is different body types, positions and hopefully separating the repo for the images so that other artists can take the code base and put their own style of characters so you have more than one character creator. You find one for each style that you want hopefully. Documentation, I'll never do that because I'm not kidding myself. And I want to add a service worker so it works offline when you don't have Wi-Fi. Here's what I'm doing in the background. This is not on the website but this is for myself so I can take the hash from the website, put it in my Python script and it will change the color and the layers of the features so I get my characters looking like it does on the website. It's not on the website but it's just to give you a glimpse of what's coming. So if you want to reach me this is how you do it. Thank you.