Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 46 lines (24 sloc) 12.43 kB
971f1d6 @ezyang Make linebreak proper.
authored
1 Inventing on Principle
2 Bret Victor <bret@worrydream.com>
73f8931 @ezyang Minor formatting.
authored
3 Presented at CUSEC 2012
4
5 Original presentation (https://vimeo.com/36579366)
04e6013 @ezyang Partially complete transcript; there are some errors.
authored
6
7 Transcribed by Edward Z. Yang <ezyang@mit.edu>
8
73f8931 @ezyang Minor formatting.
authored
9 The original content was licensed under CC-BY (http://creativecommons.org/licenses/by/3.0/).
04e6013 @ezyang Partially complete transcript; there are some errors.
authored
10
11 ----
12
13 [[0:07]] So, unlike the previous session, I don't have any prizes to give up. I'm just going to tell you how to live your life.
14
15 [[0:14]] This talk is actually about a way of living your life that most people don't talk about. As you approach your career, you'll hear a lot about following your passion, or doing something you love. I'm going to talk about something kind of different. I'm going to talk about following a principle—finding a guiding principle for your work, something that you believe is important, necessary, and right, and using it to guide what you do.
16
17 [[0:46]] There are three parts to this talk. I'm first going to talk about a principle that guides a lot of my work, and try to give you a taste of what comes out of that. And, I'm going to talk about some other people who have lived that way; what their principles are, what they believe in. But these are just examples, to help you think about what you believe in, and how you want to live your life.
18
19 [[1:10]] So to begin with me: Ideas are very important. I think that bringing ideas into the world are one of the most important things people can do. And I think that great ideas, in the form of great art, stories, inventions, scientific theories, these things take on lives of their own, which give meaning to lives as people. So, I think a lot about how people create ideas and how ideas grow. And in particular, what sorts of tools create an environment where ideas grow. Now, I've spent a lot of time over the years making creative tools, using creative tools, thinking about them a lot, and here's something I've come upon: Creators need an immediate connection with what they're creating. So that's my principle. ___ What I mean by that is when you're making something, when you make a change, or make a decision, you need to see the effect of that immediately. There can't be a delay, there can't be anything hidden. Readers have to ... do it. Now I'm going to show a series of cases where I noticed that that principle was violated and I'll show you what I did about that, and then I'm going to talk about the larger context in which this work lives.
20
21 [[2:32]] So, to begin with, let's think about coding. Here's how coding works: you type a bunch of code into a text editor, kind of imagining in your head what you find your code is going to do. And then you compile and run, and something comes out. In this case, this is just JavaScript, Canvas, and it draws this single little tree. But, if there's anything wrong with the scene, or if I go and make changes, if I have further ideas, if I go back to the code, I go edit the code, compile and run, see what it looks like. Anything wrong, go back to the code. Most of my time is spent working in the code, working in a text editor blindly, without an immediate connection to this thing, which is what I'm actually trying to make.
22
23 [[3:20]] So I feel that this goes against the principle that I have, that creators need immediate connection to what their making, so I have tried a coding environment that would be more in line with this principle. So what I have here is a picture on the side, and the code on the side, and this part draws the sky and this part draws the mountain and this part draws the tree, and when I make any change to the code the picture changes immediately. So the code and the picture are always the same; there is no compile and run. I just change things in the code and I can see the change in the picture. And now that we have this immediate connection between the code and the picture, we can think of ways of changing the code other than typing. ... So if I want to control that number, I just point my mouse to it, hold down my control key, and I can dial it up and down. So I can see what it looks like for big branches and small branches, and I can converge on what feels right to me artistically. And this works great on any part of the code, I just point to it, and dial it up and down. Some of these numbers, I know what they do but it's kind of surprising to see them do it. [chuckles] And other ones are just completely surprising. [more chuckles]
24
25 [[4:48]] So down here, I've got this for loop where I'm counting to sixteen, sixteen little pink blossoms on each branch. And I can turn it down for less blossoms or turn it up for more. But, look at what I'm doing here: I'm just moving the number up and down around twenty or so: and it has this really interesting shimmering effect; it kind of looks as if the wind was blowing through the tree. And the first time I saw this I immediately started thinking about how I could use this effect for an animation. How would I have ever have discovered that if I had to compile and run between every change? So much of art, so much of anything is discovery, and you can't discover anything unless you can see what you're doing.
26
27 [[5:33]] So I've shown you adjusting the code, now let's add to the code. I'd like to put a sun up here in the sky, so I'll go to the draw sky section, and I'll want to fill in a circle, so I start typing context.fillCircle, and as soon as I start typing I get this autocomplete list of the different fill methods. So these are the things I can type there: fillCircle, fillRect, fillText. And as I move up and down this autocomplete list, I immediately see what each of them is doing. So, I don't have to imagine what it would do from the method name. I don't have to look at the documentation, I just see it, immediately.
28
29 [[6:12]] So I want a circle, and I adjust the x coordinate and the y coordinate, play with it a bit. That looks about right. Probably should be yellow, so I set the fill context, fill style, same autocomplete as before, gives me white by default, and I can change that color code the same way I change any number, I hit the control key, and I get a color palette. I choose a nice yellow. ...Although, the white was kind of interesting, I thought. I kind of didn't expect that. But, with white, it now looks like the moon instead. So just like that. [chuckles] So having this immediate connection allows ideas to surface that would be impossible before.
30
31 [[7:17]] But there's still a problem, I think. I've got a picture over, and this code over there and I have to maintain a mapping between the two with my head. And I've got all these lines of code, and just looking over here I don't immediately know what it does. So here's what I can do. I can hold down the option key, and the cursor changes to a magnifying glass, and now as I roll over each line of code, it's highlighting in the picture what's being drawn in that line. So, if I want to know what's going on in a function, I just roll down the function and see what highlights. So here I've got two calls to drawMountain; I don't know which is which; well, here's that mountain, and here's that mountain. And this has to work the other way too; if I see part of the picture, I have to know what code was responsible for drawing it. So I do the same thing; I hold down the option key, and now as I move down each pixel in the picture, it's jumping to the line of code that drew that pixel. So that drew the guy, and that drew the tree, and that drew the blossom. So this is really important for making that mapping, and also useful for moving around. I want to make the sun a little bit bigger; I jump there, and make it a little bigger. I want to make this tree a little bigger; I jump there, and bring up the tree a little bit; I want to bring up the mountains a little bit, so I jump there, bring up the mountains a little bit; and I can make these changes as quickly as I think about them, and that is so important to the creative process. To be able to try ideas as you think of them. If there is any delay in that feedback loop, of thinking of something and seeing it, and building on it, then there is this whole world of ideas which will just never be. These are thoughts that we can't think.
32
33 [[9:36]] Ideas are very important. The thing about ideas, is that ideas start small. Ideas start out, tiny, weak and fragile. In order to develop and mature. In order for ideas to develop and mature, ideas need an environment where the creator can nurture them. Kind of take care of them, feed them, and shape their growth. And to me, that's what the principle of immediate connection is all about. And because ideas are so precious to me, when I see this principle violated, when I see ideas stillborn or stunted because their creator couldn't see what they were doing, I feel that's wrong. And not wrong in the sense of violating some UI guideline or going against a best practice, but wrong in a deeper sense then that. And I'll come back to this, but I want to show you another example of this principle.
34
35 [[10:26]] Here, there is no state. There is no time, there is no interactivity. And I was thinking about how we would handle those aspects of coding that was inline with those principles I had, that was inline with this immediate connection. So, what I have here, is a little platform game. Here is my little guy, he can run around, he can jump, he can die [chuckles]. And the code form him is over here. So this code makes him run around, this makes him jump, this makes him collide with things... and down here, I've got some code for this little turtle. And this turtle is not doing much right now because I haven't finished writing this code, so, I'm just going to do that right now. So on each tick x position plus equals direction times time interval one sixtieth of a second times the speed, which, um, I dunno? Could be fast, could be slow, could be negative; he walks backwards. [chuckles] And these are all ideas that I can use for other enemies but I think turtles are supposed to be slow, so let's set that speed for our turtle. Now, up here, I've got some code, when my guy jumps on the turtle, he gets some Y velocity, so he bounces into the air, and the turtle gets stomped. So that looks like that. And the turtle gets down for a bit.
36
37 [[12:01]] The problem is, I don't want the player to be able to get up there yet. I want the player to bounce up the turtle, and go through this little passageway down there. It'll have to go around and solve puzzles and whatnot, and then come back and get the star. So, the turtle is too bouncy right now. So I could just turn that down on the code, and now I can try it but, but now it's not bouncy enough. So while it's nice is I can adjust the code while it's running, without having to stop and recompile and find my place again, I can't see immediately what it is I want to see, which is whether or not I make that jump.
38
39 [[12:43]] So here's what I'm going to do. I'm going to bounce off the turtle, and pause the game. So I pause the game, and now there's a slider up here, which lets me rewind through time. And now, I could rewind to back before I made the jump, change the code, and now when I rewind it forward, it's going to simulate it, using the same inputs as before, but with different code. [applause]
40
41 [[13:20]] This is not good enough. [laughter] I need to be able to see the changes immediately. I need to be able to see immediately whether or not my bounciness is correct. None of this stuff. And so if you have a process in time, and you want to see changes immediately, you have to map time to space. So here's what I'm going to do. I'm going to bounce off my turtle, pause my game, and now hit this button here, which shows my guys trail. So now I can see where he's been. And now when I rewind, this trail in front of him, is where he is going to be. This is his future. And when I change the code, I change his future. [gasps] So I can find exactly the value I need, so when I find the value I need, he slips right in there. [applause]
42
43 [[14:26]] So, creators need to be able to see what they're doing. If you're designing something embedded in time you need to be able to control time. You need to be able to see across time, otherwise you're flying blind.
44
45 [[14:40]] As I was playing with this, I noticed it's fun to play with gravity.
Something went wrong with that request. Please try again.