CS50 Video Player
    • 🧁
      • 🥧
      • 🍎
      • 🍿
    • 0:00:00We will begin shortly
    • 0:11:21Introduction
    • 0:14:51Problem solving
    • 0:15:50Representation
    • 0:16:15Binary
    • 0:23:30Letters
    • 0:26:40ASCII
    • 0:30:30Unicode
    • 0:36:00Color
    • 0:38:41Images
    • 0:39:45Videos
    • 0:41:40Music
    • 0:42:45Questions on representation
    • 0:47:06Algorithms
    • 0:52:30Time to solve
    • 0:55:50Pseudocode
    • 1:12:16Scratch
    • 1:13:20Sprites
    • 1:13:45Grid
    • 1:14:38Scratch blocks
    • 1:19:13Hello world
    • 1:21:58Say
    • 1:24:28Join
    • 1:25:26Inputs to outputs, outputs to inputs
    • 1:27:43Text to speech
    • 1:29:19Meow
    • 1:31:00Loops
    • 1:33:15Custom blocks
    • 1:35:00Custom blocks with input
    • 1:38:39Conditionals
    • 1:40:50Forever
    • 1:42:00Video sensing
    • 1:44:00Whack-a-mole
    • 1:45:12One piece at a time
    • 1:46:18Oscartime
    • 1:47:51Oscartime stage
    • 1:48:49Oscartime trash can
    • 1:50:10Oscartime falling trash
    • 1:52:59Oscartime dragging trash
    • 1:54:50Putting Oscartime together
    • 1:56:58Movement
    • 2:00:09Movement's abstractions
    • 2:01:23Bouncing
    • 2:03:10Following
    • 2:05:00Ivy's Hardest Game
    • 0:11:22all right this is cs50 harvard university's introduction to the
    • 0:11:26intellectual enterprises of computer science and the art of programming back
    • 0:11:29here on campus in beautiful sanders theater for the first time in quite a
    • 0:11:33while so welcome to the class my name is david maye again
    • 0:11:47so my name is david malin and i took this class myself some time ago but
    • 0:11:51almost didn't it was it was sophomore fall and i was sitting in on the class
    • 0:11:55and i was a little curious but uh didn't really feel like the field for me i was
    • 0:12:00definitely a computer person but computer science felt like something
    • 0:12:03altogether and i only got up the nerve to take the class ultimately because the
    • 0:12:06professor at the time brian kernahan allowed me to take the class pass fail
    • 0:12:10initially and that is what made all the difference i quickly found that computer
    • 0:12:14science is not just about programming and working in isolation on your
    • 0:12:17computer it's really about problem solving more generally and there was
    • 0:12:21something about homework frankly that was like actually fun for perhaps the
    • 0:12:25first time in what 19 years and there was something about this ability that i
    • 0:12:30discovered along with all of my classmates to actually create something
    • 0:12:32and bring a computer to life to solve a problem and sort of bring to bear
    • 0:12:37something that i've been using every day but didn't really know how to harness
    • 0:12:40that's been gratifying ever since and definitely challenging and frustrating
    • 0:12:43like to these to this day all these years later you're going to run up
    • 0:12:47against mistakes otherwise known as bugs in programming that just drive you nuts
    • 0:12:50and you feel like you've hit a wall but the trick really is to give it enough
    • 0:12:54time to take a step back take a break when you need to and there's nothing
    • 0:12:57better i dare say than that sense of gratification and pride really when you
    • 0:13:01get something to work and in a class like this present ultimately at terms
    • 0:13:04end something like your very own final project now this isn't to say that i
    • 0:13:09took to it 100 perfectly in fact just this uh this past week i i looked in my
    • 0:13:14old cs50 binder which i still have from some 25 years ago and took a photo of
    • 0:13:19what was apparently the very first program that i wrote and submitted and
    • 0:13:24quickly received minus two points on but this is a program that we'll soon see in
    • 0:13:28the coming days that does something quite simply like print hello cs50 in
    • 0:13:32this case to the screen and to be fair i technically hadn't really followed the
    • 0:13:36directions which is why i lost those couple of points but if you just look at
    • 0:13:38this especially if you've never programmed before you might have heard
    • 0:13:42about programming languages but you've never typed something like this out
    • 0:13:45undoubtedly it's going to look cryptic but unlike human languages frankly which
    • 0:13:49were a lot more sophisticated a lot more vocabulary a lot more grammatical rules
    • 0:13:54programming once you start to wrap your mind around what it is and how it works
    • 0:13:58and what these various languages are it's so easy you'll see after a few
    • 0:14:01months of a class like this so start teaching yourself subsequently other
    • 0:14:05languages as they may come in the coming years as well
    • 0:14:08so what ultimately matters in this particular course is not so much where
    • 0:14:12you end up relative to your classmates but where you end up relative to
    • 0:14:15yourself when you began and indeed you'll begin today and the only
    • 0:14:19experience that matters ultimately in this class is your own and so consider
    • 0:14:23where you are today consider perhaps just how cryptic something like that
    • 0:14:27looked a few seconds ago and take comfort in knowing just some months from
    • 0:14:30now all of that will be within your own grasp and if you're
    • 0:14:34thinking that okay surely the person in front of me to the left to the right
    • 0:14:37behind me knows more than me that's statistically not the case two-thirds of
    • 0:14:41cs50 students have never taken a cs course before which is to say you're in
    • 0:14:46very good company throughout this whole term
    • 0:14:50so then what is computer science i claim that it's problem solving and the upside
    • 0:14:54of that is that problem solving is something we sort of do all the time but
    • 0:14:59a computer science class learning to program i think kind of cleans up your
    • 0:15:02thoughts it helps you learn how to think more methodically more carefully more
    • 0:15:06correctly more precisely because honestly the computer is not going to do
    • 0:15:09what you want unless you are correct and precise and methodical and so as such
    • 0:15:14there's these sort of fringe benefits of just learning to think like a computer
    • 0:15:17scientist and a programmer and it doesn't take all that much to start
    • 0:15:20doing so this for instance is perhaps the simplest picture of computer science
    • 0:15:24sure but really problem solving in general problems are all about taking
    • 0:15:28input like the problem you want to solve you want to get the solution aka output
    • 0:15:32and so something interesting has got to be happening in here in here when you're
    • 0:15:36trying to get from those inputs to outputs now in the world of computers
    • 0:15:40specifically we need to decide in advance how we represent these inputs
    • 0:15:44and outputs we all just need to decide uh whether it's macs or pcs or phones or
    • 0:15:49something else that we're all going to speak some common language irrespective
    • 0:15:52of our human languages as well and you may very well know
    • 0:15:56that computers tend to speak only what language so to speak
    • 0:16:02assembly one but binary two might be your go-to and binary by implying two
    • 0:16:06means that the world of computers has just two digits at its disposal zero and
    • 0:16:11one and indeed we humans have many more than that certainly not just zeros and
    • 0:16:15ones alone but a computer indeed only has zeros and ones and yet somehow they
    • 0:16:20can do so much they can crunch numbers in excel send text messages create
    • 0:16:23images and and artwork and movies and more and so how do you get from
    • 0:16:27something as simple as a few zeros a few ones to all of the stuff that we're
    • 0:16:31doing today in our pockets and laptops and desktops well it turns out that we
    • 0:16:36can start quite simply if a computer were to want to do something as simple
    • 0:16:40as count what could it do well in our human world we might count doing this
    • 0:16:44like one two three four five using so-called unary notation literally the
    • 0:16:49digits on your fingers where one finger represents one person in the room if i'm
    • 0:16:52for instance taking attendance now we humans would typically actually count
    • 0:16:56one two three four five six and we'd go past just those five digits and count
    • 0:17:00much higher using zeros through nines but computers somehow only have these
    • 0:17:04zeros and ones so if a computer only somehow speaks binary zeros and ones how
    • 0:17:09does it even count past the number one well here are three
    • 0:17:13zeros of course and if you translate this number in binary zero zero zero to
    • 0:17:18a more familiar number in decimal we would just call this zero enough said if
    • 0:17:23we were to represent with a computer the number one it would actually be zero
    • 0:17:26zero one which not surprisingly is exactly the same as we might do in our
    • 0:17:30human world but we might not bother writing out the two zeros at the
    • 0:17:34beginning but a computer now if it wants to count as high as two it doesn't have
    • 0:17:38the digit two and so it has to use a different pattern of zeros and ones and
    • 0:17:42that happens to be zero one zero so this is not 10 with a 0 in front of it it's
    • 0:17:46indeed 0 1 0 in the context of binary and if we want to count higher now than
    • 0:17:502 we're gonna have to tweak these zeros
    • 0:17:53and ones further to get three and then if we want four or five or six or seven
    • 0:17:59we're just kind of toggling these zeros and ones aka bits for binary digits that
    • 0:18:05represent via these different patterns different numbers that you and i as
    • 0:18:08humans know of course as the so-called decimal system 0 through 9 dec implying
    • 0:18:13ten ten digits those zeros through nine so why that particular pattern and why
    • 0:18:18these particular zeros and ones well it turns out that representing one thing or
    • 0:18:23the other is just really simple for a computer why at the end of the day
    • 0:18:27they're powered by electricity and it's a really simple thing to just either
    • 0:18:30store some electricity or don't store some electricity like that's as simple
    • 0:18:34as the world can get on or off one or zero so to speak so in fact
    • 0:18:39inside of a computer a phone anything these days that's electronic pretty much
    • 0:18:43is some number of switches otherwise known as transistors and they're tiny
    • 0:18:47you've got thousands millions of them in your mac or pc or phone these days and
    • 0:18:50these are just tiny little switches that can get turned on and off and by turning
    • 0:18:54those things on and off in patterns a computer can count from zero on up to
    • 0:18:58seven and even higher than that and so these switches really you can think of
    • 0:19:02being as like switches like this let me just borrow one of our little stage
    • 0:19:05lights here here's a light bulb it's currently off and so i could just think
    • 0:19:09of this as representing in my laptop a transistor a switch representing zero
    • 0:19:13but if i allow some electricity to flow now i in fact have a one well how do i
    • 0:19:19count higher than one i of course need another light bulb so let me grab
    • 0:19:22another one here and if i put it in that same kind of pattern i don't want to
    • 0:19:27just do this that's sort of the old finger counting
    • 0:19:30way of unary just one two i want to actually take into account the pattern
    • 0:19:34of these things being on and off so if this was one a moment ago what i think i
    • 0:19:39did earlier was i turned it off and let the next one over be on aka zero
    • 0:19:47one zero and let me get us a third bit if you will and that feels like enough
    • 0:19:52here is that same pattern now starting at the beginning with three so here is
    • 0:19:56zero zero zero here is zero zero
    • 0:20:00one here is zero
    • 0:20:03one zero
    • 0:20:05aka in our human world of decimal two and then we of course keep counting
    • 0:20:10further this now would be three and dot dot dot if this other bulb now goes on
    • 0:20:15and that switch is turned and all three stay on this again was what number okay
    • 0:20:20so seven so it's just as simple relatively as that if you will but how
    • 0:20:26is it that these patterns came to be well these patterns actually follow
    • 0:20:31something very familiar you and i don't really think about it at this level
    • 0:20:34anymore because we've probably been doing math and numbers since grade
    • 0:20:38school or whatnot but if we consider something in decimal
    • 0:20:42like the number 123 i immediately jump to that this looks like 120 in decimal
    • 0:20:48but why it's really just three symbols a one a two with a bit of curve a three
    • 0:20:53with a couple of curves that you and i now instinctively just assign meaning to
    • 0:20:58but if we do rewind a few years that is 120
    • 0:21:02because you're assigning meaning to each of these columns the three
    • 0:21:07is in the so-called ones place the two is in the so-called tens place and the
    • 0:21:13one is in the so-called hundreds place and then the math ensues quickly in your
    • 0:21:17head this is technically 100 times 1 plus 10 times 2
    • 0:21:21plus 1 times 3 aka 100 plus 20 plus 3 and there we get the sort of
    • 0:21:26mathematical notion we know as 123. well nicely enough in binary it's
    • 0:21:32actually the same thing it's just these columns mean a little something
    • 0:21:36different if you use three digits in decimal
    • 0:21:39and you have the ones place the tens place and hundreds place well why was
    • 0:21:43that ten one ten and one hundred they're technically just powers of ten so tens
    • 0:21:47of the zero ten to the one ten to the two y ten
    • 0:21:50decimal system dec meaning ten you have eight in ten digits zero through nine in
    • 0:21:54the binary system if you're going to use three digits just change the bases if
    • 0:21:58you're using only one zeros and ones so now it's powers of two two to the zero
    • 0:22:02two to the one two to the two aka one and two
    • 0:22:06and four respectively and if you keep going it's gonna be eights columns
    • 0:22:10sixteens columns 32 64 and so forth so why did we get these patterns that we
    • 0:22:15did here's your zero zero zero because it's four times zero two times zero one
    • 0:22:20times zero obviously zero this is why we got the decimal number one in binary
    • 0:22:25this is why we got the number 2 in binary because it's 4 times 0 plus 2
    • 0:22:29times 1 plus 1 times 0. and now 3
    • 0:22:33and now 4 and now 5 and now 6 and now 7. and of course if you wanted to count as
    • 0:22:39high as eight to be clear like what do you have to do what does a computer need
    • 0:22:42to do to count even higher than seven out of bits at another light bulb
    • 0:22:47another switch and indeed computers have standardized just how many zeros and
    • 0:22:51ones or bits or switches they throw at these kinds of problems and in fact most
    • 0:22:55computers would typically use at least eight at a time and even if you're only
    • 0:22:59counting as high as three or seven you would still use eight and have a whole
    • 0:23:03bunch of zeros but that's okay because the computers these
    • 0:23:06days certainly have so many more thousands millions of transistors and
    • 0:23:10switches that that's quite okay all right so if with that said if we can
    • 0:23:15now count as high as seven or frankly as high as we want
    • 0:23:19that only seems to make computers useful for things like excel like number
    • 0:23:23crunching but computers of course let you send text messages write documents
    • 0:23:26and so much more so how would a computer represent something like a letter like
    • 0:23:31the letter a of the english alphabet if at the end of the day all they have
    • 0:23:36is switches any thoughts yeah
    • 0:23:41okay so we could represent letters using numbers okay so give me what's a
    • 0:23:45proposal what number should represent what
    • 0:23:55yeah we just all have to agree somehow that one number is going to represent
    • 0:23:59one letter so 1 is a 2 is b 3 is c z is 26 and so forth maybe we can even
    • 0:24:05take into account uppercase and lowercase we just have to agree and sort
    • 0:24:07of write it down in some global standard and humans indeed did just that they
    • 0:24:12didn't use one two three turns out they started a little higher up capital a has
    • 0:24:16been standardized as the number 65 and capital b has been standardized as
    • 0:24:21the number 66 and you can kind of imagine how it goes up from there and
    • 0:24:26that's because whatever you're representing ultimately
    • 0:24:30can only be stored at the end of the day as zeros and ones and so some humans in
    • 0:24:34a room before decided that capital a shall be 65 or really this pattern of
    • 0:24:38zeros and ones inside of every computer in the world zero one zero zero zero
    • 0:24:43zero zero one so if that pattern of zeros and ones ever appears in a
    • 0:24:47computer it might be interpreted then as indeed a capital
    • 0:24:51letter a eight of those bits at a time but i worry just to be clear we might
    • 0:24:57have now created a problem it might seem if i play this naively that okay how do
    • 0:25:01i now actually do math with the number 65 if now excel displays 65 is an a let
    • 0:25:07alone b's and c's so how might a computer
    • 0:25:11do as you've proposed have this mapping from numbers to letters but still
    • 0:25:15support numbers it feels like we've given something up
    • 0:25:19yeah
    • 0:25:22by having a prefix okay so we could perhaps have some kind
    • 0:25:26of prefix like some pattern of zeros and ones i like this that repre that's
    • 0:25:30indicates to the computer here comes another pattern that represents a letter
    • 0:25:34here comes another pattern that represents a one a number or a letter so
    • 0:25:38not bad i like that other thoughts how might a computer distinguish these
    • 0:25:43two yeah
    • 0:25:52indeed and that's spot on nothing wrong with what you suggested but the world
    • 0:25:55generally does just that the reason we have all of these different file formats
    • 0:25:58in the world like uh jpeg and jiff and pings and word documents dot ah
    • 0:26:02d-o-s-c-x and excel files and so forth is because a bunch of humans got in a
    • 0:26:07room and decided well in the context of this type of file or really more
    • 0:26:11specifically in the context of this type of program excel versus photoshop versus
    • 0:26:16google docs or the like we shall interpret any patterns of zeros and ones
    • 0:26:20as being maybe numbers for excel maybe letters in like a text messaging program
    • 0:26:25or google docs or maybe even colors of the rainbow in something like photoshop
    • 0:26:29and more so it's context dependent and we'll see when we ourselves start
    • 0:26:33programming you the programmer will ultimately provide some hints to the
    • 0:26:36computer that tells the computer interpret it as follows so similar in
    • 0:26:41spirit to that but not quite as standardized with these prefixes so this
    • 0:26:45system here actually has a name ascii the american standard code for
    • 0:26:48information interchange and indeed it began here in the u.s and that's why
    • 0:26:52it's actually a little biased toward a's through z's and a bit of punctuation as
    • 0:26:56well and that quickly became a problem but if we start simply now
    • 0:27:01in english the mapping itself is fairly straightforward so if a is 65 b is 66
    • 0:27:07and dot dot dot suppose that you received a text message an email from a
    • 0:27:11friend and underneath the hood so to speak if you kind of looked inside the
    • 0:27:15computer what you technically received in this text or this email happen to be
    • 0:27:19the numbers 72 73 33 or really the underlying pattern of
    • 0:27:25zeros and ones what might your friend have sent you as a message if it's 72 73
    • 0:27:3033
    • 0:27:34hey close high it's indeed high why well
    • 0:27:38apparently according to this little cheat sheet h is 72 i is 73. it's not
    • 0:27:42obvious from this chart what the 33 is but indeed this pattern represents high
    • 0:27:47and anyone want to guess or if you know what 33 is
    • 0:27:50exclamation point and this is frankly not the kind of thing most people know
    • 0:27:54but it's easily accessible by a nice user-friendly chart like this so this is
    • 0:27:58an ascii chart when i said that we just need to write down this mapping earlier
    • 0:28:02this is what people did they wrote it down in a book or in a chart and for
    • 0:28:05instance here is our 72 for eight here is our 73 for i and here is our 7 33 for
    • 0:28:12exclamation point and computers max pcs iphones android devices just know this
    • 0:28:17mapping by heart if you will they've been designed to understand those
    • 0:28:21letters so here i might have received high technically what i've received is
    • 0:28:25these patterns of zeros and ones but it's important to note that when you get
    • 0:28:29these patterns of zeros and wants in any format be it email or text or a file
    • 0:28:33they do tend to come in standard lengths with a certain number of zeros and ones
    • 0:28:39all together and this happens to be eight plus eight plus eight so just to
    • 0:28:43get the message high exclamation point you would have received at least it
    • 0:28:47would seem some 24 bits but frankly bits are so tiny literally
    • 0:28:53and mathematically that we don't tend to think or talk generally in terms of bits
    • 0:28:56you're probably more familiar with bytes b-y-t-e-s
    • 0:29:01is a byte is a byte is a byte a byte is just eight bits and even those frankly
    • 0:29:06aren't that useful if we do out the math how high can you count if you have eight
    • 0:29:09bits anyone know say again
    • 0:29:13uh higher than that unless you want to go negative that's
    • 0:29:16that's fine 256 technically 255. long story short if
    • 0:29:22we actually got into the weeds of all of these zeros and ones and we figured out
    • 0:29:25what 1 1 1 1 1 1 1 1 mathematically adds up to in
    • 0:29:30decimal it would indeed be 255 or less if you want to represent
    • 0:29:34negative numbers as well so this is useful because now we can
    • 0:29:38speak not just in terms of bytes but if the files are bigger kilobytes is
    • 0:29:41thousands of bytes megabytes is millions of bytes gigabytes is billions of bytes
    • 0:29:46terabytes are trillions of bytes and so forth
    • 0:29:49we have a vocabulary for these increasingly large
    • 0:29:52quantities of data the problem is that if you're using
    • 0:29:57ascii and therefore eight bits or one byte per character
    • 0:30:01and originally only seven you can only represent 255 characters and that's
    • 0:30:06actually font or 256 total characters including zero and that's fine
    • 0:30:10if you're using literally english in this case plus a bunch of punctuation
    • 0:30:14but there's many human languages in the world that need many
    • 0:30:18more symbols and therefore many more bits so thankfully the world decided
    • 0:30:23that will indeed support not just the us english keyboard but all
    • 0:30:27of the accented characters that you might want for some languages and heck
    • 0:30:30if we use enough bits zeros and ones not only can we represent all human
    • 0:30:35languages in written form as well as some emotions along the way we can
    • 0:30:39capture the latter with these things called emojis and indeed these are very
    • 0:30:43much in vogue these days you probably send them or receive many of these
    • 0:30:46things any given day these are just characters like letters
    • 0:30:50of an alphabet patterns of zeros and ones that you're receiving that the
    • 0:30:54world has also standardized for instance there are certain emojis that were
    • 0:30:58represented with certain patterns of bits and when you receive them your
    • 0:31:02phone your laptop your desktop displays them
    • 0:31:05as such and this newer standard is called unicode so it's a superset of
    • 0:31:09what we called ascii and unicode is just a mapping of many more numbers to many
    • 0:31:14more letters or characters more generally that might use 8 bits for
    • 0:31:19backwards compatibility with the old way of doing things with ascii but they
    • 0:31:23might also use 16 bits and if you have 16 bits you can actually represent more
    • 0:31:27than 65 000 possible letters and that's getting up there and heck unicode might
    • 0:31:32even use 32 bits to represent letters and numbers and punctuation symbols and
    • 0:31:38emojis and that would give you up to four billion possibilities and i dare
    • 0:31:42say one of the reasons we see so many emojis these days that we have so much
    • 0:31:46room i mean there's got room for billions more literally so in fact just
    • 0:31:50as a little bit of trivia has anyone ever received this
    • 0:31:54decimal number or if you prefer binary now has anyone ever received this
    • 0:31:58pattern of zeros and ones on your phone in a text or an email
    • 0:32:02perhaps this past year well if you actually look this up this
    • 0:32:06esoteric sequence of zeros and ones happens to
    • 0:32:10represent faced with medical masks and notice that
    • 0:32:14if you've got an iphone or an android device you might be seeing different
    • 0:32:18things in fact this is the android version of this most recently this is
    • 0:32:22the ios version of it most recently and there's bunches of other interpretations
    • 0:32:26by other companies as well so unicode as a consortium if you will
    • 0:32:31has standardized the descriptions of what these things are but the companies
    • 0:32:35themselves manufacturers out there have generally
    • 0:32:38interpreted as you see fit and this can lead to some human uh miscommunications
    • 0:32:44in fact for like literally embarrassingly like a year or two i
    • 0:32:47started being in a habit of using the emoji that kind of looks like this
    • 0:32:50because i thought it was like woo happy face or whatever didn't realize this is
    • 0:32:54the emoji for hug because whatever device i was using sort of looked like
    • 0:32:58this not like this and that's because of their interpretation of the data this
    • 0:33:03happened too when what was a gun became a
    • 0:33:06water pistol in some manufacturer's eyes and so it's an interesting dichotomy
    • 0:33:11between what information we all want to
    • 0:33:13represent and how we choose ultimately to represent it
    • 0:33:18questions then on these representations of formats be it numbers or letters
    • 0:33:23or soon more yeah
    • 0:33:30and sorry why is what's happening
    • 0:33:35yeah so we'll come back to this in a few weeks in fact there are other ways to
    • 0:33:38represent numbers binary is one decimal is another uni is another and
    • 0:33:43hexadecimal is yet a fourth that uses 16 total digits literally zero through nine
    • 0:33:48plus a b c d e f and somehow you can similarly count even higher with those
    • 0:33:54we'll see in a few weeks why this is uh compelling but hexadecimal long story
    • 0:33:58short uses four bits per digit and so four bits if you have two digits in hex
    • 0:34:03that gives you eight and it's just a very convenient unit of measure and it's
    • 0:34:06also human convention in the world of like files and other things but we'll
    • 0:34:10come back to that soon other questions are the lights on the stage
    • 0:34:15do the lights on the stage supposedly say anything well if we had thought in
    • 0:34:19advance to use maybe 64 light bulbs that would seem to give us uh eight
    • 0:34:24total bytes on stage eight times uh eight giving us just that maybe
    • 0:34:29good question other questions on zeros and ones it's a little bright
    • 0:34:35in here no
    • 0:34:37oh yes
    • 0:34:40where everyone's pointing somewhere specific
    • 0:34:44there we go sorry very bright in this corner
    • 0:34:52oh sure and we'll come back to this in some form in the coming days too at a
    • 0:34:56slower pace too we have with eight bits two possible values for the first and
    • 0:35:01then two for the next two for the next and so forth so that's two times two
    • 0:35:05times two that's two to the eighth power total which means you can have 256 total
    • 0:35:10possible patterns of zeros and ones but as we'll seen soon
    • 0:35:14computer scientist programmers software often starts counting at zero by
    • 0:35:18convention and if you use one of those patterns zero zero zero zero zero zero
    • 0:35:23zero zero to represent the decimal number we know is zero
    • 0:35:26you only have 255 other patterns left to count as high as therefore 255 that's
    • 0:35:32all good question all right so what then might we have
    • 0:35:36besides uh these emojis and letters and numbers
    • 0:35:40well we of course have things like colors and programs like photoshop and
    • 0:35:44pictures and photos well let me ask the question again how might a computer do
    • 0:35:47you think knowing what you know now represents something like a color
    • 0:35:51like what are our options if all we've got are zeros and ones and switches yeah
    • 0:35:57uh rgb when the rgb indeed is this acronym that represents some amount of
    • 0:36:02red and some amount of green and blue and indeed computers can represent
    • 0:36:06colors by just doing that remembering for instance this dot this yellow dot on
    • 0:36:10the screen that might be part of any of those emojis these days well that's some
    • 0:36:13amount of red some amount of green some amount of blue and if you sort of mix
    • 0:36:16those colors together we can indeed get a very specific one
    • 0:36:19and we'll see in just a moment just that and allow me to go to a question from
    • 0:36:24a classmate online by my colleague here carter
    • 0:36:28who is kindly fielding oops no no
    • 0:36:36there we go let me uh switch over to my colleague
    • 0:36:39carter here who's online fielding questions from classmates online and
    • 0:36:42here you can see in progress we'll have to turn this off every word coming out
    • 0:36:45of my mouth correctly or not on the bottom carter did you want to proxy a
    • 0:36:49question from classmates online sure just going back a bit we had
    • 0:36:54somebody ask about you know why can't we represent letter a with just seven bits
    • 0:36:58why do we need those actual that extra zero at the front
    • 0:37:02so indeed earlier on did humans and computers only use seven bits total and
    • 0:37:07it was only once they decided well let's add an eighth bit that they got extended
    • 0:37:10ascii and that was initially in part a solution to the same problem of not
    • 0:37:14having enough room if you will in those patterns of zeros and ones to represent
    • 0:37:19all of the characters that you might want but even that wasn't enough and
    • 0:37:22that's why we've now gone up to 16 and 32 and long past seven so if we come
    • 0:37:28back now to this one particular color
    • 0:37:32rgb was proposed as a scheme but how might this work well consider for
    • 0:37:36instance this if we do indeed decide as a group to represent any color of the
    • 0:37:40rainbow with some mixture of some red some green and some blue we have to
    • 0:37:44decide how to represent the amount of red and green and blue well it turns out
    • 0:37:49if all we have are zeros and ones ergo numbers let's do just that for instance
    • 0:37:54suppose a computer we're using these three numbers 72 73 33 no longer
    • 0:38:00in the context of an email or a text message but now in the context of
    • 0:38:04something like photoshop a program for editing and creating graphical files
    • 0:38:09maybe this first number could be interpreted as representing some amount
    • 0:38:13of red green and blue respectively and that's exactly what happens you can
    • 0:38:17think of the first digit is red second is green third as blue and so ultimately
    • 0:38:22when you combine that amount of red that amount of green
    • 0:38:25that amount of blue it turns out it's going to resemble this shade of yellow
    • 0:38:29and indeed you can come up with numbers between 0 and 255 for each of those
    • 0:38:34colors to mix any other color that you might want and you can actually see this
    • 0:38:38in practice even though our screens admittedly are getting really good on
    • 0:38:42our phones and laptops such that you barely see the dots
    • 0:38:45they are there you might have heard the term pixel before pixel's just a dot on
    • 0:38:49the screen and you've got thousands millions of them these days horizontally
    • 0:38:52and vertically and if i take even this emoji which again happens to be
    • 0:38:57one company's interpretation of face with medical mask and zoom in a bit
    • 0:39:02maybe zoom in a bit more you can actually start to see these pixels
    • 0:39:06things get pixelated because what you're seeing is each of the individual dots
    • 0:39:11that compose this particular image and apparently each of these individual dots
    • 0:39:15are probably using 24 bits eight bits for red eight bits
    • 0:39:19for green eight bits for blue in some pattern and this program or some other
    • 0:39:24like photoshop is interpreting one pattern it's white or yellow or black or
    • 0:39:29some brown in between and so if you look sort of
    • 0:39:33awkwardly but up close to your phone or your laptop or maybe your tv you can see
    • 0:39:37exactly this too all right well what about things that we
    • 0:39:40also watch every day on youtube or the like things like videos
    • 0:39:44how would a computer knowing what we know now represents something like a
    • 0:39:47video
    • 0:39:50how might you represent a video using only zeros and ones yeah
    • 0:40:06yeah exactly and to summarize what video really adds is just some notion of time
    • 0:40:10it's not just one image it's not just one letter or number it's presumably
    • 0:40:14some kind of sequence because time is passing and so with a whole bunch of
    • 0:40:18images maybe 24 maybe 30 per second if you fly them by the human's eyes we can
    • 0:40:24interpret them using our eyes and brain that there is now movement and therefore
    • 0:40:27video and similarly with audio or music if we just came up with some convention
    • 0:40:33for representing those same notes on a musical instrument could we have the
    • 0:40:37computer synthesize them too and this might be actually pretty familiar let me
    • 0:40:41pull up a quick video here which uh happens to be an old school version of
    • 0:40:46this same idea you might remember from childhood the notion of having a little
    • 0:40:49flip book a whole bunch of pieces of paper maybe stapled or somehow together
    • 0:40:53that use your thumb or whatnot to flip through and what you see as these images
    • 0:40:57fly by your eyes is the illusion of motion
    • 0:41:12so
    • 0:41:23so granted that particular video is an actual video of a paper-based animation
    • 0:41:29but indeed that's really all you need is some sequence of these uh these images
    • 0:41:34which themselves of course are just zeros and ones because they're just this
    • 0:41:37grid of these pixels or dots now something like musical notes like these
    • 0:41:41those of you who are musicians might just naturally play these on physical
    • 0:41:44devices but computers can certainly represent those sounds too and for
    • 0:41:48instance a popular format for audio is called midi and midi might just
    • 0:41:52represent each note that you saw a moment ago essentially as a sequence of
    • 0:41:57numbers but more generally you might think about music as having notes for
    • 0:42:01instance a through g maybe some flats and some sharps you might have the
    • 0:42:04duration like how long is the note being heard or played on a piano or some other
    • 0:42:08device and then just the volume like how hard does the human in the real world
    • 0:42:12press down on that key and therefore how loud is that sound it would seem that
    • 0:42:16just remembering little details like that quantitatively we can then
    • 0:42:20represent really all of these these otherwise analog uh human realities
    • 0:42:26so that then is really a laundry list of ways that we can just represent
    • 0:42:30information again computers or digital have all these different formats but at
    • 0:42:34the end of the day and as fancy as those devices and yours are it's just zeros
    • 0:42:38and ones tiny little switches or light bulbs if you will represented in some
    • 0:42:42way and it's up to the software that you and i and others write to use those
    • 0:42:46zeros and ones in ways we want to get the computers to do something more
    • 0:42:50powerfully questions then on this representation of
    • 0:42:54information which i dare say is ultimately what problem solving's all
    • 0:42:57about taking in information and producing new
    • 0:43:00by a sum process in between any questions out there
    • 0:43:07ah yeah and back
    • 0:43:21so a really good question there are many other file formats out there ulu2 mp4
    • 0:43:25for video and more generally these are these things called codecs and
    • 0:43:29containers it's not quite as simple when using larger files for instance in more
    • 0:43:33modern formats that a video is just a sequence of images for instance why if
    • 0:43:38you stored that many images for like a hollywood movie like 24 or 30 of them
    • 0:43:43per second that's a huge number of images and if you've ever taken phone
    • 0:43:47photos on your phone you might know how many megabytes or larger even individual
    • 0:43:51photographs might be so humans have developed over the years fancier
    • 0:43:55software that uses much more math to represent the same information more
    • 0:44:00minimally just using somehow shorter patterns of zeros and ones than our most
    • 0:44:04simplistic representation here and they use what might be called compression if
    • 0:44:09you've ever used a zip file or something else somehow your computer is using
    • 0:44:12fewer zeros and ones to represent the same amount of information ideally
    • 0:44:16without losing any information and in the world of multimedia which we'll
    • 0:44:19touch on a little bit in a few weeks there are both lossy and lossless
    • 0:44:24formats out there lossless means you lose no information whatsoever but more
    • 0:44:29commonly as you're alluding to one is lossy compression l-o-s-s-y where you're
    • 0:44:34actually throwing away some amount of quality you're getting a some amount of
    • 0:44:37pixelation that might not look perfect to the human but heck it's a lot cheaper
    • 0:44:41and a lot easier to distribute and in the world of multimedia you have
    • 0:44:44containers like quicktime and other mpeg containers that can combine
    • 0:44:49different formats of video different formats of audio in one file but there
    • 0:44:53too do designers have discretion so more in a few weeks too
    • 0:44:57other questions then on information here as well yeah
    • 0:45:13i mean back in the day you might have heard of the expression of vacuum tube
    • 0:45:16which is like some physically large device
    • 0:45:18that might have only stored some zero or one um yes it is the miniaturization of
    • 0:45:23hardware these days that has allowed us to store as many and many more zeros and
    • 0:45:28ones much more closely together and as we've built more fancy machines that can
    • 0:45:32sort of design this hardware at an even smaller scale we're just packing more
    • 0:45:35and more into these devices but there too is a trade-off for instance you
    • 0:45:39might know by using your phone uh or your laptop for quite a while maybe on
    • 0:45:42your lap starts to get warm and so there's literal physical side effects of
    • 0:45:46this where now some of our devices run hot and this is why like a data center
    • 0:45:51in the real world might need more air conditioning than a typical place
    • 0:45:54because there are these physical artifacts as well and in fact if you'd
    • 0:45:58like to see one of the earliest computers from decades ago across the
    • 0:46:01river here in now allston in the new engineering building is the harvard mark
    • 0:46:05one computer uh that will give you a much a better mental model of just that
    • 0:46:11carter do you have a another question from the group here
    • 0:46:15absolutely we have a question about who gets to decide what represents what and
    • 0:46:19then what do we do if we disagree about what you represent what that's a really
    • 0:46:22good question and partly why there's so many darn file formats in the world
    • 0:46:26because there's companies like google and microsoft and facebook and others
    • 0:46:29that when they can [ __ ] these new file formats they might have very smart
    • 0:46:33people in their room that disagree with very smart people in some other room
    • 0:46:37thankfully with a lot of these standards there are consortia of some sort either
    • 0:46:41professional organizations or volunteer organizations that a lot of companies or
    • 0:46:45individuals contribute to where you generally try to get consensus but this
    • 0:46:49hasn't always been the case and you might have used a device years ago
    • 0:46:53that's no longer supported because that particular file format just didn't catch
    • 0:46:56on and that's just because of the reality that reasonable people in
    • 0:47:00engineering 2 might very well disagree well if we come back now to this first
    • 0:47:05picture being computer science or really problem solving i dare say we have more
    • 0:47:10than enough ways now to represent information input and output so long as
    • 0:47:14we all just agree on something and thankfully those before us have given us
    • 0:47:18things like ascii and unicode not to mention mp4s word documents and the like
    • 0:47:23but what's inside of this proverbial black box into which these inputs are
    • 0:47:27going and the outputs are coming well that's where we get this term you might
    • 0:47:30have heard too an algorithm which is just step-by-step
    • 0:47:34instructions for solving some problem incarnated in the world of computers by
    • 0:47:39software when you write software aka programs you are implementing one or
    • 0:47:44more algorithms one or more step sets of instructions for solving some problem
    • 0:47:49and maybe you're using this language or that but at the end of the day no matter
    • 0:47:52the language you use the computer is going to represent what you type using
    • 0:47:57just zeros and ones so what might be a representative
    • 0:48:01algorithm nowadays you might use your phone quite a bit to make calls or send
    • 0:48:05texts or emails and therefore you have a whole bunch of contacts in your address
    • 0:48:09book nowadays of course this is very digital but whether on ios or android or
    • 0:48:14the like you might have a whole bunch of names
    • 0:48:17first name and or last as well as numbers and emails and the like and you
    • 0:48:21might be in the habit of like scrolling through on your phone all of those names
    • 0:48:24to find the person you uh want to call it's probably sorted alphabetically by
    • 0:48:29first name or last name a through z or some other symbol
    • 0:48:32and this is frankly quite the same as we used to do you know back in in my day
    • 0:48:38cs50 when we just used a physical book in this physical book might be a whole
    • 0:48:41bunch of names alphabetically sorted from left to right corresponding to a
    • 0:48:44whole bunch of numbers so suppose that in this old harvard phone book we want
    • 0:48:49to search for john harvard we might of course start quite simply at the
    • 0:48:53beginning here looking at one page at a time
    • 0:48:56and this is an algorithm this is like literally step by step uh looking for
    • 0:49:01the solution to this problem in that sense if john harvard's in the
    • 0:49:05phone book is this algorithm page by page correct would you say
    • 0:49:10yes like if uh john harvard's in the phone book obviously i'm eventually
    • 0:49:14gonna get to him so that's what we mean by correct is it efficient is it well
    • 0:49:18designed would you say no i mean this is gonna take forever
    • 0:49:22even just to get to the j's or the h's depending how this thing's sorted all
    • 0:49:25right well let me go a little faster i'll start like two pages at a time two
    • 0:49:294 6 8 10 12 and so forth sounds faster is faster is it correct
    • 0:49:36okay why is it not correct yeah
    • 0:49:45exactly if i started an odd number of pages and i'm going two at a time i
    • 0:49:48meant miss pages in between and if i therefore conclude when i get to the
    • 0:49:52back of the book there was no john harvard i might have just aired this
    • 0:49:55would be again one of these bugs but if i
    • 0:49:59try a little harder i feel like there's a solution we don't have to completely
    • 0:50:02throw out this algorithm i think we can probably go roughly twice as fast still
    • 0:50:06but what should we do instead to fix this
    • 0:50:09yeah
    • 0:50:21nice so i think what many of us most of us if we even use this technology
    • 0:50:25anymore these days we might go roughly to the middle of the phone book just to
    • 0:50:27kind of get us started and now i'm looking down i'm looking for jay
    • 0:50:30assuming first name j harvard and it looks like i'm in the m section so just
    • 0:50:35to be clear what should i do next
    • 0:50:44okay and presumably it is john harvard would be to the left of this so here's
    • 0:50:47an opportunity to figuratively and literally tear this particular problem
    • 0:50:51in half throw half of the problem away
    • 0:50:54it's it's actually pretty easy if you just do it that way the hard way is this
    • 0:50:57way but i've now just
    • 0:51:00uh decreased the size of this problem really in half so if i started with like
    • 0:51:04a thousand pages of phone numbers and names now i'm down to 500 and already we
    • 0:51:09haven't found john harvard but that's a big bite out of this problem and i do
    • 0:51:12think it's correct because if j is to the left of m of course he's definitely
    • 0:51:17not going to be over there and i think if i repeat this again dividing and
    • 0:51:20conquering if you will here i might have gone a little too far now i'm in like
    • 0:51:24the e section so let me tear the problem in half again throw another 250 pages
    • 0:51:29away and again repeat dividing and dividing and conquering until finally
    • 0:51:33presumably i end up with just one page of a phone book on which john harvard's
    • 0:51:38name either is or is not but because of the algorithm you propose step by step i
    • 0:51:43know that he's not in anything i discarded so traumatic as that might
    • 0:51:47have been been made out to be it's actually just
    • 0:51:51harnessing pretty good human intuition indeed this is what programming is all
    • 0:51:55about too it's not about learning a completely new world but really just how
    • 0:51:59to harness intuition and ideas that you might already have and take naturally
    • 0:52:03but learning how to express them now more succinctly more precisely and using
    • 0:52:08things called programming languages why is an algorithm like that if i found
    • 0:52:13john harvard better than ultimately just doing the
    • 0:52:17first one or even the second and maybe doubling back to check those even pages
    • 0:52:22well let's just look at a little charts here again we don't have to get into the
    • 0:52:25nuances of numbers but if we've got like a chart here xy plot on the x axis here
    • 0:52:29i claim is the size of the problem so measured in the numbers of pages in the
    • 0:52:33phone book so the farther you go out here the more pages are in the phone
    • 0:52:37book and here we have time to solve on the y-axis so the higher you go up the
    • 0:52:42more time it's going to be taking to solve that particular problem so let's
    • 0:52:46just arbitrarily say that the first algorithm involving like n pages might
    • 0:52:51be represented graphically like this no matter the slope it's a straight line
    • 0:52:56because there's presumably a one-to-one relationship between numbers of pages
    • 0:53:00and number of seconds or number of page turns why if the phone company adds
    • 0:53:04another page next year because some new people move to town that's going to
    • 0:53:07require one additional page for me one to one
    • 0:53:11if though we use the second algorithm flawed though it was unless we double
    • 0:53:15back a little bit to fix someone being in between that's two gonna be a
    • 0:53:19straight line but it's gonna be a different slope because now there's a
    • 0:53:23two to one or a one to two relationship because i'm going two pages at a time
    • 0:53:28so if the phone company adds another page that's going to take me only or
    • 0:53:32another two pages that's still only just one more step and you can see the
    • 0:53:35difference if i kind of draw this if this is the phone book in question this
    • 0:53:39number of pages it might take this many seconds on the yellow line to represent
    • 0:53:43or to solve uh to find someone like john harvard but of course on the first
    • 0:53:48algorithm the red line it's literally going to take twice as many steps and
    • 0:53:51what do the ends here meet n is the go-to variable for computer scientist or
    • 0:53:55programmer just generically representing a number so if the number of pages in
    • 0:53:59the phone book is n the number of steps the second algorithm would have taken
    • 0:54:03would be in the worst case n over two half as many because you're
    • 0:54:07going twice as fast but the third algorithm actually if you recall your
    • 0:54:11your logarithms looks a little something like this there's a fundamentally
    • 0:54:15different relationship between the size of the problem and the amount of time
    • 0:54:19required to solve it that technically is log base 2 of n but it's really the
    • 0:54:23shape that's different and the implication there is that if for
    • 0:54:26instance cambridge and alston two different towns here in massachusetts
    • 0:54:29merge next year and there's just one phone book that's twice as big no big
    • 0:54:34deal for that third and final algorithm why you just tear the problem one more
    • 0:54:39time in half taking one more byte that's it
    • 0:54:42not another thousand bytes just to get to the solution and put another way you
    • 0:54:46could walk out way way way out here to a much bigger phone book and ultimately
    • 0:54:51that green line is barely going to have budged so this then is just a way of now
    • 0:54:56formalizing and thinking about what the performance or quality of these
    • 0:55:02algorithms might be and before we now make one more
    • 0:55:05formalization of the algorithm itself any questions then on this notion of
    • 0:55:10efficiency or now performance of ideas
    • 0:55:18um a lot of phone books over the years and
    • 0:55:20if you or your parents have any more still somewhere we could definitely use
    • 0:55:24them because they're hard to find other questions but thanks
    • 0:55:29other questions here too no oh
    • 0:55:33was that a murmur yes over here
    • 0:55:37sorry say again
    • 0:55:40oh yeah hopefully and then we could uh then we have a little something more to
    • 0:55:44use here so now if we want to formalize further
    • 0:55:49what it is we just did we can go ahead and introduce this a form of code aka
    • 0:55:54pseudocode pseudocode is not a specific language it's not like something we're
    • 0:55:58about to start coding in it's just a way of expressing yourself in english or any
    • 0:56:01human language succinctly correctly toward an end of getting your idea for
    • 0:56:06an algorithm across so for instance here might be how we could formalize the code
    • 0:56:11the pseudo code for that same algorithm step one was pick up the phone book as i
    • 0:56:15did step two might be open to the middle of the phone book as you proposed that
    • 0:56:19we do first step three was probably to look down at the pages i did and step
    • 0:56:24four gets a little more interesting because i had to quickly make a decision
    • 0:56:28and ask myself a question if person is on page
    • 0:56:31then i should probably just go ahead and call that person but that probably
    • 0:56:36wasn't the case at least for john harvard and i opened the m section and
    • 0:56:39so there's this other question i should now ask else if the person is earlier in
    • 0:56:43the book then i should tear the problem in half
    • 0:56:46as i did but go left so to speak and then
    • 0:56:50not just open to the middle of the left half of the book but really just go back
    • 0:56:53to step three repeat myself why because i can just repeat what i just did but
    • 0:56:58with a smaller problem having taken this big bite but if the person was later in
    • 0:57:02the book as might have happened with a different
    • 0:57:05person than john harvard then i should open to the middle of the right half of
    • 0:57:08the book again go back to line three but again i'm not gonna get stuck doing
    • 0:57:12something forever like this because i keep shrinking the size of the problem
    • 0:57:16lastly the only possible scenario that's left if john harvard is not on the page
    • 0:57:21and he's not to the left and he's not to the right what should our conclusion be
    • 0:57:25he's not there he's not listed and so we need to quit in some other form now as
    • 0:57:30an aside it's kind of deliberate that i buried that last question at the end
    • 0:57:34because this is how what happens all too often in programming whether you're new
    • 0:57:38at it or professional just not considering all possible cases corner
    • 0:57:43cases if you will that might not happen that often but if you don't anticipate
    • 0:57:47them in your own code pseudo code or otherwise this is when and why programs
    • 0:57:52might crash or you might see stupid little spinning beach balls or
    • 0:57:55hourglasses or your computer might reboot why it's doing something sort of
    • 0:57:59unpredictable if a human maybe myself didn't anticipate this like what does
    • 0:58:04this program do if john harbor is not in the phone book if i had omitted lines 12
    • 0:58:08and 13 i don't know maybe it would behave
    • 0:58:11differently on a mac or pc because it's sort of undefined behavior and these are
    • 0:58:15the kinds of omissions that frankly you're invariably going to make bugs
    • 0:58:19you're going to introduce mistakes you're going to make early on and me too
    • 0:58:2325 years later but you'll get better at thinking about those corner cases and
    • 0:58:28handling anything that can possibly go wrong and as a result your code will be
    • 0:58:32all the better for it now the problem ultimately with learning
    • 0:58:36how to program especially if you've never had experience or even if you do
    • 0:58:40but you learned a one language only is that they all look
    • 0:58:45a little cryptic at first glance but they do share certain commonalities in
    • 0:58:49fact we'll use this pseudo code to define those first highlighted in yellow
    • 0:58:53here or what henceforth we're going to start calling functions
    • 0:58:56lots of different programming languages exist but most of them have what we
    • 0:59:00might call functions which are actions or verbs
    • 0:59:03that solve some smaller problem that is to say you might use a whole bunch of
    • 0:59:07functions to solve a bigger problem because each functions tend to do each
    • 0:59:11function tends to do something very specific or precise
    • 0:59:15these then in english might be translated in code actual computer code
    • 0:59:19to these things called functions highlighted in yellow now are what we
    • 0:59:23might call conditionals conditionals are things that you do conditionally based
    • 0:59:28on the answer to some question you can think of them kind of like forks in the
    • 0:59:31road you go left or go right or some other direction
    • 0:59:34based on the answer to some question well what are
    • 0:59:37those questions highlighted now in yellow are what we would call boolean
    • 0:59:41expressions named after a mathematician last name bool that simply have yes no
    • 0:59:46answers or if you prefer true or false answers or heck if you prefer
    • 0:59:51one or zero answers we just need to distinguish one scenario from another
    • 0:59:56the last thing manifest in this pseudo code is what i might highlight now and
    • 1:00:00call loops some kind of cycle some kind of
    • 1:00:04directive that tells us to do something again and again
    • 1:00:06so that i don't need a thousand line program to search a thousand page phone
    • 1:00:12book i can get away with a 13 line program but sort of repeat myself
    • 1:00:16inherently in order to solve some problem
    • 1:00:19until i get to that last step so this then is what we might call
    • 1:00:22pseudo code and indeed there are other characteristics of
    • 1:00:27programs that we'll touch on before long things like arguments and return values
    • 1:00:31variables and more but unfortunately in most languages
    • 1:00:35including some we will very deliberately use in this class and that everyone in
    • 1:00:39the real world these days still uses is programs tend to look like this this for
    • 1:00:44instance is a distillation of that very first program i wrote in 1996 in cs50
    • 1:00:49itself just to print something on the screen and in fact this version here
    • 1:00:53just tries to print quote unquote hello world which is dare say the most
    • 1:00:58canonical first thing that most any programmer ever gets a computer to say
    • 1:01:02just because but look at this mess i mean there's a
    • 1:01:05hash symbol these angled brackets parentheses words like in curly braces
    • 1:01:09quotes parentheses semicolons and backslashes i mean there's more
    • 1:01:13overhead and more syntax and clutter then there is an actual idea now that's
    • 1:01:18not to say that you won't be able to understand this before long because
    • 1:01:22honestly there's not that many patterns indeed programming languages have
    • 1:01:25typically a much smaller vocabulary than any actual human language but at first
    • 1:01:30it might indeed look quite cryptic but you can perhaps infer
    • 1:01:34i have no idea what these other lines do yet but hello world is presumably
    • 1:01:38quote unquote what will be printed on the screen but what we'll do today after
    • 1:01:43a short break and set the stage for next week is introduce these exact same ideas
    • 1:01:48in just a bit using scratch something that you yourselves might have used when
    • 1:01:51you're quite younger but without the same vocabulary applied to those ideas
    • 1:01:55and the upside of what we'll soon do using scratch this graphical programming
    • 1:02:00language from her friends down the road at mit
    • 1:02:02it'll let us today start to drag and drop things that look like puzzle pieces
    • 1:02:07that interlock together for makes logical sense to do so but without the
    • 1:02:11distraction of hashes parentheses curly braces angle brackets semicolons and
    • 1:02:16things that are quite beside the point but for now let's go ahead and take a
    • 1:02:1910-minute break here and when we resume we will start programming
    • 1:12:08all right
    • 1:12:15all right
    • 1:12:23so this on the screen is a language called c something that we'll dive into
    • 1:12:28next week and thankfully this now on the screen is another language called python
    • 1:12:33that we'll also take a look at in a few weeks before long along with other
    • 1:12:36languages along the way today though and for this first week week zero so to
    • 1:12:41speak we use scratch because again it'll allow us to explore some of those
    • 1:12:44programming fundamentals that will be in c and in python and in javascript and
    • 1:12:49other languages too but in a way where we don't have to worry about the
    • 1:12:52distractions of syntax so the world of scratch looks like this it's a web-based
    • 1:12:58or downloadable programming environment that has this layout here by default on
    • 1:13:02the left here we'll soon see is a palette of puzzle pieces programming
    • 1:13:06blocks that represent all of those ideas we just discussed and by dragging and
    • 1:13:10dropping these puzzle pieces or blocks over this to big area and connecting
    • 1:13:15them together if it makes logical sense to do so we'll start programming in this
    • 1:13:20environment the environment allows you to have multiple sprites so to speak
    • 1:13:23multiple characters things like a cat or anything else and those sprites exist in
    • 1:13:28this rectangular world up here that you can full screen to make bigger and this
    • 1:13:32here by default is scratch who can move up down left right and do many more
    • 1:13:37things too and within it scratches world you can think of it as perhaps a
    • 1:13:42familiar a coordinate system with x's and y's which is helpful only when it
    • 1:13:46comes time to like position things on the screen right now scratch is at the
    • 1:13:50default zero comma zero where x equals zero and y equals zero if you were to
    • 1:13:55move the cat way up to the top x would stay zero y would be positive 180. if
    • 1:14:00you move the cat all the way to the bottom x would stay 0 but y would now be
    • 1:14:04negative 180 and if you went left x would become negative 240 but y would
    • 1:14:08stay zero or to the right x would be 240 and y would stay zero so those numbers
    • 1:14:15generally don't so much matter because you can just move relatively in this
    • 1:14:19world up down left right but when it comes time to like
    • 1:14:22precisely position some of these sprites or other imagery it'll be helpful just
    • 1:14:26to have that mental model off up down left and right well let's go ahead and
    • 1:14:30make perhaps the simplest of programs here i'm going to switch over to the
    • 1:14:34same programming environment now for a tour of the left hand side so by default
    • 1:14:39selected here are the category in blue motion
    • 1:14:43which has a whole bunch of puzzle pieces or blocks that relate to motion and
    • 1:14:46whereas scratch as a graphical language categorizes things by the type of things
    • 1:14:51that these pieces do we'll see that throughout this whole palette we'll have
    • 1:14:55functions and variables and conditionals and boolean expressions and more each in
    • 1:14:59a different color and shape so for instance moving 10 steps or turning one
    • 1:15:03way or the other would be functions categorized here as things like motion
    • 1:15:08under looks in purple you might have speech bubbles uh that you can create by
    • 1:15:12dragging and dropping these that might say hello or whatever for some number of
    • 1:15:16seconds or you could switch costumes change the cat to look like a dog or a
    • 1:15:20bird or anything else in between sounds too you can play sounds like meow or
    • 1:15:24anything you might import or record yourself and then there's these
    • 1:15:28things scratch calls events and the most important of these is the first when
    • 1:15:32green flag clicked because if we look over to the right of scratch's world
    • 1:15:36here this rectangular region has this green flag and red stop sign up above
    • 1:15:40one of which is for play one of which is for stop and so that's going to allow us
    • 1:15:44to start and stop our actual programs when
    • 1:15:48that green flag is initially clicked but you can listen for other types of events
    • 1:15:52when the space bar is pressed or something else when this sprite is
    • 1:15:56clicked or something else and here you already see like a programmer's
    • 1:16:00incarnation of things you and i take for granted like every day now on our phones
    • 1:16:04anytime you tap an icon or drag your finger or hit a button on the side these
    • 1:16:08are what a programmer would call events things that happen and are often
    • 1:16:12triggered by us humans and things that a program be it in scratch or python or c
    • 1:16:18or anything else can listen for and respond to indeed that's why when you
    • 1:16:22tap the phone icon on your phone the phone application starts up because
    • 1:16:26someone wrote software that's listening for a finger press on that particular
    • 1:16:30icon and so scratch has these same things too
    • 1:16:33under control in orange you can see that we can wait for one second or repeat
    • 1:16:37something some number of times 10 by default but we can change anything in
    • 1:16:40these white circles to anything else there's another puzzle piece here
    • 1:16:44forever which implies some kind of loop where we can do something again and
    • 1:16:47again and even though it seems a little tight there's not much room to fit
    • 1:16:50something there scratch is going to have these things grow and shrink however we
    • 1:16:53want to fill similarly shaped pieces and here's those conditionals if something
    • 1:16:58is true or false then do this this next thing and that's how we can put in this
    • 1:17:03little trapezoid like shape some form of boolean expression a question with a yes
    • 1:17:08no true false or one zero answer and decide whether to do something or not
    • 1:17:12you can mess combine these things too if something is true do this else do this
    • 1:17:17other thing and you can even tuck one inside of the other if you want to ask
    • 1:17:21three or four or more questions sensing two is going to be a thing you can ask
    • 1:17:26questions aka boolean expressions like is the sprite touching the mouse pointer
    • 1:17:30the arrow on the screen so that you can start to interact with these programs uh
    • 1:17:35what is the distance between a sprite and a mouse pointer you can do simple
    • 1:17:38calculations just to figure out maybe if the the enemy is getting close to the
    • 1:17:41cat under operators some lower level stuff like math but also the ability to
    • 1:17:46pick random numbers which for a game is great because then you can kind of vary
    • 1:17:49the difficulty or what's happening in the game without the same game playing
    • 1:17:52the same way every time and you can combine ideas something and something
    • 1:17:57must be true in order to make that kind of decisions before or we can even join
    • 1:18:01two words together says apple and banana by default but you can type in or drag
    • 1:18:05and drop whatever you want there to combine multiple words into full larger
    • 1:18:09sentences and then lastly down here there's in orange things called
    • 1:18:14variables in math we've obviously got x and y and whatnot in programming we'll
    • 1:18:18have the same ability to sort of store in these named symbols x or y of values
    • 1:18:24that we care about numbers or letters or words or colors or anything ultimately
    • 1:18:29but in programming you'll see that it's much more conventional not to just use
    • 1:18:32simple letters like x and y and z but to actually give variables full words or
    • 1:18:38singular or plural words to describe what they are
    • 1:18:42and then lastly if this isn't enough colors of blocks for you you can create
    • 1:18:47your own blocks and indeed this is going to be a programming principle we'll
    • 1:18:50apply today and with the first problem set whereby once you start to assemble
    • 1:18:54these puzzle pieces and you realize oh it would have been nice if those several
    • 1:18:59pieces could have just been replaced by one had mit fought to give me that one
    • 1:19:03puzzle piece you yourself can make your own blocks by connecting these all
    • 1:19:07together giving them a name and boom a new puzzle piece will exist so let's do
    • 1:19:12the simplest most canonical programs here starting up with control and i'm
    • 1:19:15going to click and drag and drop this thing here
    • 1:19:18when green flag clicked and then i'm going to grab one more for instance
    • 1:19:22under looks and under looks i'm going to go ahead and just say something
    • 1:19:26like initially not just hello but the more canonical
    • 1:19:30hello comma world now you might guess that in this programming environment i
    • 1:19:34can go over here now and click the green flag and voila
    • 1:19:37hello comma world so that's my first program and obviously much more
    • 1:19:41user-friendly than typing out the much more cryptic text that we saw on the
    • 1:19:44screen that you too will type out next week but for now we'll just focus on
    • 1:19:48these ideas and in this case a function so what is it just that just happened
    • 1:19:52this purple block here is say that's the function and it seems to take some form
    • 1:19:55of input in the white oval specifically hello comma world well this
    • 1:20:00actually fits the paradigm that we looked at earlier of just inputs and
    • 1:20:04outputs so if i may if you consider what this puzzle piece is doing it actually
    • 1:20:08fits this model the input in this case is going to be hello comma world and
    • 1:20:12white the algorithm is going to be implemented
    • 1:20:15as a function by mit called say and the output of that is going to be some kind
    • 1:20:19of side effect like the cat and the speech bubble are saying hello world so
    • 1:20:23already even that simple drag and drop mimics exactly this relatively simple
    • 1:20:28mental model so let's take things further let's go ahead now and make the
    • 1:20:32program a little more interactive so that it says something like hello david
    • 1:20:35or hello carter or hello to you specifically and for this i'm going to
    • 1:20:39go under sensing and you might have to poke around to find these things the
    • 1:20:43first time around and i've done this a few times so i kind of know where things
    • 1:20:46are and what color there's this function here ask what's your name but that's in
    • 1:20:50white so we can change the question to anything we want and it's going to wait
    • 1:20:54for the human to type in their answer and this function called
    • 1:20:58ask is a little different from the say block which just had this side effect of
    • 1:21:02printing a speech bubble to the screen the ask function is even more powerful
    • 1:21:06in that after it asks the human to type something in this function is going to
    • 1:21:11hand you back what they typed in in the form of what's
    • 1:21:15called a return value which is stored ultimately and by default this thing
    • 1:21:19called answer this little blue oval here called answer is again one of these
    • 1:21:23variables that in math would be called just x or y but in programming we're
    • 1:21:26saying what it does so i'm going to go ahead and do this let me go ahead and
    • 1:21:30drag and drop this block and i want to ask the question before saying anything
    • 1:21:34but you'll notice that scratch is smart and it's going to realize i want to
    • 1:21:36insert something in between and it's just going to move things up and down
    • 1:21:39i'm going to let go and ask the default question what's your name
    • 1:21:42and now if i want to go ahead and say hello david or carter let's just do
    • 1:21:46hello comma because i obviously don't know when i'm writing the program who's
    • 1:21:50going to use it so let me now grab another looks block up here
    • 1:21:55say something again and now let me go back to sensing and now grab the return
    • 1:22:00value represented by this other puzzle piece and let me just drag and drop it
    • 1:22:04here and notice it's the same shape even if it's not quite the same size things
    • 1:22:08will grow or shrink as needed all right so let's now zoom out
    • 1:22:12let me go and stop the old versions because i don't want to say hello world
    • 1:22:15anymore let me hit the green flag and what's my name all right david enter
    • 1:22:21huh all right maybe i just wasn't paying
    • 1:22:23close enough attention let me try it again green flag d-a-v-i-d enter
    • 1:22:28this seems like a bug what's the bug or mistake might you
    • 1:22:33think uh yeah
    • 1:22:39yeah we kind of want to combine them in the same text box and it's you know it's
    • 1:22:44technically a bug because this just looks kind of stupid it's just saying
    • 1:22:46david after i asked for my name i'd like it to say
    • 1:22:49maybe hello then david but it's just blowing past
    • 1:22:53the hello and printing david but let's put our finger on why this is happening
    • 1:22:57you're right for the solution but what's the actual fundamental problem in back
    • 1:23:06perfect i mean computers are really darn fast these days it is saying hello all
    • 1:23:11of us are just too slow in this room to even see it because it's then saying
    • 1:23:14david on the screen so fast as well so there's a couple of solutions here and
    • 1:23:18yours is spot on but just to poke around you'll see the first example of how many
    • 1:23:22ways in programming be it scratch or c or python or anything else that they're
    • 1:23:26going to be to solve problems and will teach you over the course of this weeks
    • 1:23:29sometimes some ways are better relatively than others but rarely is
    • 1:23:33there a best way necessarily because again reasonable people will disagree
    • 1:23:38and what we'll try to teach you over the coming weeks is how to kind of think
    • 1:23:41through those nuances and it's not going to be obvious at first glance but the
    • 1:23:44more programs you write the more feedback you get the more bugs that you
    • 1:23:48introduce the more you'll get your footing with exactly this kind of
    • 1:23:52problem solving so let me try this in a couple of ways up here would be one
    • 1:23:56solution to the problem mit anticipated this kind of issue especially with
    • 1:24:01first-time programmers and i could just use puzzle piece that says say the
    • 1:24:04following for two seconds or one second or whatever then do the same with the
    • 1:24:09next word and it might be kind of a bit of a pause hello one second two seconds
    • 1:24:14david one second two seconds but at least it would look a little more
    • 1:24:17grammatically correct but i can do it a little more elegantly as you propose let
    • 1:24:21me go ahead and throw away one of these blocks and you can just drag and let go
    • 1:24:24and it'll delete itself let me go down to operators
    • 1:24:28because this join block here is the right shape and so even if you're not
    • 1:24:33sure what goes where just focus on the shapes first let me drag this over here
    • 1:24:38and it grew to fill that let me go ahead and say hello comma space
    • 1:24:42and now it could just say by default hello banana but let me go back to
    • 1:24:46let me go back to sensing drag answer and that's going to drag and
    • 1:24:50drop there and so now notice we're sort of stacking or nesting one block on
    • 1:24:55another so that the output of one becomes the input to another but that's
    • 1:24:59okay here let me go ahead and zoom out hit stop
    • 1:25:03and hit play all right what's your name dav id enter
    • 1:25:07and voila now it's presumably as we first intended so thank you
    • 1:25:17thank you no no minus two this time so consider that even with these
    • 1:25:23uh this additional example it still fits the same mental model but in a little
    • 1:25:26more interesting way here's that new function ask something and wait and
    • 1:25:31notice that in this case too there's an input otherwise known henceforth as an
    • 1:25:35argument or a parameter programming speak for just an input in the context
    • 1:25:39of a function and if we use our drawing as before to represent this thing here
    • 1:25:44we'll see that the input now is going to be quote unquote what's your name the
    • 1:25:48algorithm is going to be implemented by way of this new puzzle piece the
    • 1:25:52function called ask and the output of that thing this time is not going to be
    • 1:25:56the cat saying anything yet but rather
    • 1:26:00it's going to be the actual answer so instead of the visual side effect of the
    • 1:26:04speech bubble appearing now nothing visible is happening yet thanks to this
    • 1:26:08function it's sort of handing me back like a scrap of paper with whatever i
    • 1:26:13typed in written on it so i can reuse david one or more times even like i did
    • 1:26:20now what did i then do with that value well consider that
    • 1:26:23with the subsequent function with the subsequent function we had this
    • 1:26:28say block 2 combined with a join so we have this variable called answer we're
    • 1:26:33joining it with that first argument hello so already we see that some
    • 1:26:37functions like join can take not one but two arguments or inputs and that's fine
    • 1:26:42the output of join is presumably going to be hello david or hello carter or
    • 1:26:47whatever the human typed in and that output notice is essentially
    • 1:26:51becoming the input to another function say just because we've kind of stacked
    • 1:26:55things or nested them on top of one another but graphic or but um
    • 1:27:00but methodically it's really the same idea the input now are two things hello
    • 1:27:04comma and the return value from the previous
    • 1:27:08ask function the function now is going to be joined the output is going to be
    • 1:27:12hello david but that hello david output is now going to become the input to
    • 1:27:16another function namely that first block called say and that's then going to have
    • 1:27:21the side effect of printing out hello david on the screen so again as sort of
    • 1:27:25sophisticated as hours as yours as others programs are going to get they
    • 1:27:29really do fit this very simple mental model of inputs and outputs and you just
    • 1:27:32have to learn to recognize the vocabulary and to know what kinds of
    • 1:27:36puzzle pieces or concepts ultimately to apply but you can ultimately really kind
    • 1:27:40of spice these things up let me go back to my program here that just is using
    • 1:27:43the speech bubble at the moment scratches in the side has some pretty
    • 1:27:46fancy interactive features too i click the extensions button in the bottom left
    • 1:27:50corner and let me go ahead and choose the
    • 1:27:53text-to-speech extension this is using a cloud service so if you have an internet
    • 1:27:57connection it can actually talk to the cloud or a third-party service and this
    • 1:28:01one's going to give me a few new green puzzle pieces namely the ability to
    • 1:28:05speak something from my speakers instead of just saying it textually so
    • 1:28:09let me go ahead and drag this and now notice i don't have to interlock them if
    • 1:28:12i'm just kind of playing around and i want to move some things around i just
    • 1:28:15want to use this as like a canvas temporarily let me go ahead and steal
    • 1:28:18the join from here put it there let me throw away the say
    • 1:28:22block by just moving it left and letting go and now let me join this in so i've
    • 1:28:27now changed my program to be a little more interesting so now let me stop the
    • 1:28:31old version let me start the new what's your name type in david and voila
    • 1:28:36hello banana
    • 1:28:40okay minus two for real all right so what i accidentally threw away there
    • 1:28:47uh intentionally for instructional purposes was the actual answer that came
    • 1:28:52back from the ask block that's embarrassing so now if i play
    • 1:28:57this again let's click the green icon what's your name david and now
    • 1:29:02hello david there we go hello david all right thank you
    • 1:29:12okay so we have these functions then in place but what more can we do well what
    • 1:29:16about those conditionals and and loops and other constructs how can we bring
    • 1:29:20these programs to life so it's not just clicking a button and voila something's
    • 1:29:23happening let's go ahead and make this now even more interactive let me go
    • 1:29:26ahead and throw away most of these pieces and let me just spice things up
    • 1:29:29with some more audio under sound i'm going to go to play sound meow until
    • 1:29:33done here we go green flag okay it's a little loud but it did
    • 1:29:39exactly do what it said let's hear it again
    • 1:29:43okay it's kind of an underwhelming program eventually since you'd like to
    • 1:29:46think that the cat would just meow on its own but
    • 1:29:49i have to keep hitting the button well this seems like an opportunity for
    • 1:29:52uh doing something again and again so all right well if i wanted to meow meow
    • 1:29:55meow let me just grab a few of these or you can even right click or control
    • 1:29:59click and you can copy paste even in code here let me play this now
    • 1:30:05all right so now like it's not really emoting happiness in quite the same way
    • 1:30:08it might be hungry or upset so you know let's slow it down let me go to control
    • 1:30:13wait one second in between which might be a little
    • 1:30:16uh less worrisome here we go play
    • 1:30:23okay so
    • 1:30:25if my goal was to make the cat meow three times i dare say this code or
    • 1:30:30algorithm is correct but let's now critique its design is this well
    • 1:30:36designed and if not why not what are your thoughts here uh yeah
    • 1:30:43yeah sure yeah
    • 1:30:49yeah so yeah agreed i could use forever or repeat but let me push a little
    • 1:30:53harder but why like this works i'm kind of done with the assignment what do i
    • 1:30:57what's bad about it yeah there's too much repetition right
    • 1:31:02if i wanted to change the sound that the cat is making to like a different
    • 1:31:05variant of meow or have it bark instead like a dog i could change it from the
    • 1:31:09drop down here apparently but then i'd have to change it here and then i'd have
    • 1:31:12to change it here and got if this were even longer that just gets tedious
    • 1:31:15quickly and you're probably increasing the probability that you're going to
    • 1:31:18screw up and you're going to miss one of the drop downs or something stupid and
    • 1:31:21introduce a bug or if you wanted to change the number of seconds you're
    • 1:31:24waiting you've got to change it in two maybe even more places again you're just
    • 1:31:28creating risk for yourself and potential bugs in the program so i do like the
    • 1:31:32repeat or the forever idea so that i don't repeat myself and indeed what i
    • 1:31:36alluded to being possible copy pasting earlier doesn't mean it's a good thing
    • 1:31:40and in code generally speaking when you start to copy and paste puzzle pieces or
    • 1:31:45text next week you're probably not doing something quite well so let me go ahead
    • 1:31:49and throw away most of these to get rid of the duplication keeping just two
    • 1:31:54of the blocks that i care about let me grab the repeat block for now let me
    • 1:31:58move this inside of the repeat block it's going to grow to fit it let me
    • 1:32:02reconnect all this and change the 10 just to a three and now
    • 1:32:10play so better it's the same thing it's still correct but now i've set the stage
    • 1:32:15to let the cat meow for instance four times by changing one thing 40 times by
    • 1:32:20changing one thing or i could just use the forever block and just walk away and
    • 1:32:23it will meow forever instead if that's your goal that would be better a better
    • 1:32:28design but still correct but you know what now that i have a program that's
    • 1:32:32designed to have a cat meow wow like why i mean
    • 1:32:36mit invented scratch scratches a cat why is there no puzzle piece called meow
    • 1:32:40this feels like a missed opportunity now to be fair they gave us all the building
    • 1:32:44blocks with which we could implement that idea but a principle of programming
    • 1:32:48and really computer science is to leverage what we're going to now start
    • 1:32:51calling abstraction we have step-by-step instructions here the repeat the play
    • 1:32:56and the weight that collectively implements this idea that we humans
    • 1:32:59would call meowing wouldn't it be nice to abstract away those several puzzle
    • 1:33:04pieces into just one that literally just says what it does meow well here's where
    • 1:33:08we can make our own blocks let me go over here to scratch under the pink
    • 1:33:13block category here and let me click make a block
    • 1:33:18and here i see a slightly different interface where i can choose a name for
    • 1:33:21it i'm going to call it meow and i'm going to keep it simple that's it no
    • 1:33:24inputs to meow yet i'm just going to click ok
    • 1:33:27now just going to clean this up a bit here let me drag and drop play sound and
    • 1:33:32wait over here and you know what i'm just going to drag this way down here
    • 1:33:37way down here because now that i'm done implementing meow i'm going to literally
    • 1:33:41abstract it away sort of out of sight out of mind because now notice the top
    • 1:33:45left there is a new pink puzzle piece called meow and so at this point i'd
    • 1:33:50argue it doesn't really matter how meow is implemented frankly i don't know how
    • 1:33:54ask or say was implemented by mit they abstracted those things away for us now
    • 1:33:59i have a brand new puzzle piece that just says what it is and this is now
    • 1:34:03still correct but arguably better design why because it's just more readable to
    • 1:34:08me to you it's more maintainable when you look at your code a year from now
    • 1:34:12for the first time because you're sort of fondly looking back at the very first
    • 1:34:15program you wrote it says what it does the function itself has semantics which
    • 1:34:20conveys what's going on if you really care about how meow is implemented you
    • 1:34:24could scroll down and start to tinker with the underlying implementation
    • 1:34:28details but otherwise you don't need to care anymore now i feel like there's a
    • 1:34:33even additional opportunity here for
    • 1:34:36abstraction and to sort of factor out some of this functionality
    • 1:34:40it's kind of lame that i have this repeat block
    • 1:34:43that lets me call the meow function so to speak use the meow function three
    • 1:34:47times wouldn't it be nice if i could just call the meow function aka use the
    • 1:34:51meow function and pass it in input that tells the puzzle piece how many times i
    • 1:34:56want it to meow well let me go ahead and zoom out and scroll down let me right
    • 1:35:00click or control click on the pink piece here and choose edit or i could just
    • 1:35:04start from scratch no pun intended with a new one and now here rather than just
    • 1:35:08give this thing a name meow let me go ahead and add an input here and i'm
    • 1:35:13going to go ahead and type in for instance n for number of times to meow
    • 1:35:17and just to make this even more user-friendly and self-descriptive i'm
    • 1:35:21going to add a label which has no functional impact it's just an aesthetic
    • 1:35:24and i'm just going to say times just to make it read more like english in this
    • 1:35:28case that tells me what the puzzle piece does and now i'm going to click ok
    • 1:35:32and now i need to refine this a little bit let me go ahead and grab
    • 1:35:37under control a repeat block let me move the play sound and weight
    • 1:35:42into the repeat block i don't want 10 and i also don't want three here what i
    • 1:35:47want now is this n that is my actual variable that scratch is creating for me
    • 1:35:52that represents whatever input the human programmer provides
    • 1:35:56notice it snaps right in place let me connect this and now voila i have an
    • 1:35:59even fancier version of meow that is parameterized it takes input that
    • 1:36:04affects its behavior accordingly now i'm going to scroll back up because out of
    • 1:36:09sight out of mind i just care that meow exists now i can tighten up my code so
    • 1:36:13to speak use even fewer lines to do the same thing by throwing away the repeat
    • 1:36:17block reconnecting this new puzzle piece here
    • 1:36:20that takes an input like three and voila now we're really programming right we've
    • 1:36:24not made any forward progress functionally the thing just meows three
    • 1:36:28times but it's a better design and as you program more and more these are the
    • 1:36:33kinds of instincts you'll start to acquire so that one you can start to
    • 1:36:36take a big assignment a big problem set something for homework even that feels
    • 1:36:40kind of overwhelming at first like oh my god where do i even begin but if you
    • 1:36:44start to identify what are the sub problems of a bigger problem then you
    • 1:36:48can start making progress and i do this to this day where if i have to tackle
    • 1:36:52some programming related project it's so easy to like drag my feet or oh it's
    • 1:36:57going to take forever to start until i just start writing down like a to-do
    • 1:37:00list and i start to modularize the program and say all right well what do i
    • 1:37:04want this thing to do meowing what's that mean i gotta have it say something
    • 1:37:07on the screen all right i need to have it say something on the screen some
    • 1:37:10number of times like literally a mental or written checklist or pseudo code if
    • 1:37:14you will in english on a piece of paper or text file and then you can decide
    • 1:37:18okay the first thing i need to do for homework to solve this real world
    • 1:37:22problem i just need a meow function i need to use a bunch of other code too
    • 1:37:26but i need to create a meow function and boom now you have a piece of the problem
    • 1:37:30solved not unlike we did with the phone book there but in this case we'll have
    • 1:37:35presumably other problems to solve let's zoom in carter here for a question from
    • 1:37:40classmates we have some people asking maybe
    • 1:37:43playfully what happens if we actually don't put a number in there we put some
    • 1:37:46text a really good question what happens if
    • 1:37:48we don't put a number in there let's put
    • 1:37:51some text well when in doubt like try it out and so whether that's in scratch or
    • 1:37:56in c or in python we'll see the best way to get an answer to a question like that
    • 1:37:59is to try so let's go ahead and meow like banana times because it looks like
    • 1:38:04i can type anything i want into this text box let me go ahead and hit play
    • 1:38:10play you can see that scratch is just not
    • 1:38:13cooperating so in this case mit presumably made the decision that if you
    • 1:38:16type in something nonsensical just not going to work because it would be pretty
    • 1:38:19traumatic to like the young user if like their computer rebooted or something bad
    • 1:38:23happened so mit has presumably handled this case for carter and the question
    • 1:38:28that's being asked but ultimately it looks like uh the
    • 1:38:31program is just ignoring me altogether alright so what more can we do let's add
    • 1:38:37a few more uh pieces to the puzzle here let's actually interact with the cat now
    • 1:38:41let me go ahead and now when the green flag is clicked let me go ahead and ask
    • 1:38:45a question using an event here let me go ahead and say if
    • 1:38:50let's see if the cursor i want to do something like
    • 1:38:53implement the notion of petting the cat so if the cursor is
    • 1:38:57petting touching the cat like here something like this it'd be
    • 1:39:00cute if like the cat meows like you're petting a cat so i'm gonna ask the
    • 1:39:04question when the green flag is clicked if let's see i think i need sensing
    • 1:39:08uh so if touching mouse pointer this is way too big but again the shape is fine
    • 1:39:12so there it goes screw to fill and then if it's touching the mouse pointer that
    • 1:39:17is if the cat to whom this script or this program anytime i attach puzzle
    • 1:39:21pieces mit calls them a script or like a program if you will let me go ahead then
    • 1:39:27and choose a sound and say play sound meow until done
    • 1:39:31all right so here it is to be clear when the green flag is clicked ask the
    • 1:39:34question if the cat is touching the mouse pointer then play sound meow
    • 1:39:38here we go play
    • 1:39:43huh all right let's try again play
    • 1:39:49huh i'm worried it's not
    • 1:39:52scratch's fault feels like mine what's the bug here
    • 1:39:58why doesn't this work yeah in beck yeah who just turned
    • 1:40:08yeah the problem is the moment i click that green flag scratch asks the
    • 1:40:12question is the cat touching the mouse pointer and obviously it's not because
    • 1:40:16the cursor was like up there a moment ago and it's not down there it's fine if
    • 1:40:19i move the cursor down there but too late the program already asked the
    • 1:40:23question the answer was no or false or zero however you want to think about it
    • 1:40:27so no sound was played so what might be the solution here b
    • 1:40:31i could move my my cursor quickly but that feels like never going to work out
    • 1:40:35right other solutions here yeah and way back
    • 1:40:41the forever loop so i could indeed use this forever loop because if i want my
    • 1:40:45program to just constantly listen to me well let's literally do something
    • 1:40:48forever or at least forever as long as the program is running until i
    • 1:40:52explicitly hit stop so let me grab that let me go to control let me grab the
    • 1:40:56forever block let me move the if inside of this forever block reconnect this go
    • 1:41:01back up here click the green flag and now nothing's happened yet but let me
    • 1:41:05try moving my cursor now ah so now
    • 1:41:10that's kind of cute so now the cat is actually responding and it's going to
    • 1:41:13keep doing this again and again and so now we have this idea of taking these
    • 1:41:18different ideas these different puzzle pieces assembling them into something
    • 1:41:20more complicated and i could definitely put a name to this i could create a
    • 1:41:25custom block but for now let's just consider what kind of more interactivity
    • 1:41:28we can do let me go ahead and do this it turns out
    • 1:41:31that let me stop this program here throw away the forever block go back into the
    • 1:41:35fun extensions here video sensing is kind of a fun one here and let me go
    • 1:41:39ahead here and grab this you'll notice a camera has turned on
    • 1:41:44and let me go ahead and actually let me do it let me switch machines real
    • 1:41:48quickly here let me go ahead and
    • 1:41:52in just a moment give us a new version of this here
    • 1:41:57by again grabbing a when green flag clicked let me go ahead and click the
    • 1:42:03video sensing and i'm going to rotate the laptop
    • 1:42:05because otherwise we're going to get a little inception thing here where the
    • 1:42:08camera is picking up the camera is up there so i'm going to go
    • 1:42:12reveal to you what's inside the lectern here
    • 1:42:15well we rotate this and now
    • 1:42:19that we have a non-video backdrop i'm going to say this
    • 1:42:23instead of the green flag clicked actually i'm going to say when the video
    • 1:42:26motion is greater than some arbitrary measurement of motion i'm going to go
    • 1:42:31ahead and play sound meow until done
    • 1:42:35and then i'm going to get out of the way so here's the cat and let's put it we'll
    • 1:42:38put them on top on top of there just
    • 1:42:42okay all right and here we go
    • 1:42:48so my hand is moving faster than 50 something or other whatever the unit of
    • 1:42:52measure is and thank you so now we have an even
    • 1:42:57more interactive version but i think if i sort of
    • 1:43:02slowly
    • 1:43:05right i'm not it's completely creepy but i'm not like exceeding
    • 1:43:10the threshold until finally my hand moves as fast as
    • 1:43:14that and so here actually is an opportunity to show you something a
    • 1:43:18former student did let me go ahead here and okay gotta stop this
    • 1:43:23let me go ahead and zoom out of this in just a moment uh if someone would be
    • 1:43:28if someone would be comfortable coming up not only mass but also on camera on
    • 1:43:32the internet thought we'd play one of your former classmates projects here up
    • 1:43:36on stage would anyone like to volunteer here and be up on stage who's that yeah
    • 1:43:40come on down what's your name sahar all right come on down
    • 1:43:45let me get it set up for you here
    • 1:43:58all right let me go ahead and full screen this
    • 1:44:00here so this is a whack-a-mole by one of your
    • 1:44:04firmer predecessors it's going to use the camera focusing on your head which
    • 1:44:08we'll have to position inside of this rectangle and have you ever played the
    • 1:44:11like whack-a-mole game at an arcade okay so for those who haven't like these
    • 1:44:14little moles pop up and with a very fuzzy hammer you sort of hit down you
    • 1:44:18though if you don't mind are going to use your head to do this virtually
    • 1:44:22so let's line up your head with this red rectangle if you could
    • 1:44:27we'll do beginner all right here we go sahar
    • 1:44:32give it a moment okay come a little closer
    • 1:44:36and now hit the moles with your head there we go one point
    • 1:44:42one point
    • 1:44:46nice 15 seconds to go there we go oh yep one point
    • 1:44:56six seconds
    • 1:44:59there we go quick all right a round of applause for sarah
    • 1:45:05thank you
    • 1:45:12so beyond having a little bit of fun here the goal was to demonstrate that by
    • 1:45:16using some fairly simple primitives some basic building blocks but assembling
    • 1:45:20them in a fun way with some music maybe some new costumes or artwork you can
    • 1:45:24really bring programs to life but at the end of the day the only puzzle pieces
    • 1:45:28really involved were ones like the ones i just dragged and dropped and a few
    • 1:45:31more because there were clearly lots of moles so the student probably created a
    • 1:45:35few different sprites not a single cap but at least four different moles they
    • 1:45:39had like some kind of graphic on the screen that showed sahar where to
    • 1:45:41position her head there was some kind of timer maybe a variable that every second
    • 1:45:46was counting down so you can imagine taking what looks like a pretty
    • 1:45:49impressive project at first glance and perhaps overwhelming to solve yourself
    • 1:45:53but just think about what are the basic building blocks and pluck off one piece
    • 1:45:57of the puzzle so to speak at a time and so indeed if we rewind a little bit
    • 1:46:03let me go ahead here and introduce a program that i myself made back in
    • 1:46:07graduate school when scratch was first being developed by mit let me go ahead
    • 1:46:11and open here give me just one second something that i
    • 1:46:15called back in the day oscar time
    • 1:46:18that looks a little something like this if i full screen it and hit play
    • 1:46:28so you'll notice piece of trash is falling i can click on it and drag
    • 1:46:32and as i get close and close to the trash can notice
    • 1:46:36it wants to go in it seems and if i let go
    • 1:46:40one point here comes another
    • 1:46:44i'll do the same two points
    • 1:46:48there's a sneaker falling from the sky so another sprite of some sort
    • 1:46:55i can also get just a little a little lazy and just let them fall into the
    • 1:46:59trash themselves if i want to so you can see it doesn't have to do
    • 1:47:02with my mouse cursor it has to do apparently with the distance here let's
    • 1:47:06listen a little further i think there's uh some additional trash is about to
    • 1:47:10make its appearance presumably there's some kind of like
    • 1:47:12variable that's keeping track of this score
    • 1:47:16okay let's see what the last the last chorus here
    • 1:47:21have is some newspaper okay and thus it continues and uh this
    • 1:47:26song actually goes on and on and on and i do not have fond memories of
    • 1:47:30implementing this and hearing this song for like 10 straight hours but it's a
    • 1:47:34good example to just consider how was this program composed how did i
    • 1:47:38go about implementing it the first time around and let me go ahead and open up
    • 1:47:42some programs now that i wrote in advance just so that we could see how
    • 1:47:45these things are assembled honestly the first thing i probably did
    • 1:47:49was probably to do something a little like this here is just a version of the
    • 1:47:54program where i set out to solve just one problem first of planting a lamp
    • 1:47:59post in the program right i kind of had a vision of what i wanted you know it
    • 1:48:02evolved over time certainly but i knew i went to trash to fall i wanted a cute
    • 1:48:05little oscar the grabs to pop out of the trash can and some other stuff but wow
    • 1:48:09that's a lot to just tackle all at once i'm going to start easy download a
    • 1:48:13picture of a lamp post and then drag and drop it into the stage as a costume and
    • 1:48:18boom that's version one it doesn't functionally do anything i mean
    • 1:48:22literally that's the code that i wrote to do this all i did was use like the
    • 1:48:26backdrops feature and drag and drop and move things around but it got me to
    • 1:48:30version one of my program then what might version two be well i considered
    • 1:48:35what piece of functionality frankly might be the easiest to pluck off next
    • 1:48:39and the trash can that seems like a pretty core piece of functionality it
    • 1:48:42just needs to sit there most of the time so the next thing i probably did
    • 1:48:46was to open up for instance the trash can
    • 1:48:51version here that looks a little something now like this so this time
    • 1:48:54i'll show you what's inside here there is some code but not much notice at
    • 1:48:59bottom right i change the default cat to a picture of a trash can instead but
    • 1:49:03it's the same principle that i can control and then over here i added this
    • 1:49:07code when the green flag is clicked switch the costume to something i
    • 1:49:11arbitrarily called oscar one so i found a couple of different pictures of a
    • 1:49:15trash can one that looks closed one that looks partly open and eventually one
    • 1:49:18that has oscar coming out and i just gave them different names so i said
    • 1:49:22switch to oscar one which is the closed one by default then forever do the
    • 1:49:26following if touching the mouse pointer then switch the costume to oscar 2 l
    • 1:49:32switch to oscar 1. that is to say i just wanted to implement this idea of like
    • 1:49:36the can opening and closing even if it's not exactly what i wanted ultimately i
    • 1:49:40just wanted to make some forward progress
    • 1:49:42so here when i run this program by clicking play notice what happens
    • 1:49:48nothing yet but if i get closer to the trash can
    • 1:49:51it indeed pops open because it's forever listening
    • 1:49:55for whether the sprite the trashcan in this case is
    • 1:49:58touching the mouse pointer and that's it that was version two if you will and if
    • 1:50:03i went in now and added the lamp post and composed the program together now
    • 1:50:07we're starting to make progress right now it would look a little something
    • 1:50:09more like the program i intended ultimately to create what piece did i
    • 1:50:14probably bite off after that well i think what i did is i
    • 1:50:17probably decided let me implement one of the pieces of trash not the shoe and the
    • 1:50:21newspaper all at once let's just get one piece of trash working correctly first
    • 1:50:25and so let me go ahead and open this one and again all these examples will be
    • 1:50:30available on the course's website so you can see all of these examples too it's
    • 1:50:34not terribly long i just implemented in advance so we could flip through kind of
    • 1:50:38quickly here's what i did here on the right hand side i turned my sprite into
    • 1:50:43a piece of trash this time instead of a cat instead of a trash can and i also
    • 1:50:47created with carter's help a second sprite this one a floor it's literally
    • 1:50:52just a black line because i just wanted initially to have some notion of a floor
    • 1:50:56so i could detect if the trash is touching the floor now without seeing
    • 1:51:01the code yet just hearing that description why might i have wanted the
    • 1:51:04second sprite and this black line for a floor
    • 1:51:08with the trash intending to fall from the sky what might i've been thinking
    • 1:51:12like what problem might i be trying to solve yeah
    • 1:51:16yeah you don't want the first sprite to start at the top go through and then
    • 1:51:20boom like you completely lose it like that would not be a very uh useful thing
    • 1:51:25or it would seem to maybe eat up more and more of the computer's memory if the
    • 1:51:28trash is just endlessly falling and i can't grab it uh it might be a little
    • 1:51:31traumatic if you try to get it and you can't pull it back out and you can't fix
    • 1:51:34the program and so i just wanted the thing to stop so how might i have
    • 1:51:37implemented this let's look at the code at left here i have
    • 1:51:41a bit of randomness like i proposed earlier exists there's this blue
    • 1:51:45function called go to x comma y that lets me move a spray to any position up
    • 1:51:51down left right i picked a random x location either here or over here
    • 1:51:55negative 2 40 to positive 4 240 and then a y value of 180 which is the top and
    • 1:52:00this just makes the game more interesting it's kind of lame pretty
    • 1:52:03quickly if the trash always falls from the same spot here's just a little bit
    • 1:52:07of randomness like most any game would have that spices things up and so now if
    • 1:52:11i click the green flag you'll see that it just falls
    • 1:52:14nothing interesting is going to happen but it does stop when it touches the
    • 1:52:18black line because notice what we did here i'm forever asking the question if
    • 1:52:23the distance of the sprite the trash is to the floor is greater than zero
    • 1:52:28that's fine change the y location to neg by negative three so move it down three
    • 1:52:33pixels down three pixels until the distance to the floor is not greater
    • 1:52:37than zero it is zero or even negative at which point it should just stop moving
    • 1:52:42altogether there's other ways we could have implemented this but this felt like
    • 1:52:45a nice clean way that logically just made it make sense and okay now i got
    • 1:52:48some trash falling i got a trash can that opens and closes i have a lamp post
    • 1:52:53now i'm you know a good three steps into the program we're making progress if we
    • 1:52:57consider one or two final pieces something like the dragging of the trash
    • 1:53:02let me go ahead and open up this version too
    • 1:53:05dragging the trash requires a different type of question
    • 1:53:09let me zoom in here here's the piece of trash i only need one sprite no floor
    • 1:53:14here because i just want the human to move it up down left right and the
    • 1:53:17human's not going to physically be able to move it outside of the world and if
    • 1:53:20we zoom in on this code the way we've solved this is as follows we're using
    • 1:53:24that and conjunction that we glimpsed earlier because when the green flag is
    • 1:53:29clicked we're forever asking this question or really these questions
    • 1:53:33plural if the mouse is down and the cat or sorry the trash is
    • 1:53:38touching the mouse pointer that's equivalent logically to clicking on the
    • 1:53:42trash go ahead and move the trash to the mouse pointer so again it takes this
    • 1:53:48very familiar idea that you and i take for granted every day on macs and pcs of
    • 1:53:51clicking and dragging and dropping how is that implemented well mac oh mac os
    • 1:53:56or windows are probably asking a question oh for every icon is the mouse
    • 1:54:00down and is the icon touching the mouse if so
    • 1:54:04go to the location of the mouse forever while the mouse button is clicked down
    • 1:54:09so how does this work in reality now let me go ahead and click on the play
    • 1:54:14nothing happens at first but if i click on it
    • 1:54:17i can move it up down left right it doesn't move thereafter so i now need to
    • 1:54:21kind of combine this idea of dragging with falling but i bet i could just
    • 1:54:25start to use just one single program right now i'm using separate ones to
    • 1:54:29show different ideas but now that's another bite out of the problem and if
    • 1:54:33we do one last one something like the score keeping is interesting because
    • 1:54:37recall that every time we dragged a piece of trash into the can
    • 1:54:40oscar popped out and told us the current score so let me go ahead and find this
    • 1:54:44one oscar variables
    • 1:54:47and let me zoom in on this one and this one is longer because we combined all of
    • 1:54:52these elements so this is the kind of thing that if you looked at at first
    • 1:54:54glance like i have no idea how i would have implemented this from nothing from
    • 1:54:58scratch literally but again if you vision take your vision and componentize
    • 1:55:04it into these smaller bite-sized problems you can take these baby steps
    • 1:55:07so to speak and then solve everything collectively so what's new here is this
    • 1:55:12bottom one forever do the following if
    • 1:55:16the trash is touching oscar the other sprite that we've now added to the
    • 1:55:21program change the score by one this is an orange and indeed if we poke around
    • 1:55:25we'll see that orange is a variable like an x or a y but with a better name
    • 1:55:30changing it means to add one or if it's negative subtract one and then go ahead
    • 1:55:35and have the trash go to pick random what what is this all
    • 1:55:40about well let me let me show you what it's doing and then we can
    • 1:55:43infer backwards let me go ahead and hit play
    • 1:55:46all right it's falling i'm clicking and dragging it i'm moving it over and i'm
    • 1:55:49letting go all right let me do it once more letting
    • 1:55:52go let me stop
    • 1:55:55why do i have this function at the end called go to x and y
    • 1:56:00randomly like what problem is this solving here
    • 1:56:04yeah and way back yeah
    • 1:56:11yeah exactly even though the human perceives this as like a lot of trash
    • 1:56:15falling from the sky it's actually the same piece of trash just kind of being
    • 1:56:18magically moved back to the top as though it's a new one and there too you
    • 1:56:22have this idea of reusable code if you were constantly copying and pasting your
    • 1:56:27pieces of trash and creating 20 pieces of trash 30 pieces of trash just because
    • 1:56:31you want the game to have that many levels probably doing something wrong
    • 1:56:35reuse the code that you wrote reuse the sprites that you wrote and that would
    • 1:56:38give you not just correctness but also a better design well let's take a look
    • 1:56:43at one final set of building blocks that we can compose ultimately into something
    • 1:56:47particularly interactive as follows let me go ahead and zoom out here and let me
    • 1:56:52propose that we implement something like um like some kind of maze-based game and
    • 1:56:56let me go ahead here and open up a couple of examples and i'll open them
    • 1:57:00both in advance and let's go ahead and take a look at
    • 1:57:04maybe uh
    • 1:57:05the maze itself first so let me find one other here
    • 1:57:10all right this one here
    • 1:57:15follow all right so let's take a look at some basic building blocks here
    • 1:57:19with actually creating some movements here
    • 1:57:24all right so let's go into oops i opened two of the same apologies let's go ahead
    • 1:57:28and find this moving
    • 1:57:32there we go that's the one i'm missing so let's start with this one here
    • 1:57:36so i want to implement some maze-based game that looks at first glance like
    • 1:57:40this let me hit play it's not a very fun game yet but here's a little harvard
    • 1:57:44shield a couple of black lines this time vertical instead of horizontal but
    • 1:57:48notice you can't quite see my hand here but i'm using my arrow keys to go down
    • 1:57:52to go up to go left to go right but if i keep going right right right right right
    • 1:57:57right right it's not going anywhere and left left left left left left left left
    • 1:58:01left left left it eventually stops so before we look at the code
    • 1:58:05how might this be working what kinds of scripts collections of
    • 1:58:10puzzle pieces might collectively help us implement
    • 1:58:13this what do you think
    • 1:58:23perfect yeah there's probably some question being asked if touching the
    • 1:58:26black line and it happens to be a couple of sprites each of which is just
    • 1:58:29literally a vertical black line we're probably asking a question like are you
    • 1:58:32touching it or is the distance to it zero or close to zero and if so we just
    • 1:58:38ignore the up down left or rather we ignore the left or the right arrow at
    • 1:58:41that point so that works but otherwise if we're not touching a wall what are we
    • 1:58:45probably doing instead forever here how is the movement working
    • 1:58:50presumably yeah and back are you might are you scratching
    • 1:58:54okay sure let's go home
    • 1:58:59sorry say a little louder
    • 1:59:06exactly it's continually forever looking or listening for the arrow keys up down
    • 1:59:10left right and if the up arrow is pressed we're probably changing the y by
    • 1:59:14a positive value if the down arrow is pressed we're going down by y and left
    • 1:59:19and right accordingly so let's actually take a quick look if i zoom out here and
    • 1:59:23take a look at the code that implements this there's a lot going on at first
    • 1:59:26glance but let's see first of all let me drag some stuff out of the way because
    • 1:59:30it's kind of overwhelming at first glance especially if you for instance
    • 1:59:33were poking around online as for problem set zero just to get inspiration most
    • 1:59:37projects out there are going to look overwhelming at first glance until you
    • 1:59:40start to wrap your mind around what's going on but in this case we've
    • 1:59:44implemented some abstractions from the get-go to sort of explain to ourselves
    • 1:59:47and to anyone else looking at the code what's going on this is that program
    • 1:59:52with the two black lines and the harvard shield going up down left and right it
    • 1:59:56initially puts the shield in the middle zero comma zero it then forever listens
    • 2:00:01for keyboard as i think you were describing and it feels for the walls as
    • 2:00:05i think you were describing now how is that implemented don't know yet these
    • 2:00:09are custom blocks we created as abstractions to kind of hide those
    • 2:00:12implementation details because honestly that's all i need to know right now but
    • 2:00:16as aspiring programmers if we're curious now let's scroll down to the actual
    • 2:00:20implementation of listening for keyboard this is the one on the left and it is a
    • 2:00:25little long but it's a lot of similar structure we're doing the
    • 2:00:29following if the up arrow is pressed then change by y by one go up if the
    • 2:00:34down arrow is pressed then change y by negative one go down
    • 2:00:38right arrow left arrow and that's it so it just assembles all of those ideas
    • 2:00:43combines it into one new block just because it's kind of overwhelming let's
    • 2:00:46just implement it once and tuck it away and if we scroll now over to the feel
    • 2:00:51for walls function this now is asking the question as
    • 2:00:55hypothesized if i'm touching the left wall change my x value by one sort of
    • 2:01:00move away from it a little bit if i'm touching the right wall then move x by
    • 2:01:04negative one to move a little bit away from it so it kind of bounces off the
    • 2:01:08wall just in case it slightly went over we keep the crest within those two walls
    • 2:01:13all right and then a couple of more pieces here to introduce what if we want
    • 2:01:18to actually add some kind of adversary or opponent to this game well let me go
    • 2:01:22ahead to um maybe this one here
    • 2:01:25where the adversary in this game might for instance be designed to be bouncing
    • 2:01:31to stand in your way if this is like a maze and you're trying to get the
    • 2:01:33hardwood shield from the bottom to the top or vice versa uh oh yale is in the
    • 2:01:37way and it seems to be automatically bouncing back and forth here well let me
    • 2:01:42ask someone else i hypothesize how is this working
    • 2:01:45this is an idea you have this is an idea you see let's reverse engineer
    • 2:01:49in your head how it works how might this be working yeah in back
    • 2:02:01yeah so if the yao symbol is touching the left wall or the right wall we
    • 2:02:04somehow have it bounce and indeed we'll see there's a puzzle piece that can do
    • 2:02:07exactly that technically off the edge as we'll see but there's another way we can
    • 2:02:11do this and let's look at the code the way we ourselves can implement exactly
    • 2:02:15that idea bounce is just with a little bit of logic so here's what this version
    • 2:02:19of the program's doing it's moving yale by default to zero zero just to
    • 2:02:23arbitrarily put it somewhere pointing it direction 90 degrees which means just
    • 2:02:27horizontally essentially and then it's forever doing this if touching the left
    • 2:02:32wall or touching the right wall here's our translation of bounce we're just
    • 2:02:37turning 180 degrees and the nice thing about that is we don't have to worry if
    • 2:02:40we're going from right to left or left to right 180 degrees is going to work on
    • 2:02:44both of the walls and that's it after we do that we just move one step
    • 2:02:49one pixel at a time but we're doing it forever so something is happening
    • 2:02:53continually and the yale icon is bouncing back and forth well one final
    • 2:02:57piece here what if now we want a more uh
    • 2:03:02another adversary a more advanced adversary down the road for instance to
    • 2:03:06go and follow us wherever we are such that this time
    • 2:03:11we want the other sprite
    • 2:03:15to not just bounce back and forth but literally follow us
    • 2:03:19no matter where we go how might this be implemented
    • 2:03:24on the screen i bet it's another forever block but what's inside
    • 2:03:33yeah forever point at the location of the harvard shield and go one step
    • 2:03:36toward it this is just going to go on forever if i just give up at least in
    • 2:03:40this version notice it's about it's sort of twitching
    • 2:03:43back and forth because it goes one pixel then one pixel then one pixel it's sort
    • 2:03:46of in a frantic state here we haven't finished the game yet but if we see
    • 2:03:49inside we'll see exactly that it didn't take much to implement this simple idea
    • 2:03:54go to a random position just to make it kind of fair initially then forever
    • 2:03:58point towards harvard which is what we call the harvard crest spray move one
    • 2:04:02step suppose we now wanted to make a more advanced level what's a minor
    • 2:04:06change i could logically make to this code just to make mit even better at
    • 2:04:10this
    • 2:04:13all right change the number of steps to two so let's try that so now they got
    • 2:04:16twice as fast let me go ahead and just get this out of the way oops let me
    • 2:04:21make it a fair fight green flag
    • 2:04:24all right i unfortunately am still moving one pixel at a time so this isn't
    • 2:04:28going to end well it caught up to me and if we're really aggressive
    • 2:04:32and do something like 20 steps at a time click the green flag jesus okay so
    • 2:04:39that's how you might then make your levels progressively harder and harder
    • 2:04:44so it's not an accident that we chose these particular examples here involving
    • 2:04:47these particular schools because we have one more demonstration we thought we'd
    • 2:04:50introduce today if we could get one other volunteer to come up and play what
    • 2:04:56was called by one of your predecessors ivy's hardest game let's see hugh in the
    • 2:05:01middle do you want to come on up what's your name
    • 2:05:04say again come a little closer actually sorry hard to hear here
    • 2:05:10all right a round of applause here if we could too
    • 2:05:19okay sorry what's your name
    • 2:05:22celeste come on over nice to meet you too so
    • 2:05:25here we have on this other screen ivy's hardest game written by a former cs50
    • 2:05:30student i think you'll see that it combines these same principles the maze
    • 2:05:34is clearly the more advanced the goal at hand is to initially move the harvard
    • 2:05:38crest to the sprite all the way on the right so that you catch up to him in
    • 2:05:42this case but you'll see that there's different levels and different
    • 2:05:46levels of sophistication so if you're up for it you can use just these arrow keys
    • 2:05:50up down left right you'll be controlling the harvard sprite and if we could raise
    • 2:05:54the volume just a little bit we'll make this our final example
    • 2:05:58there we go clicking the green flag
    • 2:06:28now
    • 2:06:35keep going
    • 2:06:38i told you homeboys
    • 2:07:08there you go
    • 2:07:19is
    • 2:07:32second to last level
    • 2:07:41keep going keep going yes
    • 2:07:46you're almost there break it down there we go
    • 2:07:53one more
    • 2:07:58here we go
    • 2:08:16just for a minute
    • 2:08:29all right that's it for cs50 welcome to the class we'll see you next time
    • 2:08:54you
  • CS50.ai
Shortcuts
Before using a shortcut, click at least once on the video itself (to give it "focus") after closing this window.
Play/Pause spacebar or k
Rewind 10 seconds left arrow or j
Fast forward 10 seconds right arrow or l
Previous frame (while paused) ,
Next frame (while paused) .
Decrease playback rate <
Increase playback rate >
Toggle captions on/off c
Toggle mute m
Toggle full screen f or double-click video