 Our next speaker is Ivan Smurzansky. It took me like three years to be able to say his name. And you'll figure that everybody prefers to call him Flaki, no wonder. He's one of the most ex-speakers, and he travels around the world with this little puppy called Bella, which has its own Twitter account, sorry. And one of the challenges that he takes on is to travel in most of the only remote places and try to work from there, like, I don't know, maybe a hurry room, catch him soon. So I invite you all to listen to Ishtvan, aka Flaki. Hey, how are you? How's it going? It's just been good. Yes, welcome. And let me just switch to some slides. I took this photo just the other night, because I was walking around. How many of you know this figure? I don't know if it has any, like, Brussels-bound connotations. Please tell me about that on Twitter or something. But who knows the origin of this thing? Where are you from? Anybody? Just shout it out. Space invaders, right, exactly. So we're going to be doing some space invading. I'm going to be invading your spaces but not your personal spaces, because we have a code of conduct. What other spaces can I invade? JavaScript. Who knows about JavaScript here? Who doesn't know about JavaScript here? You're going to be born out of your buttocks. Oh, it's free. You might as well leave. I can't show you anything else. Who knows about C here? Colonel C Eckers? Sorry about that. I'm going to be invading your world. You're going to be pissed off. Please, tweet at me or talk to me but try to see the big picture. So what I'm going to be talking about after this five-minute intro is JavaScript or microcontrollers. Not really, but creating JavaScript games at HTML5 in browser and putting them onto small microcontrollers. And why would I do that? Or why would you want to do that? There is a little story about the whole thing. Before I start demoing stuff, there is a little story that we did a... Oh, yeah. Sorry, that was a bad thing I forgot to tell. But I think Yorna has described it very well. So in JavaScript, I'm a front-end trainer. I'm a middle-tech speaker and I do travel with Baylor all around the world. I also give a lot of talks that I don't sleep but one of these is just a rule of law. So I'm a testable project member and I've been doing JavaScript and hardware for three years now. So the whole story starts with a thing called Happy Code Friends. Happy Code Friends was when we decided tech needs more diversity. People need more... We need more people who can code. You can tell someone that they need to code. You will have to spark something in there. They have to want to be coding. So how about introducing people to web development, mainly HTML5, CSS basics, and some bit of JavaScript? There is a huge... There is a whole lot of introductory content to HTML and CSS. There is a lot of tools out there. What we don't really find out there is a lot of really good JavaScript tools. There is... You can find different things that could bring you into coding but they're not really... There are a lot of these out there. So what I came up with is everybody likes games and I know somebody is gonna raise their hand. I don't like games. But most people at least do. So how about telling people that games, all this cool stuff that you've seen or played or made by people as well, it made me just created by someone who knew how to code. And most of the games you see, you would never imagine that you could be... Even if you're a developer, you would never imagine that you could create a proper game of your skills. But actually, games are pretty easy to create. And I don't have the time to show you how can you create a game in like 15 minutes or so with a bit of JavaScript knowledge. I will then tell you what you can do with it if you embrace the fob, but that can actually be done. So the whole thing turned out to be a thing I call code invaders. Code invaders is basically introducing people to programming concepts like functions, iteration, variables, like the basic concepts of programming while at the same time they are actually creating their own game. We did a few experiments with this and there is very good feedback. This is still a working progress thing, but at some point it collided with my other, in a huge love, which is IAT and microcontrollers. And the problem in microcontrollers is they are very, very, very limited in resources. So you cannot put for more, most intents and purposes, you cannot put JavaScript running on a microcontroller. There are a whole new stuff coming up, like JavaScript and Espruino, that will let you run JavaScript on a microcontroller hardware. I'm just saying that because you usually get questions like, how about this thing or that thing? There are things that run JavaScript on a microcontroller. Even like the Tesla project itself is proud to run JavaScript on a microcontroller, except the very first Tesla, why you put them in the microcontroller in JavaScript and it is not compatible. It was actually transpiling your code to Lua and running it on the actual device in Lua. So what you want to do though, is you still want to create stuff in JavaScript because it's easy. Like you don't have to care about a lot of those stuff, your memory management or the low level, just trying to concatenate the string and see will make you lose a lot of hair and I don't have a lot to lose anymore. So I decided that people, I don't want people to lose their hair. So how am I creating your game in JavaScript and somehow compiling it to see in a way that it could be done run on a microcontroller that is in order in a cross microcontroller that has like 16 megahertz of a processor and maybe like two kilobytes of memory or maybe 30 kilobytes of programming space. The microcontroller I'm talking about, let me show you just in a moment, if I can find a camera, is this one, if any one of you knows this, it's called the Arduino Micro. This is a AVR chip. It's basically 16 megahertz. It has two kilobytes of memory. That's like 2,000 bytes of memory and you can put a program that's like 30 kilobytes on it. Usually what you do is you open your Arduino IDE and you write C code for this stuff. So what I'm not gonna do today is open my Arduino IDE and write C code in there because we have this project and I want to show you what it can do. So the very interesting thing about this is just start out with a basic program. I have a Sprite banner here. I'm gonna see if I can show it. Let's close this. Okay. Yeah, it's not super visible is it? Yeah. Let me just try. That's a bit better, right? Can you invert the color? Not at this point in mid-talk. I should have talked about that earlier. Yeah. It's not super important, the code currently is. It's basically, this is just a basic JavaScript code. Some of you know ES6 will realize that some of you in the first two rows you can actually see it. So what happens here is basically you see a JavaScript code. You can see it's exactly 67 lines of code. We have a small library that has some built-in stuff that makes this easier. Magic happens when I push this button. So what you will see, you will see a small bet. It's flying around the thing and just flapping the wings. What you will see is basic games programming basics. You want to sprite on screen, this is the bet. You animate the sprite on screen by switching between two states and you just throw it around on the screen. And then 60 times in a second, you just clean the screen and read it in a different place which creates the effect of motion. We have some background text as well but this is not too interesting. What gets interesting is when you actually start creating actual games and I have here a small better of the code invaders game which might be more familiar to you. So exactly, and then this is just JavaScript code. You will see enough how far this is just JavaScript code. So you can do a few more sprites, just move them around on the screen. What you can also do is make it interactive so I can control it. And sometimes you can even fire projectiles but today's not that day. So here's the thing, you're seeing how it looks like. Okay, but how do you code this? What does this have to do with people who never seen any code in their lives? So when we started doing building our materials which will be open source hopefully which will be online so everybody could try themselves as well. So when we started building this material these kind of things are really good way to introduce people to basic programming concepts. So if I were running through the creation of this code which is also like I said, this is a bit more than 140 lines of code like with a lot of empty spaces and comments. When you run people through this, hey, here you have a variable and then you introduce what a variable is. Now people know if you want to store at which position currently the monsters are or the turrets is you want to store it if you want to store it somewhere. So you introduce variables and then you go on and introduce basic control flow. You introduce loops or conditions. And slowly people while having fun and creating their own games start to embrace all the basic concepts that they will be using later. So where the magic happens is actually, where the magic happens actually is this tiny device. If any of you, who of you know what Kickstarter is? All right, a lot of you. Yeah, so this device is crowdfunded maybe like one and a half to years ago and it's called the Arduboy. So what the Arduboy is and does, and you will see in a moment, just let me swipe this, let's click. So what the Arduboy is and does is basically the exact same thing that you see right here side by side. It's basically just a more nicely looking version of the contraption you see on the right-hand side. The right-hand side is basically, an Arduino micro hooked up to a screen hooked up to some microcontrollers, hooked to some buttons and the buzzer. The Arduboy is basically this exact thing in a much smaller, nicer package. So the idea was, you can get this thing or do it yourself and people are gonna make open source games for it. Except the problem was, the only way you could create games for it is in C with the Arduino IDE, which now is very welcoming for starting up contributors. And there are a few folks who made really good games, or really cool games, constrained by the memory space that they were given, but it wasn't really taken out off in any big ways. And most of the ecosystem is still growing. There were a lot of people having a lot of Arduboys back at their homes, but you know, just as you have your rice ball pies and all the eaters at home, you're all with it, you play with it for a few moments and then it sits on your shelf and all who are looking into it. And it's a very powerful device with its constraints, which is exactly what you here see is an ultimately translation of the JavaScript code that you just seen in the browser into C code and put it onto the device. So what happens in the background is basically when you use the cloudable IDE, this JavaScript code, when you push a button is being translated into C code and the C code is then compiled into machine code and let me just push the compilation that will create us a compile version that I can really open. So what happens in the background is your JavaScript code is translated into C code. So it's not, there's not a whole lot of people compiling in a JavaScript code straight to C because then you start to experience a lot of edge cases. Like Tesla's own JavaScript to New York transpire didn't really work out very well because of the, and NURA is practically a whole lot similar to JavaScript, not like C. When you start experiences in edge cases, then there is a problem. We have heard the last talk about edge cases. We actually heard about doing a lot of interactions between JavaScript and C during runtime. What happens here is compile time interactions, your JavaScript code is turned into C code. There are a lot of constraints of course, but for the sake of creating the basic game and following some basic rules and not using some, there was a mention to creating non-surprising output. So you're not trying to surprise the compiler, it will do just fine. Your JavaScript code will compile into C and will run and design it in vice as C code. So hopefully, yes. So the compiling has finished. So there is a HCI.org.doit.ino showing up in here, which is just opened. And you're gonna see that it compiled into actual C code if you are gonna see it's all about the colors here. So you're gonna see that it actually compiled into C code. It's not nice, but it's actually relatable. And even if there's something you cannot implement in the JavaScript code, and you are like a mad C code hacker, you can just do most of the stuff like with code. You can just do the most of the stuff in JavaScript and just do the very nitpicky parts by actually writing or modifying the C code. What will happen now is, oh, let me try to get the camera on board. I'll actually show you this live. So when I hit the compile button, what you will see, or not see, t-t-t-t-t-t, look at that one. No, let's try this again. Shall we? Oh, because I'm trying to compile the C code version. Of course. Let's try this again. How much better? Except we're running into an error. Not good. Yeah, it's a bit fragile as every demo. Oh, now you see the device lighting up. The flash is a few bits. And you see, so we just got our application compiled into that. There's one more thing to that. So I'm gonna zoom into this because I'm running out of time fast. I'm gonna show you, okay, so yeah, whatever, you re-implemented a ID in JavaScript. Why is that important? Because the whole ID, the whole editor, is implemented in JavaScript itself. It's just a web page. There's a whole lot of things that you can do with just a web page, including how about, we have this tiny thing here. You might recognize, this is one of the enemies. How about a very good drawer? But this might remind you something that falls down close enough, right? So what I'm doing now is I'm gonna go into the code. I'm gonna go in there. If you haven't seen this, this is basically binary data. All your sprites, all your image data is basically, hey, here's a pixel that is lit. Here's a pixel that is not lit. When you are constrain of a tiny device, you have to make sure your images don't take up a lot of space. So you pad them into bytes and just do a byte stream. It's not like you can have compression in there, or like most likely you will not win much. So what these devices do, is just put a bit stream data onto the device itself. That they are gonna be using to be drawing onto the screen. So what happened now, if I actually now open the preview, which remember, this is still JavaScript. This is running in your browser. Then I can see that we are close enough. We have a little fuzz them invader. And now I'm just gonna recompile the whole thing and hope for the best. Yes, it's flashing. And there you go. It is made of you. It's made of you, yeah. Quickly running out of time, but I'm gonna try to show you one more demo, just to understand the implications of building something in the browser. What would that do? So as you might see or not, that is actually one of the most readable parts of the thing. This is running from a local server. So I'm actually hosting this off from my own mobile phone, which gives me the extra that I can actually access this computer's IP address for my phone, which is basically, I can open this web page for my phone. So see what happens when I open this other invader in here. And let me just open your camera view and show you my phone. No peeking up my notifications. Let me just relate this page. What you're gonna see, this is the response of web page. And response in web pages have keyboards, but also interesting stuff that they can access as the network. How about, how about a monster like that? Not that, maybe that's more monstrous. Let's say this. Oh, no, no, no. Yeah. I just rewrote my image for my phone because you don't want to fill out with your touch bar if you have a touchscreen device with your pockets, right? Like not everybody has a touchscreen device. So why not just put it on your phone? And there is a lot of implications. Well, so what happens here is basically, I'm connecting to the same web page from the same phone and I'm pushing data between the two web pages, live updating in the same time. So I'm out of time. What I still want to say is, oh yeah, of course the best thing I haven't even showed you, but just for a moment. You know, I have this whole thing running in here as well. Just the, oops. This is another game. You will be showing a version of this a bit later. You know what that is? Yeah, so you can even try this one yourself. It's a bit, there is a bit different version. A bit more of a five version because if you go to this URL, cld.bi slash firefox, do we have this? No. You can actually play this thing, show your mobile phone access. I should put it in there. But if you have a computer, you will see this is like the same game, except it has different images on it. I just made this, I just read some of these aspects in the last Mizzler Workweek, like whatever, half an hour. So, you know, a little more of the whole thing that's called cloudaboy, you know, ask me around, I'm going to be here today and tomorrow in the Mizzler booth if you're interested. If you want to know about the details, and do we have questions? One. We have one question, just to make it a good one. We have time for one question. Yes? Yes, so the question was, how do I transpire a JavaScript code to C with blood and sweat? Basically, by hand you have a transpire, and it's tricky because you have to, you know, JavaScript is not strictly typed, so you have to infer types and stuff like that. A lot of things are working, a lot of things are not working, objects are not currently working. I'm working on arrays, the arrays are almost working, and there's a lot of boilerplate code in there behind all this. There's one more idea. So, the boiler is just one device, but there are a whole host of devices that you could use and transpire the games you just created and to, and just play them onto other devices as well, as well as, you know, desktops and mobiles and all those things. So, these are retro games, not anything like the next, you know, Half-Life, but it's a very interesting way to follow all this. So, you can see the slides, and the slides have links on the link above. You can get the experience in touch at my Twitter account at SL Softworks, or find it there, there's a brief tomorrow. And thank you for your listening. Thank you, Frankie.