HyperLook SimCity Demo Transcript

This is a transcript of a video taped demonstration of SimCity on HyperLook in NeWS.

HyperLook SimCity Demo Video

This video was badly compressed a long time ago, and was recorded in the Exploratorium so there are kids screaming maniacally and people laughing uproariously in the background! It was a pretty insane demo and the camerawoman almost dropped the camera, but I’m glad I got it all on tape. (Including the Happy Tool back-story!) The transcript may be easier to read than the video is to hear. Sorry!

Demonstration of SimCity running under the HyperLook user interface development system, based on NeWS PostScript, running on a SPARCstation 2. Includes a demonstration of editing HyperLook graphics and user interfaces, the HyperLook Cellular Automata Machine, and the HyperLook Happy Tool. Also shows The NeWS Toolkit applications PizzaTool and RasterRap. HyperLook developed by Arthur van Hoff and Don Hopkins at the Turing Institute. SimCity ported to Unix and HyperLook by Don Hopkins. HyperLook Cellular Automata Machine, Happy Tool, The NeWS Toolkit, PizzaTool and Raster Rap developed by Don Hopkins. Demonstration, transcript and close captioning by Don Hopkins. Camera and interview by Abbe Don. Taped at the San Francisco Exploratorium.

HyperLook SimCity Demo in the Exploratorium

HyperLook SimCity Demo Transcript

The normal text is Don Hopkins talking.

The “quoted italic text” is Abbe Don talking, who’s running the camera.

The (parenthetical italic text) is extra annotation and explanation that’s not on the video tape.

Beginning of Video Tape

This is the HyperLook user interface system, written in NeWS, and it’s running on a Sun on OpenWindows 3.0, and this is SimCity, and application that I ported to HyperLook.

Now we can press a button to play a city, and it will load a map of that.

This is the overall map view, and this is the editor.

I can drag this rectangle around to scroll the map.

And then I can throw it, and it has some inertia, so it bounces around.

And then with this “Zoom” button here, I can zoom my view in, to look closer and closer into the map, so that we’re actually scooting around quite close to the city.

And then, we can actually edit in this scale. (Wee!) Put some roads down. I think you can get even closer. And then you can zoom out.

All this is written in PostScript, all the graphics. The SimCity engine is in C, but all the user interface and the graphics are in PostScript.

The neat thing about doing something like this in HyperLook is that HyperLook is kind of like HyperCard, in that all of the user interface is editable. So these windows we’re looking at here are like stacks, that we can edit.

Now I’ll flip this into edit mode, while the program’s running. That’s a unique thing.

Now I’m in edit mode, and this reset button here is just a user interface component that I can move around, and I can hit the “Props” key, and get a property sheet on it.

I’ll show you what it really is. See, every one of these HyperLook objects has a property sheet, and you can define its graphics. I’ll zoom in here. We have this nice PostScript graphics editor, and we could turn it upside down, or sideways, or, you know, like that. Or scale it. I’ll just undo, that’s pretty useful.

This just defines what the button looks like. Here, there’s a flip function: Special… Flip Top/Bottom. I’ll just center them, and apply, and now we have a little upside-down reset button.

So we have these Open Look components up here. I’ll put this into edit mode. See, I can highlight all the components.

HyperLook is integrated with The NeWS Toolkit, so we can get all these ancient looking Open Look menus and what not, and do things like cut this slider out here, and stick it onto here, to set the tax rate.

This slider happens to set the transportation fund. Every interface object here has a script that defines its behavior, and this guy says his action is to send the SetTransportationFund message to MyStack. The scripting language for the HyperLook system is PostScript, and some people complained about that, so Arthur van Hoff wrote a C to PostScript compiler, so that they can program in C. But however, I’d rather program in PostScript, myself.

Woops. Let me put the button back on the window. There’s quite a possibility for user interface vandalism in this system, so what we’ve done is make the user interface editor be just a user interface component that’s in the stack, that you can remove to make the stack not editable. I’ve done some amount of magic to make SimCity editable, but when it’s delivered as a product, it’s just with a runtime system and not editable.

We will go back and turn on Auto-Budget. Ok, now this is showing us something’s happened, and I can click in here to bring my other view there.

The neat thing is that this view here itself is just another user interface component, and I can copy and paste that, and have multiple views. Each one of these animated scrolling SimCity editors, once I’ve made one, I can put them anywhere. This window, you can click here to get three of them.

I put this nice high level component into this user interface system, and now anybody can just cut and paste it.

