DOUGLAS KIANG: Hello, my name is Douglas Kiang.
I'm a computer science teacher at Punahou School in Honolulu, Hawaii.
And today, I'm going to be here to talk a little bit about Microsoft's MakeCode
environment that allows us to program these things called micro:bits,
which allow you to embed these in fabrics or cardboard or other kinds
of maker projects.
Really anything tangible you can kind of bring it to life
by working in the MakeCode environment.
So today, I'll show you a bunch of different examples.
This language that Microsoft has created is block based,
but it also goes directly to JavaScript.
And you can also program these things in JavaScript, or even in Python.
And I'll talk a little bit about that as well.
So one of the things about MakeCode is you can use the same language
to program the micro:bits, which is primarily what we're going to talk
about today.
But you can also program Minecraft, which is really
kind of a neat development now.
So you can make things sort of happen in game by writing code.
So it's some neat stuff.
But let's sort of dive right in.
And to support this seminar I've created a bunch of resources online.
And if you go to this tinyurl.com/micro:bitworkshop,
you'll find links to lots of different kinds of projects, things to play with,
places where you can buy these things.
So you can get all of these things there.
Lots more than probably we'll have time to cover here.
But I encourage you to go out and explore and find lots of resources
to learn more about these things.
Now, just some caveats here.
First of all, I don't work for Microsoft.
I don't represent Microsoft.
I'm a high school teacher.
And I use these in my class all the time.
We love them.
We use them as a way to introduce computers and computer science.
And then we also use them to go a little bit
deeper into how you can really start programming
some really interesting behaviors and storing data, all kinds of things.
And we actually use it as a bridge to text based programming.
But I am primarily a high school teacher,
and so it's going to be more from that perspective.
Now, most of the demos today, just in the interest of time
they're going to be in blocks.
So we'll primarily be looking at the block based programming environment.
But I don't want you to get the wrong idea here in the sense
that you can do way more than just working with blocks.
And in fact, everything that we do with the blocks
here will translate directly over to JavaScript.
And there'll be a lot of other kinds of resources
for learning about how to program this in Python and other languages.
So if we take a look at the idea of Microsoft MakeCode--
and now just like our own CS50 IDE, one of the advantages to MakeCode
is that everything happens in a browser.
So if you're using this on your own, if you're
a high school teacher like me or a middle school teacher,
you're using it with students, you can use it right on the web.
If you just go to makecode.com, you'll get back to that title screen
and then you can go to online editor.
And the nice thing about it is you actually have a simulator,
so even if you don't have a micro:bit you can see immediately what will
happen in the simulator.
And I'll show you some examples of that live.
Again, like I said, we use this as a progression from blocks to text.
And I can say having worked with many, many students
that I believe that starting with blocks is a great way
to start beginners to programming, because the blocks really
get you the main concepts and the main ideas
behind programming, iteration, conditionals, functions.
But you don't have to worry about syntax.
You don't get hung up with the fact that you missed a semi-colon,
or you capitalized something a different way.
So block based languages are a great way to start.
And even for my students what we'll find is when we're
trying to think through a problem--
and remember the programming really is a process of solving problems.
Often, when students get stuck I'll say, well,
how would you sell this in blocks?
And they say, oh, well, I'd use this block and this block,
and, oh OK, I get it now.
And they'll know how to kind of--
and that happens to me, as well.
So sometimes if you get stuck think about what the blocks would look like,
and the blocks go right over to text.
So let's take a look again at how this works.
Again, MakeCode is a block based environment.
MakeCode it also provides a JavaScript tabs,
so you can tab right over to JavaScript.
There are some things that you can do in JavaScript that you can't do in blocks.
And so you can start if you are working in a block based project
and you get stuck and you're like, I don't see the blocks here
that are going to do this.
I need to send parameters into a function or something like that,
you can actually start writing your own functions and things in JavaScript.
And they will show up as a custom block with a JavaScript embedded
in the block.
So don't worry, you can definitely go from blocks to Java and back again.
There is a great editor called MicroPython.
It's an editor that's called Mu.
And MicroPython, you can also because we just started programming in Python,
so it will look familiar to you.
You can actually create Python based projects for the micro:bit.
And again, all of those resources are here at tinyurl.com/micro:bitworkshop.
So challenges for today.
Here's what we're going to do.
I'm going to give you an overview of the micro:bit hardware,
we're going to download and run a few programs to kind of see how they work,
I'm going to have you explore about two or three challenges just to give you
an idea, give you a taste of some of the different things that you can do with
the micro:bit, and then finally, I'll leave time for some questions
and answers.
So again, I work in a high school, middle school.
These are some kinds of projects that students have done.
I put this out here not as examples specifically of projects
that you would do, but when you think about doing
a project for CS50, what would happen if the code were not just confined
to running on a screen?
How could it go outside of that?
There are all these different kinds of projects.
And what I love about this is it allows you
to really bring in your own creativity.
And you can make something that you can actually use away from the computer.
Here's an example of a milk carton robot.
You'll notice there is the micro:bit.
And we're using these crocodile clips to attach them
to a servo motor on the inside.
And so this kind of opens and closes.
Now, the micro:bit is sensing the light.
And that kind of allows you to create all kinds of interesting behaviors.
Take a look at this one.
So this is an air guitar demo so--
[AIR GUITAR]
DOUGLAS KIANG: The micro:bits generating using great music.
[AIR GUITAR]
DOUGLAS KIANG: And think about what kind of inputs the micro:bit's taking in.
How is it figuring out how to change?
How's he changing the music?
[AIR GUITAR]
DOUGLAS KIANG: So if you think about this idea--
come on in, come on in.
So find an empty seat.
And this actually demonstrates a couple of the different inputs
on the micro:bits.
So the micro:bit allows you to--
it has a sensor so it can tell which way it's tilted.
So he's tilting the guitar and it's sensing
based on the tilt what the angle of rotation is,
and then it's changing the sound based on the angle of rotation.
Now, the other thing about the micro:bit is it actually has a light sensor.
And you have them on your table.
You can kind of check them out yourself.
But basically this is a five by five LED screen, and it also senses the light.
So if you cover it, it can tell that the light has dimmed.
So think about for your projects what potential that has for you to build
in some different behaviors for the micro:bit based on how much light it
detects.
So think about the micro:bit as a way of taking in input.
So we talked about rotation, talked about the light sensor.
There are also different outputs.
And so here's an example.
This one was actually written--
this is JavaScript and this actually is going out
to what's called a neo pixel strip.
And a neo pixel strip is a plastic strip that
has these embedded RGB, LEDs in them.
And so he basically created bike lights with this.
Whoops.
Let's see if I can get it to play.
There we go.
So he actually has a micrid mounted to this frame of his bike.
And the neo pixel strips are pretty tough and they're weather resistant,
and he just kind of stuck them along the side of the bike.
And so you can create custom lighting displays using the micro:bit,
using code essentially.
So it's very cool.
What I love about the micro:bit is because it's so small and lightweight
you can embed it into things like wearables.
So this is an activity we did with young kids,
but you could certainly adapt this into fabrics, for example.
So we give a picture frame, and we just put out two strips of duct tape and you
stick the micro:bit onto the duct tape, and then you cut the tape off
of the frame.
And basically you can use Velcro tabs and you can actually create a wristband
for the micro:bit.
So I had a student who was a--
he was a pitcher baseball pitcher.
And he actually programmed the micro:bit to be a pitch counter.
So as many times as he threw pitches in a session,
every time it detected the acceleration of his arm
it counted that as one pitch.
And so after throwing a bunch of times in a session he could come back
and it would actually show how many pitches he'd thrown.
So kind of neat.
So if you think about all the possibilities
that watch based technologies give us in terms of collecting data, storing data,
and then displaying the data or displaying the values of things
that it's measured.
When I think about that I start thinking about some really neat possibilities
with using the micro:bits.
I was out in San Mateo at the Maker Faire
and they actually had a wearable fashion show.
And so this is a dress that she made and she embedded lights.
And you can do this.
I don't know if she used the micro:bit, but she used a microprocessor like
the micro:bit to talk to embedded sewn in pieces of light essentially
the light strips.
So if you work with clothing or fabrics, textiles,
think about how might you sew in some different kinds of circuits and use
the micro:bit to control them.
I think that would be a really interesting project.
Here are some other examples.
And they use this--
there are a lot of maker spaces around here
that will allow you to use things like laser cutters.
So she actually laser cut a beautiful design into the dress.
This really helps to combine things that you love
with computing and with programming.
This is another thing that was kind of cool.
So this was a fashion show that was put on by and for models who are amputees.
So these models are double amputees, but they've actually
got these legs that are programmed with different designs and patterns
based on their movements.
And so there's this little fashion show.
So I love this idea of let's take assisted technologies
and make them something that's visually appealing
and make it something that's actually kind of interesting
and cool to look at, as well.
And again, if you're going to do something like this,
you need a microprocessor, you need some kind of a brain.
So these things are like 16 bucks.
We have a few of them here, so if you're interested in using
this for a project come talk to me, let me know.
We can support you.
You can borrow these.
and use them for the duration of your project.
And then if you wanted to purchase it there's links that are purchase them.
They're not that expensive.
The hardware itself.
Remember if we go back to week zero when we talked about a computer,
if you think about a computer is basically a CPU or a processor.
That brings in inputs and outputs it in some way.
The micro:bit, same thing.
The micro:bit basically has a number of inputs.
And if you look on this diagram, you can see some of the different inputs.
We talked a little bit before about there's an accelerometer,
there's actually a compass, so it can detect which way it's being turned.
So you can take it and you can actually turn it
and it will detect what direction it's facing, which is kind of interesting.
It has an accelerometer.
So it can detect how it's been shaken or moved.
Basically, it has a light sensor, as well,
and also, of course, has conventional input.
There are buttons.
So there's the a button, the b button and the a and b together.
And if we press both of those together you
can actually get a third behavior there.
And you have digital and analog outputs here, as well as inputs,
and you have a micro USB connector.
And that connects it to the computer so that you can actually program it.
So some different accessories that we use with it.
So we use crocodile clips that are very easy to connect
to different things like servo motors or lights
or pretty much anything that will work with something, like Arduino,
for example, like those kinds of accessories
you can plug them in on these.
This basically comes with the battery pack and the US cable.
The battery pack allows you to use it separately from the computer.
When you have it plugged into your computer it's powered off the USB.
If you have a pair of ear buds you can actually use a crocodile clips
to connect the ear buds to the micro:bits.
So you can actually hear, it has a tone generator.
So you can actually create music.
I've had students create the entire Legend of Zelda theme off
of the micro:bit.
And if you think back to some of the problems
that we've had that dealt with music, there
might be interesting things you can do with scales or other kinds of things.
There's lots of maker kits.
So you can get the bare bones package or you can get it
as a kit, which will come with like a bunch of other stuff
that you can play around with.
So some cool stuff.
But let's try working with them right now.
If you want to go ahead and pull out if you have a laptop,
just if you pull out a laptop and you go to makecode.com,
there is a link to micro:bit, and you'll see it on the left.
If you just click the micro:bit it'll open it up in a browser.
And I'll just sort of walk you through.
And I basically passed out these micro:bits because I want you to kind
of have a chance to play around with them.
Later on at home if you want to play with the simulator, pretty
much anything you can program here you'll see on the simulator.
And you can even simulate holding it in different ways
and shaking it and those kinds of things.
But I actually like working with the actual physical micro:bit.
At least while you're here work with the micro:bit and try it out in real life.
So this is what the interface actually looks like.
All the projects are stored locally.
So on your computer, they're stored on your computer itself.
So they're not cloud based at all.
So you don't need to sign in.
As long as you're using the same computer, whenever
you click on Projects you'll see all the projects that you've been working on.
You can program in either blocks or JavaScript.
And as I said earlier, we'll primarily stay in blocks
but if you're ever curious and if you want
to just click JavaScript you'll see what all the equivalent of it
looks in JavaScript and if you wanted to,
you could just program it in JavaScript directly if you wanted.
I usually start with blocks.
This is what we call a block toolbox.
So these are all the drawers.
This is very much like scratch.
So you'll have lots of different drawers at different kinds of inputs,
different kinds of blocks here, you drag the blocks into the coding workspace.
That's where you're going to build your program.
You can actually download the program directly as a file.
And that's what you'll drag on to your micro:bit.
So when you plug the micro:bit in, and you can go ahead and plug the micro bit
in now, if you like just plug it right into your USB port,
it'll show up like a volume.
It'll show up like a hard drive basically.
And the way that you load programs onto it is you just drag that program right
onto the micro:bit itself.
Yeah.
So this is it.
So you can play around with it, you'll see what the simulator looks like.
So let's start with programming an animation.
So if you go ahead and open the Basic Toolbox drawer,
you can drag two of these show LED blocks onto your workspace,
and then you can position them underneath the Forever block
to look kind of just like that.
You'll notice there's a few other things too.
While you're doing that.
I'll just keep talking.
But you can actually not just show LEDs, but there are actually patterns.
So there are pre-built programs that are built in so you
can make it look like as a heart shape.
There's other kinds of things you can show LEDs here.
You can also show numbers.
And this is actually very valuable because I use
this to show the values of variables.
I've been working with variables or if I'd
like to display what the current reading is off of a sensor,
you can just drag that block right in here.
And then you can actually see what that sensor readout is.
And when you say show number, it will display it directly to the screen
of the micro:bit, or if it's a long number it'll scroll it across
the screen.
So once you've moved these in you can shy
showing some of these different things.
You'll notice that the animation will show up
in the simulator on the upper left hand side of your screen.
And you can even try the Show Icon block,
which is what I was talking about where you have built in designs.
You can experiment with different kinds of animations,
all kinds of cool things.
And then I'm going to go over to downloading the program
to the micro:bits.
And once you have that just, this is what you would essentially do.
You're going to plug the micro:bit in with the USB cable.
If you click the Download button, it actually saves it onto your hard drive.
If you are using Microsoft Edge you can choose Save As and that will save it
onto your micro:bit hard drive.
So download button looks like that, Save As will look like that.
You can save it directly onto the micro:bit volume,
which will come up kind of like--
it'll look just sort of like that micro:bit volume there.
With Google Chrome you can go to your Downloads folder
and you can just drag copy it.
You don't need to worry about managing the files in the micro:bit.
It only holds one at a time anyway, so you drag it over there
it'll just replace what's there.
And then it'll show up actually on the micro:bit itself,
which is kind of cool.
So I think the goal is to primarily get you to the point where you can download
a file to your hard drive and then put it onto the micro:bit,
so that it actually runs on the micro:bit.
That would be the goal ideally.
Get to that point and then anything that you create in the project's coding
workspace, you'll know how to move it onto your micro:bit itself.
Now one of the other things to notice is there's lots of other different things.
So you can say on button A press, so you could make it
when you press button a display one thing,
but when you press button b you have it display something else.
And so that's kind of neat to do as well.
Let me actually go over to--
I'm going to switch over to the Make Code environment itself
and we'll kind of play around a little bit with this.
So you'll notice that in the loops you basically
have a forever loop which just runs as soon as the program starts
it just runs forever.
It's like a while true.
You also have on start which will run just once.
And I usually use this to initialize variables and things like that,
that I just want to have happen once.
These inputs, these are essentially event handlers
which just sit there and wait.
They listen.
It's a listener for if button a is pressed,
then we're going to display something specific.
So for instance, maybe we show a heart icon when a button is pressed.
The other thing that's cool is if you highlight this, if you click on it,
you click copy and paste, you can paste in another one.
This one's grayed out because you can't have two events that
happen when the same button is pressed.
But I can use this to change it over to a button b, and I can say,
let's choose something like a house when that's pressed.
So you can create different kinds of event handlers that way.
Another thing that you can do is when you're
done with these, if you click on Share, if you click the Share button you
can actually publish the project.
And when you publish the project it actually shares it using URL.
So that URL is essentially the program that I've just created.
So if I open up another thing in my browser and I just go to--
you'll notice that it shows up here.
And if you go to the JavaScript, you can actually
see what the JavaScript looks like.
So this is an on-button press, and then you've got,
essentially, the action underneath.
So this is the event, and then this is the resulting action from that event.
You can take this, and you can download it.
And then you can drag copy that file directly onto your micro:bit.
So you can try out somebody else's code.
The other thing that you can do is, you can basically copy all of that text,
go back to your main code-- well this will make sense
because this is the same program.
But if you created a new project, for example, and let's say somebody else
wrote that.
You go over to JavaScript, and just paste in that code.
And now if you go back to blocks, it's all there.
So you can easily, kind of, remix other projects, you can share projects.
And the other thing that projects will do
is, if you have any HEX file that you've actually downloaded,
you can actually import the file, and that will open it and bring it
into your computer.
So for the next challenge, what I'd like to do
is I'd like to have you take a look at this one broken program that I created.
So if we go over to--
it's basically shout key dot com slash lychee.
And this is a temporary link.
So this won't work after the fact.
But all of these are linked from the actual resources
sheet that is at the beginning of this presentation.
But for today anyway, if you go to this URL,
it's just a quick URL that's going to bring you up to the board game arrow.
If you're watching this later, if you're not watching this live,
go back to tiny URL dot com slash micro:bit workshop.
And you'll see a link, board game arrow challenge one, there.
And that's actually the make code link, that's the permanent link.
But if you go to shoutkey dot com slash lychee,
you'll come up with a program that I just shared that here's--
I'll show you what I want to do with it.
You know, you ever played those board games where you have the spinner,
and you kind of spin the spinner?
Essentially, what I want to have happen here is,
I want to have it so when you shake it, it spins automatically.
And when it spins--
one of the neat things when you share a project is you'll
actually see it running in the simulator.
So this is what it's supposed to look like.
If I click shake, the spinner spins.
And you see how it slows down?
Just like a regular spinner, at some point it'll stop.
And where the arrow stops, then that's maybe the direction
that you move if you have a board game where
you can move in one of four directions.
And then somebody else can shake it, and it'll spin again,
and then it'll slow down, and it'll stop.
So that's the idea behind it.
So here's a programming, kind of what I think of as a little programming
puzzle, to figure out.
So here's how it actually works.
So I've created some variables here.
I've created a variable called delay.
And when I shake it, it's going to clear anything
that's currently on the screen.
It's going to set the delay to zero.
And then we will while loop.
So while delay is less than 500, we're going to show the left arrow.
We're going to pause, delay, amount of times.
And delay is the amount of milliseconds.
And then it's going to show the next frame of the arrow,
and it's going to pause for some number of milliseconds,
delay amount of milliseconds.
And then after it shows all four of these,
we're going to change delay by 150.
And that basically means delay equals delay plus 150.
So delay starts at zero, so it's pretty much no delay first time around.
Then it's 150 milliseconds between frames.
And then it's 300, and then it's 450.
And then, when it becomes 600, this is no longer true.
Ad soon as delay becomes 600, this isn't sure anymore,
and so it should just stop.
And because we haven't issued a clear screen, it's going to show,
essentially, the down arrow.
And that's where the problem is.
I implemented this delay so that it starts fast and it kind of slows down.
But it always shows the down arrow, so you're always going to be moving down.
So that's kind of the problem.
So this is just one of those problems that you run into with programming.
And you know, it's sort of like, OK I had this idea,
how can I change this so that the arrow points in a random direction?
Because what I'd like to have it do is, I want it to basically decay.
I wanted it to start at zero, and then slow down, slow down, slow down,
slow down.
And at some point when it slows down after a certain threshold,
then I want it to stop spinning the arrow,
and I want the arrow to just stop wherever it is.
So as soon as it passes that threshold, I want it to stop
and whatever frame the arrow is currently at.
So think about how could we modify this code,
how do we modify this program so that the arrow always
lands in the same place?
So take about five minutes, talk with the people at your table,
figure this out.
And we'll come back again, and we'll kind of
think about how that might work.
And meanwhile, while you're doing that, let me go ahead
and I'm going to go through the process of downloading this and importing
it to MakeCode so that you can see what's happening.
So you can talk amongst yourselves, but I'm going to talk as well.
So I'm going to download this first, and that's
going to go into my downloads folder.
And then back here in MakeCode in my IDE.
I'm going to go over to projects.
And I'm going to choose import file, and this
will allow me to actually choose it from my downloads.
And this is the board game arrow that just came over.
So I'm going to choose open.
And then I'm going to choose go ahead.
And what that will do, remember that that's
a file that I downloaded from the shared projects.
And you can import a HEX file directly into MakeCode,
and so now we have actually these arrows.
So any ideas to start out with about how we might get this to work properly?
I mean one of the things, when I play board games,
the reason the arrow doesn't--
you know if you were playing against a robot,
and the robot could flick the arrow with exactly the same power
every single time, it would always land at the same place every single time.
So that wouldn't be much fun.
So I think that what makes the board game spinner kind of interesting
is that humans are always going to flick the arrow with slightly
different amounts of force.
And if you assume that the decay decays at the same rate, then
the amount of force, in other words maybe where it starts, changes.
So suppose we flipped it and we said, well, decay is greater than zero.
But where it starts is some random number between like 600 and 800,
something like that.
I mean we could we could try that.
And it's easy enough to do it here.
If you just say, you can change this.
Wait a second, let me pull this away here.
That's kind of funny.
I don't know if the blocks are like, the blocks or like stuck.
Let me try copying this.
And let me go over and start a new project.
Just out of curiosity, I'm going to flop back into JavaScript.
And this is actually what it looks like in JavaScript, which is
kind of neat, all of this stuff here.
And then it should change it over to blocks directly.
And now we can separate them.
This, let's change this over to greater than, and we'll make it zero.
So while it's greater than zero, we're going to continue to do something.
And then let's change the delay--
this time if we want to change it, going back the other way,
if we want the same rate of decay, we could just
basically set that to be negative.
So now we're going backwards.
So what we've just done by changing two things is, we've gone backwards.
Now we're basically running the thing, we're
starting delay at some big number, like you know, I don't know, 500.
And then we'll actually run it.
And notice that as soon as I make the change, it'll get reflected up here.
So let's go ahead and try this out.
OK.
It's still stops at down, right?
The other thing, too, is I just realized because we're pausing by delay,
it reverses it, right?
So it starts out really slow, and it gets faster and faster and faster.
And then it stops.
Which doesn't really duplicate how a real arrow would work.
So maybe what we would have to do is do a mathematical calculation
based on delay.
And so what I can do here is, I can take this and I can say,
OK, don't pause delay amount of times.
Let's pause whatever we started at, 500, minus delay.
I'm just guessing.
Let's see if this works.
We'll copy it and paste it.
But, you know, again, part of the fun of programming,
I think, is just being able to think through some of these problems
and just try different things out.
And I think MakeCode makes it really easy to just experiment
and try some of these things out for yourself.
You know, let me just do, as a test, two frames.
And let's just see if this has that effect of slowing it down.
Oh wait, notice where I put the delay.
I put it in the wrong place.
Let's put it inside the while loop, let's try that.
Oh, it slows down.
There we go.
Now one of the things, too, is ideally, you
can also set a variable so that you don't
have this hard coded number of 500.
Like we could set it to max.
We could say, let's create a variable.
Let's call it max.
Or in this case, MakeCode gives you some freebies.
We can rename this.
And we'll just rename that to max.
And one of the cool things about it is, if you rename it here,
if you rename a variable, it refractors all your code,
and it changes everywhere, which is awesome.
So you know what, let's set max to some value like, let's say 400.
And let's implement something random.
And one of the things that I love in MakeCode is, if you go over to math,
and you choose pick random, you'll pick a random number.
So let's say zero to four times 25.
And so that will be either zero or 100.
Well, let's make it times 50.
So we'll say, we'll multiply this times 50.
Now notice what I'm doing is, I'm just pulling
these blocks out of different drawers.
So I'm pulling this out of the math drawer.
We don't want to just say zero to four, because it's
going be like 401, 402, 403, 404, which you're not going to see any difference.
We want big changes.
So that's why we're putting in a multiplier of 50.
We're setting our max to that.
And this can now replace--
well it's not going to replace it.
What we are going to do is grab max.
Max is going to replace 500.
And similarly we would want to drag it into these other places, too.
So grab max There we go.
And now we should have more randomness, which is great.
The same problem as you've probably seen, will still happen, right?
Because it's still going to end up ultimately,
even though we've got this while loop, it's checking the while loop,
it's got to execute everything in the while loop until it gets to the end.
And the last frame at the end of the while loop is still a down arrow.
So the game is still rigged, folks.
You're still going to always get the down arrow.
So there are some other ideas that you might have for fixing this.
You know, sometimes people are like, well jeez maybe
we need to separate this out or have a separate if statement.
There are if statements in the logic.
You know, check each time.
So before you display each one of these, check
to see if the delay is greater than zero.
And maybe increment it a little bit each time, break it out.
But in the end, the way to solve this problem
is probably going to be breaking it out of the while loop entirely
and using a different kind of structure.
But I'm hoping just to give you a sense for the complexity of how you go
about solving some of these problems.
And we're still in block land here, right?
We're still working with blocks.
If you go over JavaScript, you can actually work in JavaScript.
In fact, some of the things that you start doing is, you'll notice here,
this is where our math random function is.
And this actually makes a call to math library, calls random.
And then you can actually change stuff directly here.
So if I wanted to add plus to that I could basically just do
this add plus one.
And then if you go back to blocks, it actually goes into the math for you
and pulls out the plus and puts it in there.
So this, you can easily go back and forth between JavaScript and blocks.
And at some point in your projects, you may end up wanting to just kind of stay
in JavaScript.
OK.
Let's show you something else.
So some of the things that you can do with input are kind of cool.
So I'm going to start a new project.
And actually, you know what, I'm going to go over to some of these projects
here that are already given to you.
And this is a nice way to learn.
Lots of different projects here and you can see the JavaScript
for all of these.
Some of these I think you'd probably only do in JavaScript.
But a lot of them have the blocks.
Some of the more advanced ones, like infection, which I'm hoping
will have a chance to take a look at, they're done in JavaScript, primarily.
We're going to look at servo calibrator.
And this is what this actually looks like.
And so what I'm going to do is, I'm going to download servo calibrator.
And I'm going to actually move it onto my, I actually have a servo hooked up.
Let's see here.
And the servos are pretty cheap.
You can purchase these, I purchased mine from Amazon,
I think, they were like $3 or $4 each.
They're not expensive.
I actually got a block, I got a whole bunch of servos,
actually for my students.
I got like a whole box of them.
And they're awesome for experimenting with.
So I'm going to actually move this downloaded program onto the micro bit.
Just plug this in.
So it should show up.
And if I go over to downloads, I'm going to grab the micro:bit servo calibrator,
and I'm going to drag it over to micro:bit.
And this copies it on to the actual micro:bit itself.
And you'll notice that on the micro bit, you'll
see a little yellow light that's flashing.
And so we've just copied that on.
And I've got a little servo motor here with a little arrow,
with a little high sign.
And if you press these buttons, you can actually move the servo back and forth,
which is kind of neat.
But what I was thinking of is, I want it to come up with a project
where when you use the rotation sensor on it, so when you turn this thing,
it actually reads it and makes this servo motor react.
So let's try that out.
So what I'm going to do is instead of saying forever
show a number, what I'm going to do is forever.
I'm going to copy some of this stuff here.
So this write pin, write it to angle, I'm going to copy that.
And I'm just going to paste this in.
Pin zero is the servo.
So now what I'm going to do is, I'm going to go over to input,
and I'm going to choose rotation or pitch.
And you'll notice that if you hover over this, this will tell you what it says.
It'll tell you what it does.
It says it's disabled.
Let me plug this in here and maybe it'll, tell me what you do.
This is the pitch, or roll, of the device, or the rotation on the x-axis
or the y-axis in degrees.
So you can change it by choosing this either pitch or roll.
I think.
Yeah, pitch or roll.
So let's go ahead and download this.
And I'll go back, version 5 here.
And I see the yellow light.
It's going over to it.
OK, wow, it's all the way at the end.
So I'm turning it, and I can feel the servo kind of wanting to move.
So I think it's detecting the rotation, but it's not moving.
So for a troubleshooting thing, what are some things that we might want to know?
How do we figure this out?
It's just like a programming problem.
Now it's connected to hardware a little bit, too.
What are some reasons, maybe, why this thing might not
be doing what we want it to do?
It's like humming a little bit.
Might have something to do with the range, yeah.
Do we know what the range is for the servo?
You'll notice here, if you look at this, this basically changes by five.
So max is zero and five.
And it goes to 180.
So maybe it goes from 180 to zero.
But we don't know where zero is in the range of motion,
servo goes back and forth.
Zero could be here, right?
It's 180 degrees of motion, right?
So it could be, zero could be here, going to 180,
and we're all looking at positive numbers.
Or zero could be here, and it could be negative 90, positive 90.
All we know is that it's 180 degrees.
So how might we go about figuring that problem out?
Like how do we know what it's saying?
Let's try this.
We'll go to forever, and we'll put in show number.
But this time, this time instead of showing the angle,
we'll just go ahead and show the rotation.
And so now, whatever the rotation is at, this thing will show us.
And one of the nice things about the simulator,
you don't need a micro:bit to try this out.
You can actually test what this thing is doing by using the simulator itself.
So looks like negative 50, negative 5042--
wow, that's a whole stream of numbers.
Well let's try it out on the actual thing.
Let me go ahead and send this thing over to the micro:bit,
and we'll actually try it on the real thing.
All right.
Where are you micro:bit?
There it is.
Right down there.
So that little bit of an experiment might help us kind of craft
a different kind of project.
So if we go over to the servo calibrator here.
Let me go over to this one.
OK.
So this one we actually set the angle to 90, and then we write it to,
oops sorry.
So now if we set the rotation, and we add 90 to it,
then we should end up with the right values
here that we've kind of determined experimentally from working with it.
So let me go ahead and download it.
And we'll kind of drag this over here.
And then for this what I'm going to do is,
I'm actually going to detach it from here, because I'm
going to actually use the actual battery packs so that I can hold this mobile.
And you'll notice that now that I've got the rotation, and you were right,
it was the range, it was related to the range.
And when you get the range working, well now I could put this in my hand.
And then get this thing--
did I just dislodge these things?
I think I just dislodged the crocodile clips.
And get it to move fairly accurately this way.
So now imagine that you had these things separated,
and you had this wired up so the wires are hidden.
You could actually work out some kind of a game where you know,
you could even have something that was wrist-mounted that
telegraphed the motion somewhere else.
So there's just some interesting ideas that that might give you for games.
And this actually, this is a cheap servo motor.
I have some servo motors you can use.
I went to Starbucks and I had a little coffee stirrer,
and I'm using some tape.
So what I love about maker projects is they can be low budget,
and they can be simple, cheap, easy prototypes.
And that's really the best way to learn is just create lots of prototypes
and work with them.
So if you're interested in a project that has some tangible element to it,
that has you actually working with real stuff in addition to doing the coding,
but the coding is really to make the real stuff work,
that's where the micro:bit, I think, can really come in handy.
Now there's one aspect of this that we haven't talked about yet.
This actually has a radio transmitter, communicates via Bluetooth.
And so if you have other micro:bits, you can actually communicate wirelessly.
So I could put this micro:bit somewhere else and have something on this end
that was sending information about the rotation angle as a variable,
invisibly, to another servo.
So you could actually make a motion, or make something happen,
or make lights happen, across the room, using Bluetooth,
using the radio blocks in MakeCode.
And the radio blocks are all right here.
And so just as an example--
so this was the servo, and we found out what the maximum and minimum values
were for rotation on the x-axis.
But you can create a radio simulation that basically looks like this.
So you would work with different partners,
and these are just some of the radio blocks that you can use.
So radio set group one, what that does is it establishes a group number.
And so any micro:bit that has that group number will be able to communicate with
another micro:bit that has the group, the same group number.
And so I would have you pair up, or pair up by table, or work by table.
And as long as your group all has the same number,
you can communicate with each other, and you won't interfere with other
people's.
So you can decide what this number is.
You can set that ahead of time.
Then when you press a, if you just use radio send string,
you can actually send a string.
So I'm from Hawaii, when we say hello to people, sometimes we say aloha.
And you could send that string, aloha.
When you receive the string on the other end you can show the string.
In other words, remember this is like the say blocks.
So this will actually show the string that it was received.
And if what you received, you can check the value of it,
if it's the same as that string, you can then
send the string mahalo, which means thank you.
So you can try that as a quick little project.
If you have to micro bits is try sending aloha and try receiving mahalo.
And this is a great, this is a fun activity.
My wife, Mary Hyong, who works with sixth grade at Punahou,
she came up with this idea.
She works with her kids with that.
And then she has her students try to come up
with different kinds of scenarios for what kind of data
could you send and receive.
And even for you, I would encourage you to think about,
play around with the micro:bit radio block,
and think about what is it that I can send and receive.
And you wanted to experiment with JavaScript
and start working with some more advanced structures, think about,
we've done a lot of work this semester with storing strings and parsing
strings in different ways.
You have text blocks, that you can work with and make
code, that will parse the strings in different ways,
and conjugate them, and do other kinds of things.
So could you create some kind of a semi-intelligent communicator that
actually either uses or, what if it was something like a sign language
translator, or something that managed to work with a servo
or take the content of a text string, and communicate over to the servo.
For the purposes of this independent project,
you're probably going to want to dive into JavaScript
and start working with some different functions.
You can send and receive, you can return values like tuples and things
like that, using MicroPython, if you wanted to.
So you can actually, you can create struts and enums.
So there's a lot more that you can do with the language,
aside from the blocks.
So if you want to push this further, you could definitely
do a project, that would be a good project, that
would use a lot of these things.
So again, come talk to me.
Let me know if it's something that you're interested in.
Last thing is, there is actually a, this is a really cool activity.
I'm just going to kind of show it.
I don't think we have time to run it as a group today.
But what's really neat about it is, there is a project.
My wife and I actually wrote a curriculum.
It's a Maker curriculum using the micro:bit.
It's free, it's on Microsoft's site, and I've linked to it in the resources.
But one of the programmers over at Microsoft, my buddy Pellee,
he actually created this infection simulation.
And what's really neat is we actually can
use this to talk about how diseases spread in a community.
And so the idea behind it is, everybody has a micro:bit.
And one of the micro:bits, unbeknownst to everybody else, has a virus on it.
And that's patient zero.
And so what will happen is, you can go up and you can meet people by holding
your micro:bit close to somebody.
And when you're close enough, the micro:bits will actually exchange
information, and it's like they've met.
And there is a phase of the game where you go around you meet as many people
as you can.
But the disease actually has an incubation period.
So after a certain amount of time, they're going to start beeping.
And as they start beeping, what you'll notice is,
different people are going to get sick based on the order
that they met other people.
And so it becomes sort of this inference-deduction activity
to try to figure out who got, who is sick first.
And so that's-- and then you can talk about things like quarantining.
So, you know, like some people decide, well, I'm
just going to sit at own table, and I'm not going to meet anybody else.
We're just going to meet ourselves.
And then we'll stay healthy.
And sometimes that works.
One time I did this with a group, and two people decided,
they said don't come near us.
We're going to stay separate, we're not going to get sick.
We're going to let everybody else get sick,
and then we're going to be the last one standing.
And what happened is, after about five minutes, both of them got sick,
and both of them expired.
And the whole rest of the world was saved,
because just as luck would have it, one of them actually was patient zero.
And by deciding to isolate themselves, unknowingly, they
basically quarantined themselves and saved the world.
So lots of different kinds of things you can talk about,
like, within the context of a science class working with this.
But it's a fun, fun activity.
This had to have been done in JavaScript.
So for this, let's see where the code itself is.
Oh here it is.
So again, similarly, you would go to the actual page here.
And you can find this, my link to this.
You can also go to the micro bit, the micro--
the MakeCode website, and you'll see this.
But if you, you know again, I love the micro:bit,
and I love MakeCode because it makes it so easy to get into the programming
of it.
But I don't want you to, I think it's misleading how simple it is.
You can actually get involved at a level of complexity
with this that is, you know, pretty advanced.
And there's so much that you can do with it.
It's such a, JavaScript is powerful language.
And micro:bit is a great little platform,
so you can do quite a lot with it.
And you can really, I would encourage you
to push the hardware as far as you can.
Learn as much as you can about it.
And think about what kind of activity can I
come up with that uses either tangible materials,
or involves other people working with it?
And then definitely share out what you do,
because there's a growing community of micro:bit enthusiasts,
lot of, I've got a lot of friends on the MakeCode team who are working really
hard on this.
But they're really curious to see what are some other things
that people come up with.
And so if you have questions or if you need resources, you know,
I'll certainly see what I can do to help support you on that.
So with that, I'm going to officially wrap up and thank you
for coming to this seminar and for being here.
But I'll stay around at the end to answer questions.
And if you want to play around with some of the servos and things like that,
certainly feel free to do so.
So again, thank you so much.
And I'm looking forward to seeing all of you around campus.
Thanks a lot.