 All right, good afternoon, guys. How are you doing? That didn't sound good at all. Was the lunch good? OK, guys, so here's the deal, right? So in every conference, there is one slot before lunch and one slot after lunch. And in my experience with JSFOO, as well as with Haskell givens, I've always gotten the slot before lunch or after lunch. The deal with before lunch is you hate me anyways. After lunch, you don't care. So it's a happy situation to be in. I'm very excited to be here. So I have one hour session here. So I have about 45 minutes of talking, plus a five minute, 10 minute Q&A, and then a switch over time. So in theory, I have one hour with you guys. And to make things interesting, I have a code jam plan for you guys. I'm writing code in this entire talk. I don't have a lot of things to show otherwise. So a bunch of requests to you guys. I know post lunch sessions are hard to concentrate. So feel free to yawn, feel free to stretch, feel free to check your Facebook. But also please try to pay some attention, because it's nice to speak to an audience that is attentive. And please do interrupt to ask questions. I'm happy to take questions in the process of doing this session, even though if I'm not able to complete the whole stuff that I'm planned out for. The third one is don't use any violence at me. The session is not going anywhere. Don't throw things at me. I'm a nice guy, so don't do that. And finally, I would prefer if people could occupy seats in the front, because I'm going to write code. I will have to obscenely pull up my fonts to make you guys see it. If you guys are not willing to move forward, I'll do that anyways. But if you guys actually would come a couple of steps forward and occupy some seats here, I can work with some reasonable font sizes, which is easier for me to type, but no pressure. And I'm not going to judge you guys if you are in the front and not paying attention. I'm cool with that. OK, as you guys settle down with very quick introduction, my name is Harish Sivaramakrishnan. Harish has to be shot. That's my Twitter ID at Hsivaram. So that is the first and most pertinent information about me. Big fan of T. Rajendra. Any fans of T. Rajendra can clap. I believe 70mm was invented for him, because they couldn't fit him in a 35mm screen. And just to get your attention, I'm a developer evangelist at Adobe. That would mean I con people to believe that I'm intelligent and go and speak at conferences. I'm an overall nice guy. I also play music in my free time with my band called Agam. So that is the Twitter ID of my band. And just repeating, a big T. Rajendra fan, a big Vijaykanth fan. I also think Saif Ali Khan and Soha Ali Khan are one of the same. When Saif Ali Khan is busy working, Soha Ali Khan never acts. When Saif is out of movies, Soha Ali Khan acts. I can only be explained one way. It's the same damn guy. Irrelevant information, ain't it? So never mind. And I'm very happy to say that that ends my slides. So slides had to do this thing. Had to do this thing. Otherwise it's really hard to even say anything to you guys. So today, this talk is about programming for Canvas with a library that I'm trying to present today called Create.js. Before I start out with my talk, I just want to check how many of you are writing code on Canvas as of today, building anything in Canvas for people? No problem. You're at the right place. If 10 of you put up like, I have been working on Canvas for six years, get out. What are you doing in this talk? So good. You're at the right place. How many of us have heard about Create.js as a framework? Just heard about it. Excellent. Good. That's really great. How many of us have even done, oh, I'm going to say the F word, yeah? How many of us have done any flash programming in the past? The big F word in the open community. And I used to evangelize flash before I started this job. Never mind. Nice switch technologies. Because I have to pay my bills. Very passionate guy. Never mind. Right. So here's what we're going to do. So the way I plan this session, I'm not going to run slides about what Create.js is or teach you in terms of how the Create.js APIs work. But I thought that we could actually build something together. In essence, I will be building it and you'll be following me in any which way. You might not be able to code along with me. But it'll be nice to see how stuff works on Create.js, kind of learn how to program for Canvas. It's a basic to intermediate sort of exercise that we are doing. It's not high level geek out. It's not too basic either. So anybody who has done some JavaScript programming and understand how typical graphics programming work would be able to appreciate what's happening. And I will try to speak as slow as possible and try to pause at every single instance of my programming. But here is a simple request I have. I will not be able to stop inordinately till I can figure out everybody has figured it because I have just 40 minutes and I'm already losing time. So I'm going to run with it. If you guys don't get any part, stay with it. And if there's a pertinent question, ask it. Otherwise, come back and see me at the end of the stock. And my code will be up on GitHub at the end of my session. So if you guys want to go and take a look at what we are doing, we will be able to do that. Good enough for all of us? Can I hear like a loud yes from the crowd? Because then I know you're not sleeping. Yes? Somebody said no, that's fine as well. So I'll just show you the end product that we will try to get today. At the end of 40 minutes, this is what we'll end up with. So like a bunch of viruses dropping from top, they are viruses, by the way. This is my interpretation of a virus. And if you click them, you score. I'm doing good. And I won because I made 100. That also will help us to watch a video. Greedy fellows in YouTube, they're throwing an ad over there, but never mind. So that is what we're going to do. So this is actually a functional example of a create.js game. You can interact on it. You can score. You can actually program for it. And there's a bunch of things happening. So this is what we'll program. It's fairly simple stuff. But we will write it ground up. No lines of code will be pre-coded. I'm going to code that in front of you guys from ground up. And at the end of 40 minutes, we should have this game running. With me on that? Brilliant. So to set things right, I have this much pre-written. And this is not JavaScript. This is only my boilerplate setup. If I have to code this, you guys really hate me. Or you just want to prove me wrong. Nobody writes this stuff. Some editor generates that for you. So I'm going to start with this. I have a Google web font embedded. I have the create.js is preload.js library, easel.js library, and sound.js library to be already pre-linked. Now what are these libraries? This talk is not for that. Just go to create.js.com and look for yourself in terms of what these libraries do. I'm not going to take each library and name it. OK, this is for that. We'll learn that as we go. So we're going to get started writing code. All right. Oh, man. I have no idea how you do that. Oh, good. See, preferences. Now what? Color scheme. Mac classic will be good? Guys, come on, man. I'm losing. All right, let's start. Anybody knows what this is? Correct. What conference are we in? Can the guys see the text at the back? Can you read it? Fair enough. So the things that are trivial, I'm not going to tell you what I'm doing. If you don't understand this, go learn it. If you don't know what window on loaders, then there's a serious problem. If I run this, what happens? It runs and does what there. So we're just checking if you're set up well. OK, I'm going to dump it down because I want to make sure that it runs. So all right, why didn't that work? Can somebody tell me why that didn't work? How to purchase what? Hang on, guys. Is some JavaScript geeks help me, man, here? What's going wrong here? I think so. It's the same thing there. I'm having a bit of a Murphy attack. I don't care. I already coded this all the way up. I'm going to delete it. I'm going to delete this whole damn thing. Let's go. Hang on. We'll do this together. I have there to write code all on here, like function. Ah, fine. We're on. Screw it. I'm not going to go back. OK, we're going to do a bunch of things right now. So basically, the Create.js library does the following. Anybody who has worked on any sort of display object in the past, Canvas is nothing but a rectangular surface in your browser, which allows you to drop pixels into it. Different from the DOM. When you work with the DOM, you have tags, and those tags are actually interpreted as you run your browser. While Canvas is nothing but a rectangular area on your browser, to which you actually drop pixels into. And this way of actually doing graphics is called the imperative way of doing graphics. The other one is declarative, where you actually work with things like SVG, where you have tags for your graphic elements, and you actually put them together, and it actually renders on your page. So to start with, we need to get working with the Canvas. So for that, if you see down here, there is a Canvas that I have already created, which is of ID game and width of 800 pixels and 500 pixels. So it is a rectangle of size 800 by 500. And whatever programming that we're going to do today on Canvas is going to act on this Canvas. Any questions? No questions. So I'm just going to create a variable called game, which is just going to go hold a reference to the Canvas, which would be, it just picks that up and assigns to a variable. So this is the reference to the Canvas. Now, when you're working with any sort of Canvas-based operations, the biggest challenge you have is you have to work with the pixels directly. And you have to paint the pixels by getting the context of the Canvas. That's where a library like Create.js comes and gives you what we call a display object-based way of doing things. So you have a stage. Then you can add things onto the stage. Anybody knows what a stage is? Flash guys? You know what a stage is, right? A stage is nothing but a rectangular region where you can add logical elements to it, like images or text or shapes or things like that. Instead of drawing them, you actually create something which is more typed as a shape or an image and then add to it. So stage is something that Create.js brings to table as a nice goodie. So we will just declare a variable called stage. And say, fair enough. So you create a stage and pass the Canvas to that stage. From here after, every drawing that we will do will be drawn onto the stage. So just circling back, we are understanding two things here. We are drawing onto the Canvas. If you are directly working with the Canvas, you are drawing pixels into it. You have to go pixel by pixel to draw by getting the context. But with Create.js, the framework that we are looking at, we get a nice little abstraction on top of the Canvas called stage. And that stage will now allow you to do really nice things. For example, if you want to add an image to the stage, you will simply say, stage.addchildimage. If you want to add a text, you will say, stage.addchildtext. If you have done Canvas, it is much harder to do that without a framework in. And again, some of this is actually about ramping you up into how to build this using Create.js. The basics of Create.js is something that you can go back and read, because this is not a Create.js tutorial. It's actually about using Create.js. So in case we are wondering how this works, you can go back and check that. Who knows what request animation frame is? One person. Who knows what set timeout is? What does that do? Anybody? What does that interval do? It's a timer. So basically, for doing any animations, you will have to rely on some sort of time. And every instance in time, you are doing something. All of us agree that's how you do animations. So in order to do that, there has to be a mechanism where you get access to when the screen refreshes or the screen repaints. Correct? Fair thing to say? So when you're using Create.js, Create.js does that for you by allowing you to access a variable right within called ticker. Now who knows what frames per second is? Say it, what is that? Save me some time. How many number of frames per second? How many times does that enter? So I'm greedy here. I'm going to say set my frames per second to 60, which means the game is going to run at 60 frames per second. Now I'm going to say, so who controls this? What does this do? You're attaching that listener to the window object. And every time there's a refresh, every time there's an enter frame is triggered, you will actually get a method called tick. So every time the ticker runs, it will actually hand up the control to a function called tick. See, this is not something which I am inventing or programming. This is the way you bootstrap your Create.js project. So whatever I've done right now, these are mandatory steps. You can take a moment to check that. You first get an access to the instance of the canvas that you've created, then create an instance of stage and pass the canvas, set your frames per second, and then add a listener to the window object, and then write a tick method. Next time onwards when you're actually doing this, you would have actually pre-done this. I just did that because we need to know. This is something which is common to all Create.js projects, not just specific to this demo that we're building. So they would be doing these steps every single time that you're doing Create.js projects. So this is the basic setup. You can actually do far more customizations to this. So let us just check. I'm just checking the ticker is running fine. My console was not working earlier. I hope it changes now. Yeah, it is ticking. See that? It's a running timer. The number keeps increasing. It's 350, 370, so it keeps going. So we are set up. Now we are ready to start programming for our game. Now let us go back to the game itself. So what do you see here? There are animated viruses falling down from top. But you also see that it's got a slight depth perception. There are things that are falling a little behind. The smaller ones are falling a little behind. And the bigger ones are falling towards you. So it is nothing but a set of things that is falling down. Then you tap on them. It swoops down, and you get 10 points. That is the game. So the things to notice here is there is the things that you see, the objects themselves are animating. You see that they all have individual animations. Then the individual objects are also animating. Then you have an animation that you're doing on tap or on click of them. So there are three separate things that we are doing here. That's why I chose the simplistic demo. But it encompasses all the three things that we are trying to do in programmatic animations. So we will get started by constructing this game. So as you see, there are random number of viruses falling down from top. So let us get started by creating a random number. What will this return? A number between 0 and 0 to 1. So now if I say at every tick create a virus, how many viruses will you have? None. You will have crazy millions of them. Because every tick you will actually call add one virus, you will have like a million viruses within a span of like one minute. Because it's ticking at a 60 frame per second, your screen will be filled with viruses. So you have to put some kind of a condition where only if the number ranges between a value, create as many viruses. For example, if you just run it through it, you will get the whole screen filled out. Anybody has a question about that? You saw a ticker running, right? Before I could think there was 320. Can you pop 320 viruses in one second? You cannot. Your screen will be filled. So that is why we start by putting a simple edge condition. Or rather a check condition where I'm saying if r is greater than 0.4 and r is less than 0.45. Fair enough condition, right? Only in such cases, we will start adding viruses to our screen. Anybody has any questions on this? Fair enough, right? Only if the number falls in a particular range, we will start creating the viruses. So to create a virus, we will actually create a variable which holds the virus and a variable which an array which holds viruses. So that we need to deal with them, fair enough. So now, so it is running at 60 frames per second. So yes, it has to be a function named tick per creator. Just create an image object and set the source to bluevirus.png. I will show you what a blue virus looks like. Hang on. So I'm just setting that to this. Virus is equal to new bitmap and pass the image to it. So what does this do? So you create an image, set the source property to a file that is sitting in your file system, which you can read, and then create an instance of a bitmap. Because what you're going to add? Eventually, when we speak pixels, pixels are bitmaps, right? So you're adding a bitmap into the canvas which is created. Now stepping back, where is the canvas encompassed in stage? And stage has a reference to canvas by querying that element and passing it to stage. So stepping back, we have an instance of the stage right now which actually points to the canvas. And then we created an image. And then we created a bitmap. And you can do something like this right now. Stage.agchild, right? So what will this do? This will add that one virus at a time when the edge condition is met, when the if condition is met, it will add a virus in stage, correct? Any doubts on that? So that's my phone, right? So every time you create something, you have to call a stage.update to eventually paint that on your screen. See, whatever you're doing, the ticker will keep running, but it will not defer any of your painting. This is something which typically people working with graphics would know, because you almost always do your calculation. Finally, defer your painting at a logical point. If you don't have to paint, you don't paint at all. That actually saves you performance. So if you call stage.update, whatever you are telling, add this onto the canvas. That will be impacted. Again, this is a create.js feature, not a canvas feature. So when you're using create.js, always remember to call a stage.update after you've done your graphics bits. And it will actually add that virus on your screen. Let us now see if that is working. I'm at three, right? Now what is happening is every time the condition is met, it is adding one virus. But right now, it is the same size. And it is going to stack one on top of the other, correct? So now what we need to do is in our game, the idea is simple. You have viruses of different sizes, and randomly appearing on screen, and then they are dropping down. The first step right now is to create viruses of different sizes. So let us go here and create a variable called scale and create a random number. But the challenge of a random number is the value could be even 0.1. So we don't want something to be that small that you cannot even hit it. So you're going to do, if scale is less than 0.4, fair enough. So you actually create something. You actually have a control on how small it can be. So you'll be actually able to act on that. And then you will do virus.scalex is equal to scale. Similarly, fair. Any questions on this? None. Fine, they're still stacking one on top of the other. What is our next step? They have to appear at random positions. Fair thing to say. So anybody's guess, making them appear at random position is changing their x and y properties. So let us go here and say y can always be 10, because it's dropping from top to bottom. Or you can change that. I'm going to say they'll always appear from the 10th pixel from top. But we're going to work with the x position. Fair enough. Always randomize, because we're doing, what do we do this? Matter of random. The width is 800. So you have to somehow contain that within this. Virus, it's 256 pixel wide image. So I'm just multiplying it by a value and still keeping it within the bounds of. This can be any damn calculation. Don't pay too much attention to this. But I'm just saying, create a random position and throw your x that way. So when I run this, the x should start resetting itself. Now what is the next step? Somebody tell me. Beautiful point. We'll do that. We need to get the old version off. Somebody said the Kiran said that. So now we have to make them fall down. So for falling down, they need to have a certain velocity, because everything cannot be falling at the same rate. Then the game sort of starts looking weird. They'll all be dropping together. 10 of them will get added, and they'll drop together. But what we need to do is, do you have to follow? Because we have a question? Sure. Shoot questions at any time. Oh, this is going crazy. So let us do that. Let's create a variable called. This will actually create a number higher than 1, for sure. And just multiply it by some value. Just to make it a little dramatic. So the random number is always multiplied by some parameter. So you actually get variable velocity values. And set a property called, that's fine, no? So now what we have? We have a virus. We have positioned it. We have scaled it. We also have a velocity assigned to it. Now the next job is to make them fall down. So to make them fall down, we need to actually iterate through them. To iterate through them, I'm just going to actually save them all at this array. Our age-old strategy of persisting what we are creating. So we have an array called viruses. And I'm pushing each virus that I'm creating into it. Fair enough? Fair enough? Guys, it's always awesome to speak to somebody who is responding. Otherwise, it's terrible. If you stand over here, you would know that. So if you actually hate me, also say no, or shut up, or say something, then I would know that I'm actually speaking to real people. Otherwise, it's not nice. It's really not nice. So I have an array, right? I'm just iterating to that array backwards. And I would say, fair thing to say? Thank you. Fair thing to say? Should work? Should absolutely work. Or the machine is smoking the wrong thing. Right? Your object's falling already. And how many lines of code do we have? Hardly any. About 20, 30 lines of code. I have terrible amounts of line breaks and empty lines in my code. So we already got a simple setup. Like, the first level of the game is set up. Like, you could change this, right? First, there are only 10 dropping. The second level, you can have 50 dropping. The third time, you can actually change the sizes. But your first level of the game is set up. Now, what is the next step? When you click it, it should fall down and score your point. So how do we do that? So we will come here and say, attach a click event. Listen to a click event and call a method called kill it. So we come here and create a function. What should we do here? We need to accept the event. This means somebody has hit the virus, right? That's when he comes over here. So we will simply do this. I created a dynamic property called mustkill and assigned it to true. And I will come here and assign the same property. Now, when mustkill is true, what should happen? It should fall down in a more dramatic way, which in mathematics is super simple. So you will do something like this. Fine. You just increase the velocity of that particular virus. 10 minutes left. Brilliant. Let's run this. I don't play too well. It works. But this is not the demo I showed you. This is like a static image that we are dropping. In my demo, there were multiple virus characters and they were randomly appearing and dropping. So we will just see, now I'm under pressure. I have 10 minutes. So I'm going to run quickly. In 10 minutes, I'm going to finish this. Who has heard about sprite sheets here? Who has used them? Hands are going. Is he going to ask me a question? Have I used sprite sheets? I'm not going to ask you anything. I'm just trying to. So basically, if you know how sprite sheets work, you could leverage the use of sprite sheets in an example like this. So for the people who do not know what a sprite sheet is, sprite sheet is nothing but a sequence of images that's generated from an animation. For example, if the animation is, you create four images that look like that. And it runs in a sequence. That's what a sprite sheet is. So typically, when you see a virus rotating or something which is like flying, you can actually have a sequence of images and then progressively move them just the way how your paper comics used to work. The notebook comics have you seen? Like when you actually move them, you actually draw them at separate positions. When you actually play them together, it sort of gives an illusion of movement. So it's pretty similar to that. So we are going to actually change these images to a sprite sheet, which will actually make this game look a little more robust and have those animations going for it. So for that, check. Let's come here. Guys, before somebody says I'm cheating, I'm not. This is just an array that I'm copying and pasting before somebody says that. So it is a bunch of sprite sheets that I've created, a blue dot PNG, green dot PNG, orange and purple. Those are respective sprite sheets. They have the following properties. They have a width. They have a height, a registration, X and registration, Y point. Who knows what a registration point is? Yeah, it's like an image if you have a rectangular image, whether it is on the top corner of the image or whether it's in the center of the image, where your image is registered. So it has a registration point. And I have an auxiliary property called the number of frames that sprite sheet has. So to finish the animation, how many pictures you need? See, for example, that one virus would require 83 picture sequences. The other one will require only 42. Something else will require only nine. You see what I'm trying to say? So that information is also something that I have persisted. That's all. So now, let's come here and let's comment out this section. We're not going to use that image anymore. Instead, we're going to start using a sprite sheet. So let's make a method. So we want to create, again, I'm using a lot of random things because this example is about creating random things. So I'll just create an index, which is, don't rack your brain, I'm just trying to generate a random number between 0 and 3. So I'll get it running through the loop. So this is not the important part. So what is important is, we will create an image and a reference to a sprite sheet, two variables. I'm going to work quickly. So let's say, create an image and let's keep a variable called sheet, which is, so sheets is an array. Sheets of index will give you that particular element in the array. No questions, right? So create an image and say, can you tell me what? Sheet dot source. Why? Because that's how it is kept. Fine. No questions. Now, fine. Let's create an object. In this object, we will pass all the information that is needed for the sprite sheet to work. The first one is a property called images, which will accept an array. But in this particular case, we are only loading one sprite sheet at a time. So that would be correct. Then you have the frames, which is, again, an object which has got width, height, registration x, registration y. That's fine. That's fine. Don't worry about that code ending. This is correct. So don't worry. And put a comma. And finally, something called animations, which is, again, an object, which I'll say spin because you're spinning. Five minutes left. Sure. I'll be done. Don't worry. Spin, which is an array, starts from zero, goes all the way up to the length of the particular element. I have defined that in the object. And give it the same name. Let us just look at this. This is syntax, but many of you have not worked with this. I'm just spending a bunch of minutes. So a sprite sheet object in createJS requires this object to be passed to it, which has got the following properties, the images that you're using for it, the frames information, and any animation that you're going to specify. The animation is nothing. But now I'm saying, whenever you are animating, animate from my 0th frame to the end of the frame. So let's say we have 10 frames. Play 0 first, 1 next, 2 then, up to n, so that you actually see the animation sequence. So this is the information that you will have to pass. So finally, let us come down here and say sprite sheet new. Again, a class from createJS and pass. Pass what? Sprite sheet verms. Now let's come here. It's pretty similar. We'll come here and say virus is equal to new. Instead of bitmap, we'll say bitmap animation. And fair enough, instead of creating a bitmap, you create an instance of bitmap animation and pass the sprite sheet instance that we created over here with all these properties. And write this one small piece of code. Flash guys would already know this API. Goto and play came from Flash 4. So it is sort of retaining that convention. But right now in JavaScript, what did we name it? Spin. Correct. So now, if all is well and all is good, we should start seeing what we saw in my example. Let's see. And they all work the same way, right? Nothing has changed. You can still pop them. Easy? Very. This is not a real example, but it is extremely simple. The reason why I come and evangelize, create JS in a big way for canvases, because a small demo like this shows the power of what is possible. So you can do insane things with this. It's just a simple example. I had to bring this propaganda to you, right? Now in 40 minutes, what can you do? I do believe, in 40 minutes, maybe we actually got something working. It is not smoke and mirror. I actually wrote that code. It actually works. And you can actually get somebody to manically click that. There are a lot of jobless people. Throw this demo, and people will click it. They'll keep clicking it, and especially throw random videos of Rajnegan dancing or something. It's going to get even better. So see, no game is useless. See, every game has its merit. So in 40 minutes, right? Yeah. Roughly about 45 minutes with all the yacking I did in that initial context setting. So we got that. And the beauty is I still have time to now just do a quick look back in terms of what we try to do, what we learned today. We didn't learn a whole lot. And no bullshitting. Nobody learns anything in 40 minutes. In my whole life, I've never learned anything in 40 minutes. You only get to see what is possible. If somebody can learn something in 40 minutes, I'll be really glad. I would like to meet that person and take an autograph. Let's just look back to the code. We started with what? Set up a body, set up a window on load, set up our create.js, get a reference to the canvas, create an instance of stage, pass the canvas to it, set up your frames to second, and set up a ticker, which will actually fire a method called tick every time the frames, the enter frame happens. And you write your code in it. Question? No. No. Why do you want to pass any parameters? At the moment, as I understand, tick does not accept any parameters. But you can actually defer a tick to call another method, and then you can read properties and stuff like that. So at the moment, the question was, can't tick accept any parameters? Let me step back. You know, if you're OK with it, let us. No, you can't. What am I saying? No, you can't. But sorry, I haven't tried it, to be honest. If you eventually found out that you can actually accept a parameter on tick, correct me. I'll be glad to fix that in my next talk and also apologize to the audience. I haven't tried it. Yeah. It's an internal function, unless you're actually messing with it. You're actually writing an override on ESL.js tick method, you'll be able to do that. But the canned method will not allow you to do that. So if you're actually writing an override, you'll be able to. Of course, anything is overriding. It's open source. Take it and write your implementation. So all that is possible. So I'm talking about what is sitting there. But good point. Thank you so much. Just one quick question. So what you did there was you just changed the y value. You didn't actually have to go ahead and clear out the canvas and redraw it again. Honestly speaking, I'm going to do that. Kiran actually raised that point. So I mean, I'm so sorry. I'll just answer your question with my code. So you need to do this. I know my canvas is 500 pixels large. I have to do this. If you don't do this, your program is going to crash in the next 10 minutes. Yeah, but that's OK. I mean, that's a separate problem. So in that case, you'll run out of memory. That's fine. But here what you're doing is you're just writing a new y value. So I'm guessing that create.js is taking care of ensuring that it redraws the frame. Oh, it does. Create.js does that for you. Yes. So it actually takes care of it, figures out all the objects that are there on screen, figures out their new position that you have mentioned after the stage.update happens, and figures out how to redraw. Yes, it does that. It does that, yes. See, animation is something that we are doing. Create.js, all it does is it actually does the following. It gives you a display object to work with, the stage, where you can call add child, remove child, or actually do properties like scale x, scale y. The real animation, as you saw, was done by us. We were actually changing the property of the y property of the element. And every time a tick happens, we'll check what the y property is, and it actually animates it down. That's all create.js does. It only does the repainting of your pixels. Now, wherever your y value right now is repainting. His question is that it has to internally figure out where I was previously, clear that out, and repaint it back. So does create.js do that was the question? I have just a quick question. Sure, sure. That function tick, whatever we defined there, that has a, I mean, it's a handler for ticker. That is just because of the window object we pass to ticker or something? Correct, that's because when working with create.js, you can pass a multitude of things to that ticker object. So if you're actually working directly on the browser, like the way we did, we're actually working on the refresh rate of the browser. Tomorrow you have a secondary stage. I'm giving you an example. You have one canvas, you have another canvas, and you want to take the refresh rate of the first canvas and then pass it on to the second one. You can say ticker.addListenerStage, or stage one, or stage two, you can do all of that. So right now we were working with the core, top level window, that's where we passed the window. But good question, thank you for asking. More questions? 180 for two? No. So I mean, you can write that law. I'm not going to do that. I'm going to take questions. But you know how to write this score, right? You actually easily hit that. Just say update score and pass a value. I'm not going to do that. Yeah, I know I failed, but I'm not going to do that. Sure. Sure. The question is, how does it run across browsers? And the second question is, how is the performance? I'll ask the first one. So if your browser supports canvas, you are sorted. If any browser that supports the canvas element, canvas is 2D context. Like the 3D context is still coming. Anything that supports canvas is 2D context, you're on. It'll just work. In terms of performance, I would be afraid using this for Android. At the moment, I have not seen a lot of great performance Android does pretty well on my iOS device. But it also largely depends upon what you're doing with canvas in general. I don't think ExcelJS or CreateJS adds any additional performance overhead. I was speaking to Grant Skinner, the guy who wrote this in the US last time I was there. He was positive that it actually works a lot more optimized and nicer than somebody hacking this all in canvas. But I would actually leave it to be a subjective question. It depends upon what you're doing. If there are a million elements that are getting added and you're actually adding transforms to it, I don't know. Performance is a very subjective question. But if you're getting good canvas performance, CreateJS is not going to make it any worse. It's just going to retain its status score, maybe perform better. Yes, if you actually reduce the frame per second, you'll actually see the patchiness. So basically, something doesn't run at 60 frames per second. For instance, if your machine is not capable of running, you have to handle that. So you typically do that. So whenever something is happening, you tend to bump up your frames per second. When there's an idling time, it is required that you actually bring your frames per second and make it idle. Like, that's routine for anything that involves actually strong repainting of the screen. So I think that logic works here as well. The question was, what if my browser is not able to take this heavy 60 frames per second order to actually repaint with my browser crash? It will. So you have to figure that out in terms of what you're doing. Any other questions? You want to see the sprite? Sure. Sorry. That's another one. Sorry. Too small for you? Better? That was the green colored virus. I'll show you the other one as well. That's the other one. What was the question? Which tool did I use to create the sprite? Flash professionals. Flash professionals. Like it or not, that is the goddamn best tool available out there to create sprite sheets at the moment. There is actually a beautiful Create.js Flash workflow, where you can actually work with Flash movie clips directly in Create.js. The last time I was at a JS conference, and I had the mistake of opening Flash Pro, and there was like a barrage of tweets that actually said, oh, the Adobe guy has started pimping the F again. I have no internet. That's the reason why there's no flash professional open. I created them, kept the PNGs and came. But I still would strongly believe that if you have Flash Pro installed, and nobody prevents you from using that for something useful. Speaking of web standards, but use the tool if it helps you. And don't quote me on a tweet and make my life difficult. You are free to not use it. I'm not going to judge you. Any other questions? Yes? Why don't I use GIFs? Who's using GIFs anymore? See, you could. I'm not because sprite sheets are the order. Animated GIFs are sort of old school for me. I think there's merits of actually using sprite sheets. You can do a lot more things. You can actually change. See, GIFs suddenly animate one way. See, what if I had to reverse this? Instead of the animation playing from, I want one thing. See, right now, I want this animation to stop here. And when I click a button, I want it to work. Can you do that with a GIF? You cannot do that. So that's, yeah. You will know it is a GIF. Is that a good thing? So you use the GIF. Yeah, there was a question coming from me. So here. So well, I was a big fan of Flash before. So am I. Even today? Yeah. So one of the things what I really love about Flash is the vector animations. The quality is not reduced. So since this canvas is a bitmap one, but is there any way we can deal with vector objects or? Lovely question. Lovely question. So his question is, I want vector-like clarity, but canvas makes it sort of rasterized. So the beauty is the framework that we are covering today, Create.js that Grant has written. So Grant has found out a way to overlay SVG as well as DIV elements on top of a canvas, but still get them to work within the stage context. So in a direct web standards world, where you're not speaking frameworks at all, you're working with just web standards, what you're asking is not possible. But if you're looking at Create.js as a framework, some engineer has figured out a way to do that. But his question was, yeah, I told the question. So the answer is, as of today, by the spec of canvas, the way canvas works today, what you told is not possible. But there are frameworks that's enabling you to do that. So you can actually do SVG overlays on top, or DIV overlays, like in a DOM overlays on top of canvas using Create.js and still kind of work with your stage context. So you should actually go and look at that. Is there any animation, some kind of framework for SVGs? So SVG, I mean, you should actually look at D3.js, or maybe Rafale.js. Those are the ones that I use. I'm a big fan of D3 myself. You can actually do SVG animations programmatically using either Rafale or D3. There are a bunch of others. Like there's something called Paper.js, which does SVG as well as canvas. That's something worth looking at as well. I saw a hand go up and back. Yes, sir. CSS3 animations act on top of DOM elements. So unless you are transforming the canvas by itself, you will not be able to apply that to individual elements on top of this. So yeah.