One of the neat components that HyperLook comes with is the graphics editor, which is pretty ubiquituous. Like if I were to edit this button by hitting the properties key, I get this property sheet that has a graphics editor in it.

Now this property sheet itself is a stack that I can edit. So its graphics editor, the menu here, and all this stuff is just fair play.

So when you make a new component class, you also construct another property sheet for it, or just copy one that almost does what you want, and then edit it so that it has the new things.

That completely separates this notion of property sheets from the user interface, because you can just plug in a new set of property sheets that have a different look and feel, like if you want to give more novice people the ability to edit their user interface, you could have a simpler set of property sheets.

So now we’re going to get weird. I’m going to pause SimCity so it doesn’t take all the CPU time, and iconify it. And of course, when you iconify it, the icons are miniatures of the window, and they’re active too, so when I scroll these views around in the uniconified overall window, they keep scrolling down here in the icon.

You just get all this stuff for free with PostScript. Well, you know, it’s not exactly free, but… ha ha!

Now here is, oh yes, right here, this is a stack full of components, of clocks. You can get a property sheet on any of these clocks. The property sheet has three graphics editors, for the face and the two hands. We could just change the color of the hand, or change the total look of anything.

The whole thing is just Legos. The property sheet just plugs the drawing into the clock, and the clock knows how to rotate the hands around the face.

“That’s all the same object with different representations?”

Right. One of the data types this system knows is the structured graphics drawing. It plugs it into this property sheet with Alan Turing’s head. It just lets me edit the three instance variables.

There’s this protocol for property sheets of taking the instance variables, letting you edit them, and then putting them back in when you hit apply. As long as your property sheet plays that protocol, you can plug and play different property sheets, and customize them.

We could make some really crazy looking clocks. Here’s a good way to make crazy looking clocks. Woah, oh, let me show you one other thing first.

This clock stack is a warehouse of objects, this is a bunch of examples of objects that I might want to use elsewhere. So I hit the “Install” button, this now installs them into the user interface editor. I’ll make myself a new stack. I get a brand new stack. I go into edit mode, and there’s this edit menu, and I select “New…”, and it’s added this menu of new items that I can create! That “Install” button has added this “Neat Clocks” submenu to my edit menu.

So now I can get a “Freaky Clock”. And I can get rid of this “Neat Clocks” stack here. And then I can go get other warehouses. Say I wanted a warehouse of Open Look components, then I could just plop them down. New… System… Color Selector. Boing. Now I can select colors from this.

Anyway, now here’s another neat way of making patterns.

This is a “Cellular Automata Machine” program, and it’s a little klunky on the user interface side, but we’ve got several pages. This is the introduction. It shows you this real time cellular automata, and you can draw in it with the mouse.

(Check out my collection of stuff about Cellular Automata for more information!)

There are different controls: we can set how fast it goes, start and stop, and there’s all these different rules that you can run, that look totally different.

There’s Life, then there’s Brian’s Brain. And you can draw in any of them.

And there are interesting initial configurations, like the heat rule. Heat diffusion is good to start with a circle in the middle. And then you can always draw.

Now the editor lets you fill it with random numbers, and heat diffusion does a good job on that. And you can do some other crazy things that are hard to explain, but …

The really useful thing that this is good for is this background button labeled “Tile”, and we can just go whomp, and just tile the background with the pattern, so it’s an interesting screen background generator!

We can also copy the image to the clipboard, and I’ll open up a graphics editor, um, where’s my Royal Pine, yeah. So here’s a graphics editor, and I can paste this image into my graphics editor, and go in there and do neat stuff with it. Clip it to an interesting shape, wee!

I can bring this into my graphics environment, and I can take this structured PostScript graphic, this Royal Pine Car Freshner, and then I can take it back over here to the Cellular Automata Machine, and then paste it in.

Then I can copy that back out. What I like doing is to paste the Royal Pine, oh, first let’s cool this down a little bit. You paste the Royal Pine, then you let it go a little bit, then you stop it, and then you paste it again. Woops, oh, my goodness. Here’s let’s do another rule.

OK, the good one is ld-heat, ok, very subtle, very subtle. Ok, copy that, paste it into here, and then you stop it, and then you paste it again, then you copy it out, and you go here and paste it into the graphics editor, and you have this nice air freshner with an aura!

So who knows what people may decide to do with this kind of stuff. But once you can plug things into each other very easily, and have ubiquituous graphics, it becomes very interesting. Now I could go and use this car freshner, I could copy it onto my clipboard, and go to my new stack, and paste it in, and now it’s a button, so now I can make it do things when I click on it.

