Good morning everyone, I would like to introduce the presenters for our next talk, Barnett
Homa Gosa, John Maloney, Yens, Moniche, and Yadika, I'm fortunately couldn't be present
today. Their talk is about program to learn the power of creative coding. Without further ado.
Thank you so much, thank you. Good morning, Foss Dam, good morning, Brussels. This
is crazy. It feels like such a big auditorium. I'm totally not used to this. Wow, I want to be
rockstar when I grow up. So, free and open software was mostly written by humans who somehow
learned to code somewhere, and we've devoted our lives, mostly to the question, how do you make
software for kids and how do you make a programming language for kids? So, when I say it's
we, these are my friends, they're not and John and Yadika, and as was just said, Yadika cannot
be here today because she's just returning from South Africa and she is sick today, so she's
very disappointed about that. So, how do you make a programming language for kids? How do people
learn how to code? If you're from Germany, anybody from Germany? If you're from Germany, you know
how this works. All you need is an appliance for this. Maybe I know this, it's a funnel. So,
you need the right to addactic tools, the right materials, and as you can see in this picture,
this is kind of the traditional way. I love the ratio of educators to students in this here.
So, if you look at this, it's the teachers who are doing something who are literally transferring
knowledge into the student, and what the student's job is is to sit still and to endure it,
passively, and this is how you learn anything, I guess, including how to code. And of course,
it's never been that way. It's learning has been the subject of scientific and career. And
there's famously, there's Swiss psychologist Jean-Pierge, who took a different approach of this,
and said learning is actually something that is constructed in your mind through the
accommodation and association. And this is a kind of a picture of Jean-Pierge's idea is that,
you know, it's not the teachers who are active. Learning is something that is actively done
by kids, and it's sometimes best done if you just let them roam free by themselves. And this is
what we're about to show you. We really can't wait to show you some of the programming languages
that we love and some that we make. So, this is about blocks, about playing with blocks.
Now, the first programming language that we know that sort of was specifically made for young kids,
for kids, you might know this is a similar paper, Marvin Minsky, when they founded the AI lab at MIT,
they first thought about how the kids actually learned. And the first language was logo, and you
can see this is Cynthia Solomon, they already had this turtle kind of a physical way to draw things
in a first-person perspective, and also, so they drew shapes, and also they drew shapes on the stage,
like a spiral, the famous, famous logo, a spiral, and there's one thing I found,
in similar paper, it spoke that sort of reflects a lot how we feel about programming.
If you look at this, this was written 40 years ago, it says in most contemporary educational
situations, the computer is used to put children through their faces, and to give feedback,
and dispense information. And if you think about this for a while, substitute computer for AI,
then sort of what is happening today. And the part that paper was kind of adamant about is,
this is really the computer programming the child. But the idea and logo was that is reverse,
that the child programs the computer, that the child teaches the computer how to think,
because we learn best when we teach, as I'm sure many of you have found out. So how did this
work in logo? Here's logo, Berkeley logo, this work weight, I'm just going to exchange this.
Can you hear me? Great. So in logo, if I type in anything like spiral,
it will tell me, I don't know how to spiral. So doesn't know how to spiral. So let me teach you
how to spiral, and I would literally type to spiral, and I could say, okay, I need some steps,
and I need an angle. And now I don't need the indentation I can say, you know, if the steps are
less than one, I want the program to stop. This is sort of my base case. Otherwise,
forward the steps, and go right at the angle, and then, you know, spiral, steps one less at the angle,
and end. And now it's as spiral was to find now, kind of my computer logo knows how to spiral,
it's actually try this. So I'm spiraling, say, 100 times, I angle of 20, and I get the spiral.
And I can start to experiment with things like I can say, okay, let's clear the screen and
spiral, like 300 with a goofy angle. I get a different spiral. And so this is what you've seen in
that first picture. And if you, if you look at this, it's actually nice, because there is not
much syntax there, it's welcoming, it sort of gives you a quick start, it's sort of interactive,
it's a ripple. And, but it also is kind of sophisticated, because you don't use a loop here,
you use recursion, kind of tape recursion, to model something. And these are really kind of the two
guiding ideas that a lot of our programming language have is that, you know, it's great to have
something like a low floor that is welcoming, that is important pedagogically, but also,
we shouldn't dumb down things for kids. Kids should be able to do everything that we adults do,
so there should be no ceiling. And those are sort of the two guiding points that we now
like to kind of go deeper into and don, handing over to you to show how this evolved into more
complex systems.
So, Alan Kay was the leader of the small-talk group at the Zerach's Palo Alto Research Center
in the 1970s. And in 1972, he wrote this paper, a personal computer for children of all ages.
In this paper, he describes this futuristic scenario of two children playing outside
with battery powered tablet computers and they're playing a space wars game that they created
themselves. The computers are connected to an information resource. At some point, they decide that
they would like to add the sun to their game so that sun would gravitationally attract the ships,
and that would make the game more interesting. They go to a teacher and ask him how would they add
gravity to their system. He says, well, I don't know, but here's a suggestion. Why don't you
look this up on the information resource? So, they look it up, they figure out what the equations
are and how to add that to their code, and they go off and happily play this enhanced version of
their space wars game. Now, what's impressive about this is the time at which it was done. So,
1972, if you throw your mind back to that, that was the time when computers filled rooms and
were usually programmed with punch cards. Unix was just getting started at Bell Labs, but it was still
internal. You know, personal computers were not even thought of yet, except maybe it Zerach's
park. So, Allen's group went on to develop this language called small talk, and most of you know
small talk is the father of object-oriented programming languages. It's sort of inspired things like
C++ Java, Python, etc. It also was the inspiration because of Steve Jobs's visit to Allen's
group. It was the inspiration for the Lisa and the Macintosh. So, you might think, well, okay,
small talk, that's like a serious programming language for adults. How do kids fit into that? Well,
the small Allen really thought of it as a programming language for kids, and the small actually was
a reference to that idea that it was for small people. Did they actually actually use small talk,
and they did. They took altos to a nearby middle school in Palo Alto, and they taught kids how to
use small talk, and they created things like these drawing editors. The bottom shows
modification that a child made to an existing animation system. So, this child added the ability to
combine two animations, like the jockey and the horse, and make a composite. Other kids did things
with music. So, one girl had created an musical accompaniment system, so she could program the
altar to play a piano part while she played her violin. That's an alto there in the foreground.
Another child made a music notation system, and yet another one made a diagram editor, schematic
diagram editor. I want to show you a little bit about what this small talk system would have looked like.
So, I have here, this is a small talk system that was, this is pretty much the small
talk system they would have used. This is a few years later from 1983, but this is the actual
Xerox small talk image that they shared with a number of corporations, including Apple.
And you can see it looks pretty simple by today's standards. It's only black and white. It's
only got one. Well, I guess it's got bold and so forth. But, you know, it's not super fancy.
It's got scroll bars, but you'll notice that when I scroll window doesn't update until I release
the mouse. So, the scroll bar moves, but nothing happens in the window until I release it. That was
deliberate, because the altar was extremely slow by modern standards. Thousands of times slower
than our current computers. So, if they had tried to update the screen every time, you moved a few
pixels, it would have been really slow to scroll. We're going to try to change that since we
have a modern computer that's a lot faster. So, what I'm going to do is as I slide this scroll bar
up and down, I'm going to hit the control C here, and I'm going to bring up a debug window.
And this debug window shows a number of things on the stack, but this one looks promising,
scroll absolute. And we'll notice in here we have sensor, any button press. That means while
the mouse button is pressed, while true. So, while it's true, do whatever is in the square
brackets here. So, that's interesting because this self-scroll view, which is the thing that
updates the screen is not in the square brackets. So, let me go ahead and move that inside there.
Okay, I've just accepted that change. It's thinking about it. Okay. And now let's see if it works.
So, it's working in that window. Yeah. Let's see if it works in this window. So, this sort of
shows that small talk was, I mean, they didn't really have the concept of open source at the time,
but small talk was, in some ways, even better than open source. The source code was not only available,
it was built right into the system. So, you could actually make changes to the system while it was running.
Let's look over here. This is a system browser that shows all the code in the system.
And I have a, there turns out to be a pen class, and it happens to have, I mean, this was in
the XRX image, the spiral function. And often in the small talk system, there would be comments in the double quotes,
which you could select and then execute. So, let's see what that does. So, here we have the logo spiral that
ends showed, implemented a slightly different way in small talk, but there it is. I was lucky enough
to actually go and work for Allen K's group in the mid 1990s. And Dan Engels joined the group
around the same time, and Allen was still interested in making a programming language for kids.
So, he said, well, you know, what language should we build the, the programming language for kids in?
And Dan Engels said, well, small talk, of course, because everybody loves small talk in Allen's group.
So, we put together a small talk system called Squeak, and it was a new implementation,
but it was based on the original XRX small talk. We opened source that 1996, and within three
weeks, it had been ported to Linux and Windows. It was originally just on Mac, which, you know,
just blew us away, and it just underlined the power of open source. I'm going to show you a
little bit of the E-toy system that we created. And I'm going to show it in this system called
Squeak. JS, created by Vanessa Friedenberg, let's see if I can go full screen.
Oops, that's not the one I wanted.
Yes, yes, yes. I want to each voice. So, this is the E-toy system, and when you, when you
create a new project in E-toy, you get sort of a blank slate, and to start working with it,
you have to draw something, and I'm just going to draw something that looks a little bit like the
logo turtle. And when you draw something, you get an object you can move around. If you right click on this,
you can bring up a halo of different tools. I'm going to open a viewer on this object,
and the viewer has things like the X and Y properties, and you can see those are changing when I
move it. It also has functions that you can call commands. So, for example, this one makes it go forward.
I can make a script by dragging out that block, and now I get a little editor for a script that says
forward, I'm going to add turn to that. And if I click this, it goes forward a little in turns a little.
Now, a big part of E-toy was the idea of building simulations, like the space-words game that has a
simulation of gravity. And so, a key part of it is that there was a way to make a script run continuously or tick.
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.
To go a little further, I want to make the logo spiral, so I'm going to add a variable here,
I'll call it DIST, and when I do that, I get a new variable, which I can drag out and just
replace that five with the variable. I'm also going to need to update the variable every step.
So, I'll drag this block in. So, this is sort of saying set the value to something, but if I click this,
I can change the operation to increase by. So, I'll make it increase by say two each time.
Let's make the turn by something like 89. And one more thing I want to do is I want to
put the pen down. So, there's a pen category here, and I can say pen down true.
And let's start that ticking and see what happens. So, you can see it's gradually building this logo
sometimes they call it the spiral for square spiral. Now, while that's operating, I can also show you
that you can get a viewer on anything, any object, including a viewer itself. So, I just made a viewer on
this viewer, and it also has a turn properties. So, if I drag that out, I can get a script on this,
and I can start that ticking. So, so that was each voice. So, now, let me just fast forward.
So, after I worked on each voice with Allen's group for a number of years, I went, I got to go
and work. I feel very lucky to have been privileged to work in these great teams. I went to the MIT
Media Lab in the Lifeline kindergarten group, and I worked with Mitchell Resnick on Scratch. How many people
have no about Scratch? Great. It's actually, to our surprise, it actually got listed on the Taiobi
programming languages index, and it's, it's number 12 on the sort of popularity index of programming
languages. Anyway, in Scratch, as you know, you can, you can make things move and turn.
There are two key things that are different about Scratch than from each voice. First of all,
Scratch was not really intended as a tool for teaching things. It was more intended as a tool
for kids to make things that they cared about. So, instead of really focusing on science ideas and
mathematical ideas, Scratch was intended to be a media tool that you could use to create
game stories, animations, music videos, and so forth. And so, that was a little bit different.
The other thing that's different about Scratch was it was intended to be used in after school,
after school computing centers, like the computer clubhouse network that the Lifeline kindergarten
group had started a few years ago. And as a result of that, it meant that everything had to be
very visible and discoverable. So, you'll notice that all the blocks are visible here,
whereas in each voice, you didn't see anything until you brought up a viewer. Also, all the
sprites in your system, if you have more than one, or visible all the time. So, we try to make
everything explicit so that people could quickly discover and figure out how to use this.
I'm just going to quickly make the logo spiral here. So, I'm going to add a variable and, again,
call it DIST. And I'm going to change it by, let's say, two every time. And I want to do this repeatedly,
so I need a loop. So, I'll put a forever block around this. And finally, I need to put the pen down,
oops, I forgot something. We have to make it move by, oops, move by the distance each time.
And also, also, make it move by, like, there we go.
Oh, I know what we have to do. We have to set the distance back to zero.
It's a lie demo. And let's put the cap back in the middle of the screen.
There we go. Square spiral.
All right, with that, I'm going to turn it over to Benat.
Sorry, we're very quickly with our computers. So, each of us wants to use theirs.
So, about eight years ago, we were trying to imagine what a programming language,
like the ones you've seen today, would look like for physical computing,
for things like microcontrollers, like this one or other microcontrollers.
And we set off to create a language that we call microblocks. It was, of course, inspired in the
tradition of small dogs, crotch, snap that we'll see later, low, all these languages.
In all these languages, the ideas you've seen was to explore different concepts
through the use of programming, programming is also important, of course.
But the ideas that you explore different ideas by means of programming, right? So,
programming is a means of exploration. Since this is a physical computing platform,
one thing that you might want to explore is the physical world. And the physical world is,
nowadays, we understand it as governed by the laws of physics. So, let's explore one of these
such laws. The one, everyone knows about which is gravity. So, I have a little microcontroller
here called the data board or data board. I never know how to pronounce it. I'm going to connect
to it. Notice I'm connecting to it wirelessly. So, there is no cable attached to it.
Now, it's connected. And now, we can begin to program it. And, you know, this thing has an
accelerometer. An accelerometer that tells me how much acceleration this is experimenting.
Right now, we're experimenting about 1G. It's multiplied by 100. So, we have more significant
digits, right? If I click on this block, you see this is updating live. But it's kind of awkward.
If I want to check all the time what's going on. So, we have this little graph window that I
might want to clear. This is from previous tests. And I may want to graph this constantly
to see what's going on here with the gravity, with the acceleration. And you can see how
it stays approximately at 100, except that I'm shaking because it's really cold in this room.
So, I'm not perfectly steady. So, let's experiment. Let's see what happens if I throw it into
the air and hopefully catch it and don't end the demo prematurely. Okay. So, you've seen here,
there's a point where the acceleration went down to 0G. That's the freefall moment. I'm not a
physicist or anything, but I've managed to see that it's actually real, that it happens when things
are infreful. They experiment no gravity, right? That's how this 0G planes work and all this stuff.
So, as a kid, I might, you know, plot this randomly. And, oh, wow, what's going on here? And here's
a moment of exploration that you might want to tap into. And, you know, while we're graphing things,
well, this micro-contour is packed full of sensors. We might want to try other things. So,
one exploration might lead to another. Let's explore something like the temperature.
And you can see how the graph dropped really low. That's why we are so cold.
It is really cold. This boring sensor-dogus temperature doesn't really change that much, right?
Let's try something else. Let's try with a magnetic field.
Okay, this went way up. And this is sort of a boring sensor, too. Unless you happen to have a magnet,
then it becomes a pretty much interesting sensor. I can even try to draw stuff with my magnet.
And, you know, what this reminds me, it reminds me a bit of sine waves and audio waves. So, again,
exploration sparks ideas. I might want to turn this thing into music. Why not, right? So, let's see.
I'm just going to turn on and off a pin where a buzzer is connected. You know, when you turn on
and off a speaker, when you give it power and then take it away, if you let fast enough,
you're creating what's called a square wave. And the frequency that we hear is actually an illusion
created by the fact that this is toggling so fast that our ears, our brain, interprets that as an actual sine wave,
as an actual sound wave. So, let's try that.
Can you hear that?
Okay, it sounded better at home, but I hope you're getting the idea.
So, exploration sparks ideas, sparks more exploration. But let's, let's spiral back to
logo. If you remember, we started off by talking about spirals and we've been creating spirals
in all these languages. Spiral is sort of one thing that's stating our language is from the very
beginning. And I don't know if you've noticed, we have a little robot there that very conveniently
just stopped working. On it's task, not like working for it.
I need this. This is actually a robot design by a lab where I used to work close to Barcelona,
the city lab. And it's a turtle robot, just like the ones that we saw in the first light,
the logo, turtle robot, just a modern version of it. And it's been drawing, I don't know if
you'll be able to see this, but it's been drawing the exact same spiral that we've been showing
all along. And you may want to, you know, in all these languages, you learn by looking at examples
and by inspecting the code that other people have written. But how do you get the code out of this
thing? Right? It's in here. How can I get to this code? How can I learn from this machine?
Well, I could just disconnect from this port and say, open from port. Let me close this.
So of course, I don't want this project anymore. And it's as connected to port to proceed.
Now, let's see if I can connect to that port. Oh, I think it's maybe too far away.
I know, there we go. This is it. Hopefully it's not too far away.
Yeah, you and usually need to. Let me put it closer to.
Yeah, it's not connected. Let's open from port again. Connect.
Okay, there we go. Hopefully it's close enough now. Okay. So now it's reading the project
back from the port. It's actually for the gigs out there. It's decompiling the byte code that's inside
of this thing. And here's the code that powered my spiral. But that doesn't teach me much, right?
How does draw spiral work? Well, let's look into it. Let's show the definition of this block.
You see, it's very similar to the way that we've programmed the others. But you may want to
inspect what move does. So you can also inspect that. You may want to know how we are getting
these motors to move. So you can inspect what that does. And you get the idea, right? Everything is
inspectable and you learn by looking at how others have written code. And with that, I'm giving it to
Ian's again. Wow. So you've seen that we're really kind of evolving diving into the
blocks paradigm that kind of, from Etois over scratch to micro blocks. And so we've thought,
how could we take this even further? And so this other kind of language that we're still working on
this snap. And we've made that for college for UC Berkeley. It's actually a block space language
a scratch for college. And it's free and open source software. You said UC Berkeley's introductory
course, which is called the Beauty and Joy of Computing. And in snap, we're trying to sort of make
two things very apparent. We'd like to teach data science by using media computation, because media
is something where we get lots of data. And we'd like to do really rigorous computer science.
And I'd like to show you kind of both of these things really quick. Okay, this one works.
Okay, I'm too nervous to operate on hardware here. Okay, wait. So this is snap. And one thing
that is about media would be, how about I just try to record like a sound, get my own data
into the system. And this isn't electronic, this is just told you it was going to be a rock star.
Let me, let me try there.
It needs to process the data at once, okay, now I've got this recording and if you look
at the recording and snap, we can analyze it, here is the sound and there is a sound called
recording.
The duration is like 40 seconds and I can look at the samples and have a look at the
samples.
It's a list of numbers, a pretty long list, 700 thousand numbers starts with zero because
in the beginning, I was just pressing the button, not playing anything in the ukulele,
but if I scroll down, I see numbers, lots of numbers, samples are in between minus one
and plus one and these are the signals.
Now if I've got numbers, kind of the big idea is that computers are great with crunching
numbers.
What if I want to transform these numbers?
Like I want to take, I'm computer scientists, I want to have zeros and ones, so I could
take the ceiling, but now what we teach kids usually is this kind of computation of
thinking.
First, I need to introduce variables, I need to introduce conditionals and loops and then
I need to talk about whether a race start with zero or one, and all these are technicalities
that have nothing to do with how data actually works, whereas mathematicians use to think
about vectors and matrices and multiple dimensions for a long time.
So we decided that, kind of, like in APL, everything should work on data and any dimension
so I can just say, I want the ceiling of all of these numbers, and now I'm getting a list
of ones and zeros, which makes me feel much more comfortable as a computer scientist.
And I want to know what this sounds like, but I play this back.
Okay, I didn't try this in this auditorium.
See I was going to be a rock star in this room anyway.
It really the message here is about this being about data.
Another way how we can get data into the system is, you know, take a picture of ourselves,
get the kid into the program, this kid is a little old.
And the same thing that we can do, we can look at the pixels of this thing.
Here's the camera, I can see the width of the pixels, I can see the pixels.
Now the pixels are actually a matrix, it's a list of lists with alpha, channels, red, green,
and blue.
So what if we do stuff with that?
What if we, for example, just multiply this by three?
Yeah, we get another matrix.
What if we kind of switch to that costume?
Oh, it's bright costume.
What if we do some funky math that we don't know whether it does anything real, but we
just experiment with what functions look like, let's take the tangent.
And because I tried this, this actually multiplied with 300, never mind where that formula
came from.
And, oh wow, this is, this is kind of cool, how about I do this with live video?
So I get a video snap on the stage.
And I'm doing this, not with the camera view, but I'm doing this forever with my webcam.
And now I've got live video.
And this is really a bad creative way to explore mathematics and to create media.
But what about hard computer science?
What about the kind of stuff that you need to learn in college?
So if you look at this category, these are our control structures.
So we've got some events, we've got loops.
And of course, the hackers will notice there's no while loop in there.
So it can't be a real programming language, because it doesn't have a while loop.
So we are going to make a while loop.
We're going to say, while test, making action.
So now I'm making a new block.
I'm going to say test is going to be an input.
It's going to be predicted that is going to be evaluated repeatedly.
And the action is also going to be an input.
It's going to be another script in this C-shaped way.
So now I have this block, this wild block.
I don't want to write a little test case for this.
And for this, I'm going to import something that
has been not as contributed, a library, a 3D beetle geometry.
That's like a turtle, except in 3D.
So I can open a 3D window.
And I want to do something like, well, I guess you guessed it.
I'm going to do variable.
I'm going to say, you know, go to the beetle, reset the whole thing, start extruding.
That's what you need to for 3D.
And then I'm going to say, while A is less than 300, let's increment A.
And now we're just going to do the usual thing.
We're going to move the distance of A. Let's turn this around.
And let's rotate along the y-axis by 90 degrees.
Now if I click on this, you know, nothing happens.
The beetle doesn't know what to do.
So I'm going to define, while making new control structure, I'm going to start by evaluating
the condition.
So I'm going to say, if I can't say if test, because test is un-evaluated, so I need to call
it, it's a lambda.
If the test is true, I am going to run the code that is this input here.
I'm going to run the action.
Now I've done it for the first time.
And as in the first logo example, how are we going to do it for all the other times?
We're going to recursively call test with the action.
And this is how we define a control structure recursively.
Let me actually try this.
So wow, so we've got a 3D spiral.
It's not really 3D yet.
Let's actually try to make this a little nicer.
I'm going to set the pin color to something yellowish.
And I'm going to change the pin color by 25.
So now I've got the sides.
I'm also going to make the size a little bigger.
Setting the shape scale to something like 15.
And I'm going to rotate again.
I'm going to set the Z rotation to 1.
And click on this.
And now we've got a funnel again.
This is interesting.
Let's actually adjust this for some
I'm going to rotate it by 300 divided by A.
Let's try this up.
This isn't even better.
And I'm going to say, for the final thing,
I'm going to rotate it slightly off.
And now I'm getting a very interesting funnel.
This is something.
And I can 3D print this as we have done.
The ideas sort of become reality.
And we can take them again to the real world.
And this is something that we're frequently doing.
There are other representations.
There's a whole group here at Phastam, at Phastam Junior,
along with their sling machines where we can stitch these patterns.
And really, when we think about what we've shown you,
we've shown you kind of logo, small talk,
e-toys, scratch, microblocks, and snap.
Those are the languages that we love.
And the languages that we make.
And it really kind of boils down to the question,
is this how you make a programming language for kids?
Well, we know what we love.
We love open languages that you can inspect
that you can learn from.
We love live languages that you can explore.
And we love blocks.
Now, we know that there are other ways to learn.
There might even be other programming languages.
We believe they all have one thing in common,
that the blocks that you pick up to build something,
really have the secret, that you build something with them,
but in as much as they build something with you,
they turn us into architects, into scientists,
into poets, and painters.
And it's really the making of things that
makes consumers to contribute us.
And in that sense, I'd like to invite everybody to go to learn.