WEBVTT 00:00.000 --> 00:07.000 All right, let's talk of today. 00:07.000 --> 00:11.000 I hope you're excited as I am to learn about 25 years of JavaScript by Stephen. 00:11.000 --> 00:13.000 Please give it up. 00:13.000 --> 00:16.000 Thank you. 00:16.000 --> 00:17.000 Thank you everyone. 00:17.000 --> 00:22.000 So is that part of the slide says my name is Steve and is this bit says I'm a little bit of a geek? 00:22.000 --> 00:27.000 So if it all turned up to the correct room, this should be a session about 25 years in JavaScript. 00:27.000 --> 00:32.000 That I've done and seen over that time all crammed into about half an hour. 00:32.000 --> 00:41.000 So I'm going through all this sort of stuff moving from the original web type things that I first looked at to things that aren't even web based, but our JavaScript base. 00:41.000 --> 00:43.000 But before that, who am I? 00:43.000 --> 00:46.000 What have I done to deserve a place on this stage? 00:46.000 --> 00:50.000 So we have a slide about that, or is it should be called the ego slide? 00:50.000 --> 00:54.000 This is where the speaker begs about themselves for 10 minutes and everyone wishes they're in another different room. 00:54.000 --> 00:57.000 So I am a general purpose computer geek. 00:57.000 --> 01:03.000 I have programs, a load of things I've done, games consoles, so place stations and Xboxes coded those things. 01:03.000 --> 01:08.000 Ed tech stuff, web stuff, servers, cloud, you know the whole lot. 01:08.000 --> 01:12.000 But I wrote a couple of books, six apparently, I forgot them myself. 01:12.000 --> 01:17.000 I compose a musician, magician, stage magician, if anyone was here last year. 01:17.000 --> 01:19.000 I did a magic show for everyone. 01:19.000 --> 01:23.000 I've really magic and fuzz them, who are some kids? 01:23.000 --> 01:30.000 I've spoken at the bucket loads of fuzz stems, I've been to all of them, I love retro computing, and all of this is not important. 01:30.000 --> 01:35.000 What's important is that everything there was done with JavaScript. 01:35.000 --> 01:41.000 When I wrote this book, I had JavaScript to manage my chapters together into the final form. 01:41.000 --> 01:48.000 I have composed music using JavaScript, not AI, proper code. 01:48.000 --> 01:53.000 I'm a magician. I have used JavaScript to help me do the magic. 01:53.000 --> 02:01.000 Unfortunately, it's magic, so I can't tell you what JavaScript was used to make what magic trick work, but it was used. 02:01.000 --> 02:04.000 And I've written emulators in JavaScript as well. 02:04.000 --> 02:08.000 There's a lot you can do with it, fun being enough. 02:08.000 --> 02:16.000 So, 25 years, I know JavaScript is older than that, but my experience of it is only 25 years, and obviously 25th year, we've forced them. 02:16.000 --> 02:18.000 So, kind of a nice match. 02:18.000 --> 02:21.000 So, what was the year like in 1999? 02:21.000 --> 02:24.000 Well, human population was only 6 billion back then. 02:24.000 --> 02:27.000 It's moved on a bit since then. 02:27.000 --> 02:36.000 And, you know, hourly wage, can anyone imagine getting paid 360 an hour, 3 or 4 euros an hour? 02:36.000 --> 02:38.000 That's what it was like back then. 02:38.000 --> 02:41.000 As far as the tech world goes, we didn't have Facebook. 02:41.000 --> 02:44.000 We didn't have flashed up. 02:44.000 --> 02:49.000 I was always wondering if we were going to get a cheer for the Facebook and the R for the slash, but obviously not. 02:49.000 --> 02:52.000 There was no stack overflow. 02:52.000 --> 02:58.000 I bet there was some programs out there trying to work out, how did you code without stack overflow? 02:58.000 --> 03:04.000 We had a dot com bubble that came and went, and there were almost no other JavaScript programs. 03:04.000 --> 03:06.000 I mean, maybe there were, but I just didn't know them. 03:06.000 --> 03:08.000 I wasn't in that sort of circle. 03:08.000 --> 03:12.000 So, oh, yes, and Google was only one years old at the time. 03:12.000 --> 03:14.000 So, could like trying to find a solution. 03:14.000 --> 03:15.000 So, what else was real? 03:15.000 --> 03:22.000 Well, as a language, I was using JavaScript in 1999 to build a website called brand new writers. 03:22.000 --> 03:29.000 It was a very simple site, and I had hover buttons by going image dot source equals, 03:29.000 --> 03:33.000 because this was the way the one true way. 03:33.000 --> 03:34.000 No libraries, no modules. 03:34.000 --> 03:35.000 You wanted to change it. 03:35.000 --> 03:37.000 That's how you're coding it. 03:37.000 --> 03:40.000 Oh, and using gifs as well. 03:40.000 --> 03:46.000 And I think they're making up their own jokes at the front. 03:46.000 --> 03:48.000 So, this was what I was doing. 03:48.000 --> 03:50.000 And there weren't that many books around. 03:50.000 --> 03:53.000 So, well, this is the book that I learned from. 03:53.000 --> 04:00.000 Every single web page, I was looking at that source at the same time. 04:00.000 --> 04:01.000 Well, that's all this is doing. 04:02.000 --> 04:05.000 Oh, because I was a C++ program originally. 04:05.000 --> 04:08.000 I originally owned, obviously, basic, like every one else. 04:08.000 --> 04:09.000 I learned a sembler. 04:09.000 --> 04:10.000 Then I was a C C++. 04:10.000 --> 04:14.000 So, this language looked rather interesting. 04:14.000 --> 04:18.000 From that, I went on to my own website called Blue Dust, 04:18.000 --> 04:20.000 where I did silly things like this. 04:20.000 --> 04:22.000 This is the right way round. 04:22.000 --> 04:24.000 Funnily enough. 04:24.000 --> 04:27.000 There was a back in the Xerox Park. 04:27.000 --> 04:30.000 They had monitors that were portrait, 04:30.000 --> 04:31.000 not landscape. 04:31.000 --> 04:34.000 So, I built a web site, put fully on its side. 04:34.000 --> 04:38.000 So, it looked correct if your monitor was turned 90 degrees. 04:38.000 --> 04:41.000 None of this is CSS, because none of that would have worked. 04:41.000 --> 04:43.000 So, everything here is an image. 04:43.000 --> 04:51.000 And there was even a little scrolly thing that would scroll along here. 04:51.000 --> 04:55.000 Because every single character was its own separate image. 04:55.000 --> 05:04.000 And this is how we did the clicking things. 05:04.000 --> 05:07.000 Look, I was young, I needed the money, 05:07.000 --> 05:10.000 and this was the only way to make it work. 05:10.000 --> 05:15.000 So, I accept that this was the way that I coded JavaScript back then. 05:15.000 --> 05:20.000 The only thing I actually apologized for is my casing. 05:20.000 --> 05:23.000 So, sorry about that. 05:24.000 --> 05:26.000 And this is how it actually worked behind the scenes, 05:26.000 --> 05:28.000 as you're saying, taking characters, 05:28.000 --> 05:29.000 squishing them together. 05:29.000 --> 05:32.000 See, double quotes, none of this backtick rubbish. 05:32.000 --> 05:35.000 No, it had to manually mungle the things together. 05:35.000 --> 05:38.000 Creating new images and changing the source. 05:38.000 --> 05:40.000 This was a revelation. 05:40.000 --> 05:43.000 At this point, I could suddenly change images. 05:43.000 --> 05:45.000 And do it almost properly. 05:45.000 --> 05:48.000 And this was that scrolling thing that I mentioned earlier. 05:48.000 --> 05:51.000 Using document scroll and working it all out, 05:51.000 --> 05:54.000 working OK, how do I change what image where? 05:54.000 --> 05:57.000 And then he valve the string. 05:57.000 --> 06:00.000 Has anyone used a valve in the last year? 06:00.000 --> 06:02.000 Some people are up. 06:02.000 --> 06:05.000 I admire your bravery in admitting it. 06:07.000 --> 06:10.000 How did we debug all this rubbish? 06:10.000 --> 06:12.000 Alert. 06:12.000 --> 06:17.000 There was no console console didn't come up until quite a bit later on. 06:17.000 --> 06:19.000 So, what do we do? 06:19.000 --> 06:20.000 Alert. 06:20.000 --> 06:23.000 It's basically point-tifty bugging for websites, isn't it? 06:23.000 --> 06:24.000 But it was fine. 06:24.000 --> 06:25.000 It sort of worked. 06:25.000 --> 06:29.000 We eventually ended up writing the stuff in the HTML itself. 06:29.000 --> 06:32.000 So, that was all good. 06:32.000 --> 06:36.000 Oh, and we should also talk about some of the APIs that we've seen over the time. 06:36.000 --> 06:37.000 But first, I thought, here we go. 06:37.000 --> 06:39.000 We had rejects. 06:39.000 --> 06:42.000 When I discovered this, I thought, wow, I can finally dump Pearl. 06:42.000 --> 06:45.000 Pearl is the only, I've used rejects in Pearl. 06:46.000 --> 06:48.000 I love Pearl, and I love rejects. 06:48.000 --> 06:50.000 And then, I found I could do it here. 06:50.000 --> 06:51.000 OK. 06:51.000 --> 06:53.000 So, I created this little thing. 06:53.000 --> 06:57.000 These were sort of toolbar applets or bookmarklets, depending on who you'd speak. 06:57.000 --> 07:00.000 And you could put a piece of JavaScript in the toolbar of your browser. 07:00.000 --> 07:02.000 So, when you clicked it, it would run on the page. 07:02.000 --> 07:06.000 Sort of like a brief monkey kind of thing sort of primitive stuff. 07:06.000 --> 07:09.000 So, I wrote this little hack that, if you were at a.com site, 07:09.000 --> 07:11.000 it would change it to the code.uk version. 07:11.000 --> 07:15.000 Because, as you can probably tell from my accent, I am English. 07:15.000 --> 07:19.000 Or, if you're on the code.uk site, it changes it to come. 07:19.000 --> 07:23.000 The only reason I did this was for pure ego and vanity. 07:23.000 --> 07:27.000 I had a book out, not that it matters. 07:27.000 --> 07:28.000 I'm not going to try and plug it. 07:28.000 --> 07:30.000 I don't get any royalties anyway. 07:30.000 --> 07:33.000 But it was a very long Amazon.uk and Amazon.com. 07:33.000 --> 07:34.000 So, I wrote this. 07:34.000 --> 07:38.000 So, I could flip between my book on both sites to see who'd reviewed it. 07:38.000 --> 07:39.000 And what they've said. 07:40.000 --> 07:42.000 The only reason I did any of this. 07:42.000 --> 07:45.000 Also, I played around with the YouTube API. 07:45.000 --> 07:50.000 YouTube used to have a really good API that would allow you to properly control videos. 07:50.000 --> 07:53.000 So, I took this, which is the game Dragons layer. 07:53.000 --> 07:55.000 It's some of you might remember. 07:55.000 --> 08:00.000 Originally, it was a video disc, but someone had uploaded the entire video sequence to YouTube. 08:00.000 --> 08:04.000 So, someone's got the YouTube video and I've got a YouTube API. 08:04.000 --> 08:08.000 So, I was able to rewrite the entire game by changing the playback pointer. 08:08.000 --> 08:11.000 Depending on what the user would press on the keyboard. 08:11.000 --> 08:14.000 It is basically a series of quick-time events. 08:14.000 --> 08:16.000 But that's all the original game was. 08:16.000 --> 08:21.000 And then someone spotted the whole video was on YouTube and found a copyright thing. 08:21.000 --> 08:23.000 And it all fell apart. 08:23.000 --> 08:25.000 But the, you know, it worked. 08:25.000 --> 08:26.000 It proved the thing. 08:26.000 --> 08:29.000 Another API was Facebook.js. 08:29.000 --> 08:32.000 Did anyone use Facebook.js? 08:32.000 --> 08:34.000 Another one. 08:34.000 --> 08:35.000 Yeah. 08:35.000 --> 08:39.000 So, basically, we're in 2020, but we're in 2008. 08:39.000 --> 08:42.000 And I had learned, now, I could do things like get element by ID. 08:42.000 --> 08:44.000 You know, because I'm the proper programmer. 08:44.000 --> 08:46.000 I'm changing my source. 08:46.000 --> 08:49.000 So, I'm flipping images very, very politely. 08:49.000 --> 08:52.000 And Facebook come along and says, we want you to have games on our platform. 08:52.000 --> 08:53.000 So, we said, okay. 08:53.000 --> 08:56.000 And we worked out that JavaScript has control of everything. 08:56.000 --> 09:00.000 So, I would take the users in for private information from the Facebook webpage. 09:00.000 --> 09:02.000 If we were running a game on there. 09:02.000 --> 09:04.000 And then the suddenly go, oops, we made a mistake. 09:04.000 --> 09:06.000 Okay, you can't use JavaScript anymore. 09:06.000 --> 09:08.000 You have to use Facebook JavaScript. 09:08.000 --> 09:12.000 So, they basically forced us to use these special, 09:12.000 --> 09:16.000 little, little, sort of, rapid functions, essentially. 09:16.000 --> 09:19.000 Their own version of set source rather than dot source. 09:19.000 --> 09:23.000 Just so they could check you weren't reading stuff out from the HTML. 09:23.000 --> 09:25.000 And they also created Facebook markup. 09:25.000 --> 09:29.000 Just also to make it more complicated for us to steal people's data. 09:29.000 --> 09:31.000 Oh, how times have changed. 09:32.000 --> 09:38.000 Now, I mentioned earlier our program Games Console's playstation's Xbox is that sort of thing. 09:38.000 --> 09:43.000 I'm not a very good graphics person, but I do like writing graphics software. 09:43.000 --> 09:46.000 So, I worked out, I could do this. 09:46.000 --> 09:49.000 This is using DOM manipulation. 09:49.000 --> 09:52.000 Everything will dot on that was a separate DOM object, 09:52.000 --> 09:56.000 that I was flipping around the screen using co-science and science. 09:57.000 --> 10:02.000 That's not, I mean, we wrote it recently in about 100 by 100 characters of JavaScript. 10:02.000 --> 10:06.000 Doing something sort of, not that, but one pixel images. 10:06.000 --> 10:11.000 I suppose most people here remember everybody having a one pixel by one pixel image 10:11.000 --> 10:14.000 that was used to pretty much space everything out. 10:14.000 --> 10:16.000 Well, I was using it to draw graphics. 10:16.000 --> 10:18.000 I would have a whole set of one pixel screen images. 10:18.000 --> 10:20.000 Each one will be a different color. 10:20.000 --> 10:22.000 I'd work out what color I wanted to use, 10:22.000 --> 10:26.000 and write that particular pixel into the DOM. 10:26.000 --> 10:30.000 Fortunately, someone came along and did a canvas. 10:30.000 --> 10:32.000 I mean, this was not my game. 10:32.000 --> 10:37.000 Someone wrote Chucky Egg using DOM manipulation. 10:37.000 --> 10:40.000 Everything on there was a DOM object. 10:40.000 --> 10:43.000 And he thought, I was crazy. 10:43.000 --> 10:46.000 Personally, he did it was brilliant, 10:46.000 --> 10:50.000 but it was using the DOM, so I saw that the canvas was available. 10:50.000 --> 10:53.000 So I rewrote it using canvas. 10:53.000 --> 10:55.000 Double the speed overnight. 10:55.000 --> 10:58.000 I also used it to like silly little games like this. 10:58.000 --> 11:00.000 It's like a missile command clone. 11:00.000 --> 11:03.000 Well, I discovered, oh, at this point in JavaScript. 11:03.000 --> 11:06.000 It's like, oh, so I use that. 11:06.000 --> 11:09.000 I was mucking around with binds and the plies and calls and things like that. 11:09.000 --> 11:12.000 This, however, was the way that I considered at the time, 11:12.000 --> 11:15.000 JavaScript would do, oh, oh. 11:15.000 --> 11:19.000 One massive function and hacking into the prototypes are all of the things. 11:19.000 --> 11:22.000 Also, still using var. 11:22.000 --> 11:23.000 We haven't got to let yet. 11:23.000 --> 11:25.000 That doesn't exist for another few years. 11:25.000 --> 11:27.000 But we're getting there. 11:27.000 --> 11:30.000 So I ended up writing that said game with some kind of inheritance. 11:30.000 --> 11:33.000 Because I like, yeah, I know we have prototyping inheritance. 11:33.000 --> 11:36.000 I wanted to do classical inheritance because I'm a C++ program. 11:36.000 --> 11:38.000 That's how I was trained. 11:38.000 --> 11:40.000 So this is what I did. 11:40.000 --> 11:44.000 I'm sure I don't need to go through how this inheritance manager 11:44.000 --> 11:45.000 will extends various functions. 11:45.000 --> 11:46.000 It's only a little separate function. 11:46.000 --> 11:49.000 And you just read this prototype to the base path prototype. 11:49.000 --> 11:51.000 But create a new object to this basic inheritance. 11:51.000 --> 11:54.000 So when you put the prototype constructor back to the other prototype constructor, 11:54.000 --> 11:56.000 you could then call that superclass. 11:56.000 --> 11:57.000 So we actually call the different. 11:57.000 --> 11:59.000 So any questions on that? 11:59.000 --> 12:00.000 Nope. 12:00.000 --> 12:02.000 Didn't think so. 12:02.000 --> 12:06.000 So yes, we've got this canvas, which means we can do something fun with it. 12:06.000 --> 12:10.000 And these were the functions that we were using at the time to get stuff. 12:10.000 --> 12:12.000 You know, create that canvas, get stuff into the canvas, 12:12.000 --> 12:14.000 read stuff out of the canvas. 12:14.000 --> 12:18.000 And at this point, this is when the light bulb moment for graphics 12:18.000 --> 12:19.000 for me happened. 12:19.000 --> 12:21.000 If you can read something from the keyboard, 12:21.000 --> 12:23.000 and you can write something out to the screen, 12:23.000 --> 12:27.000 arbitrarily to the screen, you can do anything. 12:27.000 --> 12:31.000 You don't have to rely on a 3D graphics card. 12:31.000 --> 12:33.000 If you can just control the color of every pixel, 12:33.000 --> 12:36.000 and you can then work out what color that pixel is, 12:36.000 --> 12:38.000 you can do everything. 12:38.000 --> 12:41.000 So what does everyone do when they have the whole world at their feet? 12:41.000 --> 12:44.000 They write a manual box set generator. 12:44.000 --> 12:46.000 And then they go away. 12:46.000 --> 12:49.000 So oh, I'm going to write a spectrum emulator as well, 12:49.000 --> 12:51.000 because you can. 12:51.000 --> 12:56.000 It's got to the stage now where our browsers are on 12:56.000 --> 13:01.000 the standard desktops were fast enough to emulate old machines in JavaScript. 13:01.000 --> 13:02.000 We'd got to that point now. 13:02.000 --> 13:03.000 It's trivial. 13:03.000 --> 13:06.000 You know, this is still 15 years ago. 13:06.000 --> 13:10.000 And the fun bit here, I first learned how to use web workers 13:10.000 --> 13:12.000 by parallelizing the manual box set. 13:12.000 --> 13:15.000 And it went slower. 13:15.000 --> 13:18.000 My fault. 13:18.000 --> 13:22.000 I also did Lego GTA as a tech demo. 13:22.000 --> 13:24.000 These URLs are fine. 13:24.000 --> 13:28.000 This shadow is generated in real time. 13:28.000 --> 13:30.000 Wherever you are, it looks for the bridge. 13:30.000 --> 13:32.000 It says, OK. 13:32.000 --> 13:34.000 Read these pixels. 13:34.000 --> 13:36.000 RGB, red, green and blue. 13:36.000 --> 13:38.000 Half of them. 13:39.000 --> 13:41.000 Create a shadow. 13:41.000 --> 13:45.000 These walls of these buildings, for example. 13:45.000 --> 13:49.000 As you move closer, they do exactly what you'd expect. 13:49.000 --> 13:53.000 Oh, every single line was a scan line. 13:53.000 --> 13:55.000 I'd say, how many of these lines down do we go? 13:55.000 --> 13:57.000 How far over does it go? 13:57.000 --> 14:00.000 And then calculating every pixel by scaling it. 14:00.000 --> 14:02.000 One scan line at a time. 14:02.000 --> 14:05.000 But it was quick enough now that you could do it. 14:05.000 --> 14:10.000 And at the point I said, right, I'm writing the particle system. 14:10.000 --> 14:13.000 This is fully dynamic. 14:13.000 --> 14:16.000 So these particles bounce around and squeeze around and everything else. 14:16.000 --> 14:18.000 And you can change the color. 14:18.000 --> 14:19.000 It will time. 14:19.000 --> 14:20.000 How does it do it? 14:20.000 --> 14:21.000 Simple. 14:21.000 --> 14:23.000 It takes the image from the canvas. 14:23.000 --> 14:25.000 Reads every single pixel out. 14:25.000 --> 14:27.000 We color every single pixel according to what color you've said. 14:27.000 --> 14:32.000 And then dice every single pixel back to the canvas object. 14:32.000 --> 14:36.000 And it does it 60 times a second. 14:36.000 --> 14:40.000 Well, if you can do that, you can do 3D, right? 14:40.000 --> 14:42.000 WebGL didn't exist at this point. 14:42.000 --> 14:44.000 So this entire window. 14:44.000 --> 14:47.000 I rewrote the entire OpenGL graphics library. 14:47.000 --> 14:49.000 In JavaScript. 14:49.000 --> 14:52.000 Without using any WebGL stuff or graphics card things, 14:52.000 --> 14:55.000 do we got some of these quick characters animating? 14:55.000 --> 14:58.000 Because the keyword there is a fine transforms. 14:58.000 --> 15:02.000 If you don't do anything to complex with a transformation in some 3D world 15:02.000 --> 15:05.000 in the virtual world space into the screen space, 15:05.000 --> 15:08.000 you actually save a lot of processing cycles. 15:08.000 --> 15:10.000 So that's what he did. 15:10.000 --> 15:14.000 I will also show these animating, but you know, 15:14.000 --> 15:18.000 if I'll say good brevity, we won't. 15:18.000 --> 15:20.000 That was rendered in JavaScript. 15:20.000 --> 15:23.000 It rendered in JavaScript a couple of weeks ago. 15:23.000 --> 15:27.000 Yes, granted it took that particular image 15:27.000 --> 15:29.000 was, I think, 70 seconds. 15:29.000 --> 15:32.000 I now have that rendered down to 7 seconds. 15:32.000 --> 15:35.000 And I haven't finished optimizing. 15:35.000 --> 15:37.000 And this is a basic way, Tracer. 15:37.000 --> 15:40.000 Obviously, some of you will probably notice where the image comes from. 15:40.000 --> 15:44.000 There's a book about how to write a raytracer in a weekend. 15:44.000 --> 15:46.000 And being someone who wants to show off, 15:46.000 --> 15:49.000 you probably can't tell I want to show off. 15:49.000 --> 15:54.000 I decided, how quick can I do a weekend raytracing? 15:54.000 --> 15:57.000 In JavaScript, you can do it in six hours. 15:57.000 --> 15:59.000 You don't have all the C++ gunk. 15:59.000 --> 16:02.000 You've got to do it before you can start coding. 16:02.000 --> 16:04.000 They didn't even have a, they couldn't even display their output. 16:04.000 --> 16:06.000 The C++ people had to write it to a file 16:06.000 --> 16:08.000 and then load it into another image program. 16:08.000 --> 16:11.000 So this straight into the browser. 16:11.000 --> 16:17.000 And this link here, this show, if you've seen the weekend raytracer book, 16:17.000 --> 16:19.000 this takes you through every step of that book 16:19.000 --> 16:23.000 in JavaScript that you can test it in real time and play around with it. 16:23.000 --> 16:25.000 You can see the code, it's really there. 16:25.000 --> 16:27.000 It's actually quite nice. 16:27.000 --> 16:31.000 But eventually, we had WebGL. 16:31.000 --> 16:35.000 So building simple things like, you know, a found a castle model. 16:35.000 --> 16:38.000 So I wrote a thing that would import castle meshes. 16:38.000 --> 16:39.000 Does anyone remember the game? 16:39.000 --> 16:45.000 And to tack, it was a single aspect from game from the, I think, 1982. 16:45.000 --> 16:48.000 Well, I don't really emulate it. 16:48.000 --> 16:51.000 And because it's an old game and it's on an old machine, 16:51.000 --> 16:54.000 it's very easy to find where the map data lives. 16:54.000 --> 16:57.000 So it's like, okay, this is how the map data is stored. 16:57.000 --> 17:01.000 This is the, I could just generate the whole thing, 17:01.000 --> 17:04.000 Minecraft style as the series of blocks. 17:04.000 --> 17:05.000 Which is what I did. 17:05.000 --> 17:08.000 And this was my, that was using 3.js. 17:08.000 --> 17:12.000 It took nearly a whole day to write a full 3D engine 17:12.000 --> 17:16.000 and the code to run around this, jump up onto things and so forth. 17:16.000 --> 17:19.000 Compared to the weeks that I'd spent previously, 17:19.000 --> 17:23.000 it was one of those signs of, I don't need to do all the work anymore. 17:23.000 --> 17:25.000 Everyone else is going to do it. 17:25.000 --> 17:29.000 Give it out to the source community and then I can just build stuff. 17:29.000 --> 17:32.000 It hasn't changed the problem as I say, it just moves the problem. 17:32.000 --> 17:36.000 It went from having to understand how do you write a 3D game engine 17:36.000 --> 17:39.000 to how do I use an existing 3D game engine? 17:39.000 --> 17:42.000 Unfortunately, I'm not very interested in that problem. 17:42.000 --> 17:44.000 I like building the things. 17:44.000 --> 17:47.000 I'm less interested about using somebody else's. 17:47.000 --> 17:50.000 But I realized at this point, the game was pretty much 17:50.000 --> 17:53.000 I had to admit that that time had passed. 17:53.000 --> 17:57.000 But outside of the web, there were other things. 17:57.000 --> 18:01.000 Because as soon as you break out of the physical machine, 18:01.000 --> 18:03.000 it seems to come alive. 18:03.000 --> 18:05.000 There were probably people in here who have used computers 18:05.000 --> 18:08.000 that were never connected to a network. 18:08.000 --> 18:11.000 There are lots of good reasons for why you wouldn't connect 18:11.000 --> 18:12.000 the machine to a network. 18:12.000 --> 18:15.000 But we pretty much expect everything to be connected. 18:16.000 --> 18:19.000 Well, my first machines were not ever connectable. 18:19.000 --> 18:21.000 As that X81 could not be connected to anything, 18:21.000 --> 18:25.000 except a cassette recorder and a black and white television set. 18:25.000 --> 18:28.000 This computer was in black and white. 18:28.000 --> 18:32.000 Yeah, so that reminds me, mid-lector activity, by the way. 18:32.000 --> 18:36.000 I was speaking to some students in Cambridge last week 18:36.000 --> 18:39.000 because I was giving a lecture on this sort of stuff. 18:39.000 --> 18:42.000 And I was helping them with one of their things. 18:42.000 --> 18:46.000 And they said, why does this variable name appear in pink? 18:46.000 --> 18:50.000 But why does the same variable name over here appear in blue? 18:50.000 --> 18:52.000 I don't know. 18:52.000 --> 18:55.000 It could be just the way that the syntax colouring thing works. 18:55.000 --> 18:57.000 But the code is right. 18:57.000 --> 18:58.000 He said, well, how do you know? 18:58.000 --> 19:00.000 I can see that the code is right. 19:00.000 --> 19:02.000 But the colour is a difference. 19:02.000 --> 19:03.000 Yeah. 19:03.000 --> 19:07.000 Some of us started programming before we had colour highlighting 19:07.000 --> 19:11.000 in our editors and some of us were coding before we had colour computers. 19:11.000 --> 19:14.000 And he just looked at me like, what? 19:14.000 --> 19:16.000 How did you do it? 19:16.000 --> 19:20.000 It's called programming. 19:20.000 --> 19:24.000 But one of the first things I saw that you could connect 19:24.000 --> 19:26.000 sort of to the outside world was actually a webcam. 19:26.000 --> 19:29.000 And this was farther get user media object. 19:29.000 --> 19:33.000 Anyone is moonlighting from the real-time communications room in here? 19:33.000 --> 19:38.000 Well, WebRTC was one of the things that used get user media. 19:38.000 --> 19:41.000 So you can grab an image from a webcam and stick it in the canvas. 19:41.000 --> 19:44.000 What happens once you've got an image in the canvas? 19:44.000 --> 19:46.000 You can read out every single pixel. 19:46.000 --> 19:47.000 You can work out what the colour is. 19:47.000 --> 19:51.000 You can change the colour and then you can wait every single pixel back. 19:51.000 --> 19:56.000 So this other little thing says, okay, let's mess around with pixel data. 19:56.000 --> 20:01.000 And this code has all of these little filters written in JavaScript twice. 20:01.000 --> 20:06.000 One for big Indian, one for little Indian. 20:06.000 --> 20:10.000 The people who are laughing are those who are old enough to know what nothing is Indian. 20:10.000 --> 20:12.000 We don't deal with Indian in this world. 20:12.000 --> 20:13.000 Yeah, we do. 20:13.000 --> 20:14.000 And we can. 20:14.000 --> 20:18.000 And I ended up doing just again because it just works slightly nicer. 20:18.000 --> 20:23.000 If you don't want to change the pixel from one colour to another, change it to a letter. 20:23.000 --> 20:25.000 Every single letter, you know, look at it. 20:25.000 --> 20:27.000 There's not a lot of space in the night or a dot. 20:27.000 --> 20:30.000 This quite a lot in the W's and the next. 20:30.000 --> 20:36.000 So create a mapping table as such as the one that is hidden here. 20:36.000 --> 20:39.000 These ones have more dots, those have fewer dots. 20:39.000 --> 20:44.000 And then change every single colour to an ask character. 20:44.000 --> 20:48.000 And of course, because it's a webcam, this updates in real time. 20:48.000 --> 20:52.000 So this is a nice little privacy filter thing you can add on. 20:52.000 --> 20:55.000 Also it makes for, you know, just great missing about. 20:55.000 --> 20:58.000 But we've got something interesting here now, right? 20:58.000 --> 21:01.000 We've got loads of various bits of API and technology. 21:01.000 --> 21:04.000 And we've got some interesting fun things we get use of media. 21:04.000 --> 21:06.000 So let's grab the images. 21:06.000 --> 21:07.000 Let's manipulate it. 21:07.000 --> 21:09.000 But then add it to YouTube. 21:09.000 --> 21:13.000 So what you can do is you can watch a YouTube video on one side of the screen, 21:13.000 --> 21:17.000 teaching you how to tie, you know, the half nails and not or something. 21:17.000 --> 21:21.000 While you're on the webcam on the other side, trying to tie it. 21:21.000 --> 21:26.000 So you can watch the two things side by side to see if you're doing it right. 21:26.000 --> 21:29.000 This is how programming's meant to work, right? 21:29.000 --> 21:31.000 But we've also got something else. 21:31.000 --> 21:34.000 We've got the ability to take a webcam image. 21:34.000 --> 21:38.000 We've got the data stream. Why don't we just send that data somewhere else? 21:38.000 --> 21:42.000 This means we've accidentally invited Skype 10 years too early. 21:42.000 --> 21:44.000 That's what we did. 21:44.000 --> 21:46.000 And it was called WebRTC. 21:46.000 --> 21:48.000 So real-time communications thing. 21:48.000 --> 21:51.000 You have to get use of media on both sides. 21:51.000 --> 21:57.000 And then that data is transferred from the browser nice and quickly to everyone else. 21:57.000 --> 21:59.000 And it's a peer to peer. 21:59.000 --> 22:01.000 Except for the fact you need a server. 22:01.000 --> 22:04.000 Because without the server, you don't know where the other peer is. 22:04.000 --> 22:06.000 So you need the server just to connect you. 22:06.000 --> 22:10.000 But after that, all the data will go from each computer directly. 22:10.000 --> 22:14.000 Unless, of course, you've got some firewall in the way in which case it's going to go to a server. 22:14.000 --> 22:16.000 But in all other cases, it's peer to peer. 22:16.000 --> 22:18.000 But it was a lovely idea. 22:18.000 --> 22:19.000 And it used data sockets. 22:19.000 --> 22:24.000 And it's the same data socket type API that you already know from just general sockets programming. 22:24.000 --> 22:26.000 Exactly the same. 22:26.000 --> 22:28.000 Works the same way. 22:28.000 --> 22:30.000 So we've got some real-time data. 22:30.000 --> 22:32.000 Does anyone ever play with leap motion? 22:32.000 --> 22:34.000 Does anyone ever remember that? 22:34.000 --> 22:35.000 You do. 22:35.000 --> 22:39.000 So it was a little box about yay big. 22:39.000 --> 22:44.000 And you plug it into the USB. 22:44.000 --> 22:46.000 And you could wave your hand over it. 22:46.000 --> 22:49.000 And it would give you a viral JavaScript API. 22:49.000 --> 22:53.000 The position of your hand and your fingers in space above it. 22:53.000 --> 22:58.000 So it's like, well as soon as that comes like that uses websockets. 22:58.000 --> 23:01.000 So there's a websocket you connect to on the local machine. 23:01.000 --> 23:05.000 That when you do so, it just streams all this data about where your hands are. 23:05.000 --> 23:07.000 Above this little box. 23:07.000 --> 23:12.000 So I've got this little swarm application that I do this in front of the screen. 23:12.000 --> 23:18.000 The leap motion sends that signal via the socket to the JavaScript running in the browser to make these things run away. 23:18.000 --> 23:21.000 And people know that you may have seen me. 23:21.000 --> 23:24.000 I did talk on music last year. 23:24.000 --> 23:27.000 And one of the things I was missing out is web audio. 23:27.000 --> 23:32.000 The same way is we have a canvas that can be individual pixels and change them. 23:32.000 --> 23:38.000 We had web audio that allows us to change audio data in the same way that we would change pixel data. 23:38.000 --> 23:40.000 So we can render any sound. 23:40.000 --> 23:45.000 So we can actually write our own virtual synthesizer in a web browser. 23:45.000 --> 23:51.000 And this was a very simple example I gave where it's just adding various sign waves together. 23:51.000 --> 23:57.000 And of course, and all we mentioned the thing that you could wave over this little leap motion box at a change. 23:57.000 --> 24:01.000 I think it's more correct meant to be telling me, but we'll leave it at that. 24:01.000 --> 24:08.000 So you could play this virtual synthesizer by doing this across your machine. 24:08.000 --> 24:10.000 And of course we had MIDI. 24:10.000 --> 24:12.000 We always had MIDI. 24:12.000 --> 24:15.000 I wrote a C library in 1998. 24:15.000 --> 24:17.000 That makes me feel old. 24:17.000 --> 24:21.000 I wrote a MIDI library so I could compose a music automatically. 24:21.000 --> 24:25.000 And I put it to JavaScript and I created a symphony using the library. 24:25.000 --> 24:29.000 Because you don't actually need output audio for this to work. 24:29.000 --> 24:31.000 You can just generate it as a binary blob. 24:31.000 --> 24:35.000 Effectively download to your machine and then bring that into your music sequencer. 24:35.000 --> 24:37.000 And then assign patches and so forth. 24:37.000 --> 24:39.000 And then someone says, oh, we don't like doing that. 24:39.000 --> 24:40.000 We're going to do web MIDI. 24:40.000 --> 24:46.000 So all of a sudden you can do all of this stuff in the browser without ever taking your data and putting it somewhere else. 24:46.000 --> 24:50.000 So I thought, okay, I will recreate symphony number one in the browser. 24:50.000 --> 24:53.000 I added some extra bits so you can do many sequences. 24:53.000 --> 24:54.000 I did it. 24:54.000 --> 24:57.000 So this last bit, the MIDI sequence is bit. 24:57.000 --> 25:05.000 Because you can now plug in a synthesizer into your machine and your web browser can then talk to that synthesizer and vice versa. 25:05.000 --> 25:07.000 Means you can play something on the keyboard. 25:07.000 --> 25:11.000 It comes up in the browser and then it can write back different notes. 25:11.000 --> 25:15.000 So as you play something, it can do a MIDI-based echo, for example. 25:15.000 --> 25:17.000 Or it could hold you sequences. 25:17.000 --> 25:21.000 So when you play one chord, it improvises the bass for you. 25:22.000 --> 25:24.000 Well, also, we've got MIDI sequences. 25:24.000 --> 25:25.000 So we've got sequences. 25:25.000 --> 25:27.000 We can write MIDI files. 25:27.000 --> 25:29.000 We can process MIDI files. 25:29.000 --> 25:31.000 We can process live MIDI data. 25:31.000 --> 25:35.000 We've got something to generate sounds from that data. 25:35.000 --> 25:38.000 So when the something says synthesizer says, oh, play C. 25:38.000 --> 25:41.000 We've got a way of generating a sound for that C. 25:41.000 --> 25:47.000 We can then process that data to add extra echo or reverb on that audio data. 25:47.000 --> 25:49.000 And we can do it as a life performance. 25:49.000 --> 25:53.000 It works very well for electronic and dance music. 25:53.000 --> 25:57.000 Because the timing resolution isn't that great. 25:57.000 --> 25:59.000 I have tried just a co-vitch. 25:59.000 --> 26:01.000 It's not that brilliant at it to be fair. 26:01.000 --> 26:03.000 But I cannot play just a co-vitch either. 26:03.000 --> 26:08.000 And I created a virtual live musician. 26:08.000 --> 26:13.000 So each of them is sending out MIDI data to my keyboard. 26:13.000 --> 26:15.000 So okay, now play this section. 26:15.000 --> 26:16.000 Now play that section. 26:16.000 --> 26:17.000 All the way through. 26:17.000 --> 26:20.000 And we've got speech recognition in four lines of code. 26:20.000 --> 26:25.000 So I can now put vocals on top of the songs. 26:25.000 --> 26:27.000 I think it still works as well. 26:27.000 --> 26:28.000 I've not done it for a while. 26:28.000 --> 26:30.000 And Alexa, I don't want to say that. 26:30.000 --> 26:32.000 So you realize it was running JavaScript. 26:32.000 --> 26:34.000 If you wanted to make Alexa do something, 26:34.000 --> 26:37.000 you would upload a chunk of JavaScript to AWS. 26:37.000 --> 26:41.000 And that would process your intensity essentially. 26:41.000 --> 26:44.000 You would give it, you know, I want the user to say this and this. 26:45.000 --> 26:49.000 I then want you to give me back the data where this variable contains the data. 26:49.000 --> 26:55.000 The week that they say this variable will contain the place that they're finding out the weather, for example. 26:55.000 --> 26:59.000 And you can take all of this and you return back just one object that says, 26:59.000 --> 27:00.000 speech. 27:00.000 --> 27:02.000 This is what I want you to say in return. 27:02.000 --> 27:04.000 And then we can control our Dreno board. 27:04.000 --> 27:06.000 Thanks to Johnny Fives. 27:06.000 --> 27:08.000 Of course, we've got the web, USB stuff. 27:08.000 --> 27:10.000 We can just talk to anything that's attached. 27:10.000 --> 27:13.000 We're not worried about the security or privacy things for that. 27:13.000 --> 27:14.000 That doesn't matter. 27:14.000 --> 27:16.000 But we can do it. 27:16.000 --> 27:17.000 And there is actually a thing. 27:17.000 --> 27:20.000 If you've tried to do this web MIDI thing and you're talking to keyboards, 27:20.000 --> 27:23.000 if one tab is using that keyboard, 27:23.000 --> 27:28.000 if the other tab can also see what MIDI data is going across. 27:28.000 --> 27:32.000 Then we come to all the frameworks and other software things that come up. 27:32.000 --> 27:34.000 Shall we talk about JavaScript frameworks? 27:34.000 --> 27:36.000 No, because it's dull. 27:36.000 --> 27:39.000 What's the best framework I always get? 27:40.000 --> 27:43.000 What one are you going to pay me to use? 27:43.000 --> 27:47.000 And then that will be my favorite. 27:47.000 --> 27:52.000 So in buff inclusions, JavaScript began as this little language that I was using 27:52.000 --> 27:53.000 just to change hover. 27:53.000 --> 27:57.000 And I think that's pretty much all anyone else did at the time. 27:57.000 --> 27:59.000 And then there's a library. 27:59.000 --> 28:00.000 And then it's the payment. 28:00.000 --> 28:01.000 Nobody's all of this stuff. 28:01.000 --> 28:02.000 It's more than just the ecosystem. 28:02.000 --> 28:05.000 We've only seen from every other talk today how big it's growing. 28:05.000 --> 28:11.000 To the point of no single human could actually drop all of what's going on in that ecosystem. 28:11.000 --> 28:16.000 So if we have times I'll take questions but first I'm going to update my scorecard. 28:16.000 --> 28:17.000 There we go. 28:17.000 --> 28:19.000 That's the 25th talk. 28:19.000 --> 28:21.000 And with that I'll say thank you. 28:21.000 --> 28:22.000 Good afternoon. 28:22.000 --> 28:27.000 All right. 28:27.000 --> 28:28.000 All right. 28:28.000 --> 28:29.000 Thank you, Steve.