 Let's talk about generating comics with JavaScript. The slides are already online. I'm Anand. You'll find me on Twitter on sAnandZero. My story really starts in 1984 when, as a kid, I asked my mom, who's the most famous person? I was expecting the name of some scientist. That's who I wanted to be. And Albert Einstein was certainly something that I was hoping for. But she said Walt Disney. That was odd. Now, I knew Disney's comics. I've certainly seen their movies. But I've never heard of Walt Disney. I didn't know that there was a person called Disney until that time. Then I started looking at his work and pretty much reading every single Disney comic and watching every single animation picture, usually standing at bookstalls, graphic novels where and still are pretty expensive. And by 1992, I pretty much made up my mind. My life's ambition is to draw comics for Disney. And I started very aggressively. And in two years, I realized one thing. I can't draw anything. Zero. That was the end of that ambition. But on the other hand, others can draw. So there's nothing that stops me from using these. So I started hunting comics and in 1999 discovered Calvin and Hobbes. So you may know this particular strip where, for instance, Hobbes asks Calvin, haven't you put in your story yet? He says, no, I'm waiting for inspiration. You can't just turn on creativity like a faucet. You have to be in the right mood. And Hobbes asks, what mood is that? Last minute panic. This is like one of my all-time favorite Calvin and Hobbes. In fact, last time, last minute panic is my motto. That's how I work. That's how this slide got built as well. Last minute panic. And I would use these comic strips and create stories out of them, use them as part of presentations, business presentations, technical presentations. I mean, heck, I'm giving JavaScript presentation on comics here. So the trouble, though, was that these comics weren't really discoverable. So I effectively spent seven years of my life, 2001 to 2007, typing out every single Calvin and Hobbes strip so that I could search through it. It was a simple Excel interface that I built some of you may have seen it. And what I would do is sit on a train from Mumbai to Churchgate and using simple macros as I scrolled through each line on Excel, it would change the strip. And I would look at it and say, okay, everyone in the water, I refuse, blah, blah, blah. And as you can see over time, my typing speed also increased if I typed this much. And I was very proud, created a website out of it. So if on this, for instance, I want to search for that last minute panic strip that comes in pretty quickly, or if I want to search for every spacemen spiff strip, I just search for spacemen and go to the next one, go to the next one and I get all of these. And I was totally thrilled, right? So it went on to the front page of Reddit slash dot hacker news and I got a DMCA takedown notice from you comics. That just completely killed it. So that was the end of the next adventure. Over the years I started Grammar and we assembled a design team. And our design team as the organization grew, started growing crazier than usual. They started putting together comics literally on a wall. This is one of the walls in our office which is decorated with, not even sure whether I would call it comics, but it also has comics. They started creating comics for various situations. So for instance, there was a client from the Middle East who called us and said, we want to use big data. Okay, cool. How big is your data? They said, see, we want you to forecast our revenue and we have the last three years worth of revenue. Okay, what? Daily data, hourly data, minute lead data, yearly data. Wait, sorry, you're gonna give me three data points and you want to predict the fourth. Said, yes, but we can also give you GDP data. What, annually? Yes, because you need Excel. That's really what you need. You probably need paper and pen and we put that together as a comic strip and told people, look for big data, you don't really need much beyond Excel. If your definition of big data is something that fits in less than a gigabyte of file size, right? That's Excel can quite comfortably handle that. And as we put these characters together, we had a discovery. We figured that it's possible to create these in a way that others can use and put together this open source application library called Comic-Gen. It's at grammar.com slash comic-gen. I'll show you how it works. Let's start with one of the characters that we built in the early days, D. You can choose the angle that D is in, the emotion that D shows, the pose that D has and there are different combinations for each of these and maybe flip them around as a mirror image. Ultimately, all of this gets translated into code here. So this is a piece of HTML that if you insert in your code, then it generates this particular character. So now D has an angle straight, emotion is angry, frustrated. If I change the emotion to cry, you just have to put in emotion equals cry and that character gets generated. Let's show you how this works. I'm gonna take the development page here and open an example on code bin. So what you need is firstly, you need to have the library inserted for which the code here is optionally include the style sheet. Definitely include Comic-Gen and that's located at on NPM, but you can just use unpackage.com slash comic-gen. When these libraries are included and that is captured here in the library section. Yeah, so unpackage.com slash comic-gen is included here as a library and you do that and you put in G class is equal to Comic-Gen. Name is D and the angle is straight, emotion is smile, pose is thumbs up. That creates this character with a thumbs up expression. This was literally also just copy pasting from here. So if instead I wanted to have this character, I would copy this pasted in the HTML and that refreshes eventually it's gonna get there, I hope. Yeah, and you have this character embeddable in any part of the HTML. The real discovery was twofold. The first is that simplicity actually wins remarkably well. Scott McLeod talks about it in understanding comics where he shows a really carefully crafted face and says when you see that face, you see someone else and then he draws a smiley and says, when you see a smiley, you see yourself. It's possible to do effectively the equivalent of emotion transfer, which is why emoticons work so well. You send a smiley, the person at the other end sees you smiling or they smile in themselves. So we found that emotions are pretty powerful and started building a reasonably large range of emotions. The second discovery was that composability is pretty powerful too. So we have characters like for instance, humans, which is an open source library where you can pick from different heads, different bottoms and different bodies. And when you do that, the number of characters starts increasing combinatorially. So that's a pretty powerful feature too. And we started using this in our stories. So for instance, we took one of our 2014 stories where during the elections, the parliamentary elections, the number of candidates with the same name in different constituencies was pretty odd. For instance, there were 11 people called Chandulal Sahu in Mahasamudh, exactly the same name. One of them was the sitting MP and the remaining 10 were obviously independence who were drawn in to create some confusion. There were two Hemamalini standing for election in Mathura. One was the Hemamalini and the other certainly was not. There were, and one of the things that you'll notice about the party is that it indicates which is the party that was affected by the strategy. So if Hemamalini who belongs to BJP finds that there's one more Hemamalini in the same constituency, people might get confused and therefore BJP's vote is affected. And it's interesting, by the way, that there is, but that Congress was not affected by this strategy at all. I'll leave it there. I'll let you draw the implications. I'm not into politics. This is a word comics. And as we went along, we started realizing that now that it's programmatic, it can be controlled by data as well. So you can effectively have these strips changing based on the underlying data. So, which means that we can start including this as part of dashboards to express the emotion that we want people to take away from these dashboards. To give you an example, we took this piece for the World Bank. The World Bank had a study that explained how women face different challenges. They may, they are, for instance, the laws are different for men versus women in terms of how they access institutions, in terms of how they can use property. Let's take access, accessing institutions when it comes back. Here, for instance, there are 19 countries in which married women are required by law to obey their husbands. That includes low income countries like Mali and Afghanistan, as well as high income countries like UAE, Saudi Arabia, Qatar, and so on. Let's pick another random. There are 31 countries in which a woman cannot legally choose where to live in the same way as a man. And that includes countries like Brunei, Iran, Malaysia, and so on. Similarly, there are 31 countries where you cannot be the head of a household. It turns out that these expression varies based on the severity of the situation. So there are only three countries where you can't open the bank account in the same way as a man. But there are 11 countries where you can't apply for a national ID card in the same way as a man. Not just here, we started introducing this into dashboards in other tools as well. So this is a Power BI dashboard where Day is reasonably happy that in the last quarter, there was an increase in sales in Americas. And in APAC also, there was an increase in sales. But it's pretty clear that in EMEA, this performance is not so good and he practically has tears in his eyes. Couple of things happen when these go into dashboards that executive see. The first is a certain level of interest. When you see a comic character, it's effectively a promise from the author that the content is going to be a simple and engaging. And it usually lives up to the promise for a couple of reasons. The first is that the creator is trying to do something different. The second, when they start introducing comics into these kinds of dashboards, there is a natural tendency, even on the part of the creator, to simplify their work, to make it more engaging. So it's a virtuous cycle where there is a promise and the promise is almost self-fulfilling. And we've seen this have a fair bit of traction in the system. So let's create a comic strip now. What we are going to do is take this scenario, D is at JS Fu and she's Skyping and says, I'll call back later, I promise. And hopefully you catch the pun on that. The question is, there was a flicker. So if there are a lot of components on the screen, it flickers. Yes, unfortunately, the artist who drew D drew D with a lot of hair and with very intricate detail and D in particular has pretty low performance. The subsequent characters like Ringo and they have art men who have less hair and over time you'll find that the level of complexity starts decreasing. So, but you're right. When using SVG on complex characters, especially with complex hair, it becomes a problem. So there are two ways we are looking at addressing this. One, PNG. So one of the options that there is is instead of using SVG, use PNG and they are an order of magnitude lighter. So you'd find that there would be less flicker when we take a character like D and choose different emotions. So here you'll find that this and it's not pre-cached or anything. Now it's literally live. The other, of course, is caching. Load all of these upfront and render them. You know the range of emotions. It's not that large. So that's the second. So ultimately three strategies. Simplify the original content itself. Second, switch to PNG and we pre-created those. And third, cash them. I can probably take one more question before I switch over. Yes. If you go to the PNG, we can't scale. It does get pixelated. That is true and therefore the choices between SVG, which you would want to scale and PNG, which you wouldn't scale. The thing though is for the vast majority of the users that we've seen comics put to, people don't really scale it. It's just an empirical observation at the moment. I don't know if that will hold ground. We are just discovering the users to which comics are being put. But so far for the vast majority of the users that have seen comics being put to, they tend to stay roughly at the same size. So maybe it won't matter. We don't know. If the site is viewable in desktop and mobile and the resolutions on both of them are the same. Yes, as you said, it probably should be fine. Let's create a comic strip now. And what we'll do is try and replicate that very picture. We're coming up with a user interface where it's possible to create the comic strip from scratch directly on the UI today. This is not possible. What I'm showing you is still in UAT, but eventually when that happens, we can pick a character such as D. Let me get rid of the older character. And what did we want her to look like? Okay, she from an angle perspective, I think is fine. She should be reading, looking down, and the post should be holding a laptop. And we add a speech bubble, which can be smaller, in which she says something about callbacks and promises. I'll call back, I promise. And that then gets moved to wherever it needs to go. And with that, we have the comic strip created. Put it into your favorite editor. So you can export it as SVG, put it into Illustrator or just take a screenshot, put it into PowerPoint. So yeah, this is literally how I created this strip and it takes a minute or two to create these. You can of course do this programmatically also. So in the documentation on comic gen, there are some more sophisticated characters. Let's take something here at the bottom. Okay, so this is a full-fledged strip that is programmatically created. You can create panels. Are these boxes and right now the boxes are straight. Ideally you want them to be hand-drawn like boxes, but that's coming with caption text. So that just comes in as plain vanilla text. And then you put in the appropriate comic gen characters and position them. You can move the comic gen characters on the interface and it'll give you the exact X and Y. And that gives you this particular strip, which is just plain SVG and with a certain amount of JavaScript that's applied onto it. The next phase that we are exploring is how can we start animating these characters based on data in a more fluid form. So LA Times in 19, somewhere in the 1960s or 70s carried an article in which a person, Sharnoff created a visualization showing how different counties were reporting on their surveys. And he used a very interesting principle. He showed a fat face where people were affluent and he showed a thin face where people were not. He showed a happy face where people reported higher levels of I think income, something that correlated with satisfaction, maybe job satisfaction and sad faces where that was not true. And he used a series of other factors. Now, what that allows us to do is control attributes of the shape in a continuous fashion, not like in a discrete fashion the way you saw earlier. And this can be pretty powerful too. So for example, one of the things that we put together for this election was can we take the candidates and use their profile to create a drawing that characterizes them. So we can have those with a lot of assets as having a round face and those with very few assets as having a thin face. Those that are young have lots of hair. Those that are old have less hair. Criminal cases, the guy on the left is a poor innocent chap whereas the person on the right with red eyes clearly is far from that and so on. So this is what some of the famous people look like. Narendra Modi, slightly innocent face. Rahul Gandhi, not so innocent. Arjun Singh looks positively evil. Rahul Gandhi definitely has more hair. He's among the younger ones. Smiling if they win. So these people won in Amit Shah, they won in their constituencies whereas Rahul Gandhi did not. By the way, it's purely coincidence that some of my slides have anti-Congress messages. That was not the intent. It literally is a coincidence. I'm politically unaffiliated. But let's take Bangalore Central. So this is the result of these are the faces of the Bangalore Central election that happened recently. The person who won is PC Mohan who's smiling because he won and doesn't have much by way of criminal cases and is moderately educated, moderately old, has a reasonable number of liabilities to go along with his assets. Whereas the person who came number two, Rizwan, is unhappy and is fairly rich and maybe slightly younger as well and has similar assets but slightly more educated. Prakash Raj has as much wealth, slightly older but a little more in terms of the crime status. MK Pasha is one of the youngest that stood for election. Poor lad is all we can say. Quite innocent, not very affluent. At a glance, you get a sense of the candidate's profile and it becomes a little easier to read it but it's also something that's engaging and this was a piece that we'd put together for the media. Now while we are exploring this, another thing that we are also looking at is can we animate these characters dynamically? So what does it take to be able to take these sketches and draw them? There is this library, Vivas, Vivas, I don't know how to pronounce it, instant in which you can drag and drop a shape. So for example, this is Priya who's one of the new characters that's coming up. If I take Priya reading a paper and drop this, this SVG library allows me to animate this real time. With a fair bit of control, you can decide what kind of path timing function you want, what kind of duration you want and whether you want them sequentially or you want them one after another and so on. So with this kind of an approach, if we are able to simplify the characters to the point where they are mostly line drawings, that allows us to create sketches that look as if they are drawn by hand and are in fact being drawn by hand. So that's an area that we're working actively on. But all of this is very much in development and there are three things that you can do right now to get working on comics. The first of course is to use them. There's a whole bunch of Japanese and Chinese styles that have started using Comic-Gen and are putting them, I have no idea what they're saying, I can't even translate the images because I then have to do OCR in Japanese and then figure it out, which was too much work. But there are a number of people that are tweeting on Twitter with the hashtag hash comic gen, taking these and creating strips. So just using it to see what kind of expressions and uses comics have in regular content, that's an exploration that a lot of people are doing and would be of great help if you can learn and teach the community. The other kind of work that people are doing in the community is creating characters. We've had people from Serbia, Slovakia, Japan, several people in India are coming in and saying, we'd like to create a bunch of new characters. These are community contributed characters and Donald Trump is on the way. As of yesterday, we had one person who came in and said, I'm putting together a Donald Trump sketch and this is a portfolio that's growing as well. But as developers, the other thing that you can pitch on on to this library is integrating with plugins. So you saw the Power BI plugin, there's a PowerPoint plugin that's coming in. If you have a framework, library, tool set, whatever and want to build a plugin, the code is out there, you can certainly start integrating it. Building a user interface so that people can create comics in an easier way is something that we're working on if anyone's interested in pitching and that would be pretty powerful too. And improving the main API itself to make sure that it has more functionality. So how do we introduce animation? How do we introduce delays? How do we introduce composition layers? All of these are very open questions. Like I said, this is the early days for this. But this is a story of Comic-Gen. I must end with my story as well. We were working with Star TV and started using Comic-Gen in some of those dashboards. It was talking about how the viewership was dipping across various regions. And Star TV, as many of you know, was owned by 20th Century Fox and early this year was acquired by Disney. Which means that I'm actually now drawing comics for Disney. Comics are just one copy-paste of me. I encourage you to try and create as many comic stories as you can, share them with the world, and enjoy, comics are fun. Thank you. If you have time for questions. So you were affected by copyright laws when you wanted to use calderon hops. So do you foresee yourself suing someone else later when they're using your stuff? So the good part is Comic-Gen is released under a CC by, that is your only attribution license, where the authors want it, or it's created in public domain. Wherever possible, what we're doing is paying the authors and taking that work and putting it under public domain. Which means that not only we, everybody including the author loses the right to sue anyone. Having said that, what's happening though, is let's take times of India, for instance. They have a huge portfolio of characters and they want to use this. So the question is, can Comic-Gen be used there? So in those cases, what we can do is take the technology, give it to them, and say, apply it to your characters and use it internally, or put it outside with copyright, would create a site, a portal, wherever so that the comics come out. See, my inspiration actually came from when after the DMCA takedown notice for Calvin and Hobbs that I got, I reached out to you comics and said, look, I have the code, I have it all typed out. Let me give it to you. Let me create a site for you, whatever I just want to search and a whole bunch of people want to search. No response. So I'm hoping to change that, because if there's a collection of comics, let people use it, and how it happens, I don't know. So, but to your point, yes, there is always a possibility, but as far as possible, we'll try and get the comics out in the open, at least through technology and if possible on the content side as well. Hey, I come from a company who's serving the fortune and clients, but the main problem that we face is something innovative, something creative, or something a little comedial or including comics in one of our dashboards or anything that we create, right? That might not get a good response from the business users, right? And also the business analysts are so-called people who decide the decision boards or dashboards, will not take it very positively. Yes. How do you think that we can change this mindset? So that was exactly the same reaction that I saw internally and externally. The good part is out of every dozen people that say, no, this won't work. There'll be one person who says, maybe, right? So the first thing to do is to catch those people. You ask them, look, do you think it'll work? Do you think it'll work, et cetera? Everybody will say no, but there'll be one person who says it with a little bit of hesitation, catch them. Second thing, don't put it, don't apply it in a scenario, which is business critical. There are always POCs. And in a POC, there'll always be somebody who wants to try something different. Now, what we're finding, for instance, is that Comic-Gen is proving pretty powerful from a marketing perspective. It gets people hooked. So you go to the marketing team and say, I'll create something for you and tell people that this is a whole new rage. It actually is. I mean, there's a lot of research that's being done and mentioned that Gartner has started talking about Comic Generation. They actually have, you can look at some of the storytelling work that one of their analysts, James Richardson, is doing. And that starts building some of the credibility around the seriousness of comics. Also mentioned some of the words like it drives engagement, it drives adoption, it reduces friction, have a portfolio of words which are actually drawn from the research that overcomes their objection. And then it gets into the marketing side of things. Slowly, there'll be a group of people that start using it. Internally, a bunch of people started using it in Gartner, or head of admin, for instance, started sending all of his reports using Comic-Gen because it was easy. And people, after he started sending it, people started reading those reports. Otherwise it was admin, what do I care? Now he sent one yesterday saying, make sure that you book your flight tickets for at least one week in advance because of that we can save a solid 25% on the cost. Wow, every single person read that. So internal communication then starts building the culture internally that this is not unusual, this is part of the norm. And then slowly it starts trickling into projects. So that was our work as well. We started showing it to a few clients. And among the clients, there'll be one or two that are more interested. They'll say, let's start with that. That's how it started. And then when one or two clients do it, the sales team looks at it and says, oh, okay, that means we can now take it to more clients. And this in itself becomes a product offering or a differentiator, very often a differentiator. So short answer, hook the early adopters, get them to touch marketing, drive POCs, then show it in a project, then drive sales. Hello, up here, here, here, here, here. Yes. Yeah, great talk, man. I literally had goosebumps when he said I'm drawing comics for Disney now. It's such a great moment. So yeah, just wanted to ask one thing. Are you also considering making some of these things responsive? Because probably when you do something like that, you probably just take a headshot of the character when they're probably changing screens. So since you're already looking into animating the characters, is responsiveness also and think that you're probably considering with these comics? Thank you for that input. Have not thought about it. I will think about it. I don't know the scenarios where that becomes important in the sense that right now I've been treating comic-gen characters or even parts as just images. And therefore the responsiveness of images is the only thing that I had factored in. However, given that, now like you said, we are looking at animation and we are potentially changing the shapes. Is there a different shape that we should have at different sizes? That's an interesting thought. Let me just think about it. I would love to contribute to it if you. Absolutely. It's an open source repository. Just fork it, create whatever you want, send a pull request or don't, whatever, please. Yes, that would be fantastic. Thanks, sir. Time for one more question. Hi, just wanted to check, in terms of accessibility, so if I use X character, let's say a man sitting on a chair and I put in some dialogue for that character, so does it automatically generate like a transcript that okay, man sitting in chair says so and so? Okay, well, that's a fair question, especially coming after a talk on accessibility. I'll tell you our current state of accessibility on this. Zero, absolutely nothing. Right now the question is, does a person who is fully with site and fully capable in every way going to even want to use this? So right now my question is, is comic-gen worth it? So if it is, then it's something. Let's say I have some blog post and I embed this out there. So I would ideally want that any, like everyone should be able to, like how we do for images, right? You're absolutely right. And it is important. I'm not diminishing the importance. I'm saying it's ultra critical. Right now, what I don't know is whether what we are exploring is something that will even be used. I think it definitely, it's a fingers crossed. And the next hurdle to cross is accessibility. But you are the first person to raise this question, actually out of the hundreds of people that I've seen or heard. And if right now we don't even have a mechanism for figuring out how to bring in that accessibility because we don't even have enough studies on understanding how it is being used. So once we figure that out, I think that's absolutely a positive next step. I'm not saying that what I'm really saying is that we are so far behind on understanding its usage that accessibility seems like a distant dream at the moment. And we'd love to explore the usage on the ground. Right, thanks.