WEBVTT 00:00.000 --> 00:14.000 Good morning everyone, I would like to introduce the presenters for our next talk, Barnett 00:14.000 --> 00:28.480 Homa Gosa, John Maloney, Yens, Moniche, and Yadika, I'm fortunately couldn't be present 00:28.480 --> 00:37.520 today. Their talk is about program to learn the power of creative coding. Without further ado. 00:37.520 --> 00:52.000 Thank you so much, thank you. Good morning, Foss Dam, good morning, Brussels. This 00:52.000 --> 00:59.440 is crazy. It feels like such a big auditorium. I'm totally not used to this. Wow, I want to be 00:59.440 --> 01:12.240 rockstar when I grow up. So, free and open software was mostly written by humans who somehow 01:12.240 --> 01:22.320 learned to code somewhere, and we've devoted our lives, mostly to the question, how do you make 01:22.320 --> 01:29.280 software for kids and how do you make a programming language for kids? So, when I say it's 01:29.280 --> 01:37.440 we, these are my friends, they're not and John and Yadika, and as was just said, Yadika cannot 01:37.440 --> 01:43.440 be here today because she's just returning from South Africa and she is sick today, so she's 01:43.440 --> 01:50.640 very disappointed about that. So, how do you make a programming language for kids? How do people 01:50.720 --> 01:57.680 learn how to code? If you're from Germany, anybody from Germany? If you're from Germany, you know 01:58.400 --> 02:05.280 how this works. All you need is an appliance for this. Maybe I know this, it's a funnel. So, 02:05.280 --> 02:10.640 you need the right to addactic tools, the right materials, and as you can see in this picture, 02:10.640 --> 02:16.240 this is kind of the traditional way. I love the ratio of educators to students in this here. 02:16.240 --> 02:23.120 So, if you look at this, it's the teachers who are doing something who are literally transferring 02:23.120 --> 02:30.160 knowledge into the student, and what the student's job is is to sit still and to endure it, 02:30.800 --> 02:37.120 passively, and this is how you learn anything, I guess, including how to code. And of course, 02:37.120 --> 02:42.160 it's never been that way. It's learning has been the subject of scientific and career. And 02:42.160 --> 02:49.840 there's famously, there's Swiss psychologist Jean-Pierge, who took a different approach of this, 02:49.840 --> 02:56.160 and said learning is actually something that is constructed in your mind through the 02:56.160 --> 03:03.360 accommodation and association. And this is a kind of a picture of Jean-Pierge's idea is that, 03:03.360 --> 03:10.320 you know, it's not the teachers who are active. Learning is something that is actively done 03:10.400 --> 03:17.600 by kids, and it's sometimes best done if you just let them roam free by themselves. And this is 03:18.880 --> 03:24.240 what we're about to show you. We really can't wait to show you some of the programming languages 03:24.240 --> 03:32.640 that we love and some that we make. So, this is about blocks, about playing with blocks. 03:33.200 --> 03:38.720 Now, the first programming language that we know that sort of was specifically made for young kids, 03:38.720 --> 03:47.120 for kids, you might know this is a similar paper, Marvin Minsky, when they founded the AI lab at MIT, 03:47.120 --> 03:51.920 they first thought about how the kids actually learned. And the first language was logo, and you 03:51.920 --> 03:59.440 can see this is Cynthia Solomon, they already had this turtle kind of a physical way to draw things 03:59.440 --> 04:06.480 in a first-person perspective, and also, so they drew shapes, and also they drew shapes on the stage, 04:06.560 --> 04:12.160 like a spiral, the famous, famous logo, a spiral, and there's one thing I found, 04:12.160 --> 04:17.520 in similar paper, it spoke that sort of reflects a lot how we feel about programming. 04:17.520 --> 04:23.920 If you look at this, this was written 40 years ago, it says in most contemporary educational 04:23.920 --> 04:32.080 situations, the computer is used to put children through their faces, and to give feedback, 04:32.080 --> 04:38.800 and dispense information. And if you think about this for a while, substitute computer for AI, 04:38.800 --> 04:45.360 then sort of what is happening today. And the part that paper was kind of adamant about is, 04:45.360 --> 04:50.960 this is really the computer programming the child. But the idea and logo was that is reverse, 04:50.960 --> 04:57.360 that the child programs the computer, that the child teaches the computer how to think, 04:57.360 --> 05:05.920 because we learn best when we teach, as I'm sure many of you have found out. So how did this 05:05.920 --> 05:13.760 work in logo? Here's logo, Berkeley logo, this work weight, I'm just going to exchange this. 05:16.080 --> 05:23.680 Can you hear me? Great. So in logo, if I type in anything like spiral, 05:24.640 --> 05:30.560 it will tell me, I don't know how to spiral. So doesn't know how to spiral. So let me teach you 05:30.560 --> 05:37.200 how to spiral, and I would literally type to spiral, and I could say, okay, I need some steps, 05:38.160 --> 05:46.240 and I need an angle. And now I don't need the indentation I can say, you know, if the steps are 05:46.320 --> 05:53.600 less than one, I want the program to stop. This is sort of my base case. Otherwise, 05:54.480 --> 06:12.880 forward the steps, and go right at the angle, and then, you know, spiral, steps one less at the angle, 06:13.040 --> 06:21.280 and end. And now it's as spiral was to find now, kind of my computer logo knows how to spiral, 06:21.280 --> 06:29.760 it's actually try this. So I'm spiraling, say, 100 times, I angle of 20, and I get the spiral. 06:29.760 --> 06:35.360 And I can start to experiment with things like I can say, okay, let's clear the screen and 06:35.440 --> 06:43.440 spiral, like 300 with a goofy angle. I get a different spiral. And so this is what you've seen in 06:43.440 --> 06:53.200 that first picture. And if you, if you look at this, it's actually nice, because there is not 06:53.200 --> 06:59.680 much syntax there, it's welcoming, it sort of gives you a quick start, it's sort of interactive, 06:59.840 --> 07:07.280 it's a ripple. And, but it also is kind of sophisticated, because you don't use a loop here, 07:07.280 --> 07:14.960 you use recursion, kind of tape recursion, to model something. And these are really kind of the two 07:16.160 --> 07:23.040 guiding ideas that a lot of our programming language have is that, you know, it's great to have 07:23.120 --> 07:29.120 something like a low floor that is welcoming, that is important pedagogically, but also, 07:30.480 --> 07:36.800 we shouldn't dumb down things for kids. Kids should be able to do everything that we adults do, 07:36.800 --> 07:43.440 so there should be no ceiling. And those are sort of the two guiding points that we now 07:43.440 --> 07:51.920 like to kind of go deeper into and don, handing over to you to show how this evolved into more 07:52.000 --> 07:54.000 complex systems. 08:13.440 --> 08:18.880 So, Alan Kay was the leader of the small-talk group at the Zerach's Palo Alto Research Center 08:18.880 --> 08:26.080 in the 1970s. And in 1972, he wrote this paper, a personal computer for children of all ages. 08:27.200 --> 08:33.200 In this paper, he describes this futuristic scenario of two children playing outside 08:33.200 --> 08:38.320 with battery powered tablet computers and they're playing a space wars game that they created 08:38.320 --> 08:46.400 themselves. The computers are connected to an information resource. At some point, they decide that 08:46.480 --> 08:51.680 they would like to add the sun to their game so that sun would gravitationally attract the ships, 08:51.680 --> 08:56.480 and that would make the game more interesting. They go to a teacher and ask him how would they add 08:56.480 --> 09:01.280 gravity to their system. He says, well, I don't know, but here's a suggestion. Why don't you 09:01.280 --> 09:06.240 look this up on the information resource? So, they look it up, they figure out what the equations 09:06.240 --> 09:10.880 are and how to add that to their code, and they go off and happily play this enhanced version of 09:10.880 --> 09:17.360 their space wars game. Now, what's impressive about this is the time at which it was done. So, 09:17.360 --> 09:23.840 1972, if you throw your mind back to that, that was the time when computers filled rooms and 09:23.840 --> 09:29.520 were usually programmed with punch cards. Unix was just getting started at Bell Labs, but it was still 09:29.520 --> 09:36.480 internal. You know, personal computers were not even thought of yet, except maybe it Zerach's 09:36.480 --> 09:42.160 park. So, Allen's group went on to develop this language called small talk, and most of you know 09:42.160 --> 09:48.240 small talk is the father of object-oriented programming languages. It's sort of inspired things like 09:48.240 --> 09:55.920 C++ Java, Python, etc. It also was the inspiration because of Steve Jobs's visit to Allen's 09:55.920 --> 10:01.840 group. It was the inspiration for the Lisa and the Macintosh. So, you might think, well, okay, 10:01.920 --> 10:08.320 small talk, that's like a serious programming language for adults. How do kids fit into that? Well, 10:08.320 --> 10:13.120 the small Allen really thought of it as a programming language for kids, and the small actually was 10:13.120 --> 10:19.520 a reference to that idea that it was for small people. Did they actually actually use small talk, 10:19.520 --> 10:25.520 and they did. They took altos to a nearby middle school in Palo Alto, and they taught kids how to 10:25.600 --> 10:29.760 use small talk, and they created things like these drawing editors. The bottom shows 10:30.640 --> 10:36.400 modification that a child made to an existing animation system. So, this child added the ability to 10:36.400 --> 10:43.520 combine two animations, like the jockey and the horse, and make a composite. Other kids did things 10:43.520 --> 10:50.080 with music. So, one girl had created an musical accompaniment system, so she could program the 10:50.080 --> 10:54.400 altar to play a piano part while she played her violin. That's an alto there in the foreground. 10:55.200 --> 11:03.520 Another child made a music notation system, and yet another one made a diagram editor, schematic 11:03.520 --> 11:09.040 diagram editor. I want to show you a little bit about what this small talk system would have looked like. 11:20.480 --> 11:25.600 So, I have here, this is a small talk system that was, this is pretty much the small 11:25.600 --> 11:30.960 talk system they would have used. This is a few years later from 1983, but this is the actual 11:30.960 --> 11:36.320 Xerox small talk image that they shared with a number of corporations, including Apple. 11:37.040 --> 11:43.040 And you can see it looks pretty simple by today's standards. It's only black and white. It's 11:44.000 --> 11:49.200 only got one. Well, I guess it's got bold and so forth. But, you know, it's not super fancy. 11:49.200 --> 11:55.840 It's got scroll bars, but you'll notice that when I scroll window doesn't update until I release 11:55.840 --> 12:01.360 the mouse. So, the scroll bar moves, but nothing happens in the window until I release it. That was 12:01.360 --> 12:06.800 deliberate, because the altar was extremely slow by modern standards. Thousands of times slower 12:06.800 --> 12:12.240 than our current computers. So, if they had tried to update the screen every time, you moved a few 12:12.240 --> 12:17.120 pixels, it would have been really slow to scroll. We're going to try to change that since we 12:17.120 --> 12:22.160 have a modern computer that's a lot faster. So, what I'm going to do is as I slide this scroll bar 12:22.160 --> 12:27.040 up and down, I'm going to hit the control C here, and I'm going to bring up a debug window. 12:28.400 --> 12:33.040 And this debug window shows a number of things on the stack, but this one looks promising, 12:33.040 --> 12:39.920 scroll absolute. And we'll notice in here we have sensor, any button press. That means while 12:40.000 --> 12:44.240 the mouse button is pressed, while true. So, while it's true, do whatever is in the square 12:44.240 --> 12:50.640 brackets here. So, that's interesting because this self-scroll view, which is the thing that 12:50.640 --> 12:56.400 updates the screen is not in the square brackets. So, let me go ahead and move that inside there. 12:56.400 --> 13:13.920 Okay, I've just accepted that change. It's thinking about it. Okay. And now let's see if it works. 13:13.920 --> 13:22.560 So, it's working in that window. Yeah. Let's see if it works in this window. So, this sort of 13:22.560 --> 13:27.680 shows that small talk was, I mean, they didn't really have the concept of open source at the time, 13:27.680 --> 13:32.720 but small talk was, in some ways, even better than open source. The source code was not only available, 13:32.720 --> 13:37.920 it was built right into the system. So, you could actually make changes to the system while it was running. 13:38.640 --> 13:43.280 Let's look over here. This is a system browser that shows all the code in the system. 13:43.920 --> 13:49.520 And I have a, there turns out to be a pen class, and it happens to have, I mean, this was in 13:49.520 --> 13:58.320 the XRX image, the spiral function. And often in the small talk system, there would be comments in the double quotes, 13:58.320 --> 14:05.280 which you could select and then execute. So, let's see what that does. So, here we have the logo spiral that 14:05.280 --> 14:13.280 ends showed, implemented a slightly different way in small talk, but there it is. I was lucky enough 14:13.360 --> 14:20.720 to actually go and work for Allen K's group in the mid 1990s. And Dan Engels joined the group 14:20.720 --> 14:26.400 around the same time, and Allen was still interested in making a programming language for kids. 14:26.400 --> 14:32.400 So, he said, well, you know, what language should we build the, the programming language for kids in? 14:32.400 --> 14:36.640 And Dan Engels said, well, small talk, of course, because everybody loves small talk in Allen's group. 14:37.360 --> 14:42.640 So, we put together a small talk system called Squeak, and it was a new implementation, 14:42.640 --> 14:49.040 but it was based on the original XRX small talk. We opened source that 1996, and within three 14:49.040 --> 14:54.800 weeks, it had been ported to Linux and Windows. It was originally just on Mac, which, you know, 14:54.800 --> 15:02.000 just blew us away, and it just underlined the power of open source. I'm going to show you a 15:02.000 --> 15:07.680 little bit of the E-toy system that we created. And I'm going to show it in this system called 15:08.320 --> 15:12.480 Squeak. JS, created by Vanessa Friedenberg, let's see if I can go full screen. 15:16.080 --> 15:17.760 Oops, that's not the one I wanted. 15:24.160 --> 15:34.400 Yes, yes, yes. I want to each voice. So, this is the E-toy system, and when you, when you 15:34.480 --> 15:39.120 create a new project in E-toy, you get sort of a blank slate, and to start working with it, 15:39.120 --> 15:43.360 you have to draw something, and I'm just going to draw something that looks a little bit like the 15:43.360 --> 15:50.720 logo turtle. And when you draw something, you get an object you can move around. If you right click on this, 15:50.720 --> 15:57.600 you can bring up a halo of different tools. I'm going to open a viewer on this object, 15:58.320 --> 16:03.520 and the viewer has things like the X and Y properties, and you can see those are changing when I 16:03.600 --> 16:09.680 move it. It also has functions that you can call commands. So, for example, this one makes it go forward. 16:10.320 --> 16:16.480 I can make a script by dragging out that block, and now I get a little editor for a script that says 16:16.480 --> 16:22.560 forward, I'm going to add turn to that. And if I click this, it goes forward a little in turns a little. 16:23.600 --> 16:30.400 Now, a big part of E-toy was the idea of building simulations, like the space-words game that has a 16:30.400 --> 16:38.160 simulation of gravity. And so, a key part of it is that there was a way to make a script run continuously or tick. 16:38.160 --> 16:43.120 So, I click this block, and I'm now making this script tick, and you can see it's making that go in a circle. 16:45.840 --> 16:50.080 To go a little further, I want to make the logo spiral, so I'm going to add a variable here, 16:50.080 --> 16:57.920 I'll call it DIST, and when I do that, I get a new variable, which I can drag out and just 16:58.000 --> 17:04.160 replace that five with the variable. I'm also going to need to update the variable every step. 17:05.600 --> 17:11.440 So, I'll drag this block in. So, this is sort of saying set the value to something, but if I click this, 17:11.440 --> 17:17.760 I can change the operation to increase by. So, I'll make it increase by say two each time. 17:18.480 --> 17:25.840 Let's make the turn by something like 89. And one more thing I want to do is I want to 17:26.800 --> 17:31.600 put the pen down. So, there's a pen category here, and I can say pen down true. 17:32.720 --> 17:39.040 And let's start that ticking and see what happens. So, you can see it's gradually building this logo 17:40.480 --> 17:47.680 sometimes they call it the spiral for square spiral. Now, while that's operating, I can also show you 17:47.680 --> 17:54.720 that you can get a viewer on anything, any object, including a viewer itself. So, I just made a viewer on 17:54.800 --> 18:00.720 this viewer, and it also has a turn properties. So, if I drag that out, I can get a script on this, 18:00.720 --> 18:18.480 and I can start that ticking. So, so that was each voice. So, now, let me just fast forward. 18:18.480 --> 18:22.720 So, after I worked on each voice with Allen's group for a number of years, I went, I got to go 18:22.720 --> 18:28.640 and work. I feel very lucky to have been privileged to work in these great teams. I went to the MIT 18:28.640 --> 18:34.080 Media Lab in the Lifeline kindergarten group, and I worked with Mitchell Resnick on Scratch. How many people 18:34.080 --> 18:42.160 have no about Scratch? Great. It's actually, to our surprise, it actually got listed on the Taiobi 18:43.360 --> 18:48.560 programming languages index, and it's, it's number 12 on the sort of popularity index of programming 18:48.640 --> 18:54.560 languages. Anyway, in Scratch, as you know, you can, you can make things move and turn. 18:55.440 --> 19:00.960 There are two key things that are different about Scratch than from each voice. First of all, 19:00.960 --> 19:07.280 Scratch was not really intended as a tool for teaching things. It was more intended as a tool 19:07.280 --> 19:15.760 for kids to make things that they cared about. So, instead of really focusing on science ideas and 19:15.760 --> 19:21.360 mathematical ideas, Scratch was intended to be a media tool that you could use to create 19:21.360 --> 19:27.600 game stories, animations, music videos, and so forth. And so, that was a little bit different. 19:27.600 --> 19:31.760 The other thing that's different about Scratch was it was intended to be used in after school, 19:33.600 --> 19:38.000 after school computing centers, like the computer clubhouse network that the Lifeline kindergarten 19:38.000 --> 19:42.800 group had started a few years ago. And as a result of that, it meant that everything had to be 19:42.880 --> 19:47.120 very visible and discoverable. So, you'll notice that all the blocks are visible here, 19:47.120 --> 19:51.680 whereas in each voice, you didn't see anything until you brought up a viewer. Also, all the 19:51.680 --> 19:56.640 sprites in your system, if you have more than one, or visible all the time. So, we try to make 19:56.640 --> 20:02.800 everything explicit so that people could quickly discover and figure out how to use this. 20:03.840 --> 20:09.920 I'm just going to quickly make the logo spiral here. So, I'm going to add a variable and, again, 20:09.920 --> 20:19.760 call it DIST. And I'm going to change it by, let's say, two every time. And I want to do this repeatedly, 20:19.760 --> 20:29.360 so I need a loop. So, I'll put a forever block around this. And finally, I need to put the pen down, 20:30.000 --> 20:41.280 oops, I forgot something. We have to make it move by, oops, move by the distance each time. 20:42.400 --> 20:47.520 And also, also, make it move by, like, there we go. 20:47.520 --> 20:55.760 Oh, I know what we have to do. We have to set the distance back to zero. 20:56.800 --> 21:00.160 It's a lie demo. And let's put the cap back in the middle of the screen. 21:01.760 --> 21:03.440 There we go. Square spiral. 21:06.800 --> 21:09.200 All right, with that, I'm going to turn it over to Benat. 21:18.480 --> 21:24.800 Sorry, we're very quickly with our computers. So, each of us wants to use theirs. 21:31.600 --> 21:39.440 So, about eight years ago, we were trying to imagine what a programming language, 21:39.440 --> 21:43.280 like the ones you've seen today, would look like for physical computing, 21:44.240 --> 21:48.000 for things like microcontrollers, like this one or other microcontrollers. 21:49.040 --> 21:55.920 And we set off to create a language that we call microblocks. It was, of course, inspired in the 21:55.920 --> 22:01.040 tradition of small dogs, crotch, snap that we'll see later, low, all these languages. 22:02.400 --> 22:06.720 In all these languages, the ideas you've seen was to explore different concepts 22:06.720 --> 22:10.240 through the use of programming, programming is also important, of course. 22:10.240 --> 22:14.560 But the ideas that you explore different ideas by means of programming, right? So, 22:14.560 --> 22:19.760 programming is a means of exploration. Since this is a physical computing platform, 22:20.400 --> 22:24.960 one thing that you might want to explore is the physical world. And the physical world is, 22:25.840 --> 22:31.440 nowadays, we understand it as governed by the laws of physics. So, let's explore one of these 22:31.520 --> 22:41.120 such laws. The one, everyone knows about which is gravity. So, I have a little microcontroller 22:41.120 --> 22:48.640 here called the data board or data board. I never know how to pronounce it. I'm going to connect 22:48.640 --> 22:56.320 to it. Notice I'm connecting to it wirelessly. So, there is no cable attached to it. 22:57.280 --> 23:02.400 Now, it's connected. And now, we can begin to program it. And, you know, this thing has an 23:02.400 --> 23:08.480 accelerometer. An accelerometer that tells me how much acceleration this is experimenting. 23:08.480 --> 23:15.360 Right now, we're experimenting about 1G. It's multiplied by 100. So, we have more significant 23:15.360 --> 23:21.200 digits, right? If I click on this block, you see this is updating live. But it's kind of awkward. 23:21.200 --> 23:27.280 If I want to check all the time what's going on. So, we have this little graph window that I 23:27.280 --> 23:34.800 might want to clear. This is from previous tests. And I may want to graph this constantly 23:36.000 --> 23:41.200 to see what's going on here with the gravity, with the acceleration. And you can see how 23:41.200 --> 23:46.800 it stays approximately at 100, except that I'm shaking because it's really cold in this room. 23:46.880 --> 23:52.880 So, I'm not perfectly steady. So, let's experiment. Let's see what happens if I throw it into 23:52.880 --> 24:08.160 the air and hopefully catch it and don't end the demo prematurely. Okay. So, you've seen here, 24:08.160 --> 24:13.600 there's a point where the acceleration went down to 0G. That's the freefall moment. I'm not a 24:13.680 --> 24:19.360 physicist or anything, but I've managed to see that it's actually real, that it happens when things 24:19.360 --> 24:26.960 are infreful. They experiment no gravity, right? That's how this 0G planes work and all this stuff. 24:26.960 --> 24:32.320 So, as a kid, I might, you know, plot this randomly. And, oh, wow, what's going on here? And here's 24:32.320 --> 24:39.600 a moment of exploration that you might want to tap into. And, you know, while we're graphing things, 24:40.560 --> 24:47.360 well, this micro-contour is packed full of sensors. We might want to try other things. So, 24:47.360 --> 24:52.080 one exploration might lead to another. Let's explore something like the temperature. 24:54.960 --> 24:59.120 And you can see how the graph dropped really low. That's why we are so cold. 25:00.240 --> 25:06.080 It is really cold. This boring sensor-dogus temperature doesn't really change that much, right? 25:06.720 --> 25:11.360 Let's try something else. Let's try with a magnetic field. 25:13.760 --> 25:21.600 Okay, this went way up. And this is sort of a boring sensor, too. Unless you happen to have a magnet, 25:21.600 --> 25:30.160 then it becomes a pretty much interesting sensor. I can even try to draw stuff with my magnet. 25:30.240 --> 25:37.920 And, you know, what this reminds me, it reminds me a bit of sine waves and audio waves. So, again, 25:37.920 --> 25:46.240 exploration sparks ideas. I might want to turn this thing into music. Why not, right? So, let's see. 25:49.680 --> 25:57.840 I'm just going to turn on and off a pin where a buzzer is connected. You know, when you turn on 25:57.920 --> 26:04.320 and off a speaker, when you give it power and then take it away, if you let fast enough, 26:04.320 --> 26:10.880 you're creating what's called a square wave. And the frequency that we hear is actually an illusion 26:12.880 --> 26:20.080 created by the fact that this is toggling so fast that our ears, our brain, interprets that as an actual sine wave, 26:20.080 --> 26:23.120 as an actual sound wave. So, let's try that. 26:28.080 --> 26:30.080 Can you hear that? 26:38.720 --> 26:43.360 Okay, it sounded better at home, but I hope you're getting the idea. 26:44.400 --> 26:51.280 So, exploration sparks ideas, sparks more exploration. But let's, let's spiral back to 26:51.280 --> 26:58.400 logo. If you remember, we started off by talking about spirals and we've been creating spirals 26:58.400 --> 27:05.760 in all these languages. Spiral is sort of one thing that's stating our language is from the very 27:05.760 --> 27:12.000 beginning. And I don't know if you've noticed, we have a little robot there that very conveniently 27:12.080 --> 27:17.360 just stopped working. On it's task, not like working for it. 27:22.800 --> 27:31.920 I need this. This is actually a robot design by a lab where I used to work close to Barcelona, 27:31.920 --> 27:37.120 the city lab. And it's a turtle robot, just like the ones that we saw in the first light, 27:38.080 --> 27:44.480 the logo, turtle robot, just a modern version of it. And it's been drawing, I don't know if 27:44.480 --> 27:50.480 you'll be able to see this, but it's been drawing the exact same spiral that we've been showing 27:50.480 --> 27:58.160 all along. And you may want to, you know, in all these languages, you learn by looking at examples 27:58.160 --> 28:03.920 and by inspecting the code that other people have written. But how do you get the code out of this 28:04.000 --> 28:12.000 thing? Right? It's in here. How can I get to this code? How can I learn from this machine? 28:13.200 --> 28:27.760 Well, I could just disconnect from this port and say, open from port. Let me close this. 28:28.320 --> 28:34.960 So of course, I don't want this project anymore. And it's as connected to port to proceed. 28:35.600 --> 28:42.320 Now, let's see if I can connect to that port. Oh, I think it's maybe too far away. 28:43.040 --> 28:53.440 I know, there we go. This is it. Hopefully it's not too far away. 28:58.720 --> 29:03.600 Yeah, you and usually need to. Let me put it closer to. 29:07.520 --> 29:12.000 Yeah, it's not connected. Let's open from port again. Connect. 29:12.800 --> 29:30.320 Okay, there we go. Hopefully it's close enough now. Okay. So now it's reading the project 29:30.320 --> 29:34.960 back from the port. It's actually for the gigs out there. It's decompiling the byte code that's inside 29:34.960 --> 29:41.280 of this thing. And here's the code that powered my spiral. But that doesn't teach me much, right? 29:42.160 --> 29:49.040 How does draw spiral work? Well, let's look into it. Let's show the definition of this block. 29:49.040 --> 29:53.840 You see, it's very similar to the way that we've programmed the others. But you may want to 29:55.360 --> 30:02.720 inspect what move does. So you can also inspect that. You may want to know how we are getting 30:02.720 --> 30:10.560 these motors to move. So you can inspect what that does. And you get the idea, right? Everything is 30:10.560 --> 30:18.800 inspectable and you learn by looking at how others have written code. And with that, I'm giving it to 30:18.880 --> 30:41.280 Ian's again. Wow. So you've seen that we're really kind of evolving diving into the 30:41.280 --> 30:50.400 blocks paradigm that kind of, from Etois over scratch to micro blocks. And so we've thought, 30:50.400 --> 30:57.600 how could we take this even further? And so this other kind of language that we're still working on 30:57.600 --> 31:03.280 this snap. And we've made that for college for UC Berkeley. It's actually a block space language 31:03.280 --> 31:09.360 a scratch for college. And it's free and open source software. You said UC Berkeley's introductory 31:09.360 --> 31:17.440 course, which is called the Beauty and Joy of Computing. And in snap, we're trying to sort of make 31:17.440 --> 31:24.720 two things very apparent. We'd like to teach data science by using media computation, because media 31:24.720 --> 31:29.600 is something where we get lots of data. And we'd like to do really rigorous computer science. 31:29.600 --> 31:36.880 And I'd like to show you kind of both of these things really quick. Okay, this one works. 31:37.440 --> 31:47.760 Okay, I'm too nervous to operate on hardware here. Okay, wait. So this is snap. And one thing 31:48.560 --> 31:57.920 that is about media would be, how about I just try to record like a sound, get my own data 31:57.920 --> 32:04.640 into the system. And this isn't electronic, this is just told you it was going to be a rock star. 32:04.720 --> 32:23.040 Let me, let me try there. 32:23.040 --> 32:39.240 It needs to process the data at once, okay, now I've got this recording and if you look 32:39.240 --> 32:45.680 at the recording and snap, we can analyze it, here is the sound and there is a sound called 32:45.680 --> 32:46.680 recording. 32:46.680 --> 32:54.440 The duration is like 40 seconds and I can look at the samples and have a look at the 32:54.440 --> 32:55.440 samples. 32:55.440 --> 33:01.560 It's a list of numbers, a pretty long list, 700 thousand numbers starts with zero because 33:01.560 --> 33:04.680 in the beginning, I was just pressing the button, not playing anything in the ukulele, 33:04.680 --> 33:10.920 but if I scroll down, I see numbers, lots of numbers, samples are in between minus one 33:10.920 --> 33:13.360 and plus one and these are the signals. 33:13.360 --> 33:18.840 Now if I've got numbers, kind of the big idea is that computers are great with crunching 33:18.840 --> 33:20.080 numbers. 33:20.080 --> 33:22.600 What if I want to transform these numbers? 33:22.600 --> 33:28.960 Like I want to take, I'm computer scientists, I want to have zeros and ones, so I could 33:28.960 --> 33:34.560 take the ceiling, but now what we teach kids usually is this kind of computation of 33:34.560 --> 33:35.560 thinking. 33:35.560 --> 33:39.720 First, I need to introduce variables, I need to introduce conditionals and loops and then 33:39.720 --> 33:45.280 I need to talk about whether a race start with zero or one, and all these are technicalities 33:45.280 --> 33:50.760 that have nothing to do with how data actually works, whereas mathematicians use to think 33:50.760 --> 33:55.440 about vectors and matrices and multiple dimensions for a long time. 33:55.440 --> 34:01.120 So we decided that, kind of, like in APL, everything should work on data and any dimension 34:01.120 --> 34:06.720 so I can just say, I want the ceiling of all of these numbers, and now I'm getting a list 34:06.720 --> 34:12.160 of ones and zeros, which makes me feel much more comfortable as a computer scientist. 34:12.160 --> 34:19.400 And I want to know what this sounds like, but I play this back. 34:19.400 --> 34:42.840 Okay, I didn't try this in this auditorium. 34:42.840 --> 34:48.000 See I was going to be a rock star in this room anyway. 34:48.000 --> 34:53.600 It really the message here is about this being about data. 34:53.600 --> 34:58.720 Another way how we can get data into the system is, you know, take a picture of ourselves, 34:58.720 --> 35:02.440 get the kid into the program, this kid is a little old. 35:02.440 --> 35:07.880 And the same thing that we can do, we can look at the pixels of this thing. 35:07.880 --> 35:13.960 Here's the camera, I can see the width of the pixels, I can see the pixels. 35:13.960 --> 35:21.080 Now the pixels are actually a matrix, it's a list of lists with alpha, channels, red, green, 35:21.080 --> 35:22.080 and blue. 35:22.080 --> 35:24.120 So what if we do stuff with that? 35:24.120 --> 35:29.280 What if we, for example, just multiply this by three? 35:29.280 --> 35:32.400 Yeah, we get another matrix. 35:32.400 --> 35:35.400 What if we kind of switch to that costume? 35:35.400 --> 35:37.680 Oh, it's bright costume. 35:37.680 --> 35:42.680 What if we do some funky math that we don't know whether it does anything real, but we 35:42.680 --> 35:48.440 just experiment with what functions look like, let's take the tangent. 35:48.440 --> 35:53.160 And because I tried this, this actually multiplied with 300, never mind where that formula 35:53.160 --> 35:56.520 came from. 35:56.520 --> 36:03.160 And, oh wow, this is, this is kind of cool, how about I do this with live video? 36:03.160 --> 36:08.440 So I get a video snap on the stage. 36:08.440 --> 36:18.040 And I'm doing this, not with the camera view, but I'm doing this forever with my webcam. 36:18.040 --> 36:22.000 And now I've got live video. 36:22.000 --> 36:33.520 And this is really a bad creative way to explore mathematics and to create media. 36:33.520 --> 36:35.760 But what about hard computer science? 36:35.840 --> 36:39.920 What about the kind of stuff that you need to learn in college? 36:39.920 --> 36:43.800 So if you look at this category, these are our control structures. 36:43.800 --> 36:47.760 So we've got some events, we've got loops. 36:47.760 --> 36:51.560 And of course, the hackers will notice there's no while loop in there. 36:51.560 --> 36:56.840 So it can't be a real programming language, because it doesn't have a while loop. 36:56.840 --> 36:59.800 So we are going to make a while loop. 36:59.800 --> 37:04.960 We're going to say, while test, making action. 37:04.960 --> 37:06.480 So now I'm making a new block. 37:06.480 --> 37:09.000 I'm going to say test is going to be an input. 37:09.000 --> 37:13.120 It's going to be predicted that is going to be evaluated repeatedly. 37:13.120 --> 37:15.760 And the action is also going to be an input. 37:15.760 --> 37:20.120 It's going to be another script in this C-shaped way. 37:20.120 --> 37:27.200 So now I have this block, this wild block. 37:27.200 --> 37:29.640 I don't want to write a little test case for this. 37:29.640 --> 37:31.200 And for this, I'm going to import something that 37:31.200 --> 37:35.680 has been not as contributed, a library, a 3D beetle geometry. 37:35.680 --> 37:39.200 That's like a turtle, except in 3D. 37:39.200 --> 37:42.440 So I can open a 3D window. 37:42.440 --> 37:45.840 And I want to do something like, well, I guess you guessed it. 37:45.840 --> 37:47.520 I'm going to do variable. 37:47.520 --> 37:55.560 I'm going to say, you know, go to the beetle, reset the whole thing, start extruding. 37:55.560 --> 37:58.680 That's what you need to for 3D. 37:58.680 --> 38:12.360 And then I'm going to say, while A is less than 300, let's increment A. 38:12.360 --> 38:14.680 And now we're just going to do the usual thing. 38:14.680 --> 38:21.400 We're going to move the distance of A. Let's turn this around. 38:21.400 --> 38:28.320 And let's rotate along the y-axis by 90 degrees. 38:28.320 --> 38:30.720 Now if I click on this, you know, nothing happens. 38:30.720 --> 38:32.120 The beetle doesn't know what to do. 38:32.120 --> 38:37.640 So I'm going to define, while making new control structure, I'm going to start by evaluating 38:37.640 --> 38:38.640 the condition. 38:38.640 --> 38:43.480 So I'm going to say, if I can't say if test, because test is un-evaluated, so I need to call 38:43.480 --> 38:46.760 it, it's a lambda. 38:46.760 --> 38:52.560 If the test is true, I am going to run the code that is this input here. 38:52.560 --> 38:54.160 I'm going to run the action. 38:54.200 --> 38:56.360 Now I've done it for the first time. 38:56.360 --> 39:00.360 And as in the first logo example, how are we going to do it for all the other times? 39:00.360 --> 39:08.200 We're going to recursively call test with the action. 39:08.200 --> 39:12.680 And this is how we define a control structure recursively. 39:12.680 --> 39:14.640 Let me actually try this. 39:14.640 --> 39:17.840 So wow, so we've got a 3D spiral. 39:17.840 --> 39:19.360 It's not really 3D yet. 39:19.360 --> 39:22.120 Let's actually try to make this a little nicer. 39:22.160 --> 39:26.160 I'm going to set the pin color to something yellowish. 39:26.160 --> 39:32.960 And I'm going to change the pin color by 25. 39:32.960 --> 39:35.320 So now I've got the sides. 39:35.320 --> 39:37.960 I'm also going to make the size a little bigger. 39:41.680 --> 39:45.560 Setting the shape scale to something like 15. 39:45.560 --> 39:48.960 And I'm going to rotate again. 39:48.960 --> 39:53.280 I'm going to set the Z rotation to 1. 39:53.280 --> 39:54.000 And click on this. 39:54.000 --> 39:58.200 And now we've got a funnel again. 39:58.200 --> 39:59.360 This is interesting. 39:59.360 --> 40:03.680 Let's actually adjust this for some 40:03.680 --> 40:10.080 I'm going to rotate it by 300 divided by A. 40:10.080 --> 40:11.160 Let's try this up. 40:11.160 --> 40:13.440 This isn't even better. 40:13.440 --> 40:16.200 And I'm going to say, for the final thing, 40:16.200 --> 40:20.680 I'm going to rotate it slightly off. 40:20.680 --> 40:25.120 And now I'm getting a very interesting funnel. 40:25.120 --> 40:25.880 This is something. 40:25.880 --> 40:32.400 And I can 3D print this as we have done. 40:37.400 --> 40:40.880 The ideas sort of become reality. 40:40.880 --> 40:44.960 And we can take them again to the real world. 40:44.960 --> 40:48.800 And this is something that we're frequently doing. 40:48.800 --> 40:50.400 There are other representations. 40:50.400 --> 40:53.440 There's a whole group here at Phastam, at Phastam Junior, 40:53.440 --> 40:58.880 along with their sling machines where we can stitch these patterns. 40:58.880 --> 41:02.640 And really, when we think about what we've shown you, 41:02.640 --> 41:06.960 we've shown you kind of logo, small talk, 41:06.960 --> 41:11.760 e-toys, scratch, microblocks, and snap. 41:11.760 --> 41:14.360 Those are the languages that we love. 41:14.360 --> 41:17.560 And the languages that we make. 41:17.560 --> 41:21.600 And it really kind of boils down to the question, 41:21.600 --> 41:24.800 is this how you make a programming language for kids? 41:24.800 --> 41:26.480 Well, we know what we love. 41:26.480 --> 41:29.480 We love open languages that you can inspect 41:29.480 --> 41:31.080 that you can learn from. 41:31.080 --> 41:35.960 We love live languages that you can explore. 41:35.960 --> 41:37.920 And we love blocks. 41:37.920 --> 41:40.960 Now, we know that there are other ways to learn. 41:40.960 --> 41:44.320 There might even be other programming languages. 41:44.320 --> 41:47.120 We believe they all have one thing in common, 41:47.120 --> 41:51.360 that the blocks that you pick up to build something, 41:51.360 --> 41:56.000 really have the secret, that you build something with them, 41:56.000 --> 41:59.440 but in as much as they build something with you, 41:59.440 --> 42:04.240 they turn us into architects, into scientists, 42:04.240 --> 42:07.680 into poets, and painters. 42:07.680 --> 42:12.080 And it's really the making of things that 42:12.160 --> 42:15.440 makes consumers to contribute us. 42:15.440 --> 42:20.880 And in that sense, I'd like to invite everybody to go to learn.