Oh, oh, oh, oh! Here’s a useful little program. When I was working at Sun, my manager came and said, “I need to know you happyness index, a number from one to ten. It doesn’t matter how you come up with your happyness, but you have to remember the algorithm you use, so that you can give me the same happyness index later, and we can track your happyness.” So what we did, we made “Happy Tool”.

This is a HyperLook version of HappyTool. It’s going to be a really great thing, once we get this on the network with the biorhythm daemon and birthday dragon and everything else integrated. Basically, you can dial how happy you are, and then, once you’ve got that, you can click on the face, and it puts it into your clipboard, and you can paste it into the graphics editor.

So now you can paste these into your letters to mom, or whatever, or even, you know, paste them into the Cellular Automata Machine!

You can actually get some really good effects by pasting happy faces into the Cellular Automata Machine. Yeah, let’s do a monster. Yeah, ok. I have found the face of Barney in here.

Ok, let’s get a good one here.

Let’s do a little more symetrical rule here, then paste away. Ok, a little more steam. Oh, ok, here we go, yeah, ok. Aaah.

Yeah, ok, symetry, that’s where it’s at. Aaauugh! Yeah, try it the other direction.

“What happens if you put Turing’s face in there?”

Oh, Turing’s face! Where did I put that? It’s over here.

You can hit “Props”. Just copy that out.

Bring him to the top. And paste!

Aaah! It melted.

Oh wait, let’s try it this way. Woah. Oh, oh, and there are other rules that do different things. Let’s try pasting Turing’s face here.

Oh yeah. Or the big happy face. Woops! Well that slagged. Oh yeah!

Ok. All right, yeah. A good one. Let’s get Torbin. Let’s see if this is the right color for Torbin. No, no it’s not.

Basically, the different rules depend heavily on the initial condition. So what I’ve done with these rules, I’ve put a bunch of initial conditions that I kind of like.

Torben with randomness. Torben is kind of like Anneal. I can show you Anneal later. But Torbin’s like a more radical Anneal, that has more turbulence than your standard Anneal, so you get these sort of sluggier edges.

I’ll switch to Anneal. Here’s regular Anneal. Anneal anneals. Give Anneal random, and it turns it into big cow spots.

But Torben is like a much foamier Anneal, so there’s a lot more activity going on along the edges.

And then you can go and draw in it.

Uh oh. And you can make clock faces out of it, and stuff like that.

So let’s just do one quick cellular automata clock, and then we’ll do the cheesy stuff.

We want a heat, no a Laplacian heat.

Ok, so this is symmetrical, we start it with some colored circles in the middle, and it will stay symmetrical.

And then once it gets going… Ok… Yeah, here we go. Let’s crank it up a little bit. This is like the microwave power.

Ah, ok. So this is like a Persian rug enumerator. It’s very good for tiling the background with.

Woah, ok, this is a little too intense.

(Camera shakes around wildly!)

Ok, rules, circle, no circle in the middle.

Yeah, there it catches. Sort of like fire. It has to, like, “catch”.

“Wooh, that was cool!”

Aaah, here we go.

Just say “when” when you find the Persian rug you want.

Speed it up. Ok. So now here’s where it gets weird. Ok.

“Somewhere in there!”

Aaah, aah. Ok, pop, boom! Ok.

Then, let’s try a slightly different rule. Just regular heat. Eight neighbor heat. That’s a little smoother, and sort of more like taffy.

Um, yeah. This is a good tiled background. Ok, now, this will make a nice clock. We’ll just copy this to the clipboard. Or no, that one, no, no, well, yeah, well, let’s, yeah, that, yeah, ok, that one, so...

Then we’ll just edit their views, stick it in here, and delete these other things. And put a circle down. I think control constraints it to be a circle. Select all. Center them. And make clipped group. And then hit “Apply”.

Now we have a really tripadellic clock here. It’s like a hippie clock or something. And, you know, it scales, and all that.

So, we gotta do something about the hands. Um… Let’s see… Umm… Awww, dee doo doo dee doo doo dee doo doo dee… Worms. Oh, right, we’ll do worms for hands. We’ll just, uh, just grab something at random, and…

Flip out rectangle. Select all. Center, and clipped group. Apply.

Well, it’s hard to see, but you know, you need some fashion sense to do this stuff.

“I’m totally zoomed in on this cellular automata thing, and I’m tripping out on that.”

Yeah, this is called a Zhabotinsky Reaction. I have three different worm rules, ok?

…These are Bohemian Worms, ok?

