This week is going to have the same basic structure of previous weeks.
First we're going to learn a mechanism that supports interactive programs, that
mechanism is called Big Bang. And no surprise, there's kind of a bad
pun involved in the name of Big Bang. We'll talk about that later.
So first we're going to learn that mechanism, and then later in the week
we'll start learning how to design with it.
To explain the Big Bang mechanism, what I'm going to do is I'm going to start by
looking at a couple example interactive programs.
And just kind of reason from first principles about what has to be going on
inside those programs, the inherant structure of those programs.
Then I'll explain how big bang works and how it supports that structure.
So imagine that we have two fairly boring interactive programs.
So the one on the left is just counting down, 8, 7, 6, 5, 4 and so on.
And the one on the right just has a cat walking very slowly across the screen.
And I'm going to say these programs are interactive because if I press the Space
key they both reset back to the beginning.
And start running again. So that's the sense in which they're
interactive. These two programs have classical
interactive behavior. Some underlying state is changing, the
number in the countdown or the position of the cat.
There's a changing image on the screen and pressing the key does something or
perhaps clicking the mouse might do something.
So there's two simple interactive programs.
Now let's think about what's going on behind the scenes, starting with the
countdown program. There's the current number in the
countdown, which is the middle column in this table.
It starts at ten and then it goes to nine and so on.
And there's the currently displayed image, which is the image of the number
of 10, the image of the number 9, and so on.
And what's happening is that once a second, n gets decreased by one, and the
image gets updated to be the image corresponding to the current n.
So there's kind of this behavior of the clock ticking tick, tick, tick and each
time an and the image are both updated. Now if we look at the cat program the
same kind of thing just inherently has to be going on inside of it.
In this case the changing state is the cat's exposition it starts at 0 and then
it goes to 3 and then it goes to 6. The idea is that the cat is moving three
units per tick. In this case the image is an image of a
cat at that position rather than an image of the numeral.
And in this case the ticks are also counting up, 0, 1, 2, 3, 4, but they're
counting much faster in this case. Let's just say for now they're ticking 28
times per second, whereas in the countdown program we wanted it to tick
one time per second. Now, continuing with this exercise and
thinking about what just has to inherently be inside this program, let's
think in terms of information and data for a second.
We've got these numbers, 0, 3, 6, that are representing the x position of the
cat. So when we do something like that, what
we use is a data definition. We use a data definition to tell us how
we're going to represent domain information using data.
So here's a data definition for that. We're going to say that cat is a number,
and we're going to interpret that number to be the x coordinate with a cat.
And the rest of this data defintion is fairly straightforward.
Now it's simple atomic data. Looking back at our table, we see that at
each clock tick. What happens is that the representation
of the cats x-coordinate increases by it's speed each time, so it goes from 0
to 3 to 6 to 9. So here's a function that does that for
us. It's signature is cat to cat, so it takes
a cat and produces at cat. And it increases that position by the
cats speed. And there's some check expects.
And if we look at the body of the function we can see what we expect.
It takes the current cat, the current x-coordinate of the cat and increased it
by speed. Going back to the table again.
And still thinking about just what inherently had to be inside this program.
We see that, at each clock tick, we need to produce an image based on the cat's
current x-coordinate, that shows the actual cat.
Farther and farther across the image of some background scene.
In this case the background scene is white.
So here's a function that does that. Function consumes a cat and produces an
image. And we're using a primitive here that you
haven't seen before called place image. But the way place image works is it takes
an image and then it takes an x-coordinate, a y-coordinate.
And a second image and it places the first image at the given x, y coordinate
on the second image. So what this function's doing here is
it's placing the image of the cat, which happens to be the value of a constant
called cat image. At the appropriate x coordinate in the
middle of the background image,which happens to be called MTS.
So there's a data definition and two functions.
One function, next cat, can take us from one cat to the next-cat.
In other words, it can advance the cat's exposition by three each time.
0, 3, 6, and so on. The other function can take us from a cat
to an image of the cat. In other words, the image of the cat at
the appropriate position on the background called MTS.
Now we need to understand how those two functions need to dance together, in
order for the cat to move across the screen the way we want it to.
Suppose the cat starts at 0. We need to call render-cat to get the
appropriate image and display that. Then we need to call next-cat with 0 to
get 3. Then we need to call render-cat with 3 to
get the image and display it. The next-cat with 3 to get 6.
Then render-cat we call with 6 to get the next image, and display that.
Then we call next-cat with 6 to get 9, then render-cat with 9 to get the image
and display it. Next-cat with 9 to get 12, render-cat
with 12, next-cat with 12, 15, and so on, and so on, and so on.
And all we need to do is do that 28 times a second which I can't talk that fast.
To do that, to wire render-cat, and next-cat together that way, Dr Ragi gives
us a special expression called a Big-Bang Expression.
And here's an example of how we would use big-bang, to make the cat walk.
First argument to big-bang is an expression that evaluates to what
big-bang calls the initial world state. The initial state of this whole
interactive world. In this case the state of the interactive
world is represented by the cat tight, and so we're going to give it an
expression that produces a cat. So zero is the initial position of the
cat. After its first argument, big-bang takes
a number of options. And it takes so many that the way it does
it is to take them by name, that way you can give it only the options you want to
give it each time. The way to read this first option is, it
says, each time the clock ticks, call the next-cat function.
Pass it as an argument, the current state of the world and it will give you back
the next state of the world. Because in this particular big-bang
expression the state of the world is represented by cat.
I've put a comment here saying that the type of the first argument to big-bang in
this case is cat. And another comment here that says that
the signature of the next-cat function is that is consumes cat and produces cat.
The second option to big-bang in this case is called two draw.
And you should read this use of true draw as saying that what big-bang's going to
do is on each clock tick it's going to call render-cat.
Passing render-cat as its first argument the current world state, in other words a
cat. And render-cat will produce an image and
big-bang will display that image. And I made a note here, off to the side,
that the signature of render-cat is that it consumes cat and produces image.
So, what big-bang is doing for us is, it's taking all the little pieces of our
world, the initial world state, the tick function, the draw function.
And it's combining all those pieces together to get a world.
Do you see the joke behind the name now. It squeezes the pieces together, big-bang
it produces a world. Whether you like that joke about the name
or not that is the name I didn't come up with it.
One other point to make about big-bang is that it's what computer scientists like
to call polymorphic. It can work for any type of world state.
So big-bang doesn't just work with cats, it can work for, for example, if you have
an interactive world program that has to do with fireworks then.
The world state could be firework. Or if you have an interactive program
that has to do with lots of fireworks then the world state could be list of
firework. The world state can be anything you want
to be so actually here where we've, where we've noted cat and cat to cat and cat to
image as far as big-bang's concerned it can be anything.
So really it could be, X, X to X, and X to image.
All big-bang wants is for you to give it an initial world state.
And then for on-tick you've gotta give it a function that consumes a world state of
that type and produces a world state of that type.
And then for to-draw, you have to give it a function that consumes a world state of
that type, whatever it is, and produces image.
The key thing is, in any one use of big-bang, all the Xs have to be the same
type, they all have to be consistent, that's what matters to big-bang.
So, there's big-bang. It's without a doubt the most complicated
single-primitive we're going to use this term.
It's a user interface framework. And user interface frameworks, in other
words tools that integrate a bunch of functionality together.
To get an entire user interface, user interface frameworks are always somewhat
complicated. This one is simpler than most.
Don't worry about it, we're going to spend the whole week on it.
You get a lot more chances at it. But the basic thing to understand is,
this picture up here in the upper right, that's what big-bang is doing.
It's starting with an initial world state.
And then it's coordinating calling functions like render- cat and next-cat,
to produce the combined behavior of the interactive program that we want to have.
We'll also see starting in the next video that there's more options.
So for example, big-bang has an option called on key.
And you can imagine that the way that works is on key wants a function that it
will call when a key is pressed on the keyboard.
And that function should process the key properly and produce the next world
state. What we'll also see in the next video is
we're going to introduce a design recipe for designing interactive programs using
big-bang. And that design recipe is going to help
make it a lot easier to write programs that use big-bang.