YT YouTube2Text

YouTube2Text → Transcripts → CS50x - Lecture 0 - Scratch

CS50x - Lecture 0 - Scratch — Transcript

by CS50 · 23,169 words · 3,529 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

2:03All
2:04right,
2:05this is.
2:08OK.
2:10This is CS 50,
2:12Harvard University's introduction to the intellectual Enterprises of
2:15Computer Science and the arts of programming.
2:17My name is David Malan,
2:18and this is week er,
2:19and by the end of today you'll know not only what these light bulbs here spell,
2:23but so much more.
2:24But why don't we start first with the,
2:25uh,
2:25the elephant or the elephant in the room,
2:28that is artificial intelligence,
2:30which is seemingly everywhere over the past few years,
2:32and it's been said that it's going to change programming,
2:34and that's absolutely the case.
2:36It's been that way actually for the past several years.
2:38is only going to get to be the case all the more,
2:40but this is an incredibly exciting time.
2:42This is actually a good thing,
2:43I do think insofar as now using AI in any number of forms,
2:47you can ask the computer to help solve some problem for you.
2:50You can find some bug or mistake in your code.
2:53Better still,
2:53increasingly you can tell the AI what additional
2:56features you want to add to your software,
2:58and this is huge because even in the industry for years,
3:01humans have been programming in some form for decades,
3:03building products and solutions to problems.
3:05The
3:06is that you and I as humans have long been the bottleneck.
3:09There's only so many hours in the day.
3:11There's only so many people on your team or in your company,
3:14and there's so many more bugs that you want to solve
3:17and so many more features that you want to implement.
3:19But at the same time you still really need to understand the fundamentals.
3:23And indeed a class like this,
3:24CS 50,
3:25has never been about teaching you how to program.
3:27Like that's actually one of the side effects of taking a class like this,
3:30but the overarching goal is to teach you how to think,
3:33how to take input and produce.
3:34Correct output and how to master these and other tools.
3:37And so by the end of the semester,
3:39not only,
3:40not only will you be acquainted with languages like Scratch,
3:42which we'll touch on today if you've not seen it already,
3:44languages like C and Python and SQL,
3:47HTML CSS and JavaScript,
3:49you'll be able to teach yourself new things ultimately and ultimately be able
3:53to tell computers increasingly what it is you want it to do,
3:57but you'll still be in the driver's seat,
3:58so to speak.
3:59You'll be the pilot,
4:00you'll be the conductor,
4:01whatever your preferred metaphor.
4:02And that's what I think is so empowering still about learning
4:05introductory material,
4:06foundational material,
4:08because you'll know what you're ultimately talking about
4:09and what you can in fact solve.
4:11We've been through this before,
4:12like when calculators came out,
4:14it's still valuable,
4:15I dare say all these years later to still
4:16know how to do addition and subtraction and whatnot.
4:19And yet I think back on some of my own math classes,
4:21I remember learning so many darn ways in
4:23college how to take derivatives and integrals.
4:26And after like the 6th process of that,
4:28I sort of realized,
4:29OK,
4:29I get it.
4:29I get the idea.
4:30Do I really need to know this many ways?
4:32And here too,
4:33with AI and with code,
4:34can you increasingly sort of master the ideas and then lean on a copilot,
4:39assistant to actually help you solve those same problems.
4:42So let's do some of this ourselves here.
4:44In fact,
4:44just to give you a teaser of what you'll be able to do yourselves before long,
4:48let me go ahead and open up a little something called Visual Studio Code,
4:52AKA VS code for short.
4:54This is popular,
4:55largely open source or free software that's used by real world people.
4:58In industry to write code and it's essentially a text editor similar to notepad,
5:02if you're familiar with that or text edit,
5:04kind of like Google Docs,
5:05but no bold facing and underlining and things like
5:07that that you'd find in word processing programs.
5:10And this is CS 50's version thereof.
5:12We're going to introduce you to this all the more next week,
5:14but for now,
5:15let's just give you a taste of what you can do with an environment like this.
5:18So I'm going to switch over
5:20to this program already running VS code,
5:23and in this bottom of the screen,
5:25you're going to see a so-called terminal.
5:26Window again,
5:27more on that next week,
5:28but it's in this terminal window that I can write commands
5:30that tells the computer what I want it to do.
5:32For instance,
5:33let's suppose just for the sake of discussion that I want to make my own chatbot,
5:37not Chat GPT or Gemini and Claw.
5:39Like,
5:39let's make our own in some sense.
5:41So I'm going to code up a program called chat.ie,
5:45and you might be familiar that I,
5:47I'm using a language here.ie is it's just called Python,
5:50and if unfamiliar,
5:51you're in good company.
5:52You'll learn that too within a few weeks.
5:54And at the top.
5:54File here I can write my code and at the bottom of
5:56the file of the window here I can run my code.
6:00So here's how relatively easy it is nowadays to write even
6:04your own chatbot using the AI technologies that we already have.
6:08I'm going to go ahead and type a command like import.
6:12I'm going to go ahead and type the following
6:14from OpenAI,
6:15import OpenAI.
6:17We'll learn what this means ultimately,
6:18but what I'm going to do is write my own program on top of.
6:23An API application programming interface that someone
6:26else provides a big company called OpenAI,
6:28and they're providing features and functionality that
6:30now I can write code against.
6:32I'm going to create a so-called client,
6:34which is to say a program of my own
6:37that's going to use this OpenAI software.
6:40And then I'm going to go ahead and ask this software for a response,
6:43and I'm going to set that equal to client.pos.create,
6:49whatever all that means,
6:50and then Inside of these parentheses,
6:52I'm going to say
6:52the following.
6:53The input I want to give to this underlying API is quote unquote something like
6:58in one sentence,
7:00what is CS 50?
7:02Much like I would ask Chachi PT itself.
7:04If you're familiar with things like Chat GPT and AI more generally nowadays,
7:07you know,
7:07there's this thing called models which are like statistical
7:09models that ultimately drive what the AI's can do.
7:12I'm gonna go ahead and say model equals quote unquote GPT 5,
7:15which is the latest and greatest version at least as of today.
7:18Now down in my terminal window I'm going to run a different command,
7:22Python of chat.ie
7:24and so long as I have made no typographical errors in this program,
7:28I should be able to ask OpenAI,
7:31not with Chat GPT.com,
7:33but with my own code
7:35for the answer to some question.
7:36But I want to know what the answer to that question is,
7:38so I actually want.
7:39Print out that response by saying print response
7:43output text.
7:44In other words,
7:45these 10 lines,
7:46and it's not even 10 lines because a few of them are blank,
7:48I've implemented my own chatbot that at the moment is hard coded,
7:52that is permanently configured to only answer
7:55one question for me.
7:56And let's see with the cross of the fingers.
7:59CS 50 is Harvard University's introductory computer science course,
8:01the intellectual enterprises of Computer Science and the Art of programming.
8:04Weirdly familiar,
8:05covering problem solving algorithms,
8:07data structures,
8:07and more using languages like CPython and SQL.
8:09OK,
8:10interesting,
8:10but let's make the program itself more dynamic.
8:13Suppose you wanted to write code that actually
8:15asks the human what their question is,
8:17because very quickly might we want to learn
8:20something more than just this one question.
8:22So up here,
8:22I'm going to go and change my code and type some.
8:25Like this
8:26type prompt equals
8:28input with parentheses.
8:29More on this another time too,
8:31but what I'm going to ask the user for is to give me an actual prompt.
8:34That is a question that I want this AI to answer.
8:37And down here,
8:38what you'll notice,
8:39even if you've never programmed before,
8:41is that I can do something somewhat intuitive insofar as
8:44line 5 is now asking the human for input.
8:46Let's just stipulate that this equal sign means store that answer
8:50in a variable called prompt,
8:51where variables just like in math.
8:53Y or Z.
8:54Let's go ahead and store that in prompt.
8:56So the input I want to give to OpenAI now is that actual prompt.
8:59So it's a placeholder containing whatever keystrokes the human typed in.
9:03If I now run that same command again,
9:05Python of chat.ie,
9:07hit enter,
9:08cross my fingers,
9:09I'll see now
9:11dynamic
9:12prompting.
9:13So what's the question I might want to ask?
9:14Well,
9:14let's just say it again in one sentence,
9:17whoops,
9:17in one sentence,
9:19what is CS 50 mark?
9:20Enter.
9:21And now the answer comes back as
9:24probably
9:25roughly
9:26the same but a little bit different,
9:28a variant thereof,
9:29but maybe we can distill this even more succinctly.
9:32How about let's run it again?
9:33Python of chat.pi and let's say in one word
9:37what is CS 50 and see if the underlying AI obliges.
9:41And
9:43After a pause
9:44course in a word,
9:45so that's not all that incorrect,
9:47and maybe we can have a little fun with this now.
9:49How about in one word,
9:51which is,
9:53which is better?
9:55maybe Harvard
9:58or Stanford Question mark.
10:00Hope you picked right.
10:02Let's see.
10:03The answer is.
10:05Depends.
10:06OK,
10:07so would not in fact oblige,
10:09but notice what I keep doing in this code.
10:11I keep providing a prompt as the human like in one sentence,
10:14in one word.
10:15Well,
10:15if you want the AI to behave in a certain way,
10:18why don't we just tell the underlying system to behave in that way
10:21so why the human don't have to keep asking it in one sentence,
10:23in one sentence in one word,
10:25so we can actually introduce one other feature
10:27that you'll hear discussed in industry nowadays,
10:29which is not only
10:30a prompt from the user,
10:32which I'm gonna.
10:32Now temporarily renamed to user prompt just to make clear it's coming from the user.
10:36I'm going to also give our what's called a system prompt by setting this equal to some
10:42standardized instructions that I want the AI
10:45to respect,
10:46like limit your answer to one sentence,
10:50quote unquote.
10:51And now in addition to passing in as input,
10:54the user prompt,
10:56I'm going to actually tell OpenI.
10:58to use these instructions coming from this other variable
11:02called System prompt.
11:03So in other words,
11:04I'm still using the same underlying service,
11:06but I'm handing it now not only what the user typed in,
11:09but also this standardized text limit your answer to one sentence
11:12so the human like me doesn't have to do that anymore.
11:15Let's now go back to my terminal,
11:17Run Python of chat.ie once more,
11:19and this time we'll be prompted,
11:20but now I can just ask what is CS 50 question.
11:23And
11:25I'll likely get
11:26a correct and similar
11:29answer to before.
11:30And indeed it's Harvard University's
11:31flagship introductory computer science course.
11:34So it seems spot on too.
11:35But now we can have some fun with this too,
11:37and you might know that these GPTs nowadays have sort of personalities.
11:41You can make them obliged to behave in one way or another.
11:43Why don't we go into our system prompt here and say something silly like pretend
11:47you're a cat.
11:49And now let's go back to the prompt one final time.
11:52Run Python of chat.ie
11:54prompt again will be say what is CS 50 and with a final flourish of hitting enter.
12:00What do we get back?
12:03CS 50 is Harvard University's introductory
12:05computer science course teaching programming,
12:07algorithms,
12:07data structures,
12:07and problem solving,
12:08and it's available free online
12:10meow.
12:11So that was enough to coerce this particular behavior.
12:14So this is to say that with programming you have the ability in like 10 lines of text,
12:20not all of which you might understand yet,
12:22but that's the whole point of a class like this to build fairly powerful things,
12:25maybe silly things like this,
12:27but in fact it's using the same primitives that CS 50 has its own.
12:30Virtual rubber duck and we'll talk more about this in the weeks to come,
12:33but long story short,
12:34in the world of programming,
12:35it's kind of a thing
12:36to keep a rubber duck literally on your desk or really any inanimate
12:40cute object like this because when you are struggling with some problems,
12:44some bug or mistake in your code and you don't have a friend,
12:47a teaching assistant,
12:48a parent,
12:48or someone else who's more knowledgeable than you.
12:50About code where you literally are encouraged in programming
12:53circles to like talk to the rubber duck,
12:56and it's through that process of just verbalizing your confusion
12:59and organizing your thoughts enough to convey it to another person or duck in
13:03this case that so often that proverbial light bulb goes off and you realize,
13:06ah,
13:06I'm being an idiot now I hear in my own thoughts the illogic or the mistake I'm making.
13:11And you solve that problem as well.
13:13So CS 50,
13:14drawing inspiration from this,
13:15will give to you a virtual duck in computer form.
13:18And in fact,
13:19among the other URLs you'll use over the course of the semester is that here,
13:22CS50.AI,
13:23which is also built into that previous URL,
13:26CS50.
13:26dev,
13:27whereby these are the AIs you can use in CS50
13:31to solve problems and you are encouraged to do so.
13:33As you'll see in the course of syllabus,
13:34it is not reasonable.
13:36Not allowed to use AI-based software other than CS 50's own,
13:39be it Claw,
13:40Gemini,
13:40Chachi PT,
13:41or the like,
13:41but it is reasonable and very much encouraged along the
13:44way to turn not only to humans like me,
13:46your teaching assistant,
13:48and others in the class,
13:49but to CS 50's own AI-based software.
13:51And what you'll find is that this virtual duck is designed to behave as close to a good
13:56human tutor as you might expect from an actual human in the real world knows about CS.
14:01knows how to lead you to a solution,
14:03ideally without simply spoiling it and providing it outright.
14:07So with that said,
14:08that's sort of the end game to be able to write code like that and more.
14:12But let's really start back at the beginning and see how we can't get
14:16from zeros and ones that computers speak
14:18all the way back to artificial intelligence.
14:21So computer science is in the name of the course,
14:24Computer Science 50,
14:24but what is that?
14:25Well,
14:25it's really Just the study of information.
14:27How do you represent it?
14:29How do you process it?
14:30and very much germane to computer science
14:31is what the world calls computational thinking,
14:33which is just the application of ideas from computer science,
14:36or CS to problems generally in the real world.
14:40And in fact that's ultimately,
14:41I dare say what computer science really is.
14:44It's about problem solving and even though we use computers,
14:47you learn how to program along the way,
14:48these are really just tools and methodologies.
14:51that you can leverage to solve problems.
14:53Now what does that mean?
14:55Well,
14:55a problem is perhaps most easily distilled into a simple picture like this.
14:59We've got some input,
15:00which is like the problem we want to solve,
15:01and the output,
15:02which is the goal we want the solution there too.
15:05And then somewhere in the middle here is the proverbial black box,
15:07the sort of secret sauce that gets that input
15:10from output.
15:10So this then I would say is in essence is problem solving
15:14and thus computer science.
15:16But we have to agree,
15:17especially if we're going to use devices,
15:18Macs,
15:19PCs,
15:19phones,
15:19whatever,
15:20how do we all represent information,
15:22the inputs and the outputs in some standardized way?
15:25Is it with English?
15:25Is it with something else?
15:26Well,
15:26you all probably know,
15:27even if you're not computer people,
15:29that at the end of the day
15:30computers somehow use zeros in one entirely.
15:33That is their entire alphabet.
15:35And in fact
15:36you might be familiar already with certain such systems.
15:39So the unary notation,
15:41which means you essentially use single digits like fingers on your hand,
15:44for instance,
15:45unary AKA base one,
15:46is something you can do on your own human hand.
15:48So for instance,
15:49with one human hand,
15:50how high can I count?
15:52All right,
15:52so hopefully 12345,
15:54and if you want to count to 6 to 11 and 10 and so forth,
15:59you need to,
16:00you know,
16:00take out another hand or your toes or the like because it's fairly limiting.
16:03But if I think a little harder instead of just using unary,
16:06what if I use a different system instead?
16:09What about something like binary?
16:10Well,
16:10how high if you think a little harder,
16:12can you count on one human hand?
16:15So 31,
16:16says someone who studied computer science before,
16:18but why is that?
16:18It's kind of hard to imagine,
16:20right?
16:20Because 12345 seems to be the five possible patterns,
16:24but that's only when you're looking at the totality of fingers
16:27that are actually up 5 in total or 4 in total,
16:29or 1 or the like.
16:30But what if we take into account the pattern of fingers that
16:33are up and we just standardize what each of those fingers represent?
16:36So maybe we all agree.
16:38Like a good computer would too,
16:40that maybe no fingers up means the number 0.
16:42And if we want to count to 1,
16:44let's go with the obvious.
16:45This is now 1.
16:46But instead of 2 being this,
16:48which was my first instinct,
16:49maybe 2 can just be
16:51this
16:52a single second finger up like this,
16:55and that means we could now use 2 fingers up to represent 3.
17:01I propose we can use just one middle finger up to offend everyone but represent 4.
17:06I could maybe use these two fingers with some difficulty to represent 567.
17:13I'm already up to 7 having used only 3 fingers.
17:16And in fact,
17:16if we keep going higher and higher,
17:18I bet I can get as high as 31 for 32 possible combinations,
17:23but the first one was.
17:24So that's as high as we can count.
17:25So we'll make this connection in just a moment,
17:27but what I started to do there is something called base 2.
17:30Instead of just having fingers up or fingers down,
17:33I'm taking into account the positions of those fingers
17:35and giving meaning to like this finger here,
17:39this finger here,
17:39this finger here,
17:40and so forth,
17:41different weights if you will.
17:43So
17:43the binary system is indeed all computers.
17:46And you might be familiar with some terminology here.
17:49Binary digit is not really something anyone really says,
17:52but the shorthand for that is going to be
17:55bit.
17:55So if you've heard of bits,
17:57and we'll soon see bytes and then kilobytes
17:59and megabytes and gigabytes and terabytes and more,
18:02this just refers to a bit meaning a single
18:05binary digit,
18:07either a 0 or a 1.
18:10A 0 is perhaps most simply represented by just like turning,
18:14maybe keeping a finger down,
18:15or in the world of computers which have access to electricity,
18:18be it from the wall
18:19or maybe a battery,
18:21you know what we could do?
18:23We could just decide sort of universally that when
18:26a light bulb is off,
18:27that thing represents a zero,
18:28and when the light bulb.
18:29Was on that thing's going to represent a 1 instead.
18:33Now why is this?
18:34Well,
18:34electricity is such a simple thing,
18:35right?
18:35It's either flowing or it's not,
18:38and we don't even have to therefore worry about how much of it is flowing.
18:41If you're vaguely remember a little bit about voltage,
18:43we can sort of be like zero volts.
18:45Nothing's there available for us,
18:47or maybe it's 5 volts or something else in between.
18:49But what's nice about binary only housing zeros and ones is that it maps really
18:54nicely to the real world by like throwing a light switch on and off.
18:58You can represent information by just using a
19:00little bit of electricity or the lack thereof.
19:03So what do I mean by this?
19:04Well,
19:04suppose we want to start counting using binary zeros and ones only.
19:09Well,
19:09let's think of them metaphorically as like akin to these light.
19:12Bulbs here and in fact let me grab a few of these light bulbs
19:15and let me propose that if we want to represent the number 0,
19:18well,
19:18it stands to reason that here
19:21single light bulb that is off can be agreed upon as representing 0.
19:25Now in practice,
19:26computers don't have little light bulbs inside,
19:28but they do have little switches inside,
19:31millions of tiny little things called transistors that have.
19:34On can allow it to capture a little bit of electricity and
19:37effectively turn on a metaphorical bulb or the switch can go off.
19:41The transistor can go off and therefore let the
19:43electricity dissipate and you have just now a 0.
19:46Unfortunately,
19:47even though I can let some
19:49electricity,
19:51here's the battery I mentioned is required,
19:53even though we might have some electricity available to us,
19:55I can therefore count to 1.
19:57But how do I go about counting?
20:01Hardware problem,
20:02how do I go about counting higher than one
20:04with just a light bulb?
20:08Yeah,
20:08so I need more of them.
20:09So let me grab another one here,
20:11and now I can put it next to it,
20:13and this too I'll claim is just still the number one.
20:16But if I want to turn 2 of them on,
20:18well,
20:18that would mean I could count to 2.
20:20And if I maybe grab another one now I can count as high as 3,
20:23but wait a minute,
20:24I'm doing something wrong
20:26because with 3 human fingers,
20:27how high was they able to count.
20:29So 7 in total starting at 0.
20:31So I've done something wrong here,
20:33but let me be a little more clever than about the pattern that I'm actually using.
20:37Perhaps this can still be
20:381,
20:39but just like my finger went up and only one finger in the second version of this,
20:44this
20:46can be what we represent as 2.
20:49Which one do I want to turn on as 3,
20:50your left or your right?
20:53So you're right,
20:53because now this matches what I was doing with my fingers a moment ago,
20:56and I claimed we could represent 3 like this.
20:59If we want to represent 4,
21:00that's fine.
21:00We have to turn that off,
21:02this off,
21:03and this on,
21:05and that's somehow 4
21:06and let's go all the way up to 7.
21:08Which ones need to be on to represent the number 7?
21:11All right,
21:11so all of them here.
21:13Now if you're not among those who just sort of naturally said
21:16all of them,
21:16like what the heck is going on?
21:17How do half the people in this room know what these patterns are supposed to be?
21:21Well,
21:21maybe you're remembering what I did with my fingers,
21:23but it turns out you're already pretty familiar
21:25with systems like this,
21:27even if you might not have put a name to it.
21:29So in the human world,
21:30the real world,
21:30most of us deal every day with
21:32the so-called base 10 system,
21:34otherwise known as.
21:35deck implying 10 because in the decimal system you have 10 digits available to you 0
21:41through 9.
21:42In the binary system we only had 2 by implying 2,
21:45so 0 and 1.
21:47And unary we had just 1,
21:48a single digit there or not.
21:51So in the decimal system we just have more of a vocabulary to play with,
21:55and yet you and I have been doing this since grade school.
21:57So this is obviously the number 123.
22:00But why?
22:01It's technically just three symbols 123,
22:04but most of us,
22:04your mind immediately goes,
22:05OK,
22:06123,
22:07pretty obvious,
22:08pretty natural.
22:09But at some point you,
22:10like me,
22:10were probably taught that this is the one's place
22:13and this is the ten's place and this is the 100s place and so forth.
22:18And the reason that this pattern of symbols
22:21123 is 123 is that we're all doing some quick mental math and.
22:26I,
22:26well,
22:26that's 100 times 1 plus 10 times 2 plus 1 times 30,
22:30OK,
22:30there's how we get 100 plus 20 + 3 gives
22:33us the number we all know mathematically is 123.
22:37Well,
22:37it turns out whether you're using decimal or binary or other
22:41base systems that we'll talk about later in the course,
22:43the system is still fundamentally the same.
22:45Let's kind of generalize this away.
22:46Here's a three digit number in some base system,
22:49specifically in decimal,
22:50and I know that only because of
22:51Placeholders that I've got on top of each of these numbers.
22:54But if we do a little bit of math here,
22:561,
22:5610,
22:57100,
22:581000,
22:5810,000,
22:59and so forth,
22:59what's the pattern?
23:00Well,
23:00technically this is 100,
23:0210 to 1,
23:0310 to 2,
23:05and so forth,
23:06and we're using 10 because we can use as many as 10 digits under each of those columns.
23:11But if we take some of those digits away and go from decimal down to binary,
23:16the motivation being it's Way easier for
23:18a computer to distinguish electricity being on or
23:22off than coming up with like 10 unique levels of electricity to distinguish among.
23:26You could do it.
23:27It would be annoying and difficult to build and hardware you could do it
23:30so much simpler to just say
23:32on and off.
23:34It's a nice simple world that way.
23:36So let's change the base
23:38from 10 to 2,
23:39and what does this get us?
23:40Well,
23:40if we now do undo the math,
23:42that's 2 to 0.
23:43121 is 222 is 4.
23:46So the the mental math is now about to be the same,
23:49but the columns represent something a little bit different.
23:53So for instance,
23:53if I turn all of these off again,
23:56such that I've got off,
23:57off,
23:57off,
23:58otherwise known as 000,
24:01it's 0 because it's 4 times 0 + 2 times 0 + 1 times 0 still gives me 0.
24:08By contrast,
24:09If I turn on maybe just this one all the way over on the left,
24:13well,
24:13that's 4 times 1
24:16because on represents 1 and off represents 0,
24:18plus 2 times 0 plus 1 times 0,
24:21that gives me 4.
24:22And if I turn both of these on
24:24such that all three of them are now on,
24:27on,
24:27on,
24:27on,
24:27AKA 111,
24:30that's 4 times 1 plus 2 times 1 plus 1 times 1.
24:35That then gives me 7,
24:36and we can keep adding more and more bits to this.
24:38In fact,
24:38if we go all the way up
24:40numerically,
24:41here's how we would represent in binary the number you and I know as 0.
24:45Here's how we would represent
24:471.
24:47Here's how we would represent 2
24:49and 3
24:50and 4 and 5,
24:52and you can kind of see in your mind's eyes.
24:53Now because I only have zeros and
24:55ones and no 2s or threes,
24:58not to mention nines,
24:59I'm essentially going to be carrying a 1 in a moment if we were to be doing some math.
25:02So to go from 5
25:04to 6,
25:05that's why the 1 ends up in the middle column to go to 7 here gives us now 111 or on on
25:11on,
25:11how do I represent 8?
25:14Using ones and zeros,
25:16yeah,
25:18yeah,
25:18so we're going to need to add another digit.
25:20We need to throw hardware at the problem using an additional
25:23digit so that we actually have a column representing 8.
25:26Now,
25:26as an aside,
25:27and we'll talk about this before long,
25:28if you don't have an additional digit available,
25:31if your computer doesn't have enough memory,
25:33so to speak,
25:34you might accidentally count from 01234567.
25:38And then accidentally
25:40end up back at 0 because if there's no room to store
25:43the 4th bit,
25:45well,
25:45all you have is part of the number,
25:47and this is going to create all sorts of problems then ultimately in the real world.
25:52So let me go ahead and put these back and propose that we have a system now
25:56if you agree to sort of count numbers in this way via which we can represent
26:02information in some standard way and all the device underneath the hood.
26:05It is a bit of electricity to make this work.
26:07It's got to be able to turn things on,
26:08AKA use some transistors,
26:10and it's got to be able to turn those things
26:11off so as to represent zeros instead of ones.
26:16But the reality is like 2 bits,
26:173 bits,
26:184 bits aren't very useful in the real world because even with 3 bits you can count to 7,
26:22with 4 you can count to 15.
26:24These aren't very big numbers,
26:26so it tends to be more common to actually use units of measure of 8 bits at a time.
26:32A byte is just that.
26:331 byte is 8 bits.
26:35So if you've ever used the vernacular of kilobytes,
26:37megabytes,
26:38gigabytes,
26:39that's just referring to some number of bits,
26:41but
26:428 of them
26:43together compose one individual byte.
26:46So here for instance is a byte worth of bits,
26:498 of them total.
26:51I've added all the additional placeholders,
26:53and what number does this represent in decimal
26:55even though you're looking at 8 binary digits.
26:58It's just 0,
26:59because like literally every column is a 0.
27:02Now this is a bit more of mental math,
27:03but unless you know it already,
27:05what if I change all of the zeros to ones?
27:07I turn all 8 light bulbs on,
27:08what number is this?
27:10Yeah,
27:11so 255.
27:12Now some of those of you who didn't get that instantly,
27:15that's fine.
27:15You could certainly do the math manually.
27:16I dare say some of you have some prior knowledge of how to do this sort of system,
27:21but 255 means
27:23that if you start counting at 0 and you go all the way up to 255.
27:27OK,
27:27that's 256 total possibilities.
27:30Once you include 0 in the total number of patterns of zeros and ones,
27:34and this is just going to be one of these common numbers in computer science,
27:37256.
27:39Why?
27:39Because it's referring to 8 of something,
27:422 to 8.
27:43Gives you 256 and so you're going to commonly see certain values like that.
27:47256 back in the day,
27:49computers could only show 256 colors on the screen.
27:52Certain graphics formats nowadays that you might download can
27:55only use as many as 256 colors because,
27:58as we'll see,
27:59they're only using,
28:00for instance,
28:018 bits and therefore they can only represent so
28:03many colors of the rainbow as a result.
28:07So
28:08this
28:08then is how we might go from just zeros and ones,
28:11electricity inside of a computer
28:13to storing actual numbers with which we're familiar
28:16and honestly we can go higher than 255.
28:18What do you need to count higher than 255?
28:201/9 bit,
28:21a 10th bit,
28:2211th bit and so forth and it turns out common conventions nowadays,
28:26and we'll see this in code 2 is to use as many as 32 bits at a time.
28:31So that's a good chunk of bits and anyone want to ballpark how
28:34high you can count if you've got 32 bits available to you.
28:39Oh,
28:40fewer people now,
28:41yeah,
28:41in the back.
28:42Yeah,
28:43so it's roughly 4 billion,
28:44and it's technically 2 billion if you also want to represent negative numbers,
28:48but we'll revisit that question,
28:49but 2 to 32nd power is roughly 4 billion.
28:53However,
28:53nowadays it's even more common with the Macs and PCs
28:56you might have on your laps and even your phones nowadays
28:58to use 64 bits,
29:00which is a big enough number that I'm not even sure offhand how to pronounce it.
29:03That's a lot of permutations that.
29:062 to 64 possible permutations,
29:08but that's increasingly commonplace.
29:10And as an aside,
29:10just to dovetail things with our discussion of AI,
29:13among the reasons that we're living through over these past few years,
29:16especially this crazy interesting time of AI,
29:19is because
29:20computers have been getting so much faster,
29:22exponentially so over time.
29:24They have so much more memory available to them.
29:26There's so much data out there on the internet in particular.
29:29to train these models that it's an interesting confluence of hardware now actually
29:33meeting the mathematics and statistics that we'll talk about later in the class
29:37that ultimately make tools like the cat we just built possible.
29:41But of course computers are not all math,
29:43and in fact we'll use very little math per se in this class.
29:46And so let's move away pretty quickly from just zeros
29:48and ones and talk about letters of the alphabet,
29:50say in English.
29:51Here is the letter A.
29:52Suppose you want to use this letter in an email,
29:55a text message,
29:56or any other program.
29:57What is the computer doing underneath the hood?
29:59How can the computer store a capital letter A in English if at the end of the
30:04day all the computer has access to is a source of electricity from the wall or from
30:10a battery,
30:12and it has a lot of switches that it can turn on and off
30:15and treat the electricity in units of 8 or 32 or 64 or whatever.
30:21How might a computer represent a letter A?
30:26Yeah,
30:26we need to give it an identity,
30:27so to speak,
30:28as an integer.
30:29In other words,
30:29at the end of the day,
30:30if your entire canvas,
30:32so to speak,
30:33consists only of zeros and ones,
30:35like that is going to be the answer to every question today.
30:38You only have zeros and ones as the solution to these problems.
30:41We just need to agree
30:42what pattern of zeros and ones and therefore what integer,
30:45what number shall be used to represent the letter A.
30:49And hopefully,
30:50When we look at that pattern of zeros and ones in the right context,
30:54we'll indeed see it as an A.
30:55So if we look inside of a computer,
30:57so to speak,
30:58in the context of like a text messaging program
31:00or a word processor or anything like that,
31:02that pattern shall be interpreted hopefully as a capital letter A.
31:06But if I open up Mac OS's or Windows or my phone's calculator program,
31:10I would want that same pattern of zeros and ones to be interpreted instead
31:14as a.
31:15If I open up Photoshop,
31:17as we'll soon see,
31:18I want that same pattern of zeros and ones to be interpreted as a color presumably,
31:22not to mention videos and sound and so forth,
31:24but it's all just zeros and ones.
31:26And so even though I,
31:27when writing that chat program a few minutes ago,
31:30didn't have to worry about telling the computer,
31:32oh this is text,
31:33this is a number,
31:34this is something else,
31:35we'll see as we write code ourselves that
31:38you as the programmer will Have control over telling
31:40the computer how to treat some pattern of zeros and ones telling it this is a number,
31:45this is a color,
31:46this is a letter or something else.
31:48Um,
31:49how do we represent the letter A?
31:50Well,
31:51it turns out a bunch of humans in a room years ago decided that this
31:54pattern of zeros and ones shall be known globally as a capital letter English A.
32:01What is that number if you do the quick mental math?
32:04So indeed 65 because we had a 1 in the 604s place and a 1 in the one's place.
32:09So 65,
32:09that's just sort of it.
32:10It would have been nice if it were just the number 1 or maybe the number 0,
32:14but at least after the capital letter A,
32:17they kept things consistent such that
32:19if you want to represent a letter B,
32:21it's going to be 66.
32:23C,
32:23it's going to be 67 Y because.
32:25The humans in this room,
32:26a bunch of Americans at the time,
32:28standardized on what's called ASCI,
32:29the American Standard Code for Information Interchange.
32:32It doesn't matter what the acronym represents,
32:34but
32:35it was just a mapping.
32:36Someone on a piece of paper essentially
32:38started writing down letters of the alphabet
32:40and corresponding numbers so that computers subsequently could all speak
32:44that same standard representation and Here's an excerpt thereof.
32:48In this case we're seeing 7 bits' worth,
32:50but eventually we ended up using 8 bits in total to represent letters,
32:53and some of these are fairly cryptic,
32:55maybe more on those other time,
32:56but down here if we highlight just one column,
32:59we'll see that indeed on this cheat sheet 65 is capital A,
33:0266 is B,
33:0467 is C,
33:05and so forth.
33:06So why don't we do a little exercise here.
33:09What
33:09pattern of zeros and ones do I see here?
33:12I've got 3 bytes,
33:14so 3 sets of 8 bits,
33:16and even though there's no placeholders now over the columns,
33:18what is this?
33:20Number
33:23It's 60.
33:25Yeah,
33:25so we've got the 1s,
33:262s,
33:274s,
33:278s,
33:281632,
33:3064s column.
33:32So indeed this is going to be the number
33:3472,
33:3572.
33:35This is not what computer scientists spend their day doing.
33:37This is just to reinforce what it is we just looked at,
33:40and I'll spoil it.
33:40The rest of these numbers are 72,
33:4373,
33:4333,
33:44and anyone in this room could have done that if you took out a piece of paper,
33:47figured out what the columns are,
33:48and just do a bit of quick or.
33:50Of mental or written math,
33:51but this is to say,
33:53suppose that you just got a text message or an email
33:55that if you had the ability to look underneath the hood of the computer and
33:59see what pattern of zeros and ones did you just receive over the internet,
34:03suppose that pattern of zeros and ones was 3 bytes of bits,
34:07which when you do the math are the numbers 72,
34:1073,
34:1133.
34:12Well,
34:12here's the cheat sheet again.
34:13What message did you just get?
34:15Yeah,
34:16so it's high.
34:17Why?
34:17Because 72 is H and 73 is I.
34:20Now some of you said hi fairly emphatically why.
34:24Well,
34:2433 turns out you wouldn't know this unless you looked
34:26it up or someone told you is an exclamation point.
34:30So literally if you were to text someone like right now,
34:32if you haven't already,
34:33HI exclamation point in all caps.
34:36You would essentially be sending 3 bytes of information somehow over the internet
34:40to that recipient and because their phone similarly understands ASCI
34:45because it was programmed years ago to do so,
34:48it knows to show you HI exclamation point and not a number,
34:523 numbers no less,
34:53or colors or something else altogether.
34:56So here we then have high,
34:583 digits in a row here.
35:00What else is worth noting here?
35:01Well,
35:02there's some fun
35:03sort of trivia embedded even in this cheat sheet.
35:05So here again is A,
35:07B,
35:07C,
35:07D,
35:08E,
35:08F,
35:08G,
35:08and so forth,
35:0965 on down.
35:11Let me just highlight over here
35:12the lowercase letters 97,
35:1598,
35:1699,
35:17and so forth.
35:18If I go back and forth,
35:19does anyone notice
35:21the consistent pattern between these two?
35:24Yeah,
35:25so the lowercase letters are 32
35:28away
35:28from the uppercase letters.
35:30Well,
35:30how do we know that?
35:31Well,
35:3197 minus 65 is,
35:33yeah,
35:3332.
35:3498 minus 66 is OK,
35:3732,
35:37and that pattern continues.
35:39What does this mean?
35:40Well,
35:40computers know how to do this.
35:41Most normal humans don't need this information,
35:43but what it means is if you are representing
35:46in binary
35:47with your transistors on and off representing some pattern,
35:50and this is the pattern
35:51representing capital letter A,
35:52which is why we have a 1 in the 604 space and a 1
35:55in the ones place,
35:57how does a computer go about lower casing this same letter?
36:02Yeah.
36:05Perfect.
36:05All the computer has to do is change this one bit in the 32's place to a 1,
36:11because that has the effect mathematically per our discussion of adding
36:14the number 32 to whatever it is.
36:16So it turns out you can force text from upper case
36:19to lower case or back by just changing a single bit.
36:23Inside of that pattern
36:25of 8 bits in total.
36:27All right,
36:27why don't we maybe reinforce this with another quick exercise?
36:29We have an opportunity perhaps here for um maybe to give
36:32you some stress balls right at the very start of class.
36:34Could we get 8 volunteers to come up
36:36on stage,
36:37maybe over here
36:38and over here and over here on the left.
36:41Let me go all the way on the right.
36:43Uh,
36:43let's see.
36:44OK,
36:44the high hand here,
36:45the,
36:46the hand that's highest there,
36:47yes,
36:47we're making eye contact.
36:48How about all the way,
36:49what,
36:50wait,
36:50let's see,
36:50let's go here in the crimson
36:52sweatshirt here,
36:53and how about in the,
36:53the white shirt here?
36:54Come on up.
36:55Did I count correctly?
36:57Let's say
37:00Come on down.
37:01The 8 of you.
37:02I,
37:02I didn't count right,
37:03did I?
37:03123456.
37:06It's ironic that I'm not counting correctly here.
37:08How about on the left in gray?
37:10OK.
37:10Oh,
37:11OK,
37:12in black here.
37:13Come on down.
37:13All right,
37:14hopefully this is 81234567.
37:197.
37:20I'm pretty sure.
37:20OK,
37:218,
37:21there we go.
37:21All right.
37:22So let's go ahead and do the following exercise.
37:24I've got some sheets of paper preprinted here.
37:27If each of you indeed want to do exactly what
37:28you're doing and line up from left to right,
37:30each of you is going to represent a placeholder essentially.
37:33So we have over here the ones place
37:36all the way over here,
37:37and then we have the choose place.
37:40And the 4th place
37:42and the eights.
37:4416
37:4532,
37:4664,
37:48128,
37:48and we come bearing a microphone.
37:50If each of you want to say a quick hello,
37:52your name,
37:52maybe your dorm or house,
37:53and something besides computer science that you're studying or want to.
37:57Hi,
37:58I'm out.
37:59OK.
37:59I'm Alison.
38:00I'm a freshman in Mathews,
38:03and,
38:04um,
38:05I like climbing and I'm thinking of CS and Econ.
38:092.
38:10Hi,
38:10I'm Lily.
38:11I'm in Hurlbut this year and I'm thinking of doing CS in government.
38:16Nice to meet you.
38:17Hi,
38:18hi,
38:18I'm Sean.
38:18I'm in Candidate Hall and I'm thinking of doing astrophysics and CS.
38:22Welcome.
38:24Hi,
38:24I'm Jordan.
38:25I'm doing applied math with a specialization in CS and Econ,
38:29and,
38:30um,
38:30I'm in Widsworth,
38:32and I like going to the gym.
38:3516.
38:36Hi,
38:36I'm Shiv.
38:37I'm studying Mac and I'm in Canada.
38:40Nice.
38:41Hi,
38:41I'm Sophia.
38:42I'm in Thayer and I'm thinking of doing electrical engineering.
38:47Welcome.
38:48Hi,
38:48my name is Marie,
38:49and I'm in Canada B and I really like CS physics and astrophysics.
38:55Hi,
38:56I'm Alyssa.
38:57I'm in Holworthy.
38:58I'm also thinking of studying math or physics,
39:01and I also like to climb.
39:03Nice.
39:03Welcome to you all.
39:05So on the backs of their sheets of paper,
39:07they have a little cheat sheet that's describing what
39:09they should do in each of 3 rounds.
39:11We're going to spell out together a three letter word.
39:13You all as the audience have a cheat sheet above you that represents numbers,
39:172 letters.
39:18These folks don't necessarily know what they're spelling.
39:20They only know what they individually are spelling.
39:22So if your sheet of paper tells you to represent a zero in a given round,
39:26just kind of stand there awkwardly,
39:27no hands up.
39:28But if you're told on your sheet of paper to represent a 1,
39:31just raise a single hand to make obvious to the
39:33audience that you're representing a 1 and not a zero.
39:36And the goal here is to figure out what we are spelling using this system called
39:39ASCI.
39:40All right,
39:40round 1,
39:42execute.
39:45What number is this here?
39:49I'm hearing
39:51you can just shout it out.
39:52What number?
39:5366 or B.
39:55So you're spelling
39:56B.
39:57All right,
39:57hands down.
39:58Round 2.
40:01More math.
40:05Feel free to shout it out
40:07Oh,
40:08I heard it,
40:08yeah,
40:0879,
40:09which is,
40:10oh,
40:10OK,
40:11so we have BO.
40:12Hands down,
40:133rd and final round,
40:15execute.
40:16Number
40:21Yes,
40:2187,
40:22which is the letter?
40:23W,
40:24which spells?
40:26Bow,
40:26if you want to take your bow now.
40:29Ah,
40:29OK,
40:30here we go.
40:31You guys can keep those.
40:33OK,
40:34thank you.
40:35All right,
40:35you guys see that back.
40:36Thank you to our volunteers here.
40:38Very nicely done.
40:39We indeed spelled out bow,
40:41and that's just because we all standardized on
40:44representing information in exactly the same way,
40:46which is why when you type BOW on your phone or your computer,
40:49the recipient sees the exact same thing.
40:52But what's noteworthy in this discussion is that you
40:54can't spell a huge number of words like,
40:57yeah,
40:57English,
40:58OK,
40:58we've got that covered.
40:59But odds are you're noticing,
41:00depending on your own background what human languages you read or speak yourself,
41:05that a whole bunch of symbols might be missing from your keyboard.
41:08For instance,
41:08we have accented characters here in a lot of Asian languages.
41:11There's so many more glyphs than we could have even
41:13fit in that cheat sheet of numbers and letters.
41:15And so
41:16ASCI is not the only system that the world uses.
41:19It was one of the earliest,
41:20but we've moved on in modern times to a super set of AI that's generally.
41:25Known as Unicode,
41:26and Unicode uses so many more bits than AI that we even have room
41:30for all of these little things that we seem to send constantly nowadays.
41:34These are obviously images that you might send with your phone or your computer,
41:38but they're technically characters.
41:40They're technically just patterns of zeros and ones that have similarly
41:43been standardized around the world to look a certain way,
41:47but they're this is an emoji keyboard in the sense that.
41:50You're sending
41:52characters.
41:52You're not sending images per se.
41:54The characters are displayed as images,
41:56obviously,
41:57but really these are just like characters in a different font,
41:59and that font happens to be very colorful and graphical as well.
42:03So Unicode,
42:04instead of using just 7 or 8 bits,
42:07which if you do the quick mental math,
42:09if Asky only used 7 or let's say 8 bits,
42:12how many possible characters can you represent in Asky alone?
42:17256 because if we do that quick mental math,
42:1928,
42:19256 possibilities like that's it.
42:21That is,
42:22that's enough for English because you can cram all the uppercase letters,
42:25the lower case letters,
42:26the numbers,
42:26and a whole bunch of punctuation as well,
42:28but it's not enough for certain other punctuation symbols,
42:31not to mention many other human languages.
42:33And so the Unicode Consortium.
42:35Its charge in life has been to come up
42:37with a digital representation of all human language,
42:41past,
42:41present,
42:42and hopefully future by using not just 7 or 8 bits but maybe 16 bits per character,
42:4824 bits,
42:49or heck,
42:49even 32 bits per character.
42:51And per before,
42:52if you've got as many as 32 bits available to you,
42:55you can represent what,
42:56like 4 billion characters in total,
42:59and that's just one.
42:59One of the reasons why these emoji have
43:01kind of exploded in popularity and availability,
43:04there's just so many darn patterns like what else are we
43:06going to do with all of these zeros and ones.
43:08But more importantly,
43:09emoji have been designed to really represent people and places and
43:13things and emotions in a way that transcends human language.
43:17But even then they're somewhat open to interpretation.
43:20In fact,
43:20here's a pattern of I think 32 zeros and ones.
43:24Guessing no one's going to do the quick mental math here,
43:26but this represents what decimal number if we do in fact do out the
43:30math with that's being the ones place all the way over to the left,
43:33well,
43:33that's the number 4 billion,
43:3436,
43:35991,106.
43:37Who knows what that is?
43:38It's not a,
43:40and it's nothing near A upper case or lower case,
43:42but it is among the most popular emoji that you might send typically on your phone,
43:47laptop,
43:48or other device,
43:48namely.
43:49This thing here face
43:51with tears of joy,
43:52which odds are you've sent or received recently,
43:55but interestingly,
43:56even though many of you might have iPhones and see
43:59and send the same image,
44:01you'll notice that if you see a friend who's got Android or some other device,
44:04maybe you're using uh Meta's messenger program
44:07or Telegram or some other messaging service.
44:10Sometimes these emoji look a little bit different.
44:12Why?
44:13Because what a Unicode has done is they decided there shall exist
44:17an emoji known as excuse me,
44:19faced with tears of joy.
44:21Then Apple and Google and Microsoft and others,
44:24they're sort of free to interpret that as they see fit.
44:27So what you see on the screen here is a recent version from iOS.
44:30operating system.
44:31Google's version of the same looks a little something like this,
44:34and on Telegram if you have animations enabled,
44:36the same idea faced with tears of joy is actually animated,
44:40but it's the same pattern of zeros and ones in each case,
44:44but again they each essentially have different graphical fonts to
44:47present to you what each of those images actually is.
44:51All right,
44:52so those are each,
44:53excuse me,
44:54images.
44:58So
44:58those are each images.
45:00How is the computer representing them though?
45:03At the end of the day we've represented numbers,
45:06we've represented letters,
45:07but
45:08how about these things here colors.
45:10So how do we represent
45:12red or green or blue,
45:14not to mention every other color in between.
45:16At the end of the day,
45:17we only have one canvas at our disposal,
45:20yeah.
45:21So integers is the exact same answer as before.
45:24We just need to agree on what number do we use for red,
45:27what do we use for green,
45:28what do we use for blue,
45:29and we can come up with some standardized pattern for this.
45:32In fact,
45:32one of the most common techniques for doing this,
45:35and the one of the most common ways to do this in the real
45:37world is to use a combination of three colors together some amount of red,
45:41some amount of green,
45:43and some amount of blue and mix them together to get
45:45most any color of the rainbow that you might want.
45:48This is sort of a picture of something I grew up with back in the day where in
45:51like middle school when we'd watch movies or some kind of show and like in in class,
45:56we would kind of uh the projector screen would be over here.
45:59This is an old school projector with 3 different lenses,
46:02one of which projects some amount of green,
46:04some amount of red,
46:05some amount of blue,
46:05and so long as the
46:07lenses are correctly oriented to all point at the
46:09same circle or like rectangular region on the screen,
46:13you would see any number of colors coming to life in the old school.
46:16Video.
46:17I still remember all these years later we would kind of
46:20sit and lean up against it because it was super warm and you could
46:22feel it it's an easy way to fall asleep but back in grade school,
46:24but
46:25we use the same fundamental color system nowadays
46:28as well,
46:29including in modern programs like Photoshop.
46:31So let's abstract that away,
46:32focus on just three colors some amount of red,
46:35green,
46:36and blue,
46:36and let's propose for the sake of discussion
46:39that we want to mix together like a medium amount of red,
46:42a medium amount of green,
46:43and just a little bit of blue.
46:45For instance,
46:46Let's propose
46:47that we'll use 72 amount of red,
46:5023 amount of green,
46:53or 33 amount of blue RGB.
46:57Now why these numbers?
46:58Well,
46:58in the context of ASCI or Unicode,
47:00which is just a superset thereof,
47:03what is this spell?
47:04Hi,
47:05but again,
47:06if you were instead to open a file containing
47:08these 3 numbers or really these 3 bytes of bits
47:13in Photoshop,
47:14you would hope that they're going to be interpreted not as letters on the screen,
47:18but as some the color of a dot on the screen instead.
47:22So it turns out that in typically
47:25when you have three of these numbers together,
47:28each of them is using a single byte,
47:30so 8 bits.
47:31So you can have 0 red or 255 red,
47:340 green or 255 green or 0 to 255 of blue.
47:39So 0 is none,
47:40255 is the max.
47:42So if we mix these together,
47:44imagine just like that projector
47:46consolidating these three colors into one central point.
47:50Anyone want to guess what you're gonna get if you mix some red,
47:52some green,
47:53some blue in those amounts and way back?
47:58Yeah,
47:58you're going to get a dark shade of yellow.
47:59I've brightened it up a little bit for the projector here,
48:01but you're going to get it roughly this shade of yellow,
48:04and we could play with these numbers all day long and get
48:06similar results if we want to represent different colors as well.
48:10And indeed,
48:10whether it's Photoshop or some other program,
48:13you can actually combine these amounts in all
48:15sorts of ratios to get different colors.
48:17So if you had 000,
48:19so no red,
48:20no green,
48:20no blue,
48:21take a guess as to what color that's going to be in the computer.
48:24So it's gonna be black,
48:25like the absence of all three of those colors,
48:26but if you mix the maximal amount of each of those 255 red and green and blue,
48:31that's gonna give you white.
48:33Now if any of you have made web pages before or use programs like Photoshop,
48:37you might have seen numbers like 00.
48:39Or FF.
48:40Long story short,
48:41that's just another base system for representing numbers between 0 and 255 as well,
48:47but we'll come back to that mint semester when we make some of our own
48:50filters,
48:50uh,
48:51in sort of an Instagram-like way manipulating images of our own.
48:55So where are these colors coming from or where can we actually see them?
48:58Well,
48:58here's just a picture of that same emoji faced with tears of joy.
49:01If I kind of zoom in on that and maybe zoom in again,
49:04you can start to see if you blow it up enough or
49:07if you put your eyes close enough to the device sometimes,
49:09you can actually see individual dots or squares.
49:13These are generally known as pixels,
49:15and they're just the individual dots that collectively compose in
49:19which is to say that if each of these dots,
49:22which is part of the image,
49:23is going to be a distinct color like this one's yellow,
49:26this one's brown,
49:27and then there's a bunch in between,
49:29well,
49:29you're using some number of bits to represent each of those pixels' colors.
49:35So if you imagine using the RGB system,
49:37that's 8 + 8 + 8 bits,
49:40so that's 24 bits
49:42or 3 bytes,
49:43just.
49:44To keep track of the color of each and every one of these dots.
49:48So now if you think about having downloaded a GIF at some point,
49:51a ping,
49:52PNG file,
49:53a JPEG,
49:54or any other file format,
49:55it's usually measured in what file size like
49:57megabytes typically that means millions of bytes.
50:00Why?
50:01Because if it's a pretty big photograph or pretty big image,
50:04each of those dots takes up at least 3 bytes,
50:07it would seem.
50:08And if you do out the math,
50:09if you've got thousands of dots,
50:11each of which uses 3 bytes,
50:12you're going to quickly get to megabytes,
50:14if not even larger,
50:15for things like,
50:16say,
50:16videos.
50:17But again,
50:18it's just patterns of zeros and ones and so long as the programmer knows what
50:21they're doing and tells the computer how to
50:24interpret those zeros and ones and equivalently,
50:26so long as the software knows,
50:28look at these zeros and ones and interpret them as numbers or letters or colors,
50:33we should see what we intended to represent.
50:36All right,
50:37so that's num that's uh colors and images.
50:40What about how many of you kind of played with
50:42these little flip books as a kid where they've got like
50:44100 different little pictures and you flip through them really quickly
50:46and you see what looks like animation in book form?
50:49Well,
50:50this is essentially a video,
50:52so therefore what is a video or how can you think of what a video is?
50:56It's just a whole bunch of like images
50:57flying across the screen either on paper or digitally
51:00nowadays on your phone or your laptop and
51:02that's kind of nice because we're sort of composing
51:04more interesting media now based on these lower level
51:07building blocks and this is going to be thematic.
51:09We literally started with zeros and ones.
51:11we worked our way up to letters.
51:13We then worked our way up to sort of images and colors and thus images.
51:17Now we're up at this level of hierarchy in terms of video because what's a video.
51:21It's like 30 images per second flying across
51:25the screen or maybe slightly fewer than that,
51:28that collectively tricks our mind into thinking we are seeing motion pictures,
51:32and that's the old school term for movies,
51:34but it literally is what it was.
51:35Motion pictures was this film was showing you 30 pictures per second,
51:40and it looks like motion,
51:41even though you're just looking at images,
51:43much like this flip book very quickly one after the other.
51:47What about music?
51:48Well,
51:48how could you go about representing musical notes if again
51:52your only ingredients are zeros and ones.
51:56Even if you're not a musician,
51:57how do you represent music like that on the screen here?
51:59Yeah.
52:01OK,
52:01so the frequency,
52:02like the tone that you're actually hearing
52:04from the device,
52:05what else might weigh in beside besides the frequency of the notes?
52:08Yeah.
52:10So the speed of the note,
52:11maybe the duration,
52:12like if you think about a physical piano,
52:13like how long you're holding the key down for or not,
52:16what else?
52:17So the amplitude may be how loud,
52:19like how hard did you hit the keyboard to generate that sound.
52:22So let me propose at the risk of simplifying,
52:24we could represent each of these notes using 3 numbers,
52:27maybe 0 to 255 or some other range that
52:31represents the frequency or the pitch of the note.
52:33Duration and the loudness and so long as the person receiving a file containing all
52:38of those zeros and ones knows how to interpret them three at a time,
52:42I bet you could share
52:44a musical file with someone else that they could hear in exactly the same way
52:49that you yourself intended.
52:52Let me pause here
52:53to see
52:54if there's any questions now because we've already built
52:56our way up from zeros and ones now to
52:59video
53:00and sound.
53:01Yeah,
53:02in front.
53:06What the letter like 65 would be and then the number 5.
53:10So how does the computer distinguish between the letter 65 and the number 65?
53:14It's context dependent.
53:15So
53:16put simply,
53:16and we'll see this as early as next week,
53:18the programmer tells the computer
53:21how to display the information either as a number or a letter
53:24or equivalently once.
53:26Programmed,
53:26the software knows that when it opens a dot GIF file or jpayEG or
53:32something else to interpret those zeros and ones as colors instead of as like.
53:37DOCX for Microsoft Word file
53:39or the like.
53:40Other questions.
53:42On any of these representations,
53:50yeah,
53:50in front like the 1 thing like really briefly.
53:50Sure,
53:50so can we go on base 10 and base 2?
53:52So base 10 is like literally the numbers you and I use every day.
53:55It's base 10 in the sense that you have 10 digits at your disposal,
53:590 through 9,
54:00and any numbers you want to represent in the
54:02real world must be composed using 0 through 9.
54:05The binary system or base 2 is fundamentally the same.
54:09It's just the.
54:10doesn't have access to 2
54:11through 9.
54:12It only has access to 0 and 1.
54:14But much like the light bulbs I was displaying here,
54:17you can simply ascribe different weights
54:20to each of the digits so that instead of it being as much as the one's place,
54:24the tens place,
54:25and the hundreds place,
54:25if we more modestly say the one's place,
54:28the two's place,
54:28the four's place,
54:29we can.
54:30The same system
54:31in binary you might need to use more digits to count
54:35as high because in 255 you can just write 255.
54:39That's 3 digits in decimal.
54:40But in binary we've seen you need to use 8 such digits,
54:44which is more,
54:45but it's still much better than unary,
54:47which would have had 255 light bulbs on.
54:50Instead.
54:54And they like.
54:56Is binary and base 2 the same thing?
54:58Yes,
54:59just like base 10 and decimal are the same thing as well,
55:01and unary and base 1
55:03are the same thing as well.
55:05All right,
55:06so let me just stipulate that even though we sort of
55:08took this tour quickly at the end of the day,
55:10computers only have zeros and ones at their disposal.
55:12So again,
55:12the answer to any question is to how can we represent.
55:16X is going to somehow involve permuting those zeros and ones
55:20into patterns or equivalently into the numbers that they represent.
55:24But if we now have a way to represent all inputs in the world,
55:27be it letters,
55:27numbers,
55:28images,
55:28videos,
55:29anything else,
55:30and get output from some problem solving process,
55:33like how do we actually solve problems?
55:34Well,
55:34the secret sauce in the middle here is another term
55:36that you've probably heard in the real world nowadays,
55:38which is that of algorithm.
55:40step by step instructions for solving some problem.
55:44So this ultimately is what computer science really is about too.
55:47It's not just representing information but somehow processing it,
55:50doing something interesting with it to actually solve the problem that you've
55:54been provided as input so you can output the correct answer.
55:57Now there's all sorts of algorithms implemented in
56:00our phones and in our Macs and PCs,
56:02and that's all software is.
56:03It's an implementation in.
56:05Code,
56:06be it C++ or Java or anything else,
56:09other languages exist too
56:11in
56:12code that the computer understands,
56:14but it's still just step by step instructions.
56:15And among the things we'll learn in CS 50 is how to express yourself in different
56:19ways to solve problems not only in different
56:21languages but using different methodologies as well,
56:24because as we'll see,
56:25among the reasons we introduced these several languages is
56:27you don't just learn more and more languages.
56:29They allow you to solve the same problems.
56:32Different languages will allow you to solve different problems and even
56:35save you time by being better tools for the job.
56:39So here,
56:39for instance,
56:39on an iPhone is maybe a bunch of contacts,
56:42which is presumably familiar where we might have a whole bunch of
56:45friends and family and whatnot alphabetized by first name or last name.
56:48And suppose we want to find one such person like John Harvard,
56:51whose number here might be + 1 94946.
56:5482,750.
56:55Feel free to call or text him sometime.
56:57This is the goal of this problem.
56:59If we have our contacts app and I start typing
57:02in John's name by first name or last name,
57:05the autocomplete nowadays kicks in and it somehow filters the list down from my 10
57:09or 100 friends or 1000 friends into just the single directory entry that matches.
57:15So here too,
57:16back in the days of RG&B.
57:19Projectors we had phone books like this here too.
57:22I'm pleased to say thanks to our friend Alexis,
57:24this is the largest phone book that we've used for this demonstration.
57:27This is an old school phone book that's essentially the
57:29same thing as our contacts app or address book nowadays,
57:32whereby I've got a whole bunch
57:34of names and numbers alphabetically sorted by first name or last name,
57:37whatever,
57:38and corresponding to each of those as a number.
57:40So back in the day,
57:41and frankly even nowadays in your phone.
57:43How do you go about finding someone in a phone book or your contacts app?
57:47Well,
57:48you could very naively just start at the beginning
57:50and look down and just turn one page at a time looking for John Harvard in this case.
57:55Now,
57:56so long as I'm paying attention,
57:57this step by step process
57:59will get me to John Harvard.
58:01Like this is a correct algorithm,
58:03even though you might kind of object to how I'm doing this,
58:06why,
58:08what's bad about this algorithm?
58:10It's just slow.
58:11I mean this is crazy slow.
58:12If there's like 1000 pages in the songbook,
58:14which looks like there are like this could take me as
58:16many as 1000 pages or maybe he's roughly in the middle,
58:18it's like 500 pages.
58:20Like that's crazy.
58:20That's really rather slow,
58:22especially if I'm going to do this again and again.
58:24Well,
58:24what if I do it a little smarter grade school,
58:26I sort of learned how to count 2 at a time,
58:27so 2468,
58:301012,
58:311416,
58:3218.
58:33Again,
58:33if I'm paying attention,
58:35I'll get there twice as fast because I'm counting 2 at a time,
58:38but is that algorithm step by step correct?
58:41And I'm seeing no,
58:42but why?
58:44I might skip over John Harvard.
58:46So just by bad luck and kind of with 50/50 probability,
58:49he's going to be sandwiched between two of the pages.
58:52Now I don't have to abort this algorithm altogether.
58:54I could just,
58:55as soon as I get past the J section if we're doing it by first name,
58:58I could just double back one page and just make sure that I haven't missed him.
59:02So it's recoverable and this algorithm therefore is sort of twice as fast.
59:06Mm,
59:07plus one extra step maybe to double back,
59:09but that's arguably otherwise a bug or a mistake
59:11in the algorithm if I don't fix it intelligently.
59:14But what did we do back in the day and what does your iPhone or Android phone do?
59:17What they typically do is they go roughly to the middle,
59:20look physically or virtually down,
59:22they see,
59:23oh,
59:23I'm in the M section,
59:24and so which side is John Harber to,
59:26to the left or to the right?
59:28So he's to the left,
59:29so I could literally now.
59:34Jesus Christ.
59:37We talked about this before class and this might be more,
59:39oh my God.
59:41There we go.
59:42We can tear the problem in half.
59:44Thank you.
59:49It's been a while.
59:50Uh,
59:50we can tear the problem in half.
59:52We know that John Harvard is to the left,
59:53so I can throw
59:56half of the problem away if,
59:57uh,
59:57dramatically,
59:58such that I'm now going to from a 1000 page problem
1:00:01to 500 pages instead.
1:00:03What now can I do?
1:00:04I can go roughly to the middle here and maybe I'm in the E section.
1:00:07So I went a little too far back to the left,
1:00:08but I kept it simple and I just divided
1:00:11so that I can conquer this problem,
1:00:12if you will.
1:00:12And if I'm in the E section now,
1:00:14is John Harvard to the left or to the right?
1:00:16To the right,
1:00:16so I can get,
1:00:18Jesus.
1:00:21Tear the problem in half,
1:00:24and now,
1:00:24thank you.
1:00:26So now John Harvard again is going to be in this half.
1:00:28I can throw this half away.
1:00:29So now I've gone from 1000 to 500 to 250,
1:00:32and I can repeat,
1:00:33repeat,
1:00:33repeat,
1:00:33down to 125,
1:00:35half of that,
1:00:35half of that,
1:00:35half of that,
1:00:36so I'm left with finally
1:00:38just a single page.
1:00:39And John Harvard is hopefully now on this page such that I can call him
1:00:43or not at all,
1:00:43at which point this is.
1:00:44All sort of for naught,
1:00:46but what's powerful about each of those algorithms is that the sort of good,
1:00:50better,
1:00:50and best.
1:00:51Like they all get the job done,
1:00:53conditional on the second one having that little fix just to
1:00:55make sure I don't miss John Harber between two pages,
1:00:58but they're fundamentally different in their efficiency
1:01:01and the quality of their design.
1:01:03And this is really representative of one of the emphases of a class like this.
1:01:06It's not just about writing correct code or getting the job done,
1:01:10but doing it well and doing it quickly,
1:01:13using the least amount of CPU or computing resources,
1:01:16using the minimal amount of RAM,
1:01:18using the fewest number of people
1:01:20using the least amount of money,
1:01:21whatever your constrained resource is,
1:01:24solving a problem better.
1:01:25So that first algorithm,
1:01:27step by step instructions,
1:01:29was all about doing something
1:01:31like this whereby.
1:01:32The first algorithm,
1:01:33if we plot things on a grid like this,
1:01:36we have on the x axis a representation of the size of the problem.
1:01:40So this would mean small problem like 0 pages.
1:01:43This would mean big problem like 1000 pages,
1:01:45and then the Y or vertical axis we have some measurement of time.
1:01:48So this is the number of seconds or the number of page turns,
1:01:51whatever you're.
1:01:52Metric actually is,
1:01:54so this would be not much time at all,
1:01:56so fast this would be a lot of time,
1:01:58so slow.
1:01:59So what's the relationship if we just roughly draw these three algorithms?
1:02:02Well,
1:02:03the first one is technically a straight line,
1:02:05and we'll describe that as n.
1:02:06The slope is N because if you think of N as a number for the number of pages,
1:02:10well,
1:02:10there's a 1 to 1 relationship.
1:02:12And the first algorithm as to how many times I have to turn the page
1:02:16based on how many pages there actually is,
1:02:18and you can think about this in the extreme.
1:02:20If I was looking for someone whose name started with Z,
1:02:23I might have to go through like 1000 darn pages
1:02:25to get to that person whose name started with Z
1:02:28unless again I do something hackish and just kind of cheat and go to the end.
1:02:31If we execute these algorithms again and again in the same way,
1:02:34that's going to be pretty slow.
1:02:35But the second algorithm was.
1:02:37Pretty much twice as fast plus that one extra step potentially,
1:02:40but it's still a straight line because if there's 1000 pages
1:02:44and I'm dividing the problem and doing two pages at a time,
1:02:47well,
1:02:47that's like N divided by 2 steps plus 1,
1:02:50give or take.
1:02:50But it's still a straight line because,
1:02:53but it's still better.
1:02:54Notice if this is the size of the problem,
1:02:561000 pages for instance,
1:02:58we'll notice that the first algorithm took literally twice as much time.
1:03:02As the second algorithm,
1:03:03so we're doing better already,
1:03:05but the third algorithm fundamentally
1:03:07is going to look something like this.
1:03:09And if you remember your logarithms,
1:03:10so to speak,
1:03:11sort of the opposite of an exponential,
1:03:13this curve
1:03:14is so much
1:03:15lower and flatter,
1:03:17if you will,
1:03:18than either of these two.
1:03:19Mathematically,
1:03:19more on this another time,
1:03:20the slope is going to be like log based 2 of N or just logarithmic in nature,
1:03:25but what it means is that it's growing very.
1:03:27Very,
1:03:28very,
1:03:28very slowly.
1:03:29It's still going up.
1:03:30It's never going to flat line and go perfectly horizontal,
1:03:33but it goes up very slowly.
1:03:34Why?
1:03:35Well,
1:03:35if you think about two towns nearby like Cambridge on this side
1:03:38of the river and the town of Alston on the other,
1:03:40suppose that they still have phone books like this one and they merge
1:03:43their phone books for whatever reason.
1:03:45So overnight we go from a 1000 page phone book to a 2000 page phone book.
1:03:49The first algorithm is going to take literally twice as long.
1:03:52As well the second one because we're only going through it 1 or 2 pages at a time,
1:03:56but if the phone book size doubles
1:03:59from this year,
1:04:00for instance,
1:04:00to next year,
1:04:01you can kind of in your mind's eye think about the green line.
1:04:04It's not going to go up
1:04:05that much higher.
1:04:07Why?
1:04:08Well,
1:04:08practically speaking,
1:04:09even if the phone book becomes 2000 pages long,
1:04:13well,
1:04:13how many more times do you have to tear or divide that problem in half?
1:04:18Just one because you're taking a 1000 page bye out of it or a 500 then a 250,
1:04:23you're taking much bigger bytes out of it than just one or two at a time.
1:04:28And so what computer science and what algorithms and about
1:04:31good design is about is figuring out what is the logic
1:04:34via which you can solve problems not only correctly but efficiently as well.
1:04:39And that then gives us these things called algorithms.
1:04:42And when it comes time to code,
1:04:43which we're about to do too.
1:04:45Code is just an implementation and a language the computer understands
1:04:49of an algorithm.
1:04:50Now this assumes that we've come up with some digital way,
1:04:52that is to say 0 and 1 based way to represent names
1:04:56and numbers,
1:04:57but honestly we already did that.
1:04:58We came up with the ASCI and then Unicode to represent the names,
1:05:02and representing numbers is even easier than that.
1:05:04That's really where we started.
1:05:06So code is just about taking it.
1:05:07Input some standardized representation of names and numbers and spitting out
1:05:11answers and that's truly what iOS and Android are doing.
1:05:15When you start doing autocomplete,
1:05:17they could be searching from the top to the bottom,
1:05:20which is fine if you've only got a few friends and family in the phone.
1:05:23But if you've got 1000 or if you've got 10,000 or if it's not a phone book anymore,
1:05:27it's some database with lots and lots of data.
1:05:30Well it's.
1:05:30to reason that it'd be nice maybe if the computer kept it
1:05:34all alphabetized just like that book and jumped to the middle,
1:05:37then the middle of the middle,
1:05:38then the middle of the middle of the middle and so forth.
1:05:41Why?
1:05:41Because the speed is going to be much,
1:05:44much faster,
1:05:45logarithmic in nature and not linear,
1:05:48so to speak,
1:05:48in nature,
1:05:49but we'll revisit those topics as well.
1:05:51But for now,
1:05:52before we get into actual code.
1:05:54Let's talk for a moment about
1:05:55pseudo code.
1:05:56So pseudo code is not one formal thing,
1:05:58but every human will come up with their own way of representing pseudo code.
1:06:02It's an English-like or human-like formulation of
1:06:05step by step instructions just using terse
1:06:08correct
1:06:09English or whatever human language.
1:06:10So for instance,
1:06:11if I want to translate what I did somewhat intuitively
1:06:14with that phone book by just dividing in half,
1:06:16dividing in half into step by step instructions,
1:06:18I could hand.
1:06:19Or nowadays like a robot or something like that.
1:06:22Well,
1:06:22step one was essentially to pick up the phone book,
1:06:24which I did.
1:06:25Step 2 was I opened to the middle of the phone book in the third and final algorithm.
1:06:29Step 3 was look at the page as I did.
1:06:32Step 4 got a little more interesting even though I didn't verbalize this.
1:06:35Presumably I was asking myself a question.
1:06:37If the person I'm looking for,
1:06:39John Harvard,
1:06:39is on the page,
1:06:41then
1:06:42I would have called him right then.
1:06:44But if you weren't on the page,
1:06:46if you instead were earlier in the book,
1:06:48as did happen,
1:06:49well then I'm going to go to the left,
1:06:51so to speak,
1:06:51but more methodically,
1:06:53I'm going to open to the middle of the left half of the book.
1:06:56Then I'm going to go back to
1:06:58line 3.
1:06:59That's interesting.
1:07:00We'll come back to that in a moment,
1:07:01but else if the person is later in the book,
1:07:03well,
1:07:03I'm going to open to the middle of the right half of the book
1:07:06and then go back
1:07:08to line 3.
1:07:10Now,
1:07:10let's pause here.
1:07:11Why do I keep going back to line 3?
1:07:13This would seem to get me doing the same thing
1:07:16forever,
1:07:17endlessly.
1:07:19But not quite.
1:07:23Why?
1:07:24Yeah,
1:07:24so because I am dividing the problem in half,
1:07:28for instance,
1:07:29on line 6 or line 9 implicitly just based on how I've written this,
1:07:33the problem's getting smaller and smaller and smaller.
1:07:35So it's fine if I keep doing the same logic
1:07:37again and again because if the problem's getting smaller.
1:07:40Eventually it's going to bottom out and I'm gonna have just
1:07:42one person on that page that I want to call and so the algorithm's done.
1:07:46But there is a perverse corner case,
1:07:48if you will,
1:07:49and this is where it's ever more important to be
1:07:51precise when writing code and anticipate what could go wrong.
1:07:55I should probably ask one more question in this code,
1:07:58not just these three.
1:08:00What might that
1:08:01question.
1:08:04Yeah.
1:08:07Yeah,
1:08:07so if John Harvard is not in the book,
1:08:09there's this corner case where what if I'm just wasting my time entirely and
1:08:13I get to the end of the phone book and John Harvard's not there,
1:08:15what should the computer do?
1:08:16Well,
1:08:16as an aside,
1:08:17if you've ever been using your Mac or PC or phone and the thing just freezes
1:08:20or like the stupid little beach ball starts
1:08:22spinning or something like that and you're like,
1:08:23what is going on?
1:08:25Some human at Google or Microsoft or Apple or the like made a mistake.
1:08:29They forgot,
1:08:30for instance,
1:08:30that 4th uncommon but possible.
1:08:33Situation wherein if they don't tell the computer how to handle it,
1:08:37the computer's effectively going to freak out and do something
1:08:39undefined like just hang or reboot or do something else.
1:08:43So we do want to add this else
1:08:46quit altogether.
1:08:47So you have well defined behavior and truly think that the next time
1:08:50your computer or phone spontaneously reboots or dies or does something wrong,
1:08:55it's probably not your fault per se.
1:08:57It's some other human elsewhere did not.
1:09:00Correct code they didn't anticipate cases like these.
1:09:04But now let's use some terminology here.
1:09:05There's some salient ideas that we're going to see in scratch and
1:09:08C and Python and these other languages I alluded to earlier.
1:09:11Everything I've just highlighted here
1:09:13henceforth we're gonna think of as functions.
1:09:16Functions are verbs or actions that really get some small piece of work done for you.
1:09:21Functions are verbs or actions.
1:09:23Here though highlighted is the beginning of what we'll call.
1:09:26Conditions,
1:09:27conditionals like a fork in the road.
1:09:28Do I go this way?
1:09:30Do I go this way,
1:09:30or some other way altogether?
1:09:32How do you decide what road to go down?
1:09:35We're going to call these questions you ask yourself
1:09:37Boolean expressions,
1:09:39named after a mathematician Bull,
1:09:40and a boolean expression is just a question that has a yes or no
1:09:44answer or a true or false answer or a 1 or zero answer.
1:09:49Just it's a binary state,
1:09:50yes or no typically.
1:09:52Otherwise we have this go back to go back to,
1:09:56which is what we're generally kind of
1:09:57call a loop which somehow induces cyclical behavior
1:10:00again and again
1:10:01and those functions and those conditionals,
1:10:03boolean expressions and loops and a few other concepts are pretty
1:10:06much what will underlie all of the code that we write,
1:10:09whether it is in
1:10:10scratch,
1:10:11C,
1:10:12or something else altogether.
1:10:14But we need to get to that point
1:10:16and in fact,
1:10:17let's go and.
1:10:18Infer what this program here does.
1:10:20At the end of the day,
1:10:21computers only understand zeros and ones,
1:10:23so I claim here is a program of zeros and ones.
1:10:26What does it do?
1:10:30Anyone want to guess?
1:10:31I mean,
1:10:31we could spend all day converting all of these zeros and ones to numbers,
1:10:35but they're not gonna be numbers if it's code.
1:10:37What do you think?
1:10:39That's amazing.
1:10:40It does in fact print
1:10:42hello world.
1:10:45All right,
1:10:45so no one except like maybe you and me and a few others in the room should know,
1:10:48and that's probably guess admittedly or advancing on the slide,
1:10:51but why is that?
1:10:52Well,
1:10:52it turns out that not only do computers standardize information,
1:10:55data like
1:10:57numbers and letters and colors and other things,
1:10:59they also standardize instructions.
1:11:01And so if you've heard of companies like Intel or AMD or Nvidia or others,
1:11:06among the things they do is they decide as a
1:11:08company what pattern of zeros and ones shall represent what.
1:11:12and it's very low level functionality.
1:11:15Those companies and others
1:11:16decide that some pattern of zeros and ones means
1:11:19add two numbers together or subtract or multiply.
1:11:22Another pattern might mean load information from
1:11:24the computer's hard drive into memory.
1:11:26Another might mean store it somewhere else.
1:11:29Another might mean print something out to the screen.
1:11:32So nested somewhere in here,
1:11:33and admittedly I have no idea which pattern I'll find because it's
1:11:36not interesting enough to go figure it out at this level,
1:11:39says print.
1:11:40And somewhere in there,
1:11:41like this gentleman proposed,
1:11:43I bet we could find the representation of H,
1:11:46which was 72
1:11:47and E and L and L and O and everything that
1:11:50composes hello world because as it turns out in programming circles,
1:11:54the very first program that students typically write
1:11:57is that of hello world.
1:11:58Now this one here
1:12:00is written
1:12:01in a much more intelligible way,
1:12:03even if you're not a programmer,
1:12:04odds are if I asked you what does this program do,
1:12:06you would have said.
1:12:09Oh hello world,
1:12:10even though there's a lot of clutter here,
1:12:11like no idea what this is until next week in main void that looks cryptic.
1:12:15There's these weird curly braces which we rarely use in the real world,
1:12:18but at least I understand a few words like hello and world,
1:12:21and this is kind of familiar print F,
1:12:23but it's not print,
1:12:24but it's probably the same thing.
1:12:25So here too is an example of this
1:12:28hierarchy back in the day,
1:12:29in the earliest days of computers,
1:12:31humans were writing code by representing.
1:12:34Zeros and ones.
1:12:35If you've ever heard your parents talk about punch cards or the like,
1:12:37you're effectively representing patterns that tell the computer what to do
1:12:40or what to represent like literally holes and paper.
1:12:43Well,
1:12:43pretty quickly early on this got really tedious,
1:12:46only writing code at such a low level,
1:12:48so someone decided,
1:12:49you know what,
1:12:49I'm going to put in the effort.
1:12:51I'm gonna figure out what patterns of zeros and ones I can put together
1:12:54so as to be able to convert something more
1:12:58user friendly.
1:12:59To those zeros and ones and as a teaser for next week,
1:13:02that person invented the first compiler.
1:13:04A compiler is just a program that translates one language to another,
1:13:08and more modernly,
1:13:09this is a language called C which we'll spend
1:13:10a few weeks on together because it's so fundamental
1:13:13to how the computer works.
1:13:15Even this is going to get tedious by like week 6 of the class,
1:13:18and this is gonna get stupid,
1:13:19this is gonna get annoying,
1:13:20this is gonna get cryptic.
1:13:21We're just gonna write print hello on the screen
1:13:24in order to use a different language called Python.
1:13:26Why?
1:13:27Because someone wrote in C.
1:13:30A program that can convert Python,
1:13:33this is a white lie to C,
1:13:35which can then be converted to zeros and ones and so forth.
1:13:38So in computing there's this principle of abstraction
1:13:41where we start with the basics and thank
1:13:42God we can all trust that someone else
1:13:44solved these really hard problems way long ago.
1:13:47Then they wrote programs to make it easier.
1:13:49We wrote programs to make it easier.
1:13:51You can now write code like I did with the chatbot to make things even easier.
1:13:54Why?
1:13:55Because OpenAI and other companies have abstracted away a lot of the lower level.
1:13:59Implementation details and that's where I think this stuff gets really exciting.
1:14:03We can stand on the shoulders of others so long as we know how
1:14:06to use and assemble these kinds of building blocks.
1:14:09And speaking of building blocks,
1:14:10let's start here.
1:14:11Now odds are some of you might have started
1:14:13here in like grade school playing with scratch,
1:14:15and it's great for like after school programs,
1:14:17learning how to program,
1:14:18and you probably used it
1:14:19this language to make games and graphics and just maybe playful.
1:14:23Art or the like,
1:14:24but in Scratch,
1:14:25which is a graphical programming language designed about 20 years ago
1:14:28from our friends down the road at MIT's Media Lab,
1:14:31it represents pretty much everything we're going to
1:14:33be doing fundamentally over the next several weeks in
1:14:37more modern languages like C and Python,
1:14:40more textual languages if you will.
1:14:42I bet I could ask the group here what does this program do when you click a green flag.
1:14:46Well,
1:14:46it says
1:14:47hello world on the screen,
1:14:49because with Scratch,
1:14:50you have the ability to express yourself with functions
1:14:53and loops and conditionals and all of this,
1:14:55but by using
1:14:56drag and drop puzzle pieces.
1:14:58So what we're about to do is this.
1:15:00We're going to go on my screen to scratch.mit.edu.
1:15:02It's a browser-based programming environment,
1:15:04and we're only going to spend one week,
1:15:06really a few days in CS 50 on this language,
1:15:09but the overarching goal is to one,
1:15:11make sure everyone's comfortable applying some
1:15:13of these building blocks and actually.
1:15:14Developing something that's interesting and visual and audio as well,
1:15:18but to also give us some visuals that we can rely on and fall back on
1:15:22when all of those curly braces and parentheses and
1:15:25sort of stupid syntax comes back that's necessary in
1:15:28many languages but can very quickly become a distraction
1:15:32early on from the interesting and useful ideas.
1:15:35So what we're about to see is this in a browser.
1:15:37This is the scratch programming environment and there's
1:15:39a few different parts of this world.
1:15:40This is the blocks palette,
1:15:42so to speak.
1:15:43Uh,
1:15:43that is to say there's a bunch of puzzle pieces or building blocks that represent
1:15:47functions and conditionals and and uh loops and other such constructs.
1:15:52There's going to be the programming area here where you can
1:15:54actually write your code by dragging and dropping these puzzle pieces.
1:15:57There's a whole.
1:15:58whole world of sprites here by default scratch is
1:16:01and is a cat by design,
1:16:04but you can make scratch look like a dog,
1:16:05a bird,
1:16:06a garbage can,
1:16:07or anything else,
1:16:07as we'll soon see.
1:16:09And then this is the world in which Scratch itself lives.
1:16:11So Scratch can go up,
1:16:12down,
1:16:13left,
1:16:13right,
1:16:14and generally be animated within that world.
1:16:16For the curious,
1:16:17kind of like high school geometry class,
1:16:18there's sort of this XY plane here,
1:16:20so 00 would be in the middle,
1:16:220 180 is here,
1:16:230.
1:16:24180 is here.
1:16:26Uh,
1:16:26-240,
1:16:280 is here,
1:16:29and 240 0 is here.
1:16:30Generally you don't need to worry about the numbers,
1:16:32but they exist so that when you say up or down,
1:16:35you can actually tell the program go up one pixel or 10 pixels
1:16:39or 100 pixels so that you have some definition of what this world
1:16:43actually is.
1:16:44All right,
1:16:45so let's actually put this to the test.
1:16:47Let me go ahead here and flip over to in just a moment.
1:16:51The actual Scratch website
1:16:53whereby
1:16:54I'm gonna have on my screen in just a moment,
1:16:57that same user interface,
1:16:59once I've logged in.
1:17:00That via which I can actually write some code of my own.
1:17:04Let me go ahead and zoom in on the screen a little
1:17:05bit here and let's make the simplest of these programs first.
1:17:08Maybe a program that simply says he world.
1:17:10Now at a glance,
1:17:11it's kind of overwhelming how many puzzle pieces there are,
1:17:14and honestly,
1:17:14even over 20 years I've never used them all,
1:17:16and MIT occasionally adds to it.
1:17:18But the point is that they're color coded
1:17:20to resemble the type of functionality that they offer
1:17:23and also it's meant to be the sort of thing where you can.
1:17:25Kind of scroll through
1:17:26and get a visual sense of like what you could do and
1:17:29then figure out how you might assemble these puzzle pieces together.
1:17:32So I'm going to go under this yellow or orangeish category here to begin with.
1:17:37So there exists in the world of Scratch,
1:17:39not quite the same jargon that I'm using now functions
1:17:43and conditionals and loops that's more of the programmer's way.
1:17:46This is more of the child friendly way,
1:17:47but it's really the same idea
1:17:49under events.
1:17:50You have puzzle pieces that represent things that can happen
1:17:53while the world is running.
1:17:55So for instance,
1:17:56the first one here is sort of the canonical when the green flag is clicked.
1:18:00Why is that relevant?
1:18:01Well,
1:18:01in the two dimensional world that Scratch lives in,
1:18:03there's a stop sign which means stop,
1:18:05and there's a green flag which means go.
1:18:07So I can therefore drag one of these puzzle pieces
1:18:09over here so that when I click that green flag,
1:18:12the cat will in fact do something for me.
1:18:15Doesn't really matter where I drop it so long as it's somewhere in the middle here.
1:18:18I'm gonna go ahead and let go.
1:18:20Now I want the look of the cat to change.
1:18:22I want to see like a cartoon speech bubble come out for now,
1:18:25so I'm going to go under looks here
1:18:27and there's a bunch of different ways to say things and think things.
1:18:30I'm gonna Keep it simple and just drag this one here.
1:18:33And now notice when I get close enough to that first puzzle piece,
1:18:36they're sort of magnetic and they want to snap together so I
1:18:39can just let go and boom because they're a similar shape,
1:18:42they will lock together automatically
1:18:44and notice too if I zoom in here.
1:18:46The white oval,
1:18:47which by default says hello,
1:18:49is actually editable by me because it
1:18:51turns out that some functions can take arguments
1:18:55or more generally inputs that influence their behavior.
1:18:58So if I kind of click or double click on this,
1:19:00I can change it to the more canonical
1:19:01Hello world or hello David or hello,
1:19:04whatever I want the message to be.
1:19:06I'm going to go ahead and zoom out and now over here at
1:19:08top right notice that I can very simply click the green flag and
1:19:12I'll have written.
1:19:13My first program in Scratch.
1:19:15I clicked the green flag.
1:19:17It said go and now notice it's sort of stuck
1:19:19on that because I never said stop saying go,
1:19:22but that's where I can click the red stop sign and
1:19:24sort of get the cat back to where I want it.
1:19:27So think about for just a moment
1:19:28what it is we just did.
1:19:30So at the one hand we have a very obvious
1:19:32puzzle piece that says say and it said something,
1:19:35but
1:19:35it really is a function,
1:19:36and that function does take an input
1:19:38represented by the white oval here.
1:19:40Otherwise known as an argument or a parameter,
1:19:43but what this really is is just an input to the function.
1:19:46And so we can map even this simple,
1:19:48simple scratch program onto our model of problem solving before with
1:19:53an addition of what we'll call moving forward a side effect.
1:19:56A side effect in a computer program is often something that happens
1:20:00visually on the screen or maybe audibly out of a speaker.
1:20:04It's something that just kind of happens as a result of you
1:20:06using a function like a speech bubble appearing on the screen.
1:20:09So here more generally is what we claimed it represents the solving
1:20:13of a problem and let's just consider what the input is.
1:20:16The input to this problem,
1:20:18say something on the screen,
1:20:19is this white oval here that I typed in Hello world,
1:20:22the algorithm,
1:20:23the step by step instruction.
1:20:25are not something really I wrote like our friends
1:20:27at MIT implemented that purple say block so someone there
1:20:32knows how to get the cat to say something out of its
1:20:35comical mouth.
1:20:36So the algorithm implemented in code is really equivalent to the say function.
1:20:40So a function is just a piece of functionality
1:20:44implemented in code.
1:20:46Which in turn implements an algorithm.
1:20:47So algorithm is sort of the concept
1:20:49and the function is actually the incarnation of it in code.
1:20:52What's the output?
1:20:53Well,
1:20:53hopefully it's the side effect,
1:20:55seeing the speech bubble come out of the cat's mouth like this.
1:20:59All right,
1:21:00so that's
1:21:00one such program,
1:21:02but it's always gonna play and look the same.
1:21:05What if I actually want to prompt the human
1:21:07for their actual name?
1:21:09Well,
1:21:09let me go back to the puzzle pieces here.
1:21:12Let me go ahead and throw this whole thing away,
1:21:14and if you want to delete blocks,
1:21:15you can either right click or control click and choose from a menu,
1:21:17or you can just drag them there and sort of let go,
1:21:20and they'll disappear.
1:21:21I'm going to go back in and get another,
1:21:23another event block,
1:21:24even though I could have reused that same one.
1:21:27I'm going to go ahead and go under sensing now,
1:21:29and if I zoom in over here,
1:21:30you'll see a whole bunch of things like I can sense distance and colors,
1:21:34but more pragmatically I can use this function in blue.
1:21:37Ask something
1:21:39and then wait for the answer.
1:21:41And what's different about this puzzle piece is that it
1:21:44too is just a function it too takes an argument,
1:21:47but instead of having an immediate side
1:21:48effect like displaying something on the screen,
1:21:51it's essentially
1:21:53inside of the computer going to hand me back the response.
1:21:56It's going to return a value,
1:21:58so to speak,
1:21:59and a return value is something that the code can see,
1:22:02but the human can't.
1:22:03A side effect is something the human sees,
1:22:05but a return value is something only the computer sees.
1:22:07It's like the computer is handing me back
1:22:10the user's input.
1:22:11So how does this work?
1:22:12Well,
1:22:12notice,
1:22:12and this is a bit strange,
1:22:13this isn't usually how variables work,
1:22:15but scratch 2 supports variables,
1:22:17and that was a word I used quickly at the very start when we were making the chatbot,
1:22:21a variable like in math,
1:22:23X,
1:22:23Y,
1:22:23or Z just stores some value,
1:22:25but it doesn't have to store a number in code it can store like a human name.
1:22:29So what's going to happen when I use this puzzle piece is
1:22:31that once the human types in their name and hits enter,
1:22:34MIT,
1:22:35or really scratch,
1:22:36is going to store the answer,
1:22:38the so-called return value,
1:22:39in a variable that's designed to be called answer.
1:22:42But as we'll see,
1:22:43you can make your own variables down the line
1:22:45if you want and call them anything you want.
1:22:48But let me go ahead and zoom out.
1:22:50Let me drag this over here.
1:22:51I'm going to use the default question What's your name?
1:22:53But I could certainly change the text there
1:22:56and let me go under looks again.
1:22:58Let me go ahead and grab the say block
1:23:01and let me go ahead and say just for consistency like hello,
1:23:04comma,
1:23:06OK,
1:23:06and now let me go under maybe sensing.
1:23:09I want to say
1:23:10how do I wanna say this answer.
1:23:11Well,
1:23:11notice this the shapes are important.
1:23:14This too is an oval,
1:23:15even though it's not white,
1:23:16but that's just because it's not editable.
1:23:17It's gonna be handed to me
1:23:19by the As function.
1:23:20Let me zoom out and grab a second
1:23:23say block
1:23:24like this,
1:23:25and notice it will magnetically clip together.
1:23:27I don't want to say hello again so I could delete that,
1:23:30but
1:23:31now it's still the same shape even though it's a little smaller.
1:23:33Let me go back to sensing and notice what can happen here.
1:23:36When you have values like words inside of a so-called variable,
1:23:40you can use those instead of manual input at your keyboard
1:23:43and notice it you wants the magnetic slap into place,
1:23:46it'll grow to fit that variable because the shape is the same.
1:23:49And now let's do this.
1:23:50Let me click the green flag at right.
1:23:52I'm seeing quote unquote,
1:23:54what's your name,
1:23:54I'm getting a text box this time,
1:23:56like on a
1:23:57web page,
1:23:57for instance,
1:23:58let me type in my name and watch closely what comes out of
1:24:00the cat's mouth as soon as I click the checkmark or hit enter.
1:24:05Huh,
1:24:06OK,
1:24:06I got my name right,
1:24:07but let me do it once more.
1:24:08Let me stop and start.
1:24:10D A V I D.
1:24:12Enter
1:24:14No,
1:24:14it didn't work.
1:24:14Let me try one other,
1:24:15maybe it's my name.
1:24:16Let's try Kelly.
1:24:18Enter
1:24:19what's missing obviously.
1:24:22So the,
1:24:23the hello,
1:24:23there's a bug,
1:24:24a mistake in this program,
1:24:25but is there like what explains this even if you've never programmed before,
1:24:29intuitively what could explain why I'm not seeing hello?
1:24:36Exactly,
1:24:36it's on two different lines,
1:24:37so it's doing one after the other,
1:24:39so it is happening.
1:24:39It's just you and I as the slowest things in the room are just not
1:24:43seeing it in time because it's happening so darn fast because my computer's so,
1:24:47you know,
1:24:48so new and so fast,
1:24:49it's happening but way too quickly.
1:24:50So how can we solve this?
1:24:52Well,
1:24:52can we solve this in a few different ways,
1:24:54and this is where in Scratch,
1:24:55at least for problems at zero when wherein you'll
1:24:57have an opportunity to play around with it.
1:24:59I can scroll around here and OK,
1:25:01under control
1:25:02I see something like weight,
1:25:04so I can just kind of slow things down and now notice too,
1:25:07if you hover over the middle of two blocks,
1:25:09if it's the right shape,
1:25:10it'll just snap into the middle too or
1:25:12you can just so you know,
1:25:14kind of drag things away to magnetically separate them,
1:25:17but this might solve this,
1:25:18so let me hit stop and then start.
1:25:19DAVID enter.
1:25:22Hello
1:25:23David.
1:25:24All right,
1:25:24that was a little,
1:25:25let's do like maybe 2 seconds to see it again.
1:25:28Green flag,
1:25:28D A V I D E.
1:25:30hello
1:25:32David.
1:25:33All right,
1:25:33it's working better.
1:25:34It's sort of more correct because I'm seeing the hello and the David,
1:25:38but kind of stupid,
1:25:39right,
1:25:39to see one
1:25:40and then the other.
1:25:41Wouldn't it be nice to say it all in one breath,
1:25:43so to speak?
1:25:44Well,
1:25:44here's where we can maybe compose some ideas.
1:25:46So let me get rid of this weight and the additional block.
1:25:48Let's confine our.
1:25:49in just one block,
1:25:51but let me go down to operations
1:25:54where we haven't been before,
1:25:55and this is interesting.
1:25:56There's this bigger oval here that says join two things like apple and banana,
1:26:01and those are just random placeholder words that
1:26:03you can override with anything you want,
1:26:04but they're both ovals and white,
1:26:06which means I can edit them.
1:26:07So let me go ahead and do this.
1:26:09Let me drag this on top of the save block,
1:26:12and this is just gonna therefore uh override
1:26:14the hello I put there.
1:26:16Now I don't wanna say apple or banana,
1:26:18but I do want to say hello,
1:26:19comma.
1:26:20And I then want to say my name.
1:26:22OK,
1:26:22so now I can go back to sensing,
1:26:24go back to answer,
1:26:25drag and drop this here.
1:26:28That'll snap into place and let me zoom in.
1:26:30Now what I've done is take a function and on top of it I nested another function,
1:26:35the join function that takes two arguments or inputs
1:26:38and presumably joins them together as per its name.
1:26:41So let's see what this does for us.
1:26:43Let me click stop and start.
1:26:45I'll type in David,
1:26:47Enter.
1:26:48And it's so close.
1:26:49Now this is just kind of an aesthetic bug.
1:26:51What have I done wrong here?
1:26:53There's no space,
1:26:54so it looks a little wrong,
1:26:55but that's an easy fix.
1:26:57I just need to literally go into the hello block after the comma,
1:27:00hit the space bar so that now when I stop and start again and type in David,
1:27:04now I see something that's closer to the grammar
1:27:07we might typically expect syntactically here.
1:27:10All right,
1:27:10so let's model this after
1:27:12what we just saw earlier.
1:27:13We've now introduced a so-called return value.
1:27:16And this return value is something we can then use in the way we want.
1:27:20It's not happening immediately like the speech bubble.
1:27:22It's clearly being passed to me in some way
1:27:25that I can use to plug in somewhere else,
1:27:27like into that join block.
1:27:28So if we consider the role of these variables playing,
1:27:32let's consider the picture now as follows.
1:27:33If the input now to the first function,
1:27:36the ask block,
1:27:37is what's your name,
1:27:38quote unquote,
1:27:39that's indeed being fed into the ask.
1:27:40Block and the result this time is not a speech bubble.
1:27:43It's not some immediate visual side effect.
1:27:45It is the answer itself stored in a
1:27:49so-called variable as represented by this blue oval.
1:27:52Meanwhile,
1:27:54what I want to do is combine that answer with some text I
1:27:57came up with in advance by kind of stacking these things together.
1:28:01Now visually in scratch,
1:28:02you're stacking them on top,
1:28:03but it's really.
1:28:04You're passing one into the other into the
1:28:06other because much like math when you have the
1:28:08parentheses and you're supposed to do what's inside
1:28:10the parentheses and then work your way out,
1:28:12same idea here.
1:28:13You want to join hello and answer together and whatever that output is,
1:28:17that then becomes the input to the say block which
1:28:20like in math is outside of the joined block itself.
1:28:23So pictorally it might now look like this.
1:28:26There's two inputs to this story.
1:28:28Hello,
1:28:29space and the answer variable.
1:28:31The puzzle piece in question is joined.
1:28:33Its goal in life had better be to give me the full phrase that I want,
1:28:38hello David.
1:28:38Let's shift everything over now because that output is
1:28:41about to become the input to the say block,
1:28:44which itself will now have the so-called side effect.
1:28:48And so this too is what programming and in turn what computer science is about is.
1:28:52Posing with the solutions to smaller problems,
1:28:56solutions to bigger problems using those component pieces,
1:28:59and that's what each of these puzzle pieces represents is a smaller problem
1:29:03that someone else or maybe even you,
1:29:05has already solved.
1:29:07Now we can kind of spice things up here if I go back to
1:29:09scratches interface,
1:29:10we don't have to use just the puzzle piece here.
1:29:12I can do something like this.
1:29:13Let me go ahead and drag these apart and get rid of the same block down here.
1:29:17Just for fun,
1:29:17there's all these extensions that you can add over the internet
1:29:20to your own scratch environment,
1:29:22and if I go to like text to speech down here,
1:29:25I can for instance do a speak block instead of a say block color here in green.
1:29:30I can now reconnect the join block in here and
1:29:33if we could raise the volume just a little bit,
1:29:35let me stop the old version,
1:29:37start the new version,
1:29:38type in my name and hear what Scratch actually sounds like.
1:29:42Hello
1:29:43David.
1:29:44OK,
1:29:44not very catlike,
1:29:45but we can kind of waste some time on this by like dragging the set voice to box,
1:29:50and I can put this anywhere I want
1:29:52above
1:29:53the speak block.
1:29:54So I'm just going to put it here,
1:29:55even though I've already asked a question.
1:29:56Maybe kitten sounds appropriate.
1:29:58Let's try again.
1:29:59D A V I D,
1:30:01meow meow.
1:30:03OK,
1:30:04and then let's see,
1:30:05uh,
1:30:06giant,
1:30:07a little creepier,
1:30:08here we go,
1:30:08DAVID and lastly.
1:30:11Hello,
1:30:11David.
1:30:12All right,
1:30:13little ransom like instead.
1:30:14All right,
1:30:15so that's just some additional puzzle pieces,
1:30:16but really just the same idea,
1:30:18but I like that we've introduced some sounds.
1:30:19So let's do this.
1:30:20Let me go ahead and throw away a lot of those puzzle pieces,
1:30:23leave ourselves with just the one green flag clicked.
1:30:25And play around with some other
1:30:27building blocks that we've seen already thus far.
1:30:29Let me go ahead,
1:30:30for instance,
1:30:30under sound,
1:30:31and let's make the cow actually meow.
1:30:33So it turns out scratch,
1:30:34being a cat by default comes with some sounds by default like meowing.
1:30:38So if we go ahead and click the green flag after programming this
1:30:42program,
1:30:43let's hear what he sounds like now.
1:30:46OK,
1:30:47kind of cute,
1:30:47and if you want it scratch to meow twice,
1:30:49you can just play the game again.
1:30:52And a third time,
1:30:54Alright,
1:30:54but that's gonna get a little tedious,
1:30:56as cute as it is,
1:30:57so I can solve that.
1:30:58Let's just grab 3 of the puzzle pieces and
1:31:00just drag them together and let them connect,
1:31:02and now click the green flag.
1:31:05All right,
1:31:06doesn't,
1:31:06it gets less cute quickly,
1:31:08but maybe we can slow it down
1:31:09so that the cat doesn't sound so,
1:31:11so hungry maybe.
1:31:12Let me go under,
1:31:13uh,
1:31:14let's see,
1:31:14under control,
1:31:15let's grab one of those,
1:31:16wait one second,
1:31:17and maybe plop a couple of these in the middle here,
1:31:20that might help things,
1:31:20and now click the green flag.
1:31:25OK,
1:31:25still a little hungry,
1:31:26but let's see if we change it to 2,
1:31:28and then I change it to 2 down here in both places,
1:31:31let's play it again.
1:31:35OK,
1:31:36cuter,
1:31:36maybe.
1:31:38But now I'm venturing into badly programmed territory.
1:31:41This is correct.
1:31:42If my goal is to get the cat to meow 3 times,
1:31:44pausing in,
1:31:46sorry,
1:31:463 times,
1:31:47pausing in between,
1:31:48what is
1:31:49bad about this code,
1:31:51even if you've never programmed before though?
1:31:54Yeah,
1:31:54in the middle.
1:31:56Yeah,
1:31:56I literally had to repeat myself 3 times,
1:31:59essentially copy pasting,
1:32:00and frankly I could have been really lazy and I could right click or control click,
1:32:03and I could have chosen duplicate,
1:32:05but generally when you copy paste code or when you duplicate puzzle pieces,
1:32:10probably doing something wrong.
1:32:12Why?
1:32:13It's solving the problem correctly,
1:32:14but it's not well designed,
1:32:16even if for only because when I changed the number of seconds,
1:32:19now I had to change it in two places.
1:32:20So I had one.
1:32:21Initially,
1:32:22then I had to change it to 2,
1:32:24and if you just imagine in your mind's eye having not like 6 puzzle pieces,
1:32:28but 60 or 600 or 6000,
1:32:31you're going to screw up eventually if it's on you to
1:32:33remember to change something here and here and here and here,
1:32:35like you're going to mess up.
1:32:37It's better to keep things simple and ideally centralized
1:32:40by factoring out common functionality and clearly playing sound
1:32:44and waiting is something I'm doing at least twice,
1:32:46if not a third time here as well.
1:32:49So how can we do this better?
1:32:50Well,
1:32:50remember this thing.
1:32:52Loops.
1:32:52Maybe we can just do something a little more cyclically.
1:32:55So I tell the computer to do something once,
1:32:57but I tell it how many times
1:32:58to do that altogether.
1:33:00So notice here by coincidence under control I
1:33:02have a repeat block which doesn't say loop,
1:33:04but that's certainly the right semantics.
1:33:06Let me go ahead and drag the repeat block in and
1:33:08I'll change the 10 to 3 just for consistency here.
1:33:11I'm going to go back to sound.
1:33:13I'm going to go ahead and play sound.
1:33:14Meow until done just as before and just so it's not meowing too fast under control,
1:33:20I'm going to grab a wait one second and keep it inside the loop
1:33:23and notice that the loop here is sort of hugging these puzzle pieces by growing
1:33:28to fill however many pieces I actually cram in there.
1:33:31So now if I click play,
1:33:33the effect is going to be the same,
1:33:34but it's arguably not only correct but also
1:33:37well.
1:33:38Designed,
1:33:40because now if I wanna change the weight,
1:33:42change it in one place,
1:33:43if I want to change the total number of times,
1:33:45change it in one place,
1:33:46so I've modularized the code
1:33:48and made it better designed in this case,
1:33:51but now this is silly because,
1:33:53Even
1:33:54though
1:33:55I want the cat to meow,
1:33:56it feels like any program in which I want this cat to meow,
1:33:59I have to make these same puzzle pieces and connect them together.
1:34:02Wouldn't it be nice to invent the notion of meowing
1:34:05once and then actually have a puzzle piece called meow?
1:34:07So when I want the cat to meow,
1:34:09it will just
1:34:10meow.
1:34:11Well,
1:34:11I can do that too.
1:34:12Let me scroll down to my blocks.
1:34:14Here in pink I'm going to click Make a block and I'm
1:34:17going to literally make a new puzzle piece that MIT didn't think of
1:34:20called meow and I'm going to go ahead and click OK.
1:34:23Now I have in my code area here a define block,
1:34:28which literally means define meow as follows.
1:34:31So how am I going to do this?
1:34:33Well,
1:34:33I'm going to propose that me.
1:34:35Ming just means to play the sound,
1:34:37meow until done,
1:34:38and then wait 1 2nd.
1:34:40And notice now I have nothing inside my actual program
1:34:43which begins when I click the green flag,
1:34:46but notice at top left because I made a block called meow,
1:34:50I now have access to one that I can drag and drop.
1:34:53So now I can drag meow into.
1:34:56This loop
1:34:57and per my comment about abstracting the lower level implementation details away,
1:35:02I'm going to sort of unnecessarily dramatically just move that out of the way.
1:35:06It still exists.
1:35:06I didn't delete it,
1:35:07but now out of sight,
1:35:08out of mind.
1:35:09Now if you agree with me that meow means for the cat to make a sound,
1:35:13we've abstracted away what it means.
1:35:15Mechanically
1:35:16for the cow to say
1:35:17that sound
1:35:19and so we now have our own puzzle piece that I can
1:35:21just now use forever because I invented the meow block already.
1:35:24Now I can do one better than this.
1:35:26It would be nice if I could just tell the meow block how many times I
1:35:28wanted to meow because then I don't need to waste time using loops either myself.
1:35:33So let me do this.
1:35:34Let me zoom out.
1:35:35And let me go back to my defined block.
1:35:38Let me right click or control click and just edit it,
1:35:41or I could delete it and start over,
1:35:42but I'll just edit it
1:35:43and specifically let me say,
1:35:44you know what,
1:35:45let's add an input,
1:35:46otherwise known as an argument to this meow block,
1:35:49and we'll call it maybe N from the number of times I want it to meow.
1:35:53And just to be super clear,
1:35:54I'm going to add a label which has no functional impact,
1:35:56but it just helps me remember what this does.
1:35:58So I'm going to say meow and time.
1:36:00So that when I see the puzzle piece,
1:36:01I know what the N actually represents.
1:36:04If I now click OK,
1:36:06my puzzle piece looks a little different at top left.
1:36:08Now it has the white oval into which I can type or drag input.
1:36:12Notice down here in the defined block,
1:36:14I now see that same
1:36:15input called N.
1:36:17So what I can do now is this.
1:36:19Let me go under control,
1:36:20drag the repeat block here,
1:36:23and I have to do a little switcheroo.
1:36:24Let me disconnect this.
1:36:26Plug it inside of the repeat block,
1:36:28reconnect all of this,
1:36:30and I don't want 10,
1:36:31and heck,
1:36:31I don't even want 3 down here anymore.
1:36:33I can drag this input because it's the right shape
1:36:36and now declare
1:36:38that meowing end times means to repeat the
1:36:41following end times play sound meow until done.
1:36:44Wait 1 2nd and keep doing that and total times.
1:36:48If I now zoom out and scroll up.
1:36:51Notice that my usage of this puzzle piece has changed
1:36:54such that I don't actually need the repeat block anymore.
1:36:57I can disconnect this
1:36:58and heck,
1:36:59I can actually right click and
1:37:01control click and delete it.
1:37:02Just use this under the green flag,
1:37:04change this to a 3,
1:37:06and now
1:37:07I have the essence of this meowing program.
1:37:10The implementation details are out of sight,
1:37:12out of mind.
1:37:13Once they're correct,
1:37:13I don't need to worry about them again,
1:37:15and this is exactly.
1:37:16Scratch itself works.
1:37:18I have no idea how MIT implemented the weight block or the repeat block.
1:37:22Heck,
1:37:22there's a forever block,
1:37:23and there's a few others,
1:37:24but I don't need to know or care because they've
1:37:27implemented those building blocks that I can then implement myself.
1:37:31I don't necessarily know how to build a whole chatbot,
1:37:33but on top of OpenAIs,
1:37:35API,
1:37:36this web-based service,
1:37:38I can implement my own chatbot because they've done the heavy lift of actually.
1:37:42that
1:37:43for me.
1:37:43Well,
1:37:43let's do just a few more examples here.
1:37:45Let's bring the cat all the more to life.
1:37:46Let me throw away the meowing.
1:37:48Let me open up under when green flag clicked.
1:37:50How about that forever block that we just glimpsed?
1:37:53Let me go ahead and now add to the mix what we called earlier
1:37:57conditionals which allow us to ask questions and
1:38:00decide whether or not we should do something.
1:38:02So under this,
1:38:03let me go ahead and under Forever,
1:38:05say if the following.
1:38:08Is true.
1:38:09Well,
1:38:09what boolean expression do I want to ask?
1:38:12Well,
1:38:12let's implement,
1:38:13how about this program and we'll figure out if it works.
1:38:16Uh,
1:38:16under sensing,
1:38:17I'm gonna grab this,
1:38:18uh,
1:38:19a very angled puzzle piece called Touching mouse pointer that is the cursor,
1:38:23and only if that question has a yes answer,
1:38:26do I want to
1:38:28play the sound meow until done.
1:38:30So let me zoom in here and in English.
1:38:33What
1:38:34is this going to implement really?
1:38:38Just describe what this program does less arcanely as the code itself,
1:38:41yeah.
1:38:47Yeah,
1:38:47if you move the mouse over the cat,
1:38:49it will make noise,
1:38:50so it's kind of like implementing petting a cat,
1:38:53if you will.
1:38:53So let me zoom out,
1:38:54click the green flag,
1:38:55and notice nothing's happening yet,
1:38:57but notice my puzzle pieces are highlighted in yellow because it is
1:39:01in fact still running because it's
1:39:02doing something forever and it's constantly checking
1:39:05if I'm touching the mouse pointer,
1:39:07and if so.
1:39:09It's like I just pet the cat.
1:39:11Now it stopped until I moved the cursor again.
1:39:14Now it stopped.
1:39:15If I leave it there,
1:39:16it's gonna keep meowing because it's gonna be stuck in this loop forever,
1:39:20but it's correct insofar as I'm petting the cat.
1:39:23Let me do this though.
1:39:24Let me make a mistake this time.
1:39:26Let me forget about the forever and just do this,
1:39:28and you might think this is correct.
1:39:30Let me click the green flag.
1:39:32Now let me pet the cat.
1:39:34And like
1:39:35nothing's actually working here.
1:39:36Why though logically.
1:39:39Yeah.
1:39:41Yeah,
1:39:41the program's so darn fast it already ran through the sequence and
1:39:44at the moment in time when I clicked the rear flag,
1:39:46no,
1:39:47I was not touching the mouse pointer and so it was
1:39:49too late by the time I actually moved the cursor there.
1:39:52But by using the forever block,
1:39:53which I did correctly the first time,
1:39:55this ensures that Scratch is constantly checking the answer to that question.
1:40:00So if and when I do pet the cat,
1:40:02it will
1:40:03actually
1:40:04Detect as much.
1:40:06All right,
1:40:07about a few final examples before you're on your way building
1:40:10some of your own first programs with these building blocks.
1:40:12Let me go ahead and open up a program
1:40:14that I wrote in advance,
1:40:15in fact,
1:40:15about 20 years ago,
1:40:17whereby,
1:40:18let me pull this up.
1:40:20Whereby we have in this example a program I wrote called Oscar time,
1:40:25and this was the result of our first assignment in this class whereby
1:40:28when MIT was implementing Scratch for the very first time,
1:40:32we needed to implement our very own Scratch program as well.
1:40:35I'm gonna go ahead and full screen it here.
1:40:37The goal is to drag as much falling trash as
1:40:39you can to Oscar's trash can before his song ends,
1:40:42for which one volunteer would be handy here.
1:40:45OK,
1:40:45so.
1:40:46Hands go up quickly in blue.
1:40:47Yeah,
1:40:47come on up.
1:40:48All right,
1:40:49so
1:40:49you're playing for a stress ball here if we will.
1:40:52At one at some point I'm going to talk over
1:40:53what you're actually playing just so that we can point out
1:40:56what it is we're trying to glean from this program,
1:40:58and I'll stipulate this probably took me like 8,
1:41:0012 hours,
1:41:01and as you'll soon see,
1:41:02the song starts to drive you nuts after a while because I was trying to
1:41:05synchronize everything in the game to a childhood
1:41:07song with which you might be familiar.
1:41:09Let me go ahead and say hello if you'd like to introduce yourself.
1:41:12Oh,
1:41:12hello.
1:41:13So I'm Han.
1:41:15And uh I'm a first year student.
1:41:17I'm pretty excited for this class.
1:41:18welcome.
1:41:19Well,
1:41:19here is Oscar time.
1:41:20If you want to go ahead and take control of the keyboard,
1:41:22all you'll need to do is drag and drop trash that falls from the sky
1:41:27into the trash can.
1:41:32Oh
1:41:36Anything score is 1.
1:41:43Nice score 2.
1:41:47All right,
1:41:48let's see what happens.
1:41:52You'll see a sneaker was perfectly timed.
1:41:54Thank you very much with the song after figuring
1:41:56out exactly how many seconds it had to wait.
1:41:58Now Han can drag not only the piece of trash,
1:42:01but the shoe as well.
1:42:06And it's around this point in the game where
1:42:07the novelty starts to wear off because it's like
1:42:093 more minutes of this game where more and more stuff starts to fall from the sky.
1:42:12So as Han,
1:42:13as you continue to play,
1:42:14I'm going to cut over.
1:42:14Here you keep playing.
1:42:15Let's consider how I implemented this
1:42:19whereby
1:42:20we'll start at the beginning.
1:42:21The very first thing I did when implementing Oscar time honestly was the easy part.
1:42:24Like I found a lamppost that looked a little something like this,
1:42:27and I made the so-called costume for the whole stage,
1:42:30and that was it.
1:42:31The game didn't do anything.
1:42:32You couldn't play anything.
1:42:33You click the green flag,
1:42:34nothing happened.
1:42:35But then I figured out how to turn the scratch cat,
1:42:38otherwise known more generally as a sprite,
1:42:41into a trap.
1:42:42instead and so the trash can meanwhile is
1:42:45clearly animated because I realized that oh,
1:42:48I can give sprites like the cat different costumes so I
1:42:51can make the cat not only look like a trash can,
1:42:53but if I want its lid to go up,
1:42:55well,
1:42:55that's just another costume.
1:42:57And if I want to see Oscar popping out,
1:42:58that's just a third costume.
1:43:00And so I made my own simplistic animation
1:43:04and you can kind of see it.
1:43:04It's very jittery step by step by step
1:43:08by creating.
1:43:08illusion of animation by really just having a
1:43:10few different images or costumes on Oscar.
1:43:13I hope you appreciate how much effort went
1:43:14involved into timing each of these pieces of
1:43:16trash with the specific mention of that type of piece of trash in the music.
1:43:20OK,
1:43:2020 years later,
1:43:21still clinging.
1:43:22So you're doing amazing,
1:43:23by the way.
1:43:24How do we get the trash to fall in the first place?
1:43:26Well,
1:43:26at the very beginning of the game,
1:43:27the trash just started falling from some random location.
1:43:30What does it mean for trash to fall from the sky?
1:43:33Oh,
1:43:34big climax here.
1:43:38So you've got a lot of trash on the ground you should pick up.
1:43:43There we go,
1:43:44and your final score is.
1:43:49A big round of applause if we go for hot.
1:43:51OK.
1:43:53Thank you.
1:43:55So
1:43:56just to be clear,
1:43:57now let's decompose this fairly involved program that took me
1:44:00a lot of hours to make into its component parts.
1:44:03So this is just a sprite,
1:44:04and I figured out eventually how to change its costume,
1:44:06change its costume,
1:44:07change its costume to simulate some kind of animation.
1:44:10And I also realized that oh,
1:44:11I don't need to just have one Sprite or one cat or trash can.
1:44:14You can create a 2nd Sprite,
1:44:15a 3rd Sprite,
1:44:16and many more.
1:44:17So I just told the Sprite to go to a random location
1:44:20at Y equals 180 and X equals something.
1:44:24I think I restricted X to be in this region,
1:44:26which is why the trash never falls from over here.
1:44:28I just a little bit of math based on that
1:44:29Cartesian plane that we saw a slide of earlier.
1:44:32And then
1:44:32I probably had a loop that told the trash to move a pixel,
1:44:35move a pixel,
1:44:36move a pixel down,
1:44:37down,
1:44:38down,
1:44:38down until it eventually hits the bottom and therefore just stops.
1:44:41So we can actually see this step by step,
1:44:43and this is representative of how even for something like your
1:44:46first problem set in CS 50 and with Scratch specifically,
1:44:49you might build some of the same.
1:44:51So I'm gonna go back into.
1:44:53CS 50 Studio for today,
1:44:55which is linked on the course's website which has
1:44:57a few different versions of this and other programs
1:45:00called Oscar 0 through Oscar 4,
1:45:03where 0 is the simplest and truly I meant it
1:45:05when I look inside this program to see my code,
1:45:08like this was it.
1:45:09There was no code because all I did was put the Sprite on the screen and change it
1:45:13from a cat to a trash can and I Added a cost uh costume for the stage,
1:45:17so to speak,
1:45:18so that the lamp post would be fixated there.
1:45:21If I then go to the next version of code,
1:45:23version one,
1:45:24so to speak,
1:45:24then I had code that did this.
1:45:27Now notice there's a few things going on here.
1:45:29At bottom left,
1:45:30you'll see,
1:45:30of course,
1:45:31the trash can,
1:45:32and then at top right the trash.
1:45:33Here are the corresponding sprites down here.
1:45:36So When Oscar is clicked on here,
1:45:37the trash can,
1:45:38you see the code I wrote,
1:45:40the puzzle pieces I dragged for Oscar,
1:45:42and in a moment when we click on trash,
1:45:44you'll see the code I wrote or the puzzle pieces I
1:45:46wrote are dragged and dropped for the trash piece specifically.
1:45:50So what does Oscar do?
1:45:52Well,
1:45:52I first switch his costume to Oscar one,
1:45:55which I assume is this the closed trash can.
1:45:58Then forever,
1:45:59Oscar does the following.
1:46:00If Oscar's touching the mouse pointer,
1:46:02then change the costume to Oscar 2.
1:46:06Otherwise,
1:46:07that is,
1:46:07if not touching the mouse pointer,
1:46:09change the costume to Oscar one.
1:46:10Well,
1:46:10what's the implication?
1:46:12Any time I move the cursor over the trash can,
1:46:14the lid just pops up,
1:46:15which was exactly the animation I wanted to achieve.
1:46:19Meanwhile,
1:46:19if we do this and click the green flag,
1:46:22you can see that in action,
1:46:23even for this simple.
1:46:25If I move the cursor over Oscar,
1:46:27we have the beginnings of a game,
1:46:29even though there's no score,
1:46:30there's no music or anything else,
1:46:31but I've solved one of my problems.
1:46:33Meanwhile,
1:46:34if I click on the trash piece here
1:46:36and then you'll see no code has been written for it yet.
1:46:39So we move on to Oscar version 2 and see inside it.
1:46:43And Oscar version 2,
1:46:44when I click on trash,
1:46:45ah,
1:46:46now there's some juicy stuff happening here and in fact this
1:46:49trash sprite has two programs or scripts associated with it,
1:46:53and that's fine.
1:46:54Each of them starts with when green flag clicked,
1:46:56which means the piece of trash will do two things at once,
1:46:59essentially in parallel.
1:47:01The first thing it will do is we'll set drag mode to dragable,
1:47:03and that's just a scratch thing that lets you
1:47:04actually move the sprites by clicking on them,
1:47:06making them.
1:47:07Dragonable.
1:47:07Then it goes to a random X location between 0
1:47:10and 240.
1:47:11So yeah,
1:47:12that must be what I did from the middle all the way to the right,
1:47:15and I said why always to 180,
1:47:17which is why the trash always comes from the sky from the very top.
1:47:21Then I said forever change your Y by -1,
1:47:24and here's where it's useful to know what 180 is,
1:47:26240 is,
1:47:27and so forth,
1:47:27because if I want the trash to go down,
1:47:29so to speak,
1:47:30that's.
1:47:30Changing its Y
1:47:32by a pixel by pixel,
1:47:33by a pixel,
1:47:34and thankfully MIT implemented it such that if the trash tries to go off the screen,
1:47:39it will just stop automatically even if it's inside of a
1:47:41forever block lest you lose control over the sprites altogether.
1:47:45But in parallel what's happening is this
1:47:47also when the green flag is clicked,
1:47:49uh,
1:47:49the trash piece is doing this too forever if touching Oscar,
1:47:55what's it doing in blue here?
1:47:58Sort of teleporting away now to your eye,
1:48:01hopefully it looks like it's going into the trash can,
1:48:04but what does that mean to go into the trash can?
1:48:06Well,
1:48:06I just put it back into the sky as though a new piece of trash is falling.
1:48:10So even though you saw one piece of trash,
1:48:12234,
1:48:14and so forth,
1:48:14it's the same sprite just acting that out again and again.
1:48:18So here if I click play.
1:48:20On this program
1:48:21you'll see that it starts falling
1:48:23one pixel at a time because it's draggable.
1:48:26I can sort of pull it away
1:48:28and move it over to the trash can like that,
1:48:30and as soon as I do,
1:48:31it seems to go in,
1:48:32but really it just teleported to a different X location still at Y equals 180.
1:48:37Again,
1:48:37it's not much of a game yet.
1:48:38There's no score,
1:48:39there's no music or anything,
1:48:40but let's go to Oscar 3 now.
1:48:42And in Oscar 3,
1:48:44if we scroll over to the trash,
1:48:46even more is happening here and so.
1:48:48As far as I realized,
1:48:49you know what,
1:48:49there was kind of inefficiency before.
1:48:52Previously I had these two programs or scripts synonym
1:48:56whereby they both went to the top by going to 0 to 240
1:49:01for X and then 180 for Y.
1:49:03And if you noticed,
1:49:04I used that here
1:49:05and I used that down here in both programs.
1:49:07Now that was kind of stupid because I literally copied and pasted the same code.
1:49:10So if I ever want to change that design,
1:49:13I have to change it in two places and I already proposed that we frown upon that.
1:49:16So what did I do in this version?
1:49:17I just created my own block and I decided to call my own function
1:49:21go to top.
1:49:22What does it mean to go to the top,
1:49:24pick a random X between those values,
1:49:26and fixate on Y equals 180 initially.
1:49:30Now in both of those programs,
1:49:31which are otherwise identical,
1:49:33I just say what I mean.
1:49:34Go to top,
1:49:35go to top,
1:49:35and if I really wanted to,
1:49:36I could drag this out of the way and
1:49:38never think about it again because now that function.
1:49:40exists,
1:49:41so correct but arguably better designed.
1:49:44I've now factored out commonality so as to use and reuse my code as well.
1:49:50So let's go up to Oscar version 4 now,
1:49:52and in Oscar time version 4,
1:49:54the trashcan
1:49:56does a little something more whereby
1:49:59what have I added to this mix even though
1:50:00we haven't dragged this puzzle piece together before.
1:50:05Yeah,
1:50:05what's new?
1:50:07Yeah,
1:50:07so it turns out on the left here there's a variables category which goes
1:50:11beyond the answer variable that we just automatically get from the ask block.
1:50:16You can create your own variables X,
1:50:18Y,
1:50:18Z,
1:50:18but in computer programming it's best to name things,
1:50:21not silly simple words like X,
1:50:23Y,
1:50:23and Z,
1:50:23but full-fledged words that say what they are like score.
1:50:26So I'm setting a score variable to 0,
1:50:29and then any time
1:50:30the trash is touching Oscar before it teleports away to the top,
1:50:34I change the score by 1.
1:50:35That is increment the score by 1.
1:50:38And what Scratch does automatically for me is it puts
1:50:40a little billboard up here showing me the current score.
1:50:43So if I now
1:50:45play this game
1:50:46once more,
1:50:47the score is going to start at 0.
1:50:49But if I drag this trash over here and even let it fall in as soon as it touches,
1:50:53the score goes to 1.
1:50:55And now if I click and drag again,
1:50:56the score is going to as soon as it touches Oscar,
1:50:59going to go to 2,
1:51:00and so forth.
1:51:01And you saw in the final flurs with Hunt playing that
1:51:03once you add The sound and other pieces of trash,
1:51:06which are just really other sprites,
1:51:08and I just had to wait like a minute,
1:51:10wait 2 minutes,
1:51:10so that the trumpet would fall at the right time.
1:51:13I've broken down a fairly involved program
1:51:16into these basic building blocks.
1:51:17And when you two write your own program,
1:51:19that's exactly how you should approach it,
1:51:21even if you have these grand aspirations to do this or that,
1:51:24start by the simple problems and figure out what bites can I,
1:51:28uh,
1:51:28bite off in order to make progress,
1:51:30baby steps,
1:51:31if you will,
1:51:32to the final.
1:51:33Solution.
1:51:34Well,
1:51:34let's look at one other set of examples before we have
1:51:36one final volunteer to come up and as you'll soon see,
1:51:38it's tradition in CS 50 to end the first class with cake.
1:51:42So in a moment,
1:51:43cake will be served out on the transept,
1:51:44and please feel free to come up and say hi and ask questions if you'd like to.
1:51:47Let me go ahead and open up though
1:51:49a series of building blocks here via which we can make so-called IV's hardest game,
1:51:54which is one implemented by one of your predecessors,
1:51:57a former classmate
1:51:58from CS 50.
1:52:00So here we have a whole bunch of puzzle pieces.
1:52:02Written by your classmates,
1:52:03but let me go ahead and zoom in on this screen.
1:52:05You'll see that this Harvard Crest is my sprite,
1:52:07so it's not a cat,
1:52:08it's not a trash can.
1:52:09It's a Harvard Crest,
1:52:10and it exists in a very simple
1:52:12two-dimensional world with two walls next to it.
1:52:15If I click on the green flag,
1:52:16notice that
1:52:17with my hands here,
1:52:18I can go up,
1:52:20I can go down,
1:52:21I can go left,
1:52:22and I can go right,
1:52:23but if I try going too far right,
1:52:24I get stuck on the wall.
1:52:26If I go too far left,
1:52:28I get stuck on the wall.
1:52:29Well,
1:52:29it's the sort of the beginning.
1:52:30Of any animation or game,
1:52:32but how do I do this?
1:52:33Well,
1:52:33let me go up here and propose that the first thing
1:52:36the Harvard Sprite is doing is it's going to the middle,
1:52:390.0,
1:52:40and it's then forever
1:52:42listening for the keyboard and feeling for walls.
1:52:45Now those are functions I implemented myself to kind
1:52:48of describe what I wanted the program to do.
1:52:51And let's do the shorter one first.
1:52:52What does it mean to feel for the walls?
1:52:54Just to ask the question,
1:52:56if you're touching the left wall,
1:52:57change your X by 1.
1:52:59If you're touching the right wall,
1:53:01change your X by -1.
1:53:04Why have I
1:53:06defined touching walls in this weirdly mathematical way?
1:53:10Yeah.
1:53:12Sure,
1:53:12yeah.
1:53:16otherwise you're like net.
1:53:19Exactly,
1:53:20because if I've gone so far right that I'm touching the right wall,
1:53:23well,
1:53:23I'm already kind of on top of the wall a little bit.
1:53:25So I effectively want the sprite to bounce off of it,
1:53:28and the easiest way to do that is just to say
1:53:30back up one pixel as though you can't go any further,
1:53:32and same for the left wall.
1:53:34Meanwhile,
1:53:34let me scroll over to the second script or program that's running in parallel.
1:53:38It's a little longer,
1:53:39but it's not more.
1:53:40Complicated.
1:53:41What does it mean to listen for keyboard?
1:53:43Well,
1:53:43just check if the key
1:53:45up arrow is pressed,
1:53:47change Y by 1.
1:53:48ergo go up,
1:53:50else if the key down arrow is pressed,
1:53:51then change Y by -1,
1:53:53key right arrow is pressed,
1:53:54change X by 1,
1:53:55and so forth.
1:53:56So again,
1:53:56this is where the math and the numbers are useful because
1:53:58it gives you a world in which to live up,
1:54:00down,
1:54:00left,
1:54:00right.
1:54:02Deconstructed into some simple arithmetic values.
1:54:05All right,
1:54:06so the net result is that we have a crest living in this world.
1:54:10Well,
1:54:10let's add a bit of competition here and then the second version of this game.
1:54:13Let me go ahead and full screen it again,
1:54:15click play,
1:54:16and now we'll see
1:54:17sort of an enemy
1:54:18bouncing back and forth autonomously.
1:54:20So there's no one playing except me.
1:54:22I'm controlling Harvard,
1:54:23Yale is bouncing on its own,
1:54:25and nothing bad's.
1:54:25Gonna happen if it hits me,
1:54:27but
1:54:27it does seem to be autonomous.
1:54:29So how is this working?
1:54:30Well,
1:54:30if it's doing this forever,
1:54:32there's probably a forever loop involved.
1:54:33So let's see inside here.
1:54:35Let's click not on Harvard but on the Yale Sprite,
1:54:39and sure enough,
1:54:40if we focus on this for a moment,
1:54:42we'll see that the first thing Yale does is go to 0.0.
1:54:45It points in direction 90 degrees,
1:54:46which just gives you a sense of whether you're facing left or right or wherever.
1:54:49Then it forever does the following.
1:54:51If it's touching the left wall or touching the right wall,
1:54:54I was a little clever this time,
1:54:55if I may.
1:54:56I just kind of turn around 180 degrees,
1:54:59which effectively bounces me back in the opposite direction.
1:55:02Otherwise I go ahead and no matter what,
1:55:04just move one step.
1:55:05And this is why Yale is always moving back and forth.
1:55:08So a quick question,
1:55:08if I wanted to speed up Yale and make this beginning of a game harder,
1:55:12what would I do?
1:55:14Yeah.
1:55:17Yeah,
1:55:18so let's have it move like 10 steps at a time,
1:55:20right?
1:55:20This looks like a much harder game if you will,
1:55:22like level 10 now because it's just moving so much faster.
1:55:25All right,
1:55:25well,
1:55:25let's try a third version of this that adds another ingredient.
1:55:28Let me full screen this and click play,
1:55:30and now you'll see the even smarter MIT
1:55:33homing in on me
1:55:35by following my actual movements.
1:55:38So this is sort of like boss level material now.
1:55:41And it's just gonna follow me.
1:55:43So how is this working?
1:55:44Well,
1:55:44it's kind of a common game paradigm,
1:55:46but what does this mean?
1:55:47Well,
1:55:47let's see inside here,
1:55:48let's click on MIT Sprite,
1:55:50it's pretty darn easy.
1:55:52Go to some random position just to make it a little interesting lest MIT
1:55:56always start in the center and then forever point towards the Harvard logo outline,
1:56:00which is the name the former student gave to the costume
1:56:03that the Sprite is wearing that looks like a Harvard crest,
1:56:06and then move one step.
1:56:07So a core layer of the previous question how do
1:56:08we make the game harder and MIT even faster?
1:56:12Well,
1:56:12we can change this to be like 10 steps,
1:56:15and now you'll see
1:56:16MIT is a little twitchy because.
1:56:19This is kind of a visual bug.
1:56:21Let me make a full screen.
1:56:23Why is this visual glitch happening?
1:56:27It's literally doing what I told it to do,
1:56:29just looks stupid,
1:56:30yeah.
1:56:35say like again.
1:56:37Yeah,
1:56:38it's moving so fast that it's sort of going 10 pixels this way,
1:56:41but then I kind of,
1:56:41it kind of overshot me,
1:56:42so then it's doubling back to follow me again and it's doubling back this way.
1:56:45And because these are such big footsteps,
1:56:47if you will,
1:56:48it just has this visual effect of twitching back and forth.
1:56:50So we might have to throttle that back a bit and make it 5 or
1:56:532 or 3 instead of 10 because that's clearly not desirable gaming behavior here.
1:56:58All right,
1:56:58well,
1:56:59let's go ahead and do this.
1:56:59Let's put them all together just as your
1:57:01former classmate did when submitting this actual homework.
1:57:04Uh,
1:57:05the game will conclude hopefully in an amazing climax where you've won the game,
1:57:08so we need someone,
1:57:09ideally with really good hand-eye coordination to play this final game here.
1:57:13Yeah,
1:57:14your hand went up first,
1:57:14I think.
1:57:15OK,
1:57:15come on up,
1:57:16big round of applause because it's a lot of pressure
1:57:18to end.
1:57:24All right,
1:57:25so if you win the game,
1:57:26cake will be served.
1:57:28If you don't win the game,
1:57:29there will be no cake.
1:57:31OK,
1:57:31but introduce yourself in the meantime.
1:57:33Hi,
1:57:33I'm Jenny Pan,
1:57:35freshman at Hollis,
1:57:36and I'm actually a CS major or concentration.
1:57:40Nice to meet you.
1:57:40Head to the keyboard here.
1:57:42This now is the combination of all of those building blocks and even more,
1:57:46AKA IB's hardest game,
1:57:47you will be in control just as I would of the Harvard Crest,
1:57:50and the goal is to make it to the exit,
1:57:52which is this gentleman on the right here,
1:57:53and you'll see there's multiple levels where each each level gets a little harder.
1:57:57All right.
1:57:58Here we go.
1:57:59I can't touch this.
1:58:03I can't touch this.
1:58:06Very good.
1:58:07I can't touch this.
1:58:09Nicely done.
1:58:10You can't touch this.
1:58:12So the loop has been added for Yale.
1:58:17Good.
1:58:172 Yales now.
1:58:25Alright,
1:58:253 yals now.
1:58:30Nice.
1:58:32You can't touch this.
1:58:34Here comes MIT.
1:58:39Very
1:58:40good,
1:58:41yeah.
1:58:43Two MITs.
1:58:49And get
1:58:57Nice,
1:58:58yes.
1:59:10That
1:59:11I
1:59:15Yes.
1:59:16Now Princeton.
1:59:20Another Princeton.
1:59:292nd to last level.
1:59:33I
1:59:37OK
1:59:55Have a
2:00:02Let's keep going,
2:00:03keep going.
2:00:13Yeah
2:00:15All
2:00:16right,
2:00:17this is CS 15,
2:00:19cake is now served.

About this transcript

This page contains the full transcript of CS50x - Lecture 0 - Scratch by CS50, generated from the public captions YouTube serves with the video. The transcript has 23,169 words across 3,529 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.