…And these are Middle Class Worms, ok?

…And these are Yuppie Worms, here, ok?

So, if you let it go, it kinda, yuppie worms have, this is the way they organize the world, you know.

“I’m getting nauseous!”

Ok, we’ll go back to Middle Class Worms, ok? Do a little bit of that. And then we’ll go back to Bohemian Worms, ok? So these are a little rounder, but still smooth edges.

But the Bohemian Worms — actually, the Bohemian Worms are slightly related to the Anneal. The way the Anneal has the rough edges. They sort of, they have like a twist of Anneal in them. You an kind of see that here, but this is in a secret code. It’s in FORTH. Heh-heh-heh-heh. So, umm, umm…

“Ok!”

So this is PizzaTool and RasterRap, and these are written in The NeWS Toolkit, not HyperLook. But HyperLook is layered on top of The NeWS Toolkit, or sort of on top and in between The NeWS Toolkit. But this is pure TNT.

Now these are, umm. PizzaTool: I’ll do PizzaTool first.

PizzaTool lets you order pizzas with a GUI. And we can select which pizza parlor. Tony & Alba’s is the nice one in Mountain View. They support ordering pizzas via FAX.

Now you can write you name, and your phone, and all this, and you can have a “Take and Bake” or “Please Deliver”.

You say Please Deliver: “They probably won’t deliver unless you make it worth their while by ordering lots of pizzas!”

It gives you those “affordances”, I mean, *ahem*, right, I was trying to work that word in.

So ok, hit Toppings, you get this lovely topping dialog. And you can pop up a menu of common pizza styles, pinning it in the Open Look tradition. And, you know, it sets up the check boxes for you. And then you can add other toppings.

And then see, when you’ve added a bunch of things, it actually changes your category of pizza. I might get, like, it will flip to “Everything” pretty soon or something.

Well anyway, yeah, let’s do “Cheese”, and then if I were to add all these crazy things, it will realize that it can actually get a better deal by upgrading me to an “All Meat Combo” with 10 extra toppings.

It’s your little “pizza guide”, you know.

And once you’ve selected all your toppings, and how big you want your pizza, you hit “Preview”, so that you can make sure that this is the pizza you really want.

And then it just does this, makes a little window, see this is a neat window here. It’s cut out, so that your pizza is just floating within the frame.

And now, whoop, ok. And then you can add more toppings, and it forks off a lightweight PostScript to sprinkle toppings. And it’s totally object oriented, I swear.

Now that you have a preview, and you want to see what it’s like when you cook it, you can just use direct manipulation, and just sort of spin it around with the mouse, and then let it go.

That actually has a pretty good effect of cooking the toppings, because you get all this nice noise from the rotation, you know. It’s just… It’s all written in PostScript.

“Camera person is now laughing!”

(Camera lurches around violently!)

You know, and then you got your pizza right the way you want it, and then you can hit “Order”.

It goes “Do you really want to order a pizza from Tony & Alba’s? This will cost real money and make you want to drink beer!” Then you say “Yes!”

And then, you know, when you’re on the right network and everything, what it does, it faxes the order there, and…

Oh! “Yer pizza is being held hostage until ya payz off yer tab, chump! Yer tab’s presently $1212.64.”

I guess Sun hasn’t been paying off my account since I left. Oh well…

Umm, yes, right. So, now, this has, PizzaTool has some other useful features. You can, go into pizza authoring mode, and edit your pizza toppings.

Or, you know, say you have a favorite kind of pizza, you can just make a new style, “Don’s Fave”, and save, and say, “New Style”. It just adds it there, dynamically updates, so — this is basically a test that I made for the — you know, and it copies its state onto — you know, so, this is a test I made for the toolkit that used every bit of the toolkit that’s possible, and is as dynamic as it could be.

Anyway, the other thing we had to test was drag and drop.

Now there’s this other program here, it’s RasterRap, and it allows you to drag this image and drop it into that, or you can drag it from here and drop it into the other. So these guys will talk to each other through drag and drop, and give you the lovely feedback.

And then you can also — PizzaTool also supports drag and drop. So BLOOP! You can put a little Mona Lisa in your pizza, and then spin her, and put some bell peppers down, and maybe some turkey.

(Camera person laughs and shakes camera.)

This is all in the name of progress! Ha ha ha!

(Confused muttering in the background!)

Oh, and if you make the pizza small, it goes really fast!

So once you’re done doing all this crazy stuff, you can wash it out.

By, see, we have this nice beautiful painting of a wave here, put the wave in there, and go whooooosh.

