 to have him here at Nagarajas today. So thank you so much for coming. Pleasure. Thank you. Right. That's pretty much it, really. Hey, thanks so much. It's my first time at Bangal Jaya. I'm very happy to. I thought you were not going to stand this way. You need to sing for us. I have like 30 minutes to do something which is bordering technical, like at least creating the surface to kind of stay relevant. So thanks so much. So big fan of his. My superheroes are a little different from yours. That picture is actually scaled down to fit the screen. A full-size picture would actually need a PBR Gold Plus screen. But hey, that's how it is. So no worry. Just that you know me. For the people who have not met me, my name is Harish. I take out front of this stuff at this company called Mintha.com, which is trying to make you buy T-shirts, shows, trousers, more personal things so that I can keep my job. I also moonwalk with a brand called Aadu. And I tweet at Sibram. And most importantly, I'm a very nice guy. Did you say you moonwalk with Aadu? Yeah. Is that a bad thing? No, I don't moonlight. I moonwalk with it. Well, this is my talk today. Set of random falling objects. Not really. How many of us are working with Canvas here? Cool. How many of us are wanting to work with Canvas? All of us would be wanting to work with Canvas. Whether or not we want to work with a different issue. When you ask the question, everybody wants to do whatever. So people working with Canvas, a quick question. Are you working with any frameworks, or are you hacking with Canvas all by yourself? Read, read, read. JavaScript. JavaScript APIs. Just JavaScript APIs. Read some 3JS stuff. So that's pretty awesome. 3JS is pretty cool. Anybody doing anything else? PaperJS? Oh, thank you. I might talk. I was just trying to pimp EselJS today in the stock. Two reasons. I have been using that ever since it was sort of conceptualized and implemented by Grand Scala. I used to work for Adobe at that point in time. I also had an opportunity to contribute to some part of EselJS in its early times, which I had to detach off. So I have like 25 minutes with you guys, and hence what I intend to do. So for people who are already working with Canvas, I'm just trying to introduce a new framework called EselJS to you guys, if in case you're not working with it. For the people who are not working with Canvas, I will actually put a couple of points forward in terms of why the stock is more about EselJS and less about Canvas in itself, and then we can get started. So before I started working with HTML5, per se, I came from Adobe Flash as a runtime, and I'm sort of used to working with drawing surfaces, as you understand, like stuff onto which you draw pixels. But what was interesting to me when I started working with Canvas is that one find I was thrown with, literally, what is a Canvas? Like you can only draw pixels into it, and everything subsequent to that that is drawn into it is just their pixels. So very simple things. What I used to be very familiar with was I have three shapes, and to be able to click each one of them without having to write a lot of code, suddenly became a lot of code. Because Canvas only gets an event at Canvas level. Then you actually go and dig what pixel is behind your mouse, and then understand what that is, and so on and so forth. So for me, who was pampered by having a display object based on a kind of like flash, I found that counter-intuitive. I found it difficult to work with. That's when I started looking at this framework called, I actually started with Paper.js, and if somebody has seen that, it's a nice little compositing based library, which also does a bit of Canvas, a bit of SVG, so on and so forth. Then I sort of bumped into Esel.js. It's actually now a collection of frameworks called create.js. So it has got Esel.js, preload.js, sound.js, and so well, so that's the deal. And so today, here's what I'm trying to do. So I just cooked up this demo. This is something for the folks who came to my JS food talk in Bangalore. I see a bunch of family faces, but how many of us were at my talk at JS food last year? You have seen this. So unfortunately, it's going to be sort of a re-run for you as we've already seen this, but for the benefit of the larger audience here, I'm going to re-run some of my talk. So this demo is about building a funny, functional, sometimes addictive game using Canvas, ground up, right in front of your eyes, in the next training. I'm not going to run through code. Nor am I going to say, this is what I did, and so on and so forth. I'm going to type out code right in front of you, and thereby trying to tell you how do we go about writing something like this using Canvas. And the aim is not to teach you Canvas programming. Canvas programming is a whole lot more than what this trivial demo is about, but I think it should be a good start point for you to start looking at pre-JS as a library, isn't JS as a library, and how do you program with that? And there are, so it's like a bunch of falling faces, and the game is pretty simple. So you can just keep busting them. I'm trying to write a Facebook variant of this by replacing those faces with faces of people whom I don't like. And I think it is going to be pretty addictive. I've only identified the people whom I'm going to act with, and also have some sound and assorted effects to it. But to kind of maintain the political correctness of a user group meeting, I've just changed to faces that sort of look like the people whom I dislike. So that's the deal. So somebody from the audience, this is something which I always ask for the fun of it, and also to kind of keep time sanity. Sometimes the audience have to keep time for me. And you're the organized. I don't trust you. Somebody in front of me, I'm just kidding. Yeah, so we should be done with this in 20 minutes, like building a ground up, following all the orders of engagement. I'm going to code this whole thing up, but I'm not going to code things that don't make any sense. For example, if there is a pre-constructed array of objects, I'm not going to type it out for you guys just to prove that I know how to create an array. No, I'm not going to do that. I'm only going to write sensible code. So if that's too bad, that's too bad. So and secondly, whoever is keeping my time, if I'm scratching my head, or if I'm fiddling with my laptop, or if I'm generally looking, wondering what life that turns, time doesn't count. You will count only the time that I'm actually writing code over here. Like sometimes the map just decides to crash, or the monitor kind of goes off, that doesn't count. So the 20 minutes that I'm kind of trying to promise you guys is the real coding time that I have. Any questions? No questions? Sure. Fair. Awesome. So let's get started. So who is keeping time for me? Barbara, are you keeping time for me? Are you keeping time for me? Yeah. A bunch of you can, right now. We are starting at, what time is it now? 12 o'clock 3. 12 o'clock 3. And what time do I have to finish? 12 o'clock 3. 12 o'clock 23. Oh, it's going to be rough. But let's do this. OK, I practiced this a bunch of times. So I have a backup which is open on the right-hand side of my sublime text, if in case I screw up, then I have the holistic escape route of copy pasting and saying, hey, I still wrote it, just that I wrote it a little earlier. So that is my fallback plan. So let's get started. At the back, can you see the screen? You cannot see the screen. I'm going to pull it up a little, but not a whole lot. Let's go to the back. All right. Otherwise, you could just move it just a little forward. Right. OK, so this is my stub. Now, I have nothing here. I have just three libraries linked, preload.js, easel.js, and sound.js. I'm not doing any sound today. I have three variables declared. I have a window on load, and I have a canvas. That's all I have. And we're going to build. And we'll assume that I have all the assets that I need for this, like the images and stuff I already have. Right? OK. So speaking about create.js, easel.js framework, the biggest benefit that it gives is it actually brings you a display object-based programming. When you say display object-based programming, every entity that you add to the canvas are now event-aware. You can control them as separate entities, as opposed to just deadpixes. So if you add an image to the canvas using create.js, it typically means that that image can be accessed by an identifier, typically like an ID. But in reality, when you're using straight canvases, you cannot do that. You have to figure out a way to find out what that is. So that is the primary value proposition of having a nested display object structure where you can actually have access to the elements that you're adding onto your canvas. So let's get started. So something very rudimentary, let's say. I'll type fast if there are any typographic errors. Please point me out so that I can fix them quickly. Then waiting for me to realize it myself. Any questions? No questions. So now here's what I'm going to do. So I'm going to do something like this. This line is important. So stage is a class that create.js gives you. So what stage does is very simple. You have a canvas. You assign the canvas to the stage now that deadpixel surface now becomes programming-aware, like becomes display object-aware. So whatever you are now adding onto the stage can be accessed back. Again, if you don't do that, you're only accessing pixels, but when you actually do this assignment, you can now get started by doing stuff on the things that you're going to add on it. And all of us know how animations or how canvas works. It has got a frames per second concept, and it actually works on how many times do you take to actually be able to do animations and movements in it. So there is a class called ticker. And I'm going to just set a frames per second to 60. And say, what does this do? Basically, we are just passing the window object to the ticker, so it understands how many times the window object is actually giving you a frame per second. So EasterJS internally implements this add listener and points that back into a method called tick, which is already defined over there. So it is at the framework level. So whenever you do that, it always redirects back to a method called tick. And when I do a console log here, you should be able to see that this should be OK. Let's just run this. It is running what happened. So now we are going to get started. So now what do we have to do? This demo, this game is simple. It has got a bunch of phases that appear at random places, and then they start dropping. And then there is a set of clicking them and making them drop faster. So to get started, we'll first add those things. So if you can see the tick runs for crazy amounts of times, it's already at some 1,800. So you don't want to have 1,800 items on your screen at any point in time. You want to control as to how many you want to show. So what I'm doing over here is just programming. So something which is not really specific to Canvas, I'm not going to explain what I'm doing. If you have a question, you can just ask. So I'm just going to do this. Create a random number and say if r is greater than 0.4, this is a good enough condition to have. So that you're actually controlling the number of items that you're going to have on screen. Let's say create a new image, set image.src. Fine, I'm just setting the source to that. Now what we need to do is, this image now needs to be added to the stage. So we create. See, bitmap is a class that ESL.js gives you. So you create an instance of bitmap and pass the image reference to it. And finally do a, I was curious as to how it ran earlier. You have to call a stage.update inside your tick to be able to kind of update what is being added. So till here, any questions in terms of what we have done? We just create an image. You need a map or write a script? Maybe not. Anyways, let us for, okay. Let us. Are you going to be adding the same character to the stage every tick? See, I want to keep this less about good coding standards and more about how you do with cameras. There are a bunch of things that you can do. So don't tell me you didn't put a semicolon or your variable name condition is bad. Accusation taken, but I don't have time for refactoring it right now. Let us just run this and see what's happening. Okay, there is that face of my friend appearing there, but the thing is it is not interesting yet because it's appearing one on top of the other. Correct, now there are two things that we need to do. One is to make it kind of scattered over the screen. The second one is to give a perception that they're actually happening in sort of, with some sort of a depth perception. See, this is all silly feelings in a demo, okay. You don't really need them all to learn this, but I generally want to look like something who has admission in detail. I really don't. But I'm just going to do that. So some very trivial math we are going to do, right? So we'll say, let the Y be always at 10 and let's say, how much do you want this to? I constructed some algorithm here, man, which actually keeps the answers good. My width is 800 pixels. So I'm just creating a random position, right? So I'm just saying math dot random and yeah, it's just a random calculation. So you don't have to fret too much about what this is. Let's see what this looks like when we run this, time check, please. That's good. So it's now appearing in random positions. Now the next step that we need to do is that they actually have to appear with some sort of a depth perception. And I'm going to cheat that by actually scaling this element. So I can just do something like, right? And say, so scale X and scale Y are again two very useful properties that create JS gives you. So you can actually scale an element, a bitmap that is added onto your screen. So this should start looking a lot nicer now. Well, better. So now this has got issues. If I keep leaving it like this, it's going to add bottomless number of elements on the screen and very soon, any great browser of the world is going to die. So we're going to change that in some time. Like at the moment, let's just assume that we'll very quickly refresh before we get into that situation. Now, let me ask this question, very simple physics math question. When we say an object moves from one point to the other, what is exactly happening? It's just a translate, right? Either next or Y translates. And translation has two parameters that drives it. One is the position A at T of one and the position B at T of n, correct? And what the difference between two objects that I'm translating is a parameter called speed or velocity. So these are things that we need to remember whenever we're moving things. Whatever is the speed, it moves from T of one to T of n at that speed and the translation happens. So even for falling objects, if you actually have same velocity for all of them, it will look as if like one frame is entirely moving down. Like now you actually drew a picture with all of them at random locations, they all moved in there. That's what the perception will get. So to be able to crack that, we'll assign random velocities to the individual objects and kind of drop them at those velocities, fair enough. So let us create a, I want it to be always greater than one and multiply it by a factor. There's just some random calculation you should not necessarily bother about this and simply say y is dot well x. You're not translating in the x direction, you're only translating in the y direction. So, fine. So now we have assigned a velocity to this. Now what we need to do is we need to make them drop down. For them to drop down, so right now what we're doing is we are just adding each of these viruses that we're creating to the stage. And sometimes there are two things that you can do. One is go to the stage itself, just got a property culturally. To find out what you have added, you can iterate through the children of the stage instead of find out what are the references you have. Or sometimes it is better to persist them yourselves. So I'm a big fan of not chugging the display object to find out elements. I tend to keep them as references. Now we can argue back and forth on this in terms of what is more valuable in performance. And I tend to think that if you're actually maintaining it differently, you have the extra risk of actually having to maintain your display object and your array parity. So, but the benefit is you have like a smaller data structure to work with. The flip side of reading the entire display object tree is that it will have elements that you don't need as well. So you're actually writing additional code to skim out things that you need. So it is a programming choice that individually we make based on what performance we want to achieve. So in this particular case, considering a performance is not for an private drive home, I'm going to keep that separate as an array. And I'm just gonna, I think I've declared it already. So I have an array called viruses here. I'll simply do this. I come over here and say, so I have a reference to each virus that I create keeps getting pushed onto this array. Now, what is the next step? We need to start dropping them down, which is sort of very simple. I'll tell you. Just going backwards on the array and you'll say virus. Any questions here? None, right? You just get access to a particular virus and you'll say virus.y plus equal to, can you tell me? Simple mathematics. So they should start dropping the objects now already. Who thinks it will work? I think it will work. Wow, look at that. There you go. So you already have stuff dropping at different velocities, but there is a small screw up here, right? Can you see that small dot? It gives the game. I can't hit that. Sometimes it would just happen to be the guy whom I hit the most. Right, so I want a certain hit area that I always need. This is just programming sanity, but what the hell? So I'm just gonna do here. Not the most intelligent program, but never mind, it just works. So that I always have a face to hit. Right? You can anyways do a random number, so it will be important. That's true. That's true. So in this particular case, considering the fact that I'm going the quick and dirty and want to win in 20 minutes more, this is the best I can do, yeah. So maintaining reference to the objects by yourself. There's one specific con with it that I even, yeah, especially when you're doing animation of thousands of objects. Memory leaks. Like even here, you basically have a leak. Viruses will, even the ones that drop off the thing. You know, when the viruses drop off, there are two things that I will do. Hopefully in this talk, one is when the height, when the y position of a virus crosses 500 pixels, I will knock him off the display object and I'll get the reference and knock him off the item. Oh, okay, awesome. Okay, yeah. So I will have to do that. So like I said, you don't have to do that. If you don't persist it separately, you just have to say if the elements, y is greater than 500, you'll simply say stage.removeChild, that. But the only problem here is sometimes the stage might have elements like my score, like background and things like that. Then my iteration will have to go through unnecessary children of the canvas, which at times can get complicated because right now it is like a straightforward hierarchy. There was no composites. And if you had more time, you would actually make another hierarchy. Correct, so I would build composites, right? This whole thing could be a composite and just working within a composite. So those are the stuff that we have to do. But here at least, I will clear it out, at least for the, to start with. And the point is very pertinent. If you don't maintain your equality between the array that you're creating as well as the stage that you have, A, you will have memory leaks, B, you're not working with the right objects anymore. Because what you think was the object in the past will never be the object because you've knocked it off the stage anyways. So good points to remember. Where am I in terms of time? Five minutes, that sucks. Hang on. So, see, but that five minutes does not count all this cross conversations that I've been having. So it's not five minutes, right? Nevermind. So the next step is to actually click the virus and make it die, right? So, I'm gonna code fast now. Just gonna call a method called kill virus. Takes an event and say virus is equal to event. You're putting pressure on me, man. Very simple, right? I click, I get the event of talking to the SNM property. JavaScript is beautiful. You can just randomly assign properties and not just add any objects. So I just add a property called a skill. Now, all I need to do is come here in this for loop and say if virus.is is killed, what should I do? I just increase the velocity of that so that every increment, it actually goes faster, which gives you the illusion of this thing falling down. Somebody give me the sound effect, man. I didn't get time. I got more or less where I wanted to. How, now I'm on the stretch time. How much more time do I have? I can take my own time. You know I'm in business right now, right? I got something working. Yeah, sure. The click is like pixel perfect? The clicker's pixel perfect, primarily because what ESLJ does is whenever you create a bitmap instance, it actually creates what is called a bounding box based on the number of pixels you're drawing into that particular area. So when you're creating a bitmap, so it actually has this imaginary bounding box which it believes the space between the colored pixels and the clear pixels. So if you're clicking within the bounding box, you'll get pixel perfect click. Now there's a catch over here. If you're using transparent PNGs which does not have, you know, which has got clear pixels, those clicks will not dispatch because clear pixels travel through to the canvas. So you'd use that for example to have custom hit areas and stuff like that. So basically if you wanted to collision detection for instance for this thing, you should probably depend upon the bounding boxes. So but typically what happens is it actually flattens it out to bitmap. So majority of times what you actually get is all colored pixels. You don't necessarily have situations where you have like, you know, pass through pixels and create by default when you're working. Unless you're using your own methodology to actually kind of create those elements which has got clear pixels in them. Create.js typically creates painted pixels. So you typically would get all wet pixels within a bounding box area. So your clicks should more or less be- I think we can add an image listener which will, you know, use the get image data and check for the- Yeah, so the only problem here is get image data would actually mean you're actually going and digging into the bitmap object and finding out what you need to do. You might not want to do that in reality. And yeah, so the hit area is generally pretty low. So if one object is overlapping on the other, only the top object gets a click at the moment. Because how are you registering it? You're registering it per instance. So if the depth of that instance is on top, it is not gonna pass. So that is not something that you have tried. So it is basically bubbling. If you're actually saying this thing actually bubbles all the way up and kind of you have to figure out who's behind it and track it as well. The framework in itself does not tell you what is behind. So when you see him in my code, I have no logic which tells who is behind, who and how many of them are on stage. So it is a pretty dumb piece of code that I've written. But in reality, if you're trying to do stuff like what you're mentioning, like collision detection, heat testing, like multiple event pass-throughs, we would have to code it for them. So just taking a step back, ECLJS is a lot about abstracting out what used to be code pixels into a more display object, what we used to call as a movie clip based programming model. Like it is like, you know, you have specific identifiable instances of shapes that you're adding to the canvas and be able to act on them, see. And that is one of the primary, you know, plus points I saw when I got started to it. But ECLJS itself is a monster. It does like really crazy things. You know, transforms, it can do like, you know, pixel blurs, it can do kind of pixel modifications and a hue saturation controls. It can literally do like, you know, pixel level mathematics to do crazy stuff. I will probably take like a two minutes extra to kind of show you a couple of demos that he has put up on the ECLJS page itself. It kind of tells you what more you can do with it. And this is probably the real lowest common denominator of what you can do with ECLJS. It sort of begins here. And the other extreme of what you can do with it is actually pretty crazy. You can really do mad stuff. So with the liberty of another three, four minutes, can I just, you know, I will, so let me, let me ask you this question. If all of us are kind of familiar with it, I will not quote it up, I'll just show it. How many of us are working with CSS Sprites? Okay, how many of us know what it is? All of us do. CSS Sprites, Sprite Sheets. Well, okay, so one feature which I really like about ECLJS is that it actually allows you to use Sprite Sheets to actually do animations within the context of Canvas. I think it's pretty cool. So what you can typically do is you have like a Sprite Sheet. You can animate that within the context of this. So for the people who do not know a Sprite Sheet, you go to like, let's say yahoo.com and right click on an image and say show image. It will, instead of showing a single image, it likely show up a big image with images placed one on the side of the other. So that is in real layman dump stupid terms, that's what a Sprite Sheet is. It's utility is not about animations. Utility is that kind of allows you to batch images into one and kind of ship them only once when you're hitting the server so that you don't have iterative server calls to bring your images which enhances the performance of your paid. But then when CSS3 came through and I didn't do that. I didn't do that. Yeah, so that's, so I mean it's a fairly known concept so I'm not gonna tell you what that is. So one good thing that Grant has done in ECLJS is that he has kind of figured out a way to incorporate Sprite Sheets to animate stuff within the run. So if you see my, the demo that I already cooked up, you can see that those respective objects animate. You see that there? So those are done using a Sprite Sheet implementation. But purely for want of time, I'm not gonna code that up. You should probably trust me that I know how to do it. No, they're not. So GIFs are about multiple frames at authoring time. So basically they have frame information when you actually create them. But canvas is a bitmap drawing surface. So what you draw into canvas is pixels. So what happens is when you draw a GIF into a canvas, the every second unto end frames get muted. Only the first frame gets drawn. So that is why it's not, and we're all in an unfashionable world if we actually say GIFs. This room is actually pretty kind. So you should. Certain other nefarious quarters you can do. If you had to do that, then you would have to take a GIF, write your own logic to extract the frames and then stick it together. Because for pixel drawing surfaces, only the first frame is drawn in the main is muted. And somebody in Brigadier told me GIFs are old school. And you look very unfashionable when you say GIFs. So that's the reason I generally try to, I generally try to give the impression that I'm always on the top end. Sorry, what's that? Cool. No, if GIFs are awesome, they're awesome. I mean, I'm not taking sides. I just said what I heard. I think we are missing web development with application development. Generally, we are using building websites and applications wherein more of the GIFs are there. But for such an application, we store so much totally canvas away. That's true, man. But I somehow still get worried with all those jumping monkeys, which are almost always GIFs. Today's sound very opinionated. This is my sprite sheet. So it's more or less a Flickr effect, right? Flickr book. Which one? Flickr book. Flickr book. Flickr book. Yeah. Do that. Yeah, that's how sprites work, yeah. So that's excited me how sprites work. So I'm not that good at creating these things, but luckily for me, I still own a copy of Flash Pro. Despite having less of a job from Adobe, I still have a copy of Flash Pro. So I just, I just... You want to strip that generates this. No, no, Flash Pro generally. You can actually create a tween animation using Flash Pro and say it's for us. You can't sprite off it. Yeah. Yeah, and I got pampered with certain stuff that Adobe puts forward, and this is one of them. And there are multiple spriting tools available. You don't necessarily have to... As a developer, which is the easier approach? Because when I saw the demo first, I assumed that there were three or four moving parts that you have code for each one. What are you saying that it's a sprite? Which one was easier for you? Since you have Flash experience, I'm guessing making something and just generating a sprite is faster. Generating a sprite with the right kind of tool. Like for example, using Flash Pro, generating a sprite is super easy because it's like one click. Like you actually... See, I'm sometimes hoping that, you know, I might never be able to draw the shape. This particular one I got my friend to draw it for me because it's a whole wide shape. And she just did a tween animation, like an classic tween, which is like... This thing just rotates. And I go to the library panel of Flash Pro and say export into sprite sheet. It just gave me that. So I think it's super awesome, but if you want more complex things, I think graphic designers have their way out in solving this. Other than that, I could have just... See, the other approach for doing this would have been, if it was just a spin. For the ones which are spinning, it's probably easy to just add the symbol and kind of increment the rotation property. But it does more than that. And if you see, this fellow does not rotate. He actually does something else. So when you have more detailing, sometimes you might have to work with sprite sheets. And I found... I'll just show you the code. Working with sprites is so easy in CrayJS. See, you just have to... See, I just cooked up this array. If you see there, there's an array called Sheets. I have multiple properties. I have an image reference. I have the Wittgenheide registration and registration by a number of frames. So I just have to create a sprite sheet object, which is, again, something that CrayJS provides. They can just look at the function. The load sprite sheets, I can just walk you through them. It's nothing. So you just create an image and pass a reference to a random image and then create a sprite sheet parameter property, which has got an image, the frames that you need to run with, and an animation that you need to do. So the animation here is... I'm calling it spin, but it is an animation that runs from frames 0 to a number of frames. So let's say the first image has 73 frames. It's going to run from 0 to 73. If the other one had 86, it's going to run from 0 to 86. And you can... And CrayJS abstracts out a method called go to and play. For anybody who came from the Flash world would remember that syntax go to and play is to kind of go back to a particular frame and play from there. So if you say go to and play spin, it's going to play from the 0th frame to 76th frame and then end up P2. So that is what has been done in this example. So if you see here, the code, everything that we wrote still remains the same, excepting here, see? Instead of saying why is there a new bitmap, you'll say new bitmap animation and pass a sprite sheet to it. And the remaining of your code sort of remains just as is. So that's pretty simple. And there are a couple of things that we need to see over here. See, one is what Sunil mentioned, like right now it is adding stuff and they're not getting cleared of your memory. So I'm not going to write that now, but always remember that if you're adding objects dynamically, you always want to clear them based on certain exit criteria. In this particular case, the exit is at crossing the Y boundary. In certain other cases, the exit could also be, and not just that, the exit could also be like a click. If instead of moving them down, you're actually popping it away or, so whatever it is, you need to know what your exit condition is and always clear out your display object area. If you are actually bombarding with a lot of content, then you're actually going to do another job. There's another concept that you want to apply in Canvas. How many of us know what is bitmap caching? How many of us know what caching is? Sometimes life is like that, like you know what caching is, sometimes you just have to extrapolate it for dumbness sake. It's not everything, but it is something. Bitmap caching, for instance, what Create.js does is, if you have the same sprite or same sort of bitmap that is getting added multiple times into your Canvas, Create.js has a way to actually cache those number of pixels and re-perfect it, instead of actually having to draw them again and again. So what happens is when you actually cache them, it actually gets put into the GPU and runs on GPU, which gives you really fast performance. He has a very, very nice demo on the Create.js site. I'll just quickly show you that. So this is the site. You guys can kind of go take a look at the Create.js. So if you look at this, can you see this is like, this is crazy, right? This is pretty similar to what I'm trying to do. There are random elements being added. And you can see it's running at 26 frames per second. So there's a small bit of checkbox that is put on top, right? Enable caching. So it runs at 47 frames per second. It's pretty cool. The only caveat, as he calls out is Safari 6, which apparently has a different way of treating this, but pretty much across everything, i.e. Firefox, all of them kind of do 47 or more. In certain cases, i.e. do a lot more than, the newer versions of i.e. is doing a lot more than Chrome or Firefox in certain scenarios. I think that is Indian exploring. See, what are you going to do, what are you going to do? The MS evangelist in the back is going to kick you out of this room. MS evangelist will not kick me out of this room. She'll be happier I'm saying this. No, no, no, like, like, yeah. Raj, you can buy me a beer later. Right, so, yeah, it's, and finally the most amazing things that most of us developers like and our companies don't is that this is free open source, available to use whatever way you like. See, most of us want to work for companies that pay you pretty high, but BRs just don't want to buy anything. That's the software engineer. Yeah, which is the way I am also, and I have had this dual life of wanting to work for a company which clearly wants to sell tools and make money to a company which is making you buy T-shirts. There's commercials at some point in time. So never mind, but this, let's not come with a commercial standpoint. It's free open source, pretty well supported, and it is pretty inactive development, and there are a lot of high-end sponsors there which is in the silhouette. I don't want to pimp those companies, so make what you know of those logos on top. Use a general knowledge. Those are logos that you know. One is Raj's company. One is my ex-company, right? So there are quite a few good sponsors for this project, so he is, Grant is gonna keep building good stuff on this library and you'll have fair liability. And along with ESLJS, this is another library. Somebody mentioned D3. D3 is a pretty cool library as well. It does a lot of SVG stuff in addition to Canvas. The other one that I sort of like. D3 is not necessarily for animation. D3 is not necessarily for animation. D3 is more with respect to do data visualization and kind of. For complete application, people generally use a combination of three and D3. So three is more for your 3D stuff, right? Something like that Mr. Doop's thing, you're right. Mr. Doop's thing. Yeah, so this is paper. It does little more mental things than, that it actually does path morphing and so on. So there's like some really cool demos over here. I'm just throwing this out for you guys. This is pretty cool. I really like the way it works on the browsers. It's pretty amazing. How's the performance of SVG and Canvas? Usually SVG performs poorly compared to Canvas. It's subjective, right? Where are you running the SVG on? It has a lot of error. You were spoiled by class, actually. In SVG, tracking clips or things out, it is very easy. Correct. Can I look at this? I've done a bunch of stuff on SVG as well. So I did a project to compare between SVG and Canvas. I'll just quickly show you that. Both had its own caveats. So SVG, I used a framework called RafaelJX. So it sort of obfuscated a lot of things that I did not want to know about working with SVG. The only thing that I predominantly found a challenge in SVG is actually working with complex paths and kind of animating paths and things like that, which is kind of a little easier to do in a more display object-based model. But in terms of click-through and performance and so on and so forth, I sort of found both. I'll let you make the judgment yourself. So I'll just throw up in my... So this was last year, Google put out their Zeitgeist charts. I don't know if you remember, last year they did a really good job of putting out like a map-based thingie, like a 3D map. But the year before that had some really unreasonable visualizations. So let me just try and see a little bit. This is the last thing that I'll run. So I tried to recreate that to try and understand what it means to sort of... So this is SVG. So this is done entirely using Rafaal.js and SVG. And it works for me with fair amount of reliability. So here. So all those objects that you see, those isometric projections and so on and so forth, it's all, this is all done using Rafaal.js and SVG. So it sort of worked really well. At the same time, this is all Canvas. See, this I did in Canvas primarily because this extrapolation was really, this interpolation was hard to do in Rafaal at that moment. I didn't know enough Rafaal to pull that off. So this was easy to do in Canvas. You can see those line charts sort of animates along with the movement. And your background animates, there's a bunch of things that is running one on top of the other and works pretty smoothly. So this was the other thing. So I mean, I don't think the performance battle is an incorrectly pitched one. It's largely about which runtime are you working on? See, if you are saying like an older Android browser where there's patchy SVG support, and if you're actually choosing SVG, you're probably in the wrong direction, so. Can you say that again, please? I've been image-intensive. Oh, really? Oh, that's not cool, yeah. Yeah, I found Canvas hard to use for printing an image. Canvas hard to do for? Canvas hard to use for printing an image. Probably, yeah. So yeah, that's a good standpoint, right? So he has a use case where he generally found SVG to be the better option to go. So I would not take slides. I think there are things that you can do with SVG really well. And I've got an opportunity to work on a lot of SVG plus-plus features when I was in Ruby. I think it's pretty cool. But it's largely depending upon your own use case and your own requirement and your own interest in terms of how you want to program with SVG. So one obvious thing that I really like about SVG is the fact that, of course, the vector aspect is one. See, the one thing which I really miss in CSS animations at the moment, unless somebody else says polyfill it or something, see, I don't necessarily have the ability to do sequential eventing. See, I don't know how when the first animation finished and I want to trigger second and I want to trigger third and I want to trigger fourth. This is something which I find really hard if I'm actually doing direct CSS animations, unless I'm putting a JavaScript shim on top and kind of figuring it out. But SVG actually allows you to do sequential parallel animations right in front of the support. It's still a fee, but if it really comes through, then that solves a lot of problems because it's inherently vector. You can actually do scaling, morphing, and whatnot, but you can actually do part morphing very easily. You have a tick morphing into a cross. It's like super duper simple to do if you're actually working with SVG. So typically stuff like morphing and all. So SVG definitely has its charm and value. It's universally applicable. It's every problem that canvas can solve and solve with SVG. At this moment, I don't want to comment. And that definitely gets into a space where we are taking sides and we're actually going through this. Now, the moment you get into particle systems or anywhere which is not a vector specifically, it's not a vector. Yeah, and one thing which I, which again, I like about canvas is its ability to actually crunch pixels, like if I'm actually doing, I don't know if I'm actually building. I mean, I am interested to see how SVG solved your huge saturation problems, how it allowed you to do this blurs, and how it allowed you to do, you know, SSB corrections, SSL, I don't know how you managed to do them. I find them very easy to do with canvas. So I am unsure as to how SVG would help you do some of that. I have gaps in understanding. I'm not saying SVG can't do it. I'm probably not very sure. SVG has filters, and then there's the Adobe filter spec also for CSS, which should work on that. Which is correct, which is correct. So what happens is the Adobe's, the CSS filters that they're talking about, the CSS filter lab, so that is the other one, right? So I mean, one of the other experiments, right, it's talking about that, not necessarily trying to pimp my own work, but this is interesting. If you guys are interested to take this and kind of contribute to this, I'll be very happy that if somebody can. So it is on my GitHub. This is a plugin that I am building for folks who are working with JavaScript and who don't necessarily care about CSS. So this is all CSS filters, and you can actually work them through jQuery. So you can actually say stuff like, you rotate this. Yeah, so it is just jQuery. It's like a very thin library. It's about 4KB library that is there. It's just pretty rudimentary right now, but if anybody's interested in kind of taking this forward, I have stopped building this. I don't have time to spend on this one. You can even do like, you know, stacked effects, which is really hard to otherwise cook up using CSS. So you have hue rotate plus CPR. You can change stuff like this and you can even do, so this is one, you can do stuff like this. Now you can do a hue rotate animation. It rotates it and fires a complaint. You can do stuff like this and you can even do stacked. So you can do a CPR plus VR. And it actually follows the jQuery's syntax itself. It's calling the direct jQuery.animator. It's actually an extension on top of that. So basically you can do stuff like this, but CSS filters in itself is very, very speccy at the moment. Now there's stuff that you can do, there's stuff that you can do. So basically the question is about just blur, sand, you know, CPRs and race caves and all that, point taken. But how are you gonna do stuff like this? I still don't know. So I mean this is, it has got that whole HDR-ish thing that's happening. It actually is using a custom CSS filter which is separate on top of a DAV and then there's an alpha transpose put on top and things like that. So I don't, that's what I said. So I don't know. Probably you can crack this, but in Canvas I already know how I'm doing this. So with SVG I do not know how I'm doing this. So that's the reason why I still probably, it's interesting to point out. And I think that is the point. So probably, you know, maybe we'll be happy to hear you out in terms of how you went about that so that we can get a benefit from that. Now have you already spoken about that here? Have you already spoken about your work here, Mavi? You interesting to see. I significantly overshot, so I just want to stop here. I mean, I will be happy to take questions offline. I don't want to hijack the remaining proceedings. I'm right here. So find me, speak to me and thank you so much. And that's me. Harish, you're our questioner. Thanks so much. So we're going to take a quick five minute break. In case you have to go to the bathroom and then we'll carry on with the second round of my flash talks. Thank you guys. Is there a space? Oh, no, no, it's okay, it's okay. No, no, no, it's completely cool. I thought if there was time, just a little bit. If you have speakers, then yeah, of course there will be. Next time I'll have something to do with it. Yeah, I'll do it.