- Welcome y'all, Hill how you doing?
- Doing great.
How's it going everybody?
- Going on a track.
- (laughs) Who's that
you have with you Hill?
- Pierce, let's come down
a little bit so you can get
on the screen.
This is Pierce, say hi Pierce.
- Hi, and my name is
Black Panther, not Pierce.
(laughing)
- Today pierces is Black
Panther, he is not Pierce.
So that's what today he is.
- So we're not even...
- my (mumbling) gonna learn...
- Calling him Pierce, we are
calling him black panther?
- No I am not because I
know how to (mumbles).
(laughing)
- So Black Panther knows
how those (mumbling).
So that's good.
(chuckling)
- All right.
- Hands up (mumbling)
- We're now to find from
people on the audience.
(bell rings)
This is pretty amazing to watch
as about 20 people joining
almost every second.
So we're now at 550
people in the audience.
- Okay, anybody that's joining
tell other people to come on.
This is gonna be the largest
live interactive classroom
happening and we're going
to learn to code together.
Bring your kids, bring
the family, gather around,
let other people know this
is happening, and it's live.
So--
- We now have 600 people on the audience.
And I'm just gonna get started
while people are joining.
So welcome to code break.
There's a few dozen of us on screen.
But there's hundreds of more tuning in
and about 20 or 30 joining every second.
This is our first time
doing something this...
We're gonna find ways for
everybody to interact together.
If you've ever joined zoom meetings,
and you're looking at this one,
you don't have all of the
same tools because there's too
many of us to talk at all the same time.
Together we're hoping to build the world's
largest live interactive classroom.
If you enjoy it, please
invite others to join.
I'm gonna invite my
daughter Sofia to join in.
- Hi,
- Hi, Sophia.
- This is Sofia.
- I'm Sophia, I'm 11 years
old and I'm in fifth grade.
Let's go fifth grade.
(laughing)
- It's awesome.
Hey Pierce, what grade are you in?
- Pre K.
- He's a pre K, he's...
- Yeah I love pre K.
Auh auh!
- Sofia also have soundboard.
She's gonna make sound
effects for our show.
Sofia (mumbling)
- Oh I love the soundboards.
- Right now.
(soundboard trumpeting)
All right.
- Charge!
- Today our special guest is
actor and author Hill Harper,
who's on screen right now.
Obviously for those of you who
are still tuning in, welcome.
So Hill how are you doing right now?
How are you handling this
whole quarantine situation?
- Everybody being quarantine
or doing self quarantine is...
It's been interesting for sure.
One thing it's done is that,
Pierce and I get to spend
a lot more time together which is great.
And at the same time,
I just feel for all those
people out there and all those
folks who are actually suffering
with health consequences.
And just reminding everybody
that staying at home,
doing this, you don't see
the benefits immediately
it's like...
I guess learning to code in a way.
We do this now to reap the
benefits for weeks from now
months from now and we save lives.
So if we can do this together
for instance build community
online through things like this,
hopefully we can establish
some measure of learning
and normalcy but at the
same time reinforced that
if a virus can spread so
can love and so can support
and so can learning in the same exact way
and so we can we can represent that here.
So I'm so excited there's
so many people on, great,
excited that my son here
with me and and Sofia,
great to see you and Hadi.
Thanks for organizing this.
- Of course, we had a
corny jokes for you Hill
to get things started.
Where do all the cool mice live?
- Where do all the cool Mice, Pierce,
where do all the cool mice live?
Do you wanna give(mumbling)?
- (mumbling)
- Mice?
- Yes.
- In a hole.
- (mumbling)
- In their mouse pad.
- In their mouse pad?
I like it.
- I made I put Sofia.
But let's switch to gallery
view so we can see all
the students who are
joining us right now live.
So you can see all the
faces on screen everybody?
- Hi students, everybody.
- Hello.
- Will take you all off of mute.
- [Audience] Hello.
(mumbling)
- We're gonna go off a bit.
We're gonna say hi to a
few people individually...
So first Anthony and Braden and Anika.
Gabi and Xavier, we're going to unmute
all of you right now, and to
say hi to you specifically.
Anthony and Braden.
- Hello.
- Hi.
- Where are you all from?
- San Francisco.
- San Francisco awesome.
What grades are you guys in?
- Second.
- Second, are you guys related?
- Yeah.
- Oh, really, what's your relation?
- We are twins.
- Are you twins?
I would never guessed that.
That's amazing.
- I'm a twin, that's pretty funny.
How about a Anika, are you there Anika?
- Yeah, hi.
- Hi Anika, what grade are you?
- I'm in ninth grade.
- What grade?
- Ninth grade.
- Ninth grade, wow.
- Ninth, where are you?
- I'm in Oriel Illinois.
- Hoo, very nice that' cool.
- What's your favorite
subject.
- My favorite subject is Spanish.
- Oh, Espagnole, see.
- (speaks in Espagnole)
- Start.
- Come on, start.
- (speaks in Espagnole)
- (murmuring)
- Thank you.
How about Gabi and Xavier?
- (mumbling) I'm not finished.
- Gabi and Xavier, are you there?
- Hi.
- Hi, Gabi and Xavier, how are you?
- (mumbling) good.
Where are y'all calling from?
- Medway Massachusetts.
- Medway Massachusetts.
- [Hill] Oh that's fine.
- For anybody else who's
in the live audience,
there's almost 1000 people already.
Click to see if you
haven't found it already.
There's a button like this called chat,
because we want to hear
from all of you as well.
When you click this button,
look for the blue button that
chooses who you're chatting
with and choose all
panelists and attendees.
It's a big blue button.
And people are asking there's
over 1000 people here,
but what I want everybody who's chatting,
can you stop for a second and not type
for a little bit of seconds,
so we can then ask a question
for everybody answer.
What I want to ask is everybody tell us
what city are you in?
So Seattle, Calgary, what
are you seeing there Hill?
- Oh, I see Columbus, Las Vegas, Vienna.
Wow, it's going so fast.
Chicago.
Oh, Houston, Bellevue (mumbling)
- Washington Springfield, Memphis,
St. Louis.
- Chattanooga.
- Austin.
- (mumbling)
- All right, so everybody
stop typing that.
Now I want to ask for
the folks who's there,
what grades are you in?
For the students there?
- I saw, Pakistan.
- Pakistan.
Seventh grade, sixth grade.
- Seventh, sixth, fourth,
sixth, forty fourth grade.
That's a big one.
Fifth, Dubai, you are in grade five.
Ten that's ten.
Fifth, first, third (mumbling) third,
forty sixth, kindergarten.
- (laughing) There's so many.
All right.
We have one last question.
We want to get a sense of
people's coding capability
or computer science capability.
So everywhere in the chat window,
if you're a beginner type of one.
If you're Intermediate type of two.
And if you're relatively advanced
as a coder type of three,
we want to get a sense of
how many people here have
experienced computer
- one, one
- programming science
- one, two
Two, one, two, one, one.
A lot of ones, a lot of twos.
A lot of...
There's a 22 is very advanced.
- I think I saw 11 there.
Wow, I saw 1000 .
We have a 1000...
- There's a three.
- There's a three out there's a 2.5, wow.
Okay, so there's some
advanced coders in here.
There's also some a lot of
beginners like me, like Pierce,
Pierce and I'm beginners,
we are minus one.
- (laughing) Minus one.
All right. So for those of
you who are calling in from
a mobile device, whether
on a tablet or a phone,
close the chat now
we're gonna let you know
when to open up again.
So we want y'all to be able
to see the whole screen.
For those of you who are
older, more experienced,
please stick with us to the end.
Even if you said that you
were a three level coder.
We're always gonna start
with easier material.
But we're also then gonna
get more advanced to.
By the end of today's code break,
you should be able to
make pretty cool stuff
with only a few lines of code.
Let me give you an example
of what we're gonna learn
to do by the end of today.
With just five lines of code,
I'm gonna share my screen
to show you what we're gonna make.
- (whispering)
- Hm?
- (whispering)
- So if you see my screen right now,
this shows you what
we'll be able to create.
All of the drawings
here we'll be able to do
with only five lines of code.
What do you think Sofia?
(soundboard ringing)
Sofia is gonna do our sound effects,
she's my daughter here--
- That's impressive.
That is very impressive.
- Sofia is our lead coder.
Now let's talk a little
bit about code break.
Each week we're going
to host weekly episodes
with special guests
like today we have actor
and author Hill Harper, and we're so lucky
to have you on board.
We're gonna cover
computer science concepts
in a fun and collaborative way.
And then at the end, we're
gonna send challenge questions
for folks to do at home.
So if you haven't signed up already or
get the challenge questions,
you can give us your email address
@code.org/break.
Or if you just Google code
break, you'll find it.
We're not gonna send any kind
of spam marketing messages.
Just the challenge questions
from each week's episode.
And if you have any questions
during today's show,
you can ask us these questions.
There's a button for Q & A.
If it's a question about
what you're seeing,
or really any kind of
computer science question,
feel free to ask it at any time.
And then we're gonna
take a break a few times
during the hour to see people's answers.
The last thing I wanna
say before we start is
this is our first time doing this.
Nobody that I know has ever
run an interactive classroom
at the scale of 1000 people before.
And certainly we haven't.
We're figuring it out as we go,
and so please bear with us.
If things break we're gonna
learn a very important
computer science concept called debugging.
Sofia you have the drawing
you made of that first?
This is a bug, Sofia drew this bug.
(laughing)
A bug in computer science
is when something breaks,
and you need to figure out how to fix it.
So if anything breaks, Sofia
is gonna hold up this bug
and we'll fix it.
If my screen goes out--
- Always the solution,
there's always a fix.
- There's always a fix.
In some classes, there's
a right and wrong answer.
And if you get it wrong,
you're just wrong.
In computer programming
if you get it wrong,
you can tweak it and improve it,
and see if you can debug it.
And so we'll probably gonna be doing that
a couple of times today.
So today, the concept
we're gonna learn about
is algorithms.
It's a computer science
concept we're gonna learn,
but we're gonna learn this
with a little bit of fun.
We're gonna have three
stages in today's code break.
Segment one is gonna be
learning unplugged algorithms.
Segment two, we're gonna
do some live coding
at a beginner level.
And then segment three,
we're gonna do some
intermediate coding as we go along.
Are y'all ready to get started?
- Yes, I am, let's go.
- Sound effect?
(soundboard whirring)
Hmm, all right.
We're gonna learn about
algorithms and to--
- Algorithm is my favorite thing Hadi.
Algorithms, I feel like
I'm an algorithmic expert
all the time.
- Awesome.
So an algorithm is a list of
steps you give to a computer
for what you want it to do.
And we're gonna do this
by having our participants
give instructions to
give an algorithm to code
to make a peanut butter
and jelly sandwich.
So if I wanna see all the students
who joined us on screen,
we told you in advance
to write down your instructions for how
to make a PB and J sandwich.
So if you have those, can
you hold up your instructions
you wrote down on paper
so we can see them all?
- Mm hmm.
- All right, so I'm gonna
call out to somebody--
- Hadi right before you start
I wanna ask everybody a question first.
- Okay.
- A lot of people there was controversy
about peanut butter versus almond butter.
So I got both, I wanna
see what people want.
Do they want me to make
an almond butter sandwich
with organic almond
butter, or do they want me
to make a peanut butter?
- That's a great question--
- Peanut or Almond?
- Let's raise hands to do that.
- Which one do people
go for?
- So lets do this...
You have a button for raise hand
at the bottom of the screen.
Raise your hand click this button
if you want to peanut butter.
- Click it if you wanna
it be peanut butter.
Raise your hand.
Whoops
- All right, I see, Three...
457.
- 470
490, 500, let's say 500, raise hands.
- I think peanut butter
is gonna be winning here.
- Well, you never know
almond butter can make
a big come back.
- No, there's no way
more than half of them
want peanut butter.
- No but they may vote again.
If you raise your hand--
(mumbling)
- Lower your hands
everybody lower your hands
and we can lower your hands
for you automatically,
to get it done.
- Okay peanut butter won.
You're right.
- Peanut butter won.
- Peanut butter won (claps) lets go.
- All right, so now
Silvia and Marc and Nia,
are y'all ready?
We're gonna unmute you
so we can hear from you.
Silvia and Marc, can...
And Nia?
Can somebody unmute Silvia, Marc and Nia?
I'm not sure whether you need to unmute
on your end so we can hear you.
We're having trouble
unmuting Silvia and Marc.
All right, Nia, are you ready?
Can somebody unmute...
Yes, first panelists are first.
(mumbling)
Right, there we are Silvia
and Marc, thank you.
And first I should say that
was our first bug.(laughing)
So Nia, we're gonna hear
from you right now, Nia,
we wanna hear your instructions,
for making PB and J sandwich.
But first can you say hi to us?
- (mumbling)
- I can't hear, can you guys hear?
- We might have broken
zoom, I'm not even sure.
Nia, can you say hello?
(echoing)
Let's go back to Silvia.
- I can hear the twins I think.
- Silvia and Marc, can we hear from you?
All right, let me switch to somebody else.
We're gonna switch to Darius and Muzzie.
Darius and Muzzie, are you there?
- [Muzzie] Yes can you guys hear us?
- Hi Darius and Muzzie.
All right, so Muzzie we want
you to give Hill directions
for how to make a peanut
butter and jelly sandwich.
So think in your mind, how
do you make peanut butter
and jelly sandwich?
He's got peanut butter
he's got bread and jelly,
and then give him the instructions.
But what's really important is you can...
You can't change the instructions
after he'll started doing stuff.
You just need to tell him what to do.
- Tell me what to do.
Muzzie are you ready?
- [Muzzie] No.
(laughing)
Let Darius do it.
- All right, Darius you can do it.
Go ahead.
- [Darius] Pick up a slice of bread
and lay it flat on the table.
- Pick up a slice of bread
and lay it flat on the table.
You really gonna have me
make a peanut butter sandwich
on my table is that for me?
(laughing)
But I'm gonna do it go ahead.
- [Darius] Pick up a jar of jelly.
- Okay.
- [Darius] And untwist the lid to open it.
- I'm twisting the lid to open
- [Darius] Pick up your
knife to see the handle.
(mumbling)
- Hello.
- I don't have any hands left
how do I pick up the knife?
- Put down the jar jelly.
Using the short size a
knife scoop out some jelly
and put on the bread.
- Okay.
Is this enough?
- [Darius] Do more.
- Do more?
How much?
- [ Darius] Just do a lot
until you think is enough.
- Okay, I'm gonna do a lot.
(laughing)
- [Darius] That should be enough now.
- Now enough.
- [Darius] Okay.
- Hill can you bend down your camera?
- Oh (mumbling)
- [Darius] That's good.
- That's good!
- Yeah that's good.
Now pick up your container
of peanut butter.
(laughing)
- Okay, next?
- [Darius] Open the peanut butter
and do the exact same thing
with the peanut butters
as you did to the jelly.
- Okay.
- [Darius] Open then
put a lot on the bread.
- Okay.
It's not coming out the same way.
What do I do?
- [Darius] Scoop it out using the knife.
- Okay.
- [Darius] Good job now put...
Okay, stop now put...
Now pick up another slice of bread
and put it on top of all of that stuff.
- How do I pick it up?
- [Darius] Put down everything
you hold and just drop it.
(dropping)
(laughing)
Pick up another--
- I think I broke my table.
- [Darius] What?
- I think I broke my table.
- [Darius] That's okay, do...
That's not what we're
talking about right now.
Pick up another slice of bread.
(giggling)
Put on top of your mountain
bills, jelly and peanut butter.
Good job, there you go.
(laughing)
- All right can we all give
Hill a round of applause
for making a peanut
butter and jelly sandwich?
- Oh, no.
I'm gonna try though
- That's fine though.
It's a pretty big sandwich.
(laughing)
- Pierce you want to try sandwich?
- Yeah.
(laughing)
- So, what we just saw when you're talking
to regular person.
We all know that when you're
talking to a regular person,
they follow instructions way
better than Hill just did.
Hill acted the way a computer would.
When you're giving
instructions to a computer,
you have to be very precise.
A computer may seem smart,
but it's actually not smart at all.
No offense, Hill, we
know that you are acting.
A computer needs to hear
instructions in the language
it expects and it will make
mistakes if you tell it to.
It'll eat as much peanut
butter as you tell it to.
It doesn't know what you want it to do.
It only knows what you tell it to do.
Remember the word of the day, algorithm.
An algorithm is a list of steps you give
a computer to finish a task.
It's like a recipe or driving directions.
And just now we've made an algorithm
for making a peanut
butter and jelly sandwich.
Now we're going to switch to doing
some algorithms coding on a computer next.
But first I want to take a
quick break for trivia question.
It's trivia time.
(soundboard honking)
Sofia's got trivia times sound.
So are y'all ready for trivia question?
Remember the raise hand button we had?
I want you all to lower your hands.
So the folks in the control room
can you lower everybody's hands.
So the trivia question
for today's day is to ask
was the first computer
programmer a man or a woman?
Was the first computer
programmer a man or a woman?
Raise your hand if you think
the first computer program
was a man.
All right, how many
hands do you see there?
Hill how many hands do you see raised?
I see 199 hands raised
200 hands raised
- 200
- 208 hands raised.
- 200...
- (mumbling)
- Either people think it's a
woman or they just don't know.
230 people think it's a man.
All right 240.
All right, now everybody lower your hands.
And the next question we want
to ask is, raise your hand
if you think the first
computer programmer was a man.
Sorry, it was a woman.
If you think the first computer
programmer was a woman--
- I do.
- Click the raise hand button.
So--
- Sofia what do you think?
- If computer programmer
was a woman, raise hand.
Wow, there's a lot more people raising
their hand thinking it's a woman.
So Hill, what do you
think is the right answer?
- Oh, I think it's definitely a woman.
There's no doubt about it.
I saw the movie hidden figures
with my friend Taraji P. Henson.
So I know it was a woman.
- That's right.
(child wailing)`
- And I think it was Kathleen Johnson...
- I'm sharing my screen right now,
do you all see my screen share?
Wow, my computer's going nuts
with everybody's hands raised.
Can somebody lower the hands?
So the first computer programmer
was a woman named Ada Lovelace.
- Ada Lovelace?
I knew that.
- You knew that?
- All right, well, Ada Lovelace
is the first known computer programmer.
And what's really interesting
about Ada Lovelace
is not only that she was the
first computer programmer,
but that she wrote the first
computer program in 1842.
Almost 100 years before the first computer
was even invented or built.
So before we had any kind of
computers to do this stuff,
with smartphones, 100
years earlier, Ada Lovelace
wrote the first computer program.
And the reason this is
interesting is because
Ada Lovelace did something
very similar to what we did
with our unplugged
algorithm which we wrote
for a peanut butter and jelly sandwich.
She was writing computer program on paper.
So now we're gonna go do some real coding
to make a computer program.
So I'm gonna go back to my screen share,
and Sofia is gonna do the coding for us.
Sofia, are you ready?
- Yes.
- All right.
So I'm going to go share my screen again.
Sofia here is a practice coder,
but this is her first time
doing something like this in
front of such a large audience.
Can you all see my screen again?
- Yes.
- You can see the screen great.
Sofia, I'm gonna explain the screen
and what we see right here.
On the left side of the screen,
what you see is an artist.
He's a little guy with a
big pencil and he's gonna
draw whatever we tell him to do.
In the middle of the
screen, you see the blocks
for what the artist can do.
Those are his commands,
and then in the right side
of the screen, is where
Sofia is gonna make the code.
Now Sofia drag out one block to see
what is gonna to happen.
All right, so Hill what do
you think is gonna happen
when we drag out this one block?
- It's gonna...
The pence that artists is
gonna move straight across
and draw something that's 100 pixels long,
then move forward for 100 pixels.
- All right, it sounds
like you may have some prep
for doing this.
So the artist is gonna
move forward 100 pixels.
Are we right, Sofia?
You're gonna hit the run...
You're gonna make a sound effect.
(soundboard drawing)
That's right.
So we drew 100 pixels.
And what's important about the artist
is anytime he moves he's drawing.
If you want him to move without drawing,
you can use this jump command.
Now the next thing I want to do is Sofia
is gonna draw something
with some instructions.
I'm gonna whisper in her ear and tell her
what she's gonna draw,
and I want everybody in the
audience to take out a piece
of paper and a pencil
and follow along as Sofia
is writing commands for the
computer and draw what you think
the computer is gonna make,
and then we'll see if you got it right.
So Sofia (whispering).
Everybody follow along at
home with a piece of paper
and pencil and see if you can
follow what Sofia is doing.
And maybe you can draw
the same shape as sure
we're gonna see if you got it right.
Sofia (whispering).
- Oh.
- Good.
- 90 degrees.
- Move forward, turn right.
- Move forward 100 pixels.
Turn right by 90 degrees.
Forward 100 pixels.
Turn right.
Move forward a hundred degrees.
And turn right one last time.
- All right.
Has everybody at home
made their own guesses
as to what is gonna happen?
I wanna switch to see
everybody we're gonna stop
the screen share and I want
everybody who's on camera,
if you've drawn what do
you think is gonna happen,
hold your drawing in front of
the camera so we can see it.
Those of you who aren't on camera
can you type your guests
into the chat box?
If you remember the chat box is the little
sort of the thing that looks...
I don't know if you can
see my camera or not,
but it looks like this.
Click that and type your
guests into the chat box.
Hill what are you seeing
on screen or in the chat?
What are people saying?
- I see square square square box box box.
- All right.
So Sofia are you ready
to share what happens
you wanna do a drum roll sound
before we see the answer.
Roll the drum now.
(drum rolling)
(typing)
- Oh yeah.
- All right, we have a square.
Now again, this is very beginner stuff.
Any of you who've done
coding before have known
how to do this, but we're
gonna get much faster quickly
and do more interesting stuff.
So the first thing we wanna
do is to make our square
a different color.
Sofia can you choose a
color for the square,
can you make it just be a random color?
All right, now this square
is gonna set color to random.
So when you run it, it's gonna be
a different color each time.
Can you run it?
(running)
Let's make it a little bit
faster, so close quickly,
and I draw another square,
what color is that?
- Pink.
- Okay, draw another square.
- Pink.
- Another square.
- Purple.
- All right, so we're getting
lots of different colors.
But I'd love to see lots
of these colors happen all
at the same time so you
can see multiple squares.
So I wanna ask some of the
folks who are on camera
to tell us how we can do that.
So, can we unmute Jack Barry?
And we wanna hear from you
to see what your ideas are
in terms of how we can get
more squares on the screen
because we're gonna have multiple squares
of different colors.
Jack, are you there?
- Yeah.
- Hi, Jack, so how
would you suggest for us
to get multiple squares
instead of having her to run
and then stop and run
and stop all over again?
- Multiple artists, I guess?
- Multiple artists no,
we want one artist to do multiple squares.
- Forever loop on a rotation?
- Loop on a rotation?
And is Barry there by any chance?
Or is very your last name?
- That's one,
I'm Barry
- Oh your also Barry
Okay, so multiple loops on a rotation.
So looking at the blocks
that you see on the screen,
can you figure out a block
that we can use for doing that?
- The pink repeat question
mark, question mark times.
- All right, let's dive that out.
So that block can repeat
anything you put inside it
as many times so how many
times do we have this happen?
Can folks in the chat window
say how many times do we
want to repeat and see a square?
- Four, there's 1%, four.
- Or five.
- I want more 100,
because somebody said 100.
- Somebody said 100, Sophia
you want to type 100 in here?
- Okay.
- 100 and just make it go real fast.
Because I wanna be fast, I
wanna see 100 fast and 100.
Super fast.
- Super fast.
All right, hit run Sofia.
(running)
- Whooh.
- Alright, let's stop this.
So that's 100 squares going by super fast,
but Jack, if you're still on
there, those squares were all
on top of each other.
Can you think of ideas how
we can see those squares
but to see them all,
separate from each other?
- Yeah.
- Either when they're done,
maybe is a script to turn them
or move them somewhere else.
- Sofia which of those do you wanna do?
- Let's turn.
- Okay, do a turn.
So after each square, we're gonna
turn the artists a little bit.
Why don't you turn 'em like three degrees?
And change the number of peer to 120.
So...
- No it's too longer.
- All right now hit run.
Is everybody ready to
see what's gonna happen?
(mumbling)
(typing)
- Oh, yeah.
- I see in the chat room
somebody wants us to do 'em
like a trillion squares.
And one thing I wanna say is that
whoever type that Alex T,
and Harley Hendrickson,
who wanted a trillion squares,
one of the amazing things
about computer programming is
you can tell a computer to
repeat something as many times
as you want, and it doesn't get tired.
It doesn't say , I wanna go to bed.
The computer will repeat
an algorithm over and over.
And it will not make mistakes.
It'll do exactly what you tell it to do.
Now you make mistakes in what you tell it.
But after you tell her what you wanna do,
and then you ask him to repeat it,
it will do it over and over.
So we could have done
100 times or 1000 times.
I think if we hit
a million times,
- million.
I think that might have
broken our computer
because our computer (mumbling).
- Good job Zack.
- (mumbling)
- Good job.
Excellent.
- Thank you so much Zack.
So I want to do something else, now.
Let's make this drawing a
little bit more interesting.
We're gonna add a cool
little sticker to it.
Sofia, can you drag out the sticker block?
It's down at the bottom of the screen.
- Draw us.
- Now I wanna add the sticker right
after the first move forward block.
So the first move block is
when we begin the square.
So what are our options for
what we can put in a sticker?
- Wow.
- wow, there's a lot of stickers there.
I'm also seeing a lot of
people raising their hands
if you raise your hand,
if you have questions,
type them into the Q&A area.
But now I want people to tell us
what stickers should we use?
You see all these options
for stickers on the screen,
type in your sticker choices,
and we can choose from them.
And Hill tell me what you see (mumbling)
- Pirates, goats, penguin, wizard ninja.
I've seen a few penguins.
I think penguin and a lot of penguins.
- That's way too many choices.
Let's let's actually
do something different.
I wanna have a sticker simpler vote.
So I want us to choose
between four options.
And we're going to choose
the top four options.
You wanted the penguin Hill?
- Well, I was just being
the voice of the people.
- The voice of the people
you think is a penguin.
What do you want as your favorite option?
- My favorite option..
I like this little guy
down here, bottom left.
I don't even know what you call him.
But he's got the big eyes
and he's hanging out.
- Little guy down here?
All right, Sofia, what do you want?
- Let's do the chicken.
- Where's the chicken at?
- I don't know.
- Can you points to chicken.
- That one.
- That's the chicken.
And I ...
- What's the little guys name?
Number two, What is his name?
- I'm gonna choose a little alien.
That's not an alien, it's a zombie.
All right, so now in the chat room,
type the number for who you want.
- Number two, you guys.
Number two.
Big two.
- All right, Hill, it
sounds like everybody
wants your choice.
So we're gonna go with number two here.
We're gonna close our little voting area.
Sofia, you wanna choose the little guy?
- The little guy with the big eyes--
- He's over there, little
guy with the big eyes.
And now for the turns here.
Can we make each of these
turns 33 degrees apart,
so people can see these
stickers a little bit apart.
All right, now hit run.
(typing)
(mumbling)
So every time we draw a
square, we're adding a step.
And it's doing it over and over again.
120 times that little guy is
getting repeated many times.
And so it's (mumbling)
adding to our picture here.
Now one thing you notice
as I change the angle
as we're going along,
one of the best things
about computer programming
and computer science is
unlike a lot of subjects
you learn in school.
It's not just about getting
it right or getting it wrong.
What we're doing here is
just we're being creative,
and we're playing around.
So there's not really a
right or wrong answer,
just like an art class.
Your art teacher doesn't usually tell you,
that picture was wrong
or you got it right.
You're just making something
pretty that you can then share.
And when you're done making it,
you can click the Finish button,
(alarming)
And you can see what you made.
You have a URL to whether you can send,
you can send it to your
mom or dad's phone.
Or if you have a social media account.
If you are a mom and dad, you
can post it to social media.
Or if you want to change it
and you want to keep going.
You can click keep planning
and mess around with it
some more.
- That's gonna be my new
profile shot on my Instagram.
It's gonna be--
- All right.
So I'm gonna stop the
screen share for a second.
And I want to see if we have
any questions from our...
From the folks who've
been in the audience.
We might not but...
I wanna give a chance if folks
would have any questions,
from what they've see before.
And these could be questions about
what you've--
- There's a lot...
There's a lot of raised hands.
- [Akiera] We did have one question.
It was specifically for
Hill was the peanut butter
and jelly sandwich delicious?
What type of jelly was it?
Where did you get it?
- Well, I'll answer that...
Was Organic Wild Maine Blueberry Jam.
So this is from Maine.
- [Akiera] Fancy stuff.
- Great state from Stonewall Kitchen
and then the peanut butter
was this organic peanut butter
from Trader Joe's which is good.
Now the bread was this some
kind of organic seedless bread,
whatever.
I think that the directions
over did the jam.
It's too sweet.
It's too much jam in a jam
to peanut butter ratio.
I'm eating it anyway
because I'm really hungry.
But it's a little the jam to peanut ratio
was not programmed properly
and that's no knock
against the programmer.
I know that that was their
first time programming
a peanut butter and jelly
sandwich or coding one.
So I think the next time we
code this like Hadi said,
"there's no right or wrong,"
that we should code less jam
and more peanut butter and maybe even less
bread to be honest.
I can do for just like one
slice folded over something
like that, but that's just me.
That's just me personally.
- Alright, there's a question
from Christine Holly asking
about the artist saying
is forward relative
to where you are.
Because when Sofia said move forward,
turn right move forward turn right.
I thought it was going to be stairs
because I thought forward
always meant right.
And so Christine forward
depends on which direction
the artist is facing.
If the artist is facing
right, move forward takes it
to the right side of the screen.
When the artist turns right,
then it turns relative to where
it was already pointed,
and then it points down,
and then it moves forward to go down.
And then if it turns right again,
it'll actually be facing left.
So and each time it moves,
it goes in a direction
and each time it turns and
changes that direction.
All right, so--
- There question.
So Hadi, just so I know
how did would you do steps?
Since she thought that was steps?
How would you do steps?
- Do you want to take
a guess at that Hill?
- I absolutely do not.
- Okay.
- I assume you move forward,
left, then go move forward,
right, move forward, left, forward, right.
Exactly.
Move forward, turn left, which
is actually gonna implement
you up and then go up.
In fact, let's go do that right now.
And I'll show you how that would work.
If I take these squares.
And I'm just gonna take...
- Go back to your screen
so we could see you coding.
- Yeah, sorry.
Thank you.
And we're a little bit off script.
But I wanna do this because
somebody asked a question
about it, it'd be helpful
to see the difference.
And then we're going to get
into advanced coding afterwards.
So here we are.
And what I'm gonna do is I'm
gonna reset this little thing,
we have the sticker.
And I'm gonna get rid
of the sticker for now,
but we'll bring it back in a second.
We're gonna move forward 100
and then you set to turn left,
then move forward and turn
right and then move forward
and turn left, then move
forward and turn right.
And if we do that, it'll draw stairs.
And I can make it (mumbling)
these stairs is 10 steps long.
And in fact, after I just
do two stairs like this,
move forward, turn left.
I can then repeat that...
120 times.
(drawing)
And it's drawing stairs
with different colors.
- Wow.
- Wow, you sound super excited, Sofia.
So, Christine, thank you so much
for that wonderful question.
I'm not sure if you...
Were hoping to get that much
attention to your question
but thank you, Christine.
And we hope you try coding yourself.
And after the show, we're
going to send the links
so you can practice with this.
But what I want to do next is
to show more advanced coding.
And if you remember, and you
can see on my screen, we're now
in section three of showing
more intermediate level coding.
Sofia, are you ready for this part?
- Yeah.
- So I'm going to be doing
the coding on this part now.
And as Sofia is gonna
be making sound effects
and making fun of me as we go along.
And...
We're now in a slightly
more advanced version
of the same tool.
So this is a more advanced
version of artists.
You have the same blocks, but
they're not all laid out here.
They're in different section.
So there's action blocks like
move forward or turn right
or jump forward.
There's brush blocks.
And one of them, for example,
sets the width of the brush.
I'm going to set the
width of the brush to one.
So it's like draws a thin line
so we can draw more fine tuned stuff.
But you can see we have
loops like the repeat block,
and these other things like
logic, or if then statements,
or functions and variables.
And these are other
computer science concepts
that we're gonna learn over time.
So the first thing I wanna do,
is show how we can just
draw a simple square
like we did before.
I'm gonna draw a repeat block.
And again, this is gonna
be relatively simple,
but then we're gonna get a
little bit more advanced.
So I'm gonna say, let's move
forward, let's say 50 pixels.
And then turn right.
90 degrees, and a square,
if we move forward,
turn right and repeat it
over and over four times.
This should draw a square.
It's a few lines of code to JavaScript.
How exciting is that safe?
(soundboard mowing)
All right Sofia's falling asleep.
Now we can try drawing
different square shapes
by drawing angles.
So let's draw, let's say a
triangle that's got three sides,
I'm going to repeat three times.
What's the angle we
should do for a triangle.
This is something that
gets confusing sometimes,
because if you're in math class,
you know that the angle of
the inside of the triangle,
if it looks like this is 60 degrees.
But when the artist is actually turning.
So the artists angle is this
outside angle of the turn.
That's 120 degrees.
The inside of the triangle
over here is 60 degrees.
So if we have 120 degree turn,
and we do it three times,
we get a triangle.
And we can now do a hexagon
six times and since I've done
this before, we can go 660 degrees.
And this will draw a hexagon.
Or we can go...
You want to do Pentagon, Sofia?
Pentagon is 72 degrees.
Now I've memorized these degrees numbers,
but you can just learn them,
experiment.
- (mumbling)
- You think I have memorized an octagon?
I'll figure it out.
For an octagon, it's 45 degrees.
And we can do eight times.
(typing)
All right, was that
exciting for you, Sofia?
(soundboard clapping)
- Wow, you got excited for that.
Sofia has never seen
me draw octagon before.
So now I'm gonna change this to say,
we can do whatever shape we want.
So instead of repeating eight times,
I'll say let's repeat 100 times.
And so we can change different degrees.
So we can make very few degrees, sorry,
very tight turns like 160 degree turns.
And if we hit reset and
run, look what it does.
It just goes over and
over on top of itself.
Or we can make a slightly weirder number.
And now it's gonna draw
this cool little circle.
But now I want to show a
different type of repeat loop.
Because what we're doing
right here is just repeating
over and over and drawing
the same line and then add.
And basically, it's the same.
And by the way, I wanna say for
some people that are asking,
how is this code even working?
Why is it going with blocks instead of
what they expect as coding?
Everything we're doing here
is actually under the hood is JavaScript.
So if you see this right here,
this is the JavaScript code
that matches the blocks over here.
It's literally the same thing.
But this is how computer programmers
in the real world do it.
They write this stuff by typing it,
instead of dragging and dropping blocks.
But it doesn't matter.
You can do the same thing with blocks.
And when we learn about algorithms,
it doesn't matter whether
you're typing or not.
It's matters which blocks
and which commands we use.
So what we're gonna do now
is use this new type of loop,
instead of the repeat loop.
We're going to do a four loop.
Sofia have you learned this before?
This is your first time you've seen it.
This four loop as a counter.
And we said let's repeat.
Before we were saying
let's repeat 100 times.
So we can do the same thing.
Let's count from one to 100
- A 1000.
- A 1000?
Our sets count from one to 500.
But you can choose how
much you want to count by.
So let's count by fives. So
I'm going to count from...
We usually count by threes.
We'll count from three to 500,
going in steps of three each.
Okay, so it's gonna go
three, six, nine and so on.
And what we're gonna
do is after each step,
it's gonna move forward 50 pixels.
But if you run this is just
basically drawing a square.
What we can do is since
the counter is changing,
it starts at three and
then it goes at six.
Hill, what do you think we
could do to make each one
of these steps a different link?
- We could change the number
of pixels, it moves forward.
- Right.
so instead of going 50 pixels
now what number you can do
if you want it to be different each time,
there's a variable called
counter that matches
what's happening in the repeat loop--
- That would add 10
pixels every time it goes.
So...
- Ten more.
- It's the first time it's
gonna be going three pixels.
The next time six...
- Oh I see.
- (mumbling) three and its
sort of gonna go to 500.
- That's true.
- (mumbling) in really slow motion.
So you see what it does.
It goes forward three turns, goes forward,
six turns goes forward,
nine, and 12, then 15,
- It's true.
- Then 18, then 21, then 24.
You're gonna make it fastest again.
You're gonna go faster.
The nice thing is computers
can go super fast.
(drawing)
(soundboard counting)
Sofia was that (mumbling)?
- Yeah.
- All right.
So look how few lines of
coded took to do this.
Just counting move forward turning right.
And now what's great about
this is if you experiment
with this here, we can do
lots of interesting things.
So now I can do 120 degrees,
like what makes a triangle.
And I run the same thing.
And it makes a triangle like shape.
- Octagon?
- You wanna do an octagon?
- Mm mm.
- We can do that oops.
We haven't done an octagon before except
a little bit earlier.
If you do the same
thing with an octagon...
- Wow.
- And makes an octagon like shape.
Now I want to show you
something else we can do.
We can go into brushes and
choose a different pattern
for the brush.
There's many patterns
we can choose from here,
there four or five.
So can folks in the chat room say
what pattern we should use?
You can see a line, a
rainbow, a rope, a squiggly.
Hill what would you call this one here?
- It's a chain.
- A chain?
All right, what are folks asking for?
- Rainbow is winning by a landslide.
- Rainbow is winning by a total landslide.
So let's do a rainbow.
And I'm gonna run this, ready, set, go.
(running)
All right, that's pretty cool.
- (mumbling) phew!
- So I want to try something different.
I'm gonna go back to a regular line.
And going back to the way we
were doing it as a square.
Do you remember when we
had this as a square,
when a drew like this?
What's pretty cool is if
you make it just this is
a 90 degree turn, which
is what squares have.
But what if we made it
just a little bit less
or more than 90 degrees, so 89 degrees.
The turn on these angles
will be a little bit
tighter than a square.
So if you run this, it's gonna spiral.
(running)
And you actually don't need
to be a geometry expert
to do this.
You just experimented and
play with different numbers
and see what it does.
But if we did this now with a rainbow,
check out how it looks.
(running)
- Come on Sofia you can
get a sound for that.
(clapping)
(mumbling)
- That's cool.(clapping)
- Can we try--
- And then..
You wanna try what?
- Squiggle.
- You wanna try squiggle, so...
- And then (mumbling)
- You wanna do squiggle.
So let's try a different angle (mumbling).
So I'm gonna do like this
angle and see what happens.
(running)
- One (mumbling)
- And there's a squiggle
going around like that.
- Ropes too.
You wanna do ropes?
- Ropes, I see lot's of ropes.
- Which is the rope?
Oh that's the rope.
- That one.
We have a (mumbling)
- A lot of people ask for rope, right?
- Yeah.
- Let's pick a different angle for this.
I'm gonna go like that angle.
(running)
- It just look like real ropes (mumbling)
- Wow.
So the reason I want to show you all this,
if you see how many lines
of code we have here,
One, two, three, four, five lines of code.
And in fact, we don't
even need to set the width
to this brush anymore.
So the code that does that in JavaScript
is just those lines of code.
And if you change the angle
and change the pattern,
you can get all sorts
of different drawings.
It's really not that complicated.
(running)
If you forgot how I did this,
this whole live stream of this is gonna be
on YouTube as well.
So you can do it yourself.
And now what we want to talk
about is how you can go learn
at home and try doing this at home
to make your own beautiful drawings.
And by the way, you
don't need to be limited
to these five lines of code.
This is just what I showed today.
But there's lots and lots of
different commands you can use
in this area to make interesting stuff.
So let me get off of the
screen share for a second now.
Hill you're still with us?
- I'm here.
That was fantastic.
I'm excited to go do it myself.
And create some amazing
art through coding.
- All right.
So what I want to ask for
folks to do is when you think
about making these art, we're
gonna give you some ads,
basically some challenges,
some take home questions
or basically some tape homework
to try this on your own.
Before we go into that, I wanna ask,
are there any more questions?
Akiera are there been any
questions that came in
on the message line?
- [Akiera] There have,
we have a couple for you
and a couple for Hill.
So for you Hadi someone asked,
I have two six year old
boys and I'm teaching them
coding through Code. Org.
Although sometimes
their attention strained
and they get bored.
What advice would you have
for somebody learning coding
and they may be a bit discouraged?
- So my first thought is
coding is a lot more fun
when you make it creative.
And on code better, we
have some exercises,
but we also have some projects.
So if you're on Code.org,
there's a little Create button
and if they're bored having
them go into the Create button
into the artists, which is
takes you into this tool
we just showed.
Let's give them a chance
to make what they want
rather than doing sort of
more school like exercises.
But also say, since
their kids let them take
a break as well.
I'd code that are we're very
aware that parents don't want
their kids in front of
screens the whole time.
Being in front of a
screen coding is wonderful
because it's creative and educational.
We also have unplugged
activities that kids can do
to learn computer science, a
lot like when we had Hill make
a peanut butter and jelly sandwich.
And in fact...
- (mumbling)
- We're going to send an email
at the end of this to tell
you about an unplugged activity
that kids can do together
or with you, that teaches
the same concepts,
but without the screen and
it's a little bit more fun
because it's more physical and
sort of, in the real world.
- [Akiera] Great and for Hill,
how did you first get
involved in computer science
and what does it look like
in your everyday life?
- Oh, wow.
So it seems like technology is everywhere.
I feel like I have to...
Come with me, I'll show you something.
I have the shower, right?
And it feels like I have
to know how to code.
I have to know how to code
to turn on the shower.
So this is like a glimpse into the future.
I feel like because I couldn't even...
If I didn't know how to...
It's like this shower
is so confusing to me.
But that's the way we
are, we're in a place.
But I think Hadi would tell you.
Hadi aren't we in an inflection
point where technology
and coding is actually going
to get more user friendly,
just like using a computer
has gotten more user friendly,
like instead of having to
learn how to write JavaScript,
instead of having to learn how to do,
I hate to say this long division,
we can actually use a
calculator is that gonna
be the same for coding
as time goes by that?
We don't have to learn
how to do JavaScript,
we can just learn how
to put things together
and then we could be even more
creative because we're not
so much spending so much mental energy
on learning the actual...
It's like you learn how to
drive a car but you don't
(mumbling) to be a mechanic
to drive a car right?
- Absolutely.
So first of all, in case
anybody's wondering whether
the question that was just
asked for the view into Hill's
shower was planned, that
was definitely not planned.
I wasn't expecting to see
the inside of your shower
on our first code break.
So thank you Hill for
walking us into the shower
for that sneak peek of the
tablet you've got there.
But absolutely computer programming.
When my father first learned,
it involves punching holes
into a cardboard piece of paper.
And whether there was a
hole or not a hole was a one
or a zero and you shove
that into a computer
and that was how you did
your computer program.
And then 10 years later,
you had to type numbers on a
typewriter, but those numbers
were the computer program.
And then as time has gone
on, you have to learn these
sort of English languages
like the JavaScript language
that I showed earlier.
And now as you can see this
dragging and dropping of blocks,
you can use those the block
based programming to do
very complicated stuff.
And it's getting easier and easier.
So what's great about computer
science is as it gets easier,
more of the sort of busy
work goes out of the way.
And it's much more about
learning how to communicate
what it is that you want.
And in fact, computer
scientists often are very good
communicators, because they've
practiced communicating
what they want or what they need,
but they're also very
literal and very explicit,
because the more you work
on programming and computer,
it's like programming, Hill
was for making a peanut butter
and jelly sandwich, and
they want to know exactly,
and very precisely what's needed.
But the actual languages are
getting easier and easier.
I started on C, which wasn't
nearly as easy as Python,
which is one of the most
popular programming languages,
which is just
easier to type.
- (mumbling)
- You're learning Python.
- Mm hmm.
- Where are you learning Python?
- It's your class?
- I didn't know that.
That's pretty awesome.
All right.
We're almost almost out of time.
So what I want to talk about
is the exercises we want to
do before next week.
So we're going to send you
all an email with exercises
you can make.
If you aren't signed
up for our email list,
go to code.org/break.
Oops, (mumbling) in front of the camera.
code.org/break.
We're not gonna send
you marketing messages,
you're just gonna get an
email with the exercises
with the links to where we
just were replying ourselves.
So you can make your own stuff,
what you're gonna get is,
if you're a beginner, you're
gonna get an exercise that asks
you to make this drawing.
This is really not that hard to do.
And all of you can do it, I am sure.
If you're more advanced,
Sofia is gonna hold up
what we want you to do.
Which is that drawing,
this is a lot harder.
It's a 10 by 10 grid of squares.
So it's 100 little squares.
But this is interesting because
what you're gonna need to do
to make that is come up with
an algorithm that's different
than what we showed you.
And as you look at this, you have to ask,
"what's the algorithm for doing this."
Maybe you wanna draw 10 lines across
and 10 lines going up and down.
Maybe you want to make a row of squares
and then come back and make
another row of squares.
Maybe you could do sort of
a spiral of squares going
around in a circle.
You can come up with your own algorithm.
And we talked about algorithms
before, like I said,
there's not a right or wrong way to go
about making that square.
You could do one of many different ways,
and we wanna see what
way you come up with.
After you make your algorithms.
What we wanna do is to have you make
your own creative creation.
So here are examples of
things you can make with code
that Sofia and I made earlier.
Sofia you wanna hold your examples up.
It is as you saw, very easy to
make cool drawings like this.
On code.org. somebody is posting
something of this nature,
roughly every two minutes.
So everybody in this group
can make your own drawing,
and parents if you're there,
we wanna share these drawings,
to social media.
If you share to social
media use the #codebreak.
So the team at code.org can
re-share what you've created.
And we have over 2 million
people who follow code.org,
on Twitter and Facebook and on Instagram,
and they would love to see
what you students are making.
For those of you who don't
have computers at home,
we have two options.
You can do coding on smartphones.
And we're gonna send options
in that email for how your
students can download an
app to learn how to code.
And also if they don't have a smartphone
or you just wanna give
them less screen time.
There's an unplugged
activity, as I said earlier,
which teaches them how to make algorithms
without using a computer.
All you need is a bunch of paper cups,
and I'm sure that with
this Coronavirus guarantee,
I bet many of you have paper cups.
And so you can learn how to make
an algorithm without writing any code.
So again, if you haven't
signed up already, sign up
@code.org/break.
Or just Google Code break
and you'll get to see how that works.
So we're now done with this.
So I wanna say thank you to everybody.
Can we get all the audience on
camera so we can say goodbye
to all them at once.
And can we unmute everybody
so everybody can say bye.
- [Audience] Bye.
- You guys are awesome.
(soundboard hooting)
- Stay healthy, stay safe.
(soundboard hooting)
- [Audience] Bye.
- Hadi let's, can we end it
like a dance party or something,
Sofia got a music lesson,
let's end with a little dance party.
(laughing)
Dance Party.
(mumbling)
- So before we close,
I wanna recognize what
a unique time we're in.
With 10s of millions of
students at home and the entire
human race working together
to fight this virus.
None of us...
Looking (mumbling) this.
I know we're all making the best of us.
(coughing)
Though many groups are
using their imaginations
to solve old problems in new ways.
And that's what we're trying to do here...
(mumbling)
To take a chance to give
you an hour of education.
And a moment of community in the middle
of all our aloneness.
I want to give a special
thanks to my friend Hill Harper
for being such a great spot
and joining us for our first code break.
Are you stuck at home
and tired of studying?
Take a code break and goodbye, everybody.
- Awesome.
Bye.
- [Audience] Bye.
(giggling)
- All right.
Bye, everybody.
- [Audience] Bye.
(mumbling)
- That's not nothing,
It's not anything.
- [Man] How did you do this? (laughing)
(mumbling)
- [Man] What's going on?
- [Boy] (mumbling)
- [Audience] (mumbling)
- [Student] (mumbling)
- [Man] (mumbling) California (mumbling)
San Diego (mumbling)
- [Child] (mumbling)
- [Man] (mumbling)
[Boy] (mumbling)
