>> [MUSIC PLAYING]
>> DAVID J. MALAN: This is CS50.
This is the end of week nine, and we have so much fun stuff to do today.
And in fact, not only are we going to demonstrate some three dimensional
technology for you in virtual reality with a very special guest,
we're also shooting today's lecture in virtual reality.
In three dimensions with a camera here, with a set of cameras here.
And so just so that we can approximate the experience of having one of you
come up on stage, could one of you actually come up on stage?
Standing in-- let's go right here.
I think I saw your hand among the first.
>> Come on up.
What's your-- [AUDIO OUT].
Arianna.
Come on up and-- [AUDIO OUT] What I'm going to do is you come on up
is throw onto our screen over here-- what the headset
that Colton has ready for you.
Nice to see you.
And if you want to go ahead and put this on.
Colton, what do we have that Arianna is going to be putting before her eyes?
>> COLTON: You're going to be watching a movie trailer.
>> DAVID J. MALAN: A movie trailer.
And as I recall, this is a fairly scary movie trailer.
ARIANNA: Really?
DAVID J. MALAN: For at least one of us in the room.
No one saw that.
All right.
And in a moment it should be projecting onto Colton's laptop an
in turn the screen here.
Let me go over here to that input, and here's what Arianna seeing.
So she sees it as one image, whereas we see it, of course, in two.
Left eye and right eye.
Let me go ahead and I'll toss it on the overhead too,
even though it's a little bright.
>> In this virtual reality there's a big play button in the middle of the room.
>> COLTON: Make sure it's highlighted.
Hit the play button.
>> DAVID J. MALAN: There you go.
>> COLTON: [INAUDIBLE].
DAVID J. MALAN: OK, we're hitting Play.
It's very scary.
Very scary movie.
Here we go.
All right.
Loading.
Loading the very scary room.
COLTON: So now you should just be in a dark room.
DAVID J. MALAN: Now she is in a black room,
which is scary and very realistic.
There we go.
All right.
Go ahead and look around.
The wi-fi's being a little slow for us here.
Oh, that's scary.
Who's she?
Very scary menu keeps coming up too,
>> [LAUGHTER]
>> Notice that it certainly figures out where she's going.
Time is passing.
Something very creepy.
Oh, my goodness.
Blood in the shape of the movie's logo.
And I think if we wait long enough, Arianna, something
will start crawling toward you.
You see it yet?
ARIANNA: Yeah.
DAVID J. MALAN: All right.
There we go.
That can't be good.
OK, careful.
Now you're going to-- [INAUDIBLE] a big round of applause.
Sorry.
>> [LAUGHTER]
>> It's me.
It's me.
OK, thank you to Arianna for coming up.
>> [APPLAUSE]
>> We'll show you--
>> [APPLAUSE]
We'll see if we can share some of that footage with you.
So let's take a quick look at a couple of announcements, a couple of examples,
and then we'll turn the stage over to our friend, Professor Peter Manuelian,
who's going to talk to us today about the use of technology
and the application of computer science to the world of archaeology
in just a bit.
So first, doughnuts are available today at 4:00 PM
if you are hungry for that, and advice about concentrating in or doing
a secondary in computer science.
Maxwell Dworkin is just down the road at 33 Oxford Street.
Do feel free to join a bunch of the staff and CS concentrators
and faculty for some tips.
>> So recall that last time we left off with a somewhat technical topics
but that syntactically are pretty easily implemented.
One was an anonymous function, and the name kind of says what it means.
But just in relative layman's terms, what is an anonymous function?
>> [LOUD NOISE]
>> That was scary.
Yes?
>> AUDIENCE: [INAUDIBLE]
DAVID J. MALAN: Yeah.
It literally is that.
It's a function to which you don't give a name.
And that seems a little weird because if it has no name, how do you call it?
How do you call a function that has no name?
Yeah?
>> AUDIENCE: [INAUDIBLE]
DAVID J. MALAN: Bind it to an event.
So this is a fancy way of saying you tell the [? web ?] browser in advance
that when something interesting happens, call this function.
And in fact, there's another buzz word for this, which is simply a callback.
So indeed a callback function is a function
that gets called when some data is ready or when some event has happened.
And so in particular, when we did something
like an [? oncommit ?] handler or an onclick handler,
you might actually want some function to get called when that event happens.
And it doesn't matter what its name so long as you
told the browser in advance what function to call
and how that code should look, which we'll see again in a moment.
>> And we'll also now take a look at one other topic, Ajax,
which once upon a time stood for Asynchronous JavaScript and XML
but now it stands for really just a more general technology or technique whereby
a browser, by way of JavaScript, can request more data from a server
even after the web page has initially loaded.
So you're not using Ajax in pset seven.
Every time you click a button or hit Enter or fill out a form
and then send it to the server, the whole page is refreshing,
the URL is probably changing, and some dynamic output is happening.
In problem set eight we'll use JavaScript and a bit of Ajax
as well so that things happen much more seamlessly and a lot less deliberately
step by step by step.
>> But first, let's take a look at JavaScript
by way of this super simple example.
This is just a web page where I've got a big div in the middle
of the page and really big text.
And with what language did I probably make the text really big?
HTML, but in CSS.
CSS properties allow me to specify really big.
I could specify colors or any number of other things.
>> But back in the day-- actually, around the time I
was making those terrific personal websites I showed you on Monday--
there was actually an HTML tag called the blink tag, whose purpose in life
was to do exactly that.
If you do open tag blink, some text, close tag blink,
the text would just blink on the screen.
So web pages in the '90s did a lot of this.
Literally.
>> Worse yet, there was a marquise tag whereby your text would just
scroll across the screen As though that was a good idea as well.
So amazingly, one of the few things that browser manufacturers like Microsoft
and Mozilla and Google have actually agreed on
is to kill off tags like that.
So they don't then exist any longer, but if we're really insistent
we could probably re-implement this.
>> So let me show you the bottom of a file here called blink.html.
And there's obviously some HTML here, and it's a pretty simple web page.
Indeed, there's that div I mentioned.
I've given it a unique identifier so that either in CSS or in JavaScript
I can uniquely refer to it so that I'm not confusing it with any other divs
if there were actually any.
And now notice at the top I've got a style tag in the head of the page,
though I could certainly factor that out and put it in a styles.css file
as you have in pset seven.
>> And this just why it's big.
It's 96 point, it's got a big margin around it which pushes it down
toward the middle, and it's aligned in the center.
But now, I've also got a script tag up top.
And even though some of the syntax is new,
let's take a look at how we could re-implement this atrocity
from years past known as the blink tag.
So here's a function, and I have named it.
So it's not an anonymous function in this case,
but it does have a name blank.
Takes no arguments.
Now this first line here is the first interesting one.
And what is this return to me?
On the left hand side it gives me a variable called div,
and what is that div ultimately?
How would you describe this to a somewhat technical roommate?
What is that line of code doing?
What's that line of code doing?
So it declares a variable on the left called div,
and then what is the right hand side of the expression return?
What's a good way to think about it?
>> AUDIENCE: [INAUDIBLE]
>> DAVID J. MALAN: Say again?
>> AUDIENCE: The value stored in greeting.
>> DAVID J. MALAN: The value stored in greeting.
Not quite.
So if you think of the HTML page as a tree in memory,
the so-called dom or document object model
whereby you just have a whole bunch-- like a family tree draped down
from some root node.
The element that has an ID is literally referring to the HTML element
down here that has an ID of greeting.
So if you think of this div tag as being a node in a tree, what
get element by ID is doing quite simply is returning to you,
if we were using C, a pointer to that node in the tree.
A pointer to that node in your data structure.
We don't have pointers anymore.
Now we just think of things more higher level, like variables,
but stored in div right now with some kind of reference or pointer
to that node in the tree.
Now this is interesting because that's the node
that we want to make blink on or off.
On or off.
And we have a technique for changing the style of a tag,
of course, which is CSS.
And what's nice today is that we see that there's
this bridge between JavaScript and CSS whereby
you can use JavaScript to change the CSS properties of existing elements.
You don't have to hard code all of your CSS in advance.
You can actually dynamically change the aesthetics of your page as follows.
>> Notice here, and you might not have ever seen this property before,
but it turns out in CSS there's a property called visibility.
And for reasons that have never been clear to me, the opposite of hidden
is visible and the opposite of visible is
hidden, as opposed to it being invisible but so be it.
But what I'm doing here is I'm checking.
If div.style.visibility-- so we've seen this dot notation a lot,
and it's common in JavaScript because objects like these nodes that we're
talking about have properties.
And those properties might have properties inside of them.
So relate it to data.
>> So if that div style has a visibility property that equals hidden,
what do I want to do if I want to make this thing blink
and that div is currently hidden?
I want to make it visible.
Else, if it's not hidden-- ergo it's visible-- I want to make it hidden.
So these six or so lines of code here-- eight lines of code--
simply have the effect of making something hidden or visible.
Hidden or visible.
But just once because there's no kind of loop here,
so it doesn't feel like it's blinking quite yet.
>> But down here, notice I've got this line.
It turns out that built into browsers, and JavaScript specifically, there
is a global variable called window.
And we've seen another global variable called
document, which we used a moment ago.
There's another one called window that generally refers not
to the contents of the page but just the general idea of the whole browser
window.
And window.setInterval, you can kind of guess what this means.
It's going to do something maybe cyclically every some number
of milliseconds apparently, according to my comment?
>> So in English I'm saying, blink every 500 milliseconds.
But a little more technically, what is this highlighted line of code
telling the browser to do?
It's making it blink, but why?
What's it doing technically?
Yeah?
No?
[? Put that instead. ?] Yeah?
>> AUDIENCE: [INAUDIBLE]
DAVID J. MALAN: Exactly.
It's calling a function every 500 milliseconds, or half a second,
and that function is called blink.
And so recall on Monday that we said that just like variables, functions,
because they have names or symbols associated with them,
you can pass those around just like their pieces of data as well.
So here we're just saying, hey, browser window.
Set the following interval.
Every 500 milliseconds call that function.
And the browser doesn't even have to care what the function is
so long as it's defined somewhere.
>> So the net effect, if I go ahead and save this and go back to this page
and reload now that I've enabled that function,
is that this is literally what a lot of websites looked like in the 1990s.
You reach here.
Hello.
Welcome to my creepy web page, as I recall, it was on Monday.
So the goal here is not to re-implement the blink tag
but to show this convergence between JavaScript, a language, and CSS,
this sort of stylization.
But now let's do something a little more interesting.
>> In problem set seven, you have already been
or will soon be implementing a quote page, whereby you can type in a stock
symbol, hit Submit, and then the page reloads
and you see a share of Google costs such and such dollars or something
like that.
And that's not Ajax.
That's just HTTP.
A form submits from one page to another, and you get back a response.
But what if I wanted a slightly more elegant approach?
Let me go ahead and type in goog and click Get Quote.
Now, this is not the prettiest user interface to be sure,
but notice that just like on Monday, I got this pop up.
But the contents of that pop up, though wordy, tell me
that the price is apparently $731.37.
Not all that elegant, but let's see a slightly better example.
>> Let me now go to version one of this, if I may.
Version one looks like this.
Same very ugly form.
But if I type in goog here-- so similarly,
it's just giving me this prompt.
But we can make it even prettier.
So this is a little more interesting.
I clearly didn't put all that much effort into the aesthetics,
but this is much more akin now to what Gmail would do or Facebook would do.
You don't get some stupid pop up.
Instead, the contents of the existing page change like that.
>> So what's going on?
If I go ahead and reload this page, the contents go back to the default
and I can do something like FB for Facebook, Get Quote,
and it looks that up as well.
So what's going on?
Well, let me go into Ajax0.html and first look at the HTML part.
So notice, like Monday, I'm using the on submit handler, or on submit
event handler, but we've seen other ways of doing this.
So we're just keeping things simple for now.
And on submit is telling me, call the quote function then return false.
And just a sanity check.
Why return false?
What does that prevent?
Yeah?
>> AUDIENCE: [INAUDIBLE]
>> DAVID J. MALAN: The whole page from reloading,
which would put us back into pset seven territory, which is not the goal.
We're trying to make things a little better, a little more seamless
for the user.
So now I just have HTML, and it's kind of long.
It wraps over the edge of the screen there,
but I've got an input whose type, if I keep scrolling, is text.
But what's important is that it has a unique ID of symbol,
and then I have a Submit button.
So this is the very first version.
>> But if I now scroll up-- let's take a look at the quote function.
It's kind of neat that now, if you understand or are reasonably
comfortable with HTTP from pset six or prior,
all that we need to do really intuitively
is create a URL that contains the symbol we want to look up.
>> So it turns out that I wrote in advance--
and we won't look at the code for this, but I wrote in advance a file called
quote.php that works as follows.
Let me go back into my file directory.
It's not going to work if I just click on it, but if I go up to my URL here
and go to quote.php and I do question mark symbol equals goog
and then hit Enter, notice that I get just this back.
It's not a web page.
It's just text.
But it's text that's formatted in an interesting way.
What format is this text, if you recall?
JSON.
JavaScript Object Notation.
And so it's just a bunch of key value pairs.
It's a little hard to read when it's a long line,
but I see a bunch of quotes and colons and curly braces,
and that's just the general structure of associating one piece of data
with one particular value.
>> So if I now have a file called quote.php that clearly, much like pset six,
supports very simple HTTP get requests, what if in JavaScript I
use my budding skills with this new language,
construct a URL that looks exactly like that,
and behind the scenes send a request from my browser
to the server to get that JSON data?
And that's exactly what we do here.
>> So here's my quote function.
I'm declaring a variable called URL.
On the right hand side I'm using single quotes,
but you could use double quotes as well.
Notice I'm doing quote, unquote-- that's no pun intended--
quote.php?symbol equals.
And then, even if you're not quite familiar with this syntax,
and indeed most of you wouldn't be-- this
is using that special library called jQuery
that you'll see more on in online resources,
perhaps in the final project.
What am I concatenating onto question mark symbol equals apparently?
Just generally speaking.
>> AUDIENCE: The symbol.
>> DAVID J. MALAN: Yeah, the symbol.
Whatever the human typed into the form.
That is apparently the code in JavaScript for going into my HTML page,
finding whatever element, whatever tag, has a unique ID of symbol,
and this hashtag in HTML just means the unique ID.
So whatever element has a unique ID of symbol that means go get it.
And .val is a jQuery function, it turns out,
that just says give me the value of that field.
>> And then finally, and the syntax is a little funky--
so it turns out that jQuery, this library to which I keep referring,
literally has a special global variable called jQuery.
But it turns out in JavaScript, somewhat confusingly,
the dollar sign is not a special symbol, whereas in PHP it's a special symbol.
If you have something with a dollar sign it means it's a variable.
In JavaScript, a dollar sign is just like A, B, C, or Z.
It's just a letter of the alphabet that you can use in variables.
So the people who invented jQuery just thought
it would be kind of cool to lay claim to a global variable called dollar sign,
but it just is an alias for jQuery.
>> So $.getJSON is calling a function that comes with this popular library,
whose purpose in life is to go get JSON data, issue an HTTP request,
and get back the response.
The first argument is apparently the URL from which you want to get that data,
and the second argument, just to tie things together, is apparently what?
Generally speaking?
What kind of function is this, if you will?
Yeah, an anonymous function because there's no name.
And using another piece of jargon from today, it's also a call back.
>> And the purpose here is that the web can be slow,
and just because you ask JavaScript and the browser
to go get you some data from a website via HTTP get,
it could take half a second, it could take five seconds
if your internet connection is really slow.
And you don't want the whole web page to just hang
and some stupid spinning beach ball to come up,
blocking the user from doing absolutely everything else.
>> And so the way JavaScript works is that it's generally asynchronous,
whereby you can do multiple things at a time
so long as you tell the browser, hey, browser, when
you are done getting this JSON data.
Even if it takes five seconds, call this function.
Don't make the user wait.
Don't hang the browser until this happens.
Rather, call me back, almost like a phone call,
when you're ready and have the data for me.
Now what does that function do?
It's super trivial.
All it does is it displays the data that comes back,
and specifically the price field inside of an alert.
That's all.
And so that's why, to be clear, when we go to this example, which
was [? Ajax0 ?] and I typed in goog and hit Enter, I got this simple, simple
little prompt.
Now it turns out we can make this better.
And our final example here changes the quote function as follows.
It's almost identical, but this was that new and fancy version
whereby I had a placeholder.
This was version two.
And instead of just printing some silly prompt like that,
I instead changed my actual web page.
And to be clear, let me go into Chrome's Inspector.
Let me go down to the bottom here.
And notice, if I zoom in on this bottom part, this is the HTML of the page
currently.
And notice that right now I've got a span, which is like a div
but it's a thinner div, if you will.
A span whose ID is priced that literally says, to be determined.
>> If I go into this form, type FB, and click Get Quotes,
watch the bottom of the page.
The actual HTML of the page changes.
So this is like when you get a Facebook message and it suddenly pops up,
or a new Gmail row in your inbox.
That's literally what's happening.
Someone wrote JavaScript code at Facebook or Google
that actually changes the web page that you have already
downloaded to reflect that new content.
>> And if you really want to be fancy and understand this, noticed what happened.
Let me reload again and clear all of this.
And now notice I'm on Chrome's Network tab.
If I do FB here and click Get Quote, notice just ala pset six,
you can see the HTTP request, and you can see that my browser requested
quote.php?symbol equals something.
And then if I scroll down here, if you really want to geek out,
you can see all of the HTTP headers that my server, Cloud 9, has returned to me.
It's more headers than you guys were spitting out for pset six
because we kept it simple, but in there is a whole bunch of information,
among which is that 200 OK message.
And below that's going to be the JSON.
And so all we needed to do to make this happen is tweak my quote function ever
so slightly.
>> Instead of calling the pretty lame alert function, I simply do this.
Which admittedly, syntactically it looks frightening at first glance
because there's so much new syntax going on.
But the ideas are pretty simple.
This means, hey, browser, go call the special jQuery function
that returns to me a pointer to or a reference to the node in my tree
whose unique identifier is price.
That's that placeholder.
Then it turns out that jQuery comes with a special function called .html,
whereby if you want to update the contents of a node in your tree,
you literally just grab that node, you call the HTML function,
and you hand it whatever you want.
>> So if I wanted to be sort of silly here I
could do something like ha ha, nothing here, save it, go back over here,
and now if I click Get Quote up top left, you just get something-- whoops.
If I reload the page and search for Facebook,
you get something stupid like that.
But I'm dynamically changing the content [INAUDIBLE].
Any questions?
>> SPEAKER 1: Stop touching your mic.
>> DAVID J. MALAN: The team is telling me to stop
touching my mic which keeps falling out of my ear,
so it's just as well that we're out of material here
and we have time now for our special guest.
Yes?
>> AUDIENCE: If there's an opportunity to change the actual HTML of the page,
does that make it vulnerable to an exploit?
DAVID J. MALAN: If there's not-- say that again?
AUDIENCE: Since there's an opportunity to change the actual HTML of the page,
does it make it vulnerable to an exploit?
>> DAVID J. MALAN: Oh, yes.
So because you are able to change the HTML of a page,
is it vulnerable potentially to an exploit?
Potentially yes.
If you're not sanitizing your inputs or [? scaping ?] them in the right way,
absolutely could you end up triggering theft of cookies, which is actually
a good segue to what we'll be talking about on Monday,
which is security topics.
And indeed, that's going to be one of the exploits we discuss.
Tricking a browser into injecting something malicious
into its source code.
Any other questions?
>> All right.
Well, I'm so excited today.
So I did my PhD in computer science, but about
halfway through my degree in computer science
my eye started wondering academically and so I
started taking-- I think as an auditor or non-credit status-- anthropology
1010.
It was me the grad student and a whole bunch of freshman and sophomores here.
But it was amazing class ever, and to this day
I continue to subscribe to archaeology magazine, which comes once a month,
and sort of introduces me to what's going on in the world of yesteryear.
>> And we're so happy today to have our friend, Professor Peter Manuelian,
to talk to us about the convergence of computer science and the application
thereof to this amazing field of archaeology.
Professor Manuelian.
>> [APPLAUSE]
>> PETER MANUELIAN: Thank you, sir.
Great privilege to be on this stage with the maestro.
Thanks so much for having me here today.
I'm going to try to show a little bit of a real world application of some
of the skills that you've already been amassing this semester
and to try to get you excited about the human past as well.
So we're going to go to my favorite place,
outside of Harvard Square, of course, which is the Giza Pyramids, just
west of modern Cairo.
And if you're wondering what BCE stands for, it's before computer era.
>> [LAUGHTER]
>> So three pyramids built by three famous pharaohs of Egypt's Old Kingdom
or fourth dynasty.
Think about 2,500 or so.
But what's all around them are hundreds and hundreds of tombs as well.
So think of Giza as two amazing data sets.
One data set is what's still there.
These incredible tombs surrounding the pyramids that
have these amazing decorations inside.
There are statues, they are inscriptions-- frozen
moments, if you will, of just about every aspect of life in ancient Egypt.
So anything you want to study come here.
It's not just a cemetery full of dead people.
It's a document on how the Egyptians lived, and as well as how they died.
So that's the data set out at the site.
>> The other one, of course, is everything that came from Giza.
Things you'll see in the Peabody Museum, things
you'll see in the Museum of Fine Arts, and in museums and collections
all over the world.
It's mummies, it's statues, it's steely, it's jewelry,
it's objects of daily life.
All kinds of cool stuff.
>> So what makes this place so special is that right here at Harvard University
this is the major excavation that worked at the site of the Giza Pyramids.
And this is the guy who did it, my predecessor George Reisner.
1867 to 1942.
Died at the pyramids in the middle of the Second World War.
And if you're wondering where this photo was taken,
this class photograph, at the end of class leave by that door, go out there,
and yes, you'll see right outside this theater,
right against the wall-- that's where class photos were taken in that day.
>> So an amazing individual, one of the greatest archaeologists of his time,
way ahead of his time in many ways, and this is what's called Harvard Camp.
It was a collection of simple mud brick huts to the west of the pyramids.
And in the courtyard at any particular day you would see amazing things,
and people came to discuss with the master about all sorts of topics.
Here are pieces of giant statues.
You can see those in the Museum of Fine Arts today.
And down below is our computer model of Harvard Camp.
That's something you might want to get involved with.
If you're searching for a final project, some kind of simulation or website
introduction to Harvard Camp, the dig site.
>> By the time George Reisner was done, the Harvard University Boston Museum
of Fine Arts expedition worked at 23 different sites.
All the ones that you see in red here.
So 40 years, 23 sites.
He only came back here to teach about three or four semesters
over that whole time, so you know what he enjoyed doing the most.
>> What happens with the massive archaeological backlog
that a responsible expedition produces?
So 45,000 glass plate dig photos, diaries,
register books, maps, plans, small drawings, big drawings,
thousands of pages of manuscripts-- some published books, some unpublished.
All this stuff.
And this is where the computer and the databases and the websites come in.
How do you organize all of this?
Try to get a travel grant to Boston and in a couple of days study this stuff.
You will be overwhelmed.
>> So this is a project that I started way back in 2000,
and the team here at Harvard has been working on it ever
since the last several years.
First at the MFA, the museum, and now at Harvard.
What we had to do is look at Giza as one big Manhattan.
One gridded site.
And thanks to Reisner, he numbered all the tombs
in a wonderfully systematic manner.
So we're looking from the air down at the three pyramids here,
and we realize that it's not even enough just to master this one expedition.
The areas you see in red are the Harvard expedition sites,
but the German Austrian expedition worked
there-- those are the blue areas-- and the Egyptians dug as well.
>> So holistically, trying to understand an ancient site in all of its functions
and all of its chronological development,
you've got to take the whole place.
So that sent me on a worldwide tour with all the colleagues in Egyptology
and the museums at all these places and gathering
all of their diaries, their photographs, their documents, their notes--
gathering it at all here electronically at Harvard.
And the next step is.
How do we put this all together?
>> This is sort of our site map, and right in the middle
is an individual tomb known in Arabic as a [? mastaba, ?]
this sort of bench like shape.
And so for every tomb, you've got x number of this type of data.
So many old photographs, so many objects registered in the register books.
Diary entries that mention that tomb.
Objects found, drawings made, plans and sections,
published books on published books, and more recently, visualization.
3D computer models.
>> And there's just a sample of an aggregation
of a search for a particular monument.
You see all the different things that are gathered together.
1,012 finds, 45 diary pages that mention this particular temple.
Ancient people, modern people, publications, the whole bit.
Downloadable PDFs all gathered together from a SQL database.
Why is this important?
Just take the comparison of these two images then and now.
This is happening at Giza, this is happening all over Egypt,
and more dramatically, happening all over the Middle East.
And sometimes not by accident, not the elements of time,
but obviously intentional damage.
>> Let me ask you, which of these two things
you're going to be able to read in a couple of years?
Which one of these will survive?
Which one will have a device that can access it in a couple of years time?
So I think the Egyptians got something right here.
Put it on stone.
We can still translate the hieroglyphs there.
I'll bet you anything this hard drive is going
to fail sometime in the near future.
So maybe they understood something that we didn't.
So that's why we've got to preserve this stuff.
>> And from all the databases, all the aggregations
and the websites and things, the natural next step, of course, is visualization.
Put you at the site.
Give you access in 3D to some of these tombs and temples that you might not
be able to see otherwise.
It's a research tool, it's a teaching tool, it's edutourism,
it's even edutainment.
And a lot of this goes back to the really simple stuff.
You see that old, wooden stereo viewer in 3D photography?
Just what we were seeing a little bit before.
It's the same principle, right?
We're just putting it together with things
like GoPro cameras over here and Gear VR and Oculus Rift headsets,
and anything is possible now.
>> So we're moving from teaching in special customized classrooms-- visualization
center labs.
We have one above the Geological Lecture Hall.
Now we're trying to bring it to the people.
Get it into these headsets.
So imagine all of you or everyone watching live
or everyone in HarvardX donning one of these headsets
and we're all standing together in front of the Sphinx,
listening to someone like me drone on all about it.
And we're all there in real time able to look around in 360 degrees.
You can kill the audio on that.
We don't need it on the model.
I'm going to show you how we can go from visualization and a visualized world
to a real physical world too.
This is a find that George Reisner made at Giza right
beside the Great Pyramid in 1925.
And way down at the bottom of 100 foot deep burial shaft
there was an unfinished room with millions of bits of tiny fragments.
All the wood had decayed.
It was a real mass.
So the photos you're seeing show the original condition of that tomb,
and now we're going into our 3D computer model.
And we're able, thanks to meticulous documentation,
to put that whole tomb's contents together.
>> And you see all this furniture-- that curtain box and chairs and tables.
I want you to focus on that chair that has the falcon arms there.
So this material was actually reconstructed in modern wood,
and it's on display in the Cairo Museum and used
to be on display in the Boston MFA, although they've taken it off view
to use that gallery for something else.
Nobody, however, has been able to reconstruct
that fancy chair with the falcon arms.
Thanks to this computer model and this simulation,
though, we can actually start to do that.
>> So in the upper left you see the reproductions
of some of that furniture.
And it turns out to belong to a queen.
Not any queen, but the mother of the king who built the Great Pyramid--
Queen Hetepheres.
Big, mysterious burial.
All this stuff deteriorated.
What do we make of it?
But we were able to take our computer model
and reproduce this chair with the beautiful falcon arms.
So now you're seeing this rotating 3D of the model.
Then we decided to go to the real world.
>> We looked at photographs of all the teensy, tinsy fragments.
The gold, the gilding, the [INAUDIBLE] inlay tiles, the desecrated wood.
All of this is on trays in the basement of the Cairo Museum.
And from there, we were able to move to a shop bot, which
is a 3D milling machine or router.
And you can see a simple [? Mac ?] with a 3D model is driving the drill here,
and it's actually carving those falcon arms
that will go on the sides of the chair.
So this has been an exciting project put together by my colleagues,
Russ [? Gant ?] and [? Dave Hopkins ?] of the Giza Project.
And we're almost done, and we hope to have this on display
in a couple of months in the Harvard Semitic Museum,
which I have the privilege to direct.
>> So from that arm, there you go.
You see some of the pieces already coming together.
For those of you who have been across the river,
the Harvard Ceramics Center has donated their time,
and we've been baking [INAUDIBLE] tiles in these wonderful plaster molds.
We just ordered the gold today because the whole thing
has to be wrapped and gilded.
And eventually, we hope to put this on display.
>> From there, the question is holistically again, how do we treat the entire site?
How do we build computer models of all of Giza?
Not just one tomb here or there, but the whole thing.
The pyramids, the landscape, the [INAUDIBLE] tombs, the royal temples.
And I'm part of a project that just got permission
from the Egyptian authorities about a week ago,
and we'll start this month doing all kinds
of pretty interesting experiments.
So take a look at this video.
Maybe the music could come up a little bit just to add a little bit of drama.
Just a minute or so.
>> So these are some of the tools we'll be using to explore inside the pyramids
and survey the entire site.
>> [MUSIC PLAYING]
This is my favorite part.
It's right out of The Terminator with the drones hovering over the place
and scanning the entire landscape.
Something I've been dreaming of doing for many, many years.
>> [MUSIC PLAYING]
>> So with that kind of comprehensive accessible to the whole place,
everything is possible.
And our ultimate vision is to put it all together so you have a navigable,
immersive, 3D model of the whole site.
You can dive down burial shafts, you can go into tombs, click on walls.
The 100-year-old photography pops up.
You can read the diary entries, you can virtually
replace statues and things that were found inside.
It all comes together.
For those of you who want to explore what's online so far
we have a slightly old and outdated website up above. gizapyramids.org.
We're working very hard to replace that with version 2.0.
We could use your help in various aspects of it.
And then the 3D models that we're about to take a look at
are down on this other website, which unfortunately does not work on Macs,
which kills me but nevertheless.
PCs only and no www there.
Take a look at that, and you'll see the 3D models there as well.
>> There is our new layout.
You can see how massive amounts of data like this
have to be organized clearly because it's not all Egyptologists out there.
We've got to make this understandable and accessible
to all kinds of audiences.
And maybe a mock up of what our future website might look like.
Hopefully a lot more elegant and not like those creepy
blinking websites from the 1990s that I remember oh so well,
even from my own days.
>> So I just thought I'd put together a list of the kind of projects
that you might be interested in if you're hovering around and looking
for a final project.
I know due dates are coming up pretty soon.
Something like these might be of interest to you.
Obviously you want to bite off something that you can chew and swallow.
Not too ambitious.
But if this is something up your alley, get in touch with me,
get in touch with the professor, [INAUDIBLE]
get in touch with [? Russ Gant ?] and the other Giza team
and maybe we can help you out and build something together,
which might be kind of fun.
We can post this list, so you don't need to jot everything down instantly right
now.
And check it out later on.
And if you really like Ancient Egypt and want to get into more of this stuff
next semester, there's a Gen Ed class which
surveys 3,000 or 4,000 years of Egyptian culture,
and you might want to look into that as well.
>> So that is just a quick overview.
And I thought if my model is behaving now
we might take a look at what Giza looks like in 3D.
And this is what you would see on that second website.
So welcome to the Giza Pyramids.
And in this case, we had to study not just the layout of the site
but of course the ancient landscape.
Look at the Nile and how close it is to the pyramids.
Today, the Nile is way far away.
It's much closer to Cairo itself.
But in those days, in the third millennium,
it was hovering and flowing much closer to the site as well.
So we had to take away modern archaeological debris dumps and houses
and all kinds of things and really study the site carefully.
>> So what we have built so far you can just hover around.
And you see things blinking red, and you can visit various places such
as the Temple of [? Kingman ?] [? Kalray ?] here.
This is an interesting one because it allows us to study
the place at multiple points in time.
This is a temple that was built by [? Kingman ?] [? Kalray, ?] the builder
of the third and smallest pyramid, but he died too soon and his son had to try
to finish it not in stone, but in mud brick.
So I can go to my little free cam here.
Different ways to navigate.
And I can just hover around and cruise inside.
We've got to go visit the kitty cat.
One of my favorites.
There he is.
Try to build one of those for your final project.
>> But the interesting thing is this particular courtyard
underwent a lot of change.
And so this is how it looked at one point, and then as I mentioned,
the King died too soon.
Later, priests move in and actually settled the place
and turned it into a kind of sacred slum.
And you can see all the settlements now filling
the courtyard with silos and ovens and other storage place.
[? It's ?] a very, very different kind of location.
>> So this is an interesting research tool.
You can visit these places at different points in time.
You can even see the pyramids being built, or you come into the courtyard.
And if I can get to that photograph, you can
see what those statues there actually looked
like when the excavators found them.
Here it is in one of those glass plate negatives.
Beautiful dig shots.
Or you can come back to the main site and visit something else.
>> Let me take you inside a beautiful tomb found in 1927.
Of course, on the last days of the dig season.
Isn't that always the way?
So clicking these buttons will either give you a narrated tour,
you can see some photos, you can see wire frames
of how we put some of these things together,
or of course, you could wander right into the monuments themselves.
So this is a beauty because a lot of the original color was preserved,
and that let us restore the tomb completely.
It's another navigation system I'm using.
So how cool is that?
And again, you can click on photos and up popped the actual images
for comparison's sake.
>> So trying to put this all together-- take a comprehensive view of Giza,
the ancient site of Giza, the history of the excavations,
the 3D visualization, a teaching tool, a research tool-- basically,
there's no end to it.
And of course, it's Giza past, it's Giza present, and it's Giza future.
There is work being done at the site nowadays too,
and we want to capture all that as well.
So the goal is to try to create a center, if not an actual physical space
but at least online, that anyone can come and study, have access
to all this material.
You don't need a special travel grant and permissions
to get into some dusty museum archive.
You can access whatever you need to.
>> Let me take you to the Sphinx here.
And again, imagine wearing these 3D headsets and everybody having access
to the same file at the same time and all of us
meeting at the Sphinx for a lecture.
And then push the button.
We'll go down a burial shaft or go someplace else.
The interesting thing about these models too, once you simulate them,
is they bring up interesting questions.
For example, no one in my field really thinks too
much about how the Sphinx was painted.
Is that the accurate appearance?
Was the whole thing colored, or was it just the head
of the Sphinx as we've chosen to do it now?
Switching my navigation.
There we go.
So it's a little easier for me to get around.
So this is probably one of the most accurate reconstructions
of the Sphinx ever attempted, and again, you don't think of these issues
until you have to build them.
How was the Sphinx originally laid out?
How was it colored?
Where was that beard?
We haven't added things that were added by the Egyptians in later centuries
when they came back and sort of resuscitated the site.
>> Or another example.
We have a tomb with a window in it to the outside.
And in reconstructing that tomb we realized the sunlight would come right
through that window and illuminate a kind of sacred offering
place inside the chapel, and that's something
we wouldn't have realized if we hadn't simulated the tomb
and put it back together.
And that, in turn, makes you think, well, what building was right outside
and would it have blocked that sunlight?
And if it blocked that sunlight and that religious significance of illuminating
a sacred space, does that mean that our tomb was here first
and the second building came second?
Can we now start to historically reconstruct
the sequence of Giza tombs just based on sunlight, just based
on simulations and reconstructions?
>> So those are some of the ways that we're using these models to study Giza,
to teach about Giza, and more importantly, to roam the world,
assemble all the material that we can find, and then
move into the 3D space and the visualization space
and bring it home to your desktops, to your phones, to your headsets.
And you'll be able to travel to the site without even
buying a plane ticket eventually.
Thanks very much.
>> [APPLAUSE]
>> Happy to answer a question or if you have
more headsets you want to demonstrate or anything we need to do in the time
we have left.
If any of those topics caught your eye and you'd like to hear more about it,
do come up afterwards and happy to chat further.
Questions?
Comments?
Yeah?
>> AUDIENCE: Do you have a position on the idea
that there was water erosion [INAUDIBLE]?
PETER MANUELIAN: Great question.
So water erosion at the Sphinx.
There was a theory by geologists who thought
that this proved that the Sphinx was 5,000 or 10,000 years older
than the rest of the pyramids based on water erosion patterns.
It actually doesn't hold up particularly well.
You can look at the erosion patterns in areas
around the Sphinx which pretty much discredit that theory.
>> There are three geological member formations of the Sphinx.
The solid one is at the top.
That's why the face survived so well today.
Others a lot more [? friable, ?] but it doesn't hold up archaeologically
that the Sphinx is of a different time period from the pyramids themselves.
There is debate about who carved the Sphinx.
Whether it was Khafre, the builder of the second pyramid, or some people
now think Khufu himself, the builder of the Great Pyramid.
That's an ongoing debate, but they're all contemporary.
They're all Old Kingdom, all about 2500 BC.
Great Question.
Yeah, please.
>> AUDIENCE: What was the [INAUDIBLE]?
PETER MANUELIAN: Say again.
The head of the Sphinx painted?
>> AUDIENCE: [INAUDIBLE]
PETER MANUELIAN: Why was the head of the Sphinx
painted and not the rest of the body?
Great archaeological question, and we don't know the answer.
It's possible that the entire body was painted.
It's so deteriorated and the casing stones around the edge
are not always preserved, so it may have been painted
and we just don't see the traces left today.
>> I personally have trouble believing that the Egyptians would
amass that much paint to cover the entire body with a reddish brown tinge,
but it's certainly possible.
We've opted for just doing the headdress and the face where there are traces
of reddish brown color and there are traces
of the stripes on the so-called headdress.
And nowadays, you can see a piece of the Sphinx's beard in the British Museum
and a piece of the uraeus, the cobra on the brow there,
is actually in the Cairo museums.
So we have some good evidence for that.
In the corner.
Yeah, please.
>> AUDIENCE: You said that the Nile was a lot more [INAUDIBLE] Giza [INAUDIBLE]
closer to Cairo now.
How does the river more?
>> PETER MANUELIAN: How does the river move?
There's a lot of meandering.
So a lot of power and pushing and oxbow lakes and things
are part of river formations.
The Nile doesn't quite do that, but it has meandered quite a bit.
I could refer you to an article by some geologists colleagues of mine.
And it's an amazing ribbon over the last several thousand years
of just where the Nile has moved to.
So once you realize that landscape issues like where the Nile was,
you start to understand, oh, that's why they built that causeway
and that's why it turns a corner.
That must be the high ground they're trying to stay on.
And so you understand harbors a lot better.
>> You understand how they got some of the fine casing stones
to Giza from sites across the Nile, for example.
So these all contribute to our understanding of the site.
It's a little myopic to just study the hieroglyphs or study the buildings
and not understand the landscape and how it changed.
Egypt was a lot less arid at that point to, so there may even be landscaping
around the pyramids that we should be putting in and a lot more
growth and vegetation and interesting things.
Some of the issues in the models I didn't show you
but we have in our visualization center classroom
is the ability to put humans into the scene as avatars performing activities.
And so for example, we can show the Great Pyramid being built
and take you to the query where a lot of the stones are being carved.
And that's a model that as 2,000 avatars all
traveling around the site and hacking the limestone bits and hauling them
along sleds and things like that.
So it also brings the site to life and shows you
how the construction process worked.
>> We've also done the re-animation ceremony of King Khufu.
That's called the opening of the mouth ceremony.
So in his temple, right beside his pyramid, we have got his mummy there,
the priest are there.
They're doing their ritual gestures.
They're saying the spells to magically reanimate
the spirit of the deceased King for the nether world.
So these are all ways that the models can actually
show us actual activities of the ancient Egyptians.
And there again, they bring up new questions.
Did it occur here?
Did it occur there?
Should it be daytime?
Should it be nighttime?
All of these things you don't think about when you're writing a journal
article with black and white line drawings,
but you're doing an animated 3D simulation.
Yes, please?
AUDIENCE: [INAUDIBLE]
PETER MANUELIAN: Little louder, sorry.
Can't hear you.
>> AUDIENCE: [INAUDIBLE] do these models incorporate sounds [INAUDIBLE]?
>> PETER MANUELIAN: Are there sounds in the model here?
Was that your question?
Yes, there are actually.
Sometimes it's music to certain tastes, but we do have rumblings of the wind,
for example.
We haven't recreated people actually speaking in ancient Egyptian.
They could, but we'd probably get the pronunciations pretty bad.
There are spells and rituals and things represented on the carved tomb wall
scenes and paintings, so we could certainly do that.
The occasional cat probably screeches and things like that,
but otherwise we haven't done too much with the audio.
Ambiance.
Another question?
Yes, please.
>> AUDIENCE: Why are there exterior walls?
PETER MANUELIAN: Why are there exterior walls?
These are enclosure walls.
So don't think of the pyramid as a standalone monument.
Think of it as a pyramid, a temple.
You see that reddish one with the granite blocks there?
That's called the Pyramid Temple.
It extends down a long causeway to what's
called the Valley Temple close to the harbor and close to the Nile.
All of that is part of the royal pyramid complex,
and it could also include little pyramids
like you see here for the queens and even a ritual pyramid,
like you see here, where no one is buried
but it's just part of the animated deceased's spirit of the deceased King.
So enclosure walls are probably to protect it.
>> Who has access to this place?
Remember, these are the upper echelons of Egyptian society.
Your average, illiterate, farming Egyptian
is not going to get a tomb like this.
He's never going to see pharaoh.
He can't read hieroglyphs.
So these are the elites of the elite of the Old Kingdom,
and they get enclosure walls to protect them.
Got time for one more.
Yeah, please.
>> AUDIENCE: Why were the pyramids built?
>> PETER MANUELIAN: Why were the pyramids built?
They are basically tombs for the deceased pharaoh.
So in the popular literature, in the movies,
you've got this despotic tyrant who is bringing all these slaves in--
and they're not Hebrew slaves.
They're actual Egyptians.
I tend to stay away from the word slavery.
These are conscripted Egyptians.
And my view is that they're actually buying
into this national project in some way.
By guaranteeing a successful afterlife for this King
they are guaranteeing the prosperity of the country.
They're paving the way for the next pharaoh who will
inhabit this institution of kingship.
So these are national pride projects for the reigning pharaoh,
for the success of the country.
It's almost an investment in their future in a way.
>> A colleague of mine likes to say that the Egyptians didn't
build the pyramids.
The pyramids built Egypt.
And by that he means that this is how state formation came about.
Project management information.
Management.
Of course, these people have to be fed, they have to be housed,
they have to be organized.
Where does all that come from?
>> Who brings them the meat so they have good diets so they
have strength to move the blocks?
Who organizes the housing?
Where do they come from in different parts of the country?
How many people do you need to haul a certain block?
All of this had to be worked out, and we're exploring
those aspects of the site today too.
So more chapters about the pyramids will be written,
more discoveries will be made, more statues will be found,
and more tombs and inscriptions will be forthcoming as well.
The place is alive and growing.
Thanks very much.
>> [APPLAUSE]
DAVID J. MALAN: Professor Manuelian's team
kindly brought some of their own headsets in addition to ours.
If you'd like to come up for any demos do.
Otherwise, we'll adjourn here and we'll see you on Monday.
Thank you so much.
>> [MUSIC PLAYING]