What’s really neat is when you make it spin really fast, really really fast — we’ll put the butterfly in for that for that — you go BOOM! Well now, that’s not fast. Boom.

Yeah, ok. Ahh, oh yeah, you get these really great —I can’t really explain it very easily, but let’s add some artichoke hearts. (chuckle)

Yeah, so, yeah, mathematical imprecision, or something like that.

This is just sort of a food processor.

I left it spinning over Christmas to see what happens and it was really a mess when I came back.

Ok, well any way, that’s just what PizzaTool does.

Now what Rap does — this is sort of a, uuh, rasturbation program, ok.

You have all these neat things you can select.

I’ll select this image, and I’ll go ruuuup neeeowp.

Now I can just plop him down anywhere. That’s the scale feature.

And then you have rotate. Rwamp?

So you can just kind of just lay down interesting graphics.

And then the transform is my favorite, we’ll transform the Taj Mahal.

This is all written in PostScript! It performs pretty well, considering.

And you can spray paint, and you can scratch through, and you can drag a spotlight around (bwomp, bwomp, calling all mandrils!).

And the iris, and the strobe, and dragging, and darkening.

These are just little functions — this is actually an educational thing that shows you how to program in The NeWS Toolkit.

Now this is the predecessor of PizzaTool, the “Twist” function. I finally got tired of twisting it by hand, and made PizzaTool just spin automatically by forking off a lightweight thread.

The fun one, my favorite is “Warp”. Because you can just grab, grab it and sort of stretch it like this. And, yeah, we’ll click in here.

And then you can select part. It darkens the part I don’t select. And then I can drag the selection into here.

Good to have two of these. Put Mona over there. And then select her eye. I can put it in my little palette, or I can continue and just put it into here.

Now here is the secret of how this really works. I’m going to hit “Show Buffers”.

Not this uses not double buffering but triple buffering!

So there’s three offscreen canvases.

“How long did it take you to write this?”

Oh, it evolved, it evolved.

“But, about?”

A few months, you know. I kept adding things, over a period of time.

Ok, so you have all these images. And when you select one, it fills this image with it.

And now it does the double buffering — we’ll do a scale.

It’s composing in this canvas, ok? And it’s copying onto the screen to give me feedback.

And then when I release the button to put it down, this is the permanent canvas. This is the real image, ok?

This is the preview of what it’s going to look like copied onto the screen.

And this is the thing that we’re kind of using as ink.

“You normally keep these hidden? These are normally happening offscreen?”

Right, yeah, and this is like the “How-To” demo. Of how it’s actually doing the graphics.

So like “Scratch”, see “Scratch” just clips to where the pen is, and it just copies off of here onto here through the clipping, the pen.

And then it copies, it gives me feedback while I’m dragging, by flipping here and copying here.

And then when I release the button, it makes it permanent by copying it here.

Now the cool thing is “Warp”. Here’s what “Warp” does:

I’m taking this canvas and I’m picking it up right here. And then I’m stretching, I’m breaking it into four rectangles, and I’m stretching each those four rectangles by each different corner, and I’m putting them into here to get feedback.

You see, since it’s double buffered, you don’t see the composition of bomp bomp bomp bomp bomp bomp bomp bomp here.

You know, here you can see what’s really going on, but it looks smooth and seamless here. Then when I release, it makes it permanent.

So “Twist”. “Brighten”. So you can always see the flickering here. “Darken”.

“So you’re not double buffering in the middle?”

Right, the middle’s the composition, and it’s usually offscreen. It’s considered the double buffer, but this is actually the triple buffer, which is sort of behind-the-scene buffer.

It looks really smooth in real time up here, but you know you really are redrawing everything every time.

So, woot, let’s see, and now, like woah, the selecting, yeah!

You can actually do some pretty fancy graphics using double buffering, because you never see how much crap it takes. It just lags behind a little bit but at least it looks nice.

But anyway, all these graphics are really simple to do in PostScript. I’m just taking advantage of what PostScript is good at doing. And there are certain things that would be nice to have this to do, that it’s totally impossible in PostScript. So this isn’t really a paint tool.

But you can make some really interesting, you know, uh, compositions, and then put them in pizzas and spin then.

So, umm, heh heh. But anyway, huh, one of these days, umm, I don’t know, um, maybe, uh, I think we’ll have to have a ScriptX PizzaTool, and people will actually be able to use it to order real pizza.

So, um, oh well, umm, I think we should go back and implement all this stuff, how’s that?

“Ok! Sounds good!”

Ok, bye-bye!