 this. Oh, wow. People are coming in. Okay, good. Wow. Thank you so much. Thank you. Thank you. Hi, everybody. My name is Jens Moerlig. I'm a researcher with SAP. This is my friend and colleague, Bernardo Magoza, a researcher with Arduino. And we'll be presenting a graphical programming language that we're working on together with our friend, Brian Harvey, who's a professor at UC Berkeley. And the language is called SNAP, which is kind of a generic name. It's got the name Build Your Own Blocks. So what is SNAP about? SNAP is anybody know Scratch? Awesome. You all just know Scratch. Anybody know SNAP? Okay, great. So I'm going to show you something new. Okay, SNAP has been created for a new course at UC Berkeley. That's in place now for six years. They replaced the old CS10 course, which is the introductory computer science course for non-CS majors. But the new course is called the Beauty and Joy of Computing. And just changing the name and switching over to a language that is more accessible has kind of attracted more underrepresented minorities to the course. So for the first time in UC Berkeley history, actually the course has a higher number of females than males in that course. And that's probably because formally it was named introduction to symbolic programming. And so names matter and accessibility is something that is not just for disability issues, but also for regular people. So the development of SNAP, SNAP has been for a long time kind of my side project as I was a programmer and lawyer for another company. But then we got kind of lucky. We got some funding from the National Science Foundation. We got my employers to kind of fund it and let me work on it. Neosoft and now SAP and Y Combinator also. There's a curriculum, the Beauty and Joy of Computing curriculum that's been developed at UC Berkeley and now at Nationwide Education Development Center. And it's also an APCS Principles course. That's kind of a new kind of course in the United States. That's sort of like a centralized standardized course for the big ideas in computer science and BJC, the Act on the Beauty and Joy of Computing is part of that, is one of these courses. And since October now since the last semester, we're kind of dissipating at Nationwide. There's a MOOC, a MOOC on edX. And there's a project to bring this course to 100 high schools in New York City and we've been working with them for the last year. And they're kind of using this course and also using this language. So the language is why we're here. It's web browser based. It's pure HTML, JavaScript. So it runs in the browser. It doesn't have to be installed, which is a problem. The schools have tried to install software. Sometimes they won't let you. It's been translated right now into 39 languages, most European languages, but also the Asian ones. It's of course free and liberal and open source. So it's all on GitHub. You can fork it and people have forked it a lot. There's also a free cloud service so kids can in school start a project and then continue working at home by just logging into the cloud or keep working on it on their iPads. And it's used as a teaching and research platform in many institutions. So our colleague, Brian Harvey, coined this term that snap, which is our language, is basically skiing, but it looks like scratch. So what does that mean? So from scratch, we're taking these blocks that stick together that prevent syntax errors that look inviting. We've got the 2D cartoonish micro world where there are sprites that can move around. We're against the backdrop, which is called the stage. We've got the parallelism from scratch where things can go at the same time. You don't have to think at the level of ticks in order to make things move, but you have actual threads and processes. And it's one of the most important things. It's interactive. It's constantly live. There is no compiling. Run cycle by wherever you click on a block, it immediately happens. And I'm going to show some of that liveness, which is important to make something self-discoverable. So you don't have to Google how does it work. You can just try it in a safe environment. So this makes for a low floor, as we say. It's an easy access. It gets you started. But it's also a scheme disguised as scratch. So from scheme, we're taking the ability to not just use the blocks that we give you, but also it's an extensible language. You can build your own blocks. You can build any blocks. And by any, I mean you can even build control structures. It's dynamically typed. So we've got heterogeneous data structures. And we've got lexically scoped variables, which allows us to do real computer science. We have some first-class stuff, including first-class lists, lists of lists that allow us to build any data structures. And we've got a way to think about blocks using blocks, which is essentially lambda. So we've got lambda and lambda capturing non-local state of variables. And that also allows us to not just model any data structure, but to model any control structure. Basically, kind of build your own programming language in blocks. And we've got some fun stuff like first-class continuations, because we're talking about a scheme, which kind of allows us to build our own, like break things and non-local exit control structures. And because we're encouraging students to use this language to build their own control structures, we have proper state recursion. So they can model it recursively, because that's a powerful idea to think about and to learn. So this is basically the old battle cry of the logo community, right? So we've got the low four, but we have no ceiling. We do have a ceiling. Technically, you can't do everything with Snap, but conceptually, anything and everything that you can express in a programming language, we want to be able to express in this kind of kids-looking-like language. So there are some other things that we took from other environments that inspired us, like small-tag logo and self. So we've got more first-class stuff. We've got more ways to work with data. We've got Web API, so kids can play with robots and drones and stuff. It's extensible with JavaScript, so you've got a way to kind of write your own blocks. And even if it doesn't exist yet, if you need privatives, we can transpile and compile the blocks to other languages so we can embed it on little robots, because some of these, like Arduino's, they really enjoy having their sketches kind of natively because they're low-powered machines. And we can deploy these things as native apps also. And this is basically what we call wider walls. So these are the three dimensions that we're talking about. Low floor, low entry, no ceilings, so you can stick to Snap and do your PhD in Snap, but there's also a wide variety of things, and there's usually more than one way to do one thing, so we're very encouraging people not just to think that this is the right way, you can do it, but there are different ways and they should all work. So, oh yeah, let me show you. Okay, good. What's happening? I didn't get my Macs. So this is, anybody seen this? This is the project that started it all. It's called V, and what this says is it's a little project and here's an example of a custom block, and this is how we define the block V. So on this stage what we have is what every scratch kit will identify as a list watcher. It's a list. Only in the list there are blocks, and this is something provocative. This is something scratch doesn't give you. So here we have this function V, and I've kind of slowed it down to see what happens. So I'm just going to let this run. So just kind of slowly you can see what it does. It'll kind of, you know, turn left, move a little, and then run any of these blocks in the list, go back, turn right, run another any of these blocks. Let me just make it a little faster by turning off visible stepping so I can run this a couple of times and I get some random ends. And now the question that we ask kids, and this is actually how we kind of, you know, what happens now? So now I just pressed a button and there are two V blocks in that list. So what will happen if I now run this procedure? Any idea? Any guesses? W. W. W? W? W? Any other ideas? Let's just try it. I'm just going to click this. Oh, look, there's kind of some random shapes. Sometimes it'll just do that. Oh, sometimes it'll kind of really go crazy. So we're getting, you know, a fractal because V can now kind of, you know, call itself. And the reason why it doesn't go on forever, like it could go on forever, but you know the reason is it's just some statistical probability. It's not going to actually go on forever. And the beautiful thing about, you know, this is, we're showing two big ideas. And this is what the beauty of computer is about. We're showing two big ideas in this thing. It's a list of procedures. That's procedures data. Procedures data is traditionally considered something to be very difficult to understand for beginners especially. But here it's kind of a visualization that's easy for even scratch kids to get procedures data. And the other way is we're introducing recursion, right? Something that will call itself and the beautiful example of this is it doesn't even have to have a base case because the base case is just math. So this is kind of the archetypical example. Let me just show you a few things. So what we have in SNAP is, for example, three plus four. And you know, if I click on this, I'm immediately getting an example so I can try this. But I can also prevent this from being evaluated by putting it inside a ring. So now it's kind of protected against being evaluated. And then I can go and I can call it again. And now if I call it, I'm again getting seven. So why is this interesting? And I can kind of call it with a parameter and I'm getting eight. So this is, you know, I can package something and I can unpack it again. And that's seemingly trivial. But what this actually allows us to do is higher order functions. We can pass in the block and evaluate it later. So we can put our own higher order functions. So here's a map. And this is how a map is defined. And we can take map and, for example, a list, you know, just the old one, two, three, four list, and map the times two function over this. And we get a list where each item has been transformed. Or we can have, since this is function, we can have any function in there. Now this is going to be the square function. We can put in the function that makes a list. And we get, you know, a list of lists whose first item is the square of the input number. Or we can kind of go even crazier and make a list of lists of lists, which kind of turns out to be a table. So with these kind of simple, seemingly simple features, we can do pretty powerful things in computing. And so this is really what the beauty and joy of computing kind of was all about. So let me show you just one more example of this very quickly. So this is supposed to be the building in which we are. The weather isn't so great. So I took this off the web. My own one didn't have enough color. So here's an example of first-class stuff. So we've got kind of this first-class costume. And I can look at the pixels in that costume. And so I'm getting a table. And that was kind of almost 56,000 rows of four columns. And obviously, these are the RGBA columns. And so it's just a list. It's just a list of lists. So if it's just a list of lists, I can take my map thing and do something with it. So I'm just going to put the first item of the list in the second slot, put the second and the third slot, put the third and the first slot, and leave the last one, which is the A, where it is. So this is a function. I'm going to put this function into map and see what happens. And it's going to take a little while. Oh, but here it is. And I can compare these two tables. And if I look at the first number, see this is 84, 120, 204. Now it's kind of rearranged. It's just data. So what happens if I kind of redisplay this data? What's going to happen to the blue sky? I can make my own graphic effects. It's just high-order functions. This is just map. This is, to us, what the beauty of computing is all about. So I'm going to leave it here to hand over to my colleague, Bernardo Magosa, who's going to show you kind of some more concrete things to do with Arduino's and with 3D plotting. So basically, you know it's dangerous to do a live demo. It's even more dangerous when you have hardware involved. And I swear to God this was working last week. I presented it last week. I'll try it again. It didn't work 10 minutes ago. It might not work now. Let's try it. The idea here is I have exactly the same SNAP environment, only that it's a modified version of SNAP that lets you interact with Arduino boards. So the first thing you do is you connect to your Arduino board, which I have here. It tells me it's been connected. And now I have a sensor here. And I have an LED here. I'll try to be really fast. So I can try to get the analog reading of the pin where the sensor is connected. If I present it, I'll get a value. So it works exactly like SNAP. No difference. So let me try to plot this. To plot something, we need to have a sprite moving one step all the time. And basically when the X position goes over the edge of the stage, I want it to set to the other edge. What do I have to do with the Y position? I have to map it to the value of the sensor. So I'll just set Y to the value of the sensor. And what if I put the pen down now? And of course I'll need to clear the stage when the sprite gets out of stage, right? Okay, so if this was working now, you'd see my heartbeat, which you kind of do, kind of. And I can also map this to, again, the real world. And in the real world, I have this LED that would be mimicking my heartbeat if it was working. I'll try because these are very sensitive sensors and they sometimes need to be under a bit of pressure and in darkness. So I'll try to apply some pressure. Kind of. Do you believe me? I swear it's my heartbeat. So what we can do is I'll show you a one-minute video. Oh, what's going on? So this is a heart rate monitor. This is the LED. By the way, this heart has been coded in a language that's another modification of SNAP called Pitleblocks. So the whole thing is made with blocks. Here I'm trying to get my heart bumping. I'm not very much in shape, so it just took around 10 seconds. And you can see that the graph did actually work. I didn't fake it, I swear. I think I kind of broke the sensor, but pulling the cables, I don't know. And so to finish the presentation, I want to show you what this heart looks like in Pitleblocks. This is Pitleblocks. And basically, it's the same thing as SNAP, but now you have a 3D world here, and you have a beetle that receives your instructions. So I can, for instance, have it repeat something 24 times and create a sphere behind it. Cool thing about this is once I have my shape, I can download it as an STL and print it in a 3D printer or as an OBJ and use it in my game. Okay? And since this is SNAP, you can have your own procedures. You can have your own more complicated blocks. Like, for example, this block that I built that generates a heart shape. I, of course, copied this from Wikipedia. I looked for a function that draws a shape. I don't know the first thing about mathematics. And let me show you how it works. Now it was in Turbo mode, but... And so basically the idea here is that block programming is serious programming and you can do pretty much everything. And I don't know if we have time for questions, I think. Yeah? Yeah? Okay, so I think I'm done. I actually used to teach kids with scratch and it worked really well, but after a while, it just kind of grew out of it. Like, it hit some wall. I could tell SNAP is more powerful, but have you considered at some point offering a way to transition to text-based programming like within the same tool? Yeah, I mean, you even mentioned it was kind of like scheme. Okay, there's a question. Like, what's the strategy to transition to progress from block-space coding to text-space coding? And I've kind of given talks on this the other way around. You can progress from text-based code to block-space code. So you've got to watch out for the motivation behind this. So once you realize that, you know, working with blocks in a live environment, you're actually working at the AAST level of a programming language. You're actually modifying a script as it is running. This is something no text-based language will let you do. It will... There are live coding languages, but they will only, you know, refresh after the next loop or they'll reset it and restart, you know, and in music they'll do it, you know, at the next beat or at the next bar. So, conceptually, I think we all know that text-based programming works. I mean, that's everybody... I mean, this is coded in text-based JavaScript, you know, underneath. But, conceptually, there is no necessity. Conceptually, there are interesting things that take blocks to the extreme as we are. And there are really two things about text-based programming that... Well, three. First is because my dad is using it, right? So I keep telling kids, you know, but your dad's boss, you know, she's using Snap. You know, well, maybe at some point, hopefully. And the other way is there are issues, of course, with the... We're looking up blocks in the palette. So this works great for, you know, 120 blocks. What if you've got, you know, 1,024 blocks and how are you even going to find them? So I could show you some more, but we've built something into Snap that lets you type blocks. So there's a typing mode and you could just start typing and then you get all the blocks. And with just a few keystrokes, you kind of assemble a script. It's kind of inspired to do this and basically to the point of almost copying it from Greenford, from Michael Culling and New Brown. There are new frame-based editing, as they're calling it. The Stride Editor has been a great source of inspiration to type more complex things. So you don't have to use the mouse to drag it up. You know, start with the control palette and then go to the operators' palette, drag it out, you know, and it keeps switching. So if you already know there's something like that, you can type it faster. That's kind of one of the main things for power.