WEBVTT 00:00.000 --> 00:11.000 Yeah, welcome to this. My talk. I will talk about how to make computer graphics. 00:11.000 --> 00:15.000 Some of you may know how to do this. You know, it's pixels, right? 00:15.000 --> 00:20.000 But that kind of different ways to approach this and I will talk about this for a bit. 00:20.000 --> 00:24.000 So one way to make computer graphics is restoration. 00:24.000 --> 00:28.000 This is, I have an example. You probably know it. 00:28.000 --> 00:32.000 But let's look at this. So I have this example right here. 00:32.000 --> 00:38.000 Let me fly around a bit. So basically, you can make these kind of scenes right. 00:38.000 --> 00:41.000 But in the end, if you zoom in enough, it's all triangles. 00:41.000 --> 00:46.000 So it's just a bunch of triangles and then you have something that looks pretty. 00:46.000 --> 00:50.000 So that's one way to make computer graphics, right? 00:50.000 --> 00:57.000 Let me, that's also ray tracing that has become even more popular in recent years because now you can do real time ray tracing. 00:57.000 --> 01:00.000 So let me show an example of that. 01:00.000 --> 01:06.000 So ray tracing, at least in kind of the original days, back back then, 01:06.000 --> 01:15.000 you will see a lot of spheres because those are kind of the existential ray tracing thing. 01:15.000 --> 01:19.000 So here's an example, right? You have lots of these spheres and some lives. 01:19.000 --> 01:22.000 Hitting them and so on, and it looks cool and so on. 01:22.000 --> 01:27.000 And that's just a different way of making computer graphics. 01:27.000 --> 01:30.000 I will skip forward to the next one that I know of. 01:30.000 --> 01:33.000 You can do something which I call simple masks. 01:33.000 --> 01:38.000 It's not really an industry term. I just wanted something that was quick to write down. 01:38.000 --> 01:40.000 I have an example here. 01:40.000 --> 01:46.000 So that's fine, a good example. Maybe this one is not so. 01:46.000 --> 01:49.000 Let's look at this one. It's good, right? 01:49.000 --> 01:52.000 Because you have here a circle and a square. 01:52.000 --> 01:55.000 And they are kind of doing this kind of X or thing over time. 01:55.000 --> 01:57.000 So they are intersecting with each other. 01:57.000 --> 02:04.000 And then they are kind of making a nice mask of which pixels to make black and which to make white. 02:04.000 --> 02:08.000 And it's just like a formula, you know the formula of a circle, you know the formula of a square. 02:08.000 --> 02:10.000 And then you can kind of put them together in fun ways. 02:10.000 --> 02:13.000 And you can extend this and see all kind of nice. 02:13.000 --> 02:17.000 Like this is just a bunch of squares, but then they are rotated and distorted a bit. 02:17.000 --> 02:23.000 So you can make kind of nice graphics in that way also. 02:23.000 --> 02:26.000 So these things that you showed you, I mean there's only a subset. 02:26.000 --> 02:29.000 So many more ways to make graphics on the computer. 02:29.000 --> 02:34.000 But they all kind of share the attribute that you described them in a top down manner. 02:34.000 --> 02:38.000 In the sense that you want to draw a scene. 02:38.000 --> 02:42.000 And then you describe it either in terms of let's say triangles. 02:42.000 --> 02:46.000 Or objects that you can rate face or these masks that I showed you. 02:46.000 --> 02:52.000 So it's very like you describe the scene and then you have some mechanism of rendering that. 02:52.000 --> 02:55.000 So you don't really describe the pixels themselves. 02:55.000 --> 02:57.000 You abstract over the pixels. 02:57.000 --> 02:58.000 And that is very nice. 02:58.000 --> 03:01.000 You can create some really compelling things with that. 03:01.000 --> 03:06.000 But what is the alternative that is to describe the pixels directly? 03:06.000 --> 03:11.000 So instead of thinking about the big picture, think only about the small picture. 03:11.000 --> 03:14.000 And then like the big picture emerged from that. 03:14.000 --> 03:19.000 And that is really hard in the sense that it's really hard to predict what will happen. 03:19.000 --> 03:23.000 If you go to the nitiquity and describe the pixel itself. 03:23.000 --> 03:31.000 It's hard to kind of imagine what the big picture will be when you want to have several millions of pixels on your screen. 03:31.000 --> 03:33.000 But that's also the fun part. 03:33.000 --> 03:40.000 So one way to do this kind of bottom up rendering approach is to use cellular at summer time. 03:40.000 --> 03:43.000 So these are old. 03:43.000 --> 03:45.000 It's in old concepts. 03:45.000 --> 03:49.000 The focus is what's called the cell for our purposes. 03:49.000 --> 03:51.000 That's the pixel is the same thing. 03:51.000 --> 03:54.000 And it only knows about its immediate neighbors. 03:54.000 --> 03:58.000 So if you have a pixel over here, it has no influence over a pixel over here. 03:58.000 --> 04:00.000 No direct influence anyway. 04:00.000 --> 04:01.000 They agree to separate. 04:01.000 --> 04:06.000 They can only look like up or down or lift or right. 04:06.000 --> 04:08.000 And that's really limiting. 04:08.000 --> 04:13.000 But it's also in the sense really powerful because you can do some things that are fun. 04:13.000 --> 04:16.000 Because it's hard to know how it will end up. 04:16.000 --> 04:21.000 That's love this kind of emergent behavior that can look really cool if you get it right. 04:21.000 --> 04:24.000 And then there's this thing called a step function. 04:24.000 --> 04:26.000 So you step over if you pixel. 04:26.000 --> 04:31.000 And then you try to step as much as possible given the constraints of your hardware. 04:32.000 --> 04:37.000 And this is kind of the idea that let's just show it about you have to have this pixel. 04:37.000 --> 04:39.000 And then it knows about its neighbors. 04:39.000 --> 04:45.000 And then there's some kind of calculation going on that determines the new color of that pixel. 04:45.000 --> 04:48.000 So I have some examples. 04:48.000 --> 04:51.000 One example you may have heard of is this game of life. 04:51.000 --> 04:59.000 I will not really show that directly because that is more focused on kind of the model of of 04:59.000 --> 05:07.000 describing in this case a small series of deaths and lives. 05:07.000 --> 05:14.000 And what I really want to show today is not something we are still a similar issue to model something. 05:14.000 --> 05:15.000 Emissating real world. 05:15.000 --> 05:19.000 It is solely for making things that look cool. 05:19.000 --> 05:21.000 So that is the primary purpose. 05:21.000 --> 05:28.000 I will show some examples and then try to illustrate using the systems illustrate the points that I want to make. 05:28.000 --> 05:33.000 So let me start with actually let's start with this one. 05:33.000 --> 05:37.000 This is kind of like game of life but different. 05:37.000 --> 05:43.000 So it starts out a bit kind of wired and wired and then it stabilizes over time. 05:43.000 --> 05:47.000 So these all of these kind of pink things those are the let's me zoom in a bit. 05:47.000 --> 05:50.000 Those are the hallmarks of game of life. 05:50.000 --> 05:55.000 What I have made here in step is a probabilistic game of life. 05:55.000 --> 06:00.000 So game of life has this thing where a cell is either dead or alive. 06:00.000 --> 06:05.000 But as with anything where Boolean logic is involved you can always make it fussy. 06:05.000 --> 06:10.000 So in this case I have turned if you Boolean into a float and then it is probabilistic. 06:10.000 --> 06:16.000 So as cell is never completed that or life is that's always a probability that it is alive. 06:16.000 --> 06:19.000 And that in itself is actually not that interesting. 06:19.000 --> 06:26.000 I tried that and it looked kind of neat but it didn't do much in terms of cool graphics. 06:26.000 --> 06:30.000 So what I tried was to introduce something I call decay. 06:30.000 --> 06:35.000 So let me zoom in a bit more so we have all these green spots. 06:35.000 --> 06:38.000 And that is what I call decay. 06:38.000 --> 06:45.000 So what's interesting in this probabilistic game of life is that if you have a cell, 06:46.000 --> 06:53.000 which for a long period stays either alive or dead so it doesn't change its state. 06:53.000 --> 07:00.000 Then you can say that the decay increases and then once it changes its state, 07:00.000 --> 07:06.000 the decay then inferences the probability of like it's certainty. 07:06.000 --> 07:14.000 So if you have a cell that turns alive and it is in a location with a high amount of decay, 07:14.000 --> 07:22.000 then you actually end up having a low probability that it really is alive and then this kind of evolves. 07:22.000 --> 07:28.000 So you have all these nice spots of green and it doesn't model anything. 07:28.000 --> 07:36.000 I mean I call it decay because that sounds cool but it only proves for this was to make something that looks kind of neat. 07:36.000 --> 07:42.000 So I will show a little bit of code also but not that much because it's not really important for this presentation. 07:42.000 --> 07:50.000 So that was one example. Let me show a different example where it was kind of a different way that in the job. 07:50.000 --> 07:56.000 So let's pick one. Let's pick this one. This is a new one. 07:56.000 --> 08:01.000 So it starts out this very blue but then given enough time. 08:01.000 --> 08:08.000 It starts growing these small spots, small shrals or whatever you want to call them. 08:08.000 --> 08:18.000 So we can zoom in a bit. So it fairly quickly stabilizes. 08:18.000 --> 08:26.000 Now I just zoom in on one area but if you zoom out and zoom in to another area, it's very much the same. 08:26.000 --> 08:34.000 And what's interesting here is that the computation in this one, there's basically no computation. 08:34.000 --> 08:42.000 The way it picks the new color for the pixel is that each pixel has associated with it. 08:42.000 --> 08:46.000 Student random number generator and then it just picks at random. 08:46.000 --> 08:50.000 Either the top neighbor, the right neighbor, the bottom neighbor or the left neighbor. 08:50.000 --> 08:55.000 And decides I will base my new color on this neighbor and then that changes if you step. 08:55.000 --> 09:03.000 And this results in this kind of funny looking swirls that is almost a bit like to see if you squint your eyes enough. 09:03.000 --> 09:08.000 So this one there was very little code involved and I had something much bigger planned and I didn't expect this to happen. 09:08.000 --> 09:13.000 But then I just shortened the code down and now it looks like this and I'm heavier about it. 09:13.000 --> 09:20.000 So that's an example of something that is very stable in terms of I mean that's not so much communication. 09:20.000 --> 09:24.000 If you look in one corner, it looks very much the same like in another corner. 09:24.000 --> 09:32.000 And that's nice but it's also could also be cool to have something where they really do affect each other the different kind of ends of the 09:32.000 --> 09:34.000 program. 09:34.000 --> 09:37.000 So I have one more example showing that. 09:37.000 --> 09:42.000 So this is also something that starts out with lots of small things. 09:42.000 --> 09:47.000 And then you wait for a few seconds and then you see something starting to materialize. 09:47.000 --> 09:55.000 So now with a zoom in a bit, you will see lots of these small kind of cells and let me maybe pause a bit. 09:55.000 --> 10:01.000 So what's really interesting here is that I tried to make something where you have lots of these small. 10:01.000 --> 10:05.000 Maybe it's confusing to call themselves but these small plups. 10:05.000 --> 10:08.000 And then kind of compete for space. 10:08.000 --> 10:15.000 And one of the emergent behaviors that I didn't expect was all of these really cool looking kind of yellow and blue waves. 10:15.000 --> 10:21.000 So when they try to expand, they, they, so each plup has its own color, which is yellow, 10:21.000 --> 10:26.000 I'm sorry, it's like blue or red or green or purple or something. 10:26.000 --> 10:33.000 And then you can see sometimes, oh, this one is gone and now this one is also being eaten. 10:33.000 --> 10:36.000 This purple one. 10:36.000 --> 10:40.000 It's being consumed by other ones, which are expanding. 10:40.000 --> 10:44.000 And if I zoom in it from outer bed again, you can now see that there are much fewer plups. 10:44.000 --> 10:47.000 So if you, if you, if you will, this one continue running for a while. 10:47.000 --> 10:52.000 It will really just be fewer and fewer plups until there's a few winners. 10:52.000 --> 10:54.000 And then it goes very slowly. 10:54.000 --> 10:59.000 So this one is not so stable. If you look at it over time, you will see a major difference. 10:59.000 --> 11:05.000 So sometimes having something that which is stable is nice because you can have a continue run for a long time. 11:05.000 --> 11:11.000 But it's also cool sometimes to have something that is more unstable, just to have some changes. 11:11.000 --> 11:17.000 And you can kind of, it's really fun to watch which ones get eaten by the other ones. 11:17.000 --> 11:21.000 Like this one, something is going down here. 11:21.000 --> 11:23.000 So this was another example. 11:23.000 --> 11:28.000 Let me maybe show an example of something where it didn't quite go as I had hoped. 11:33.000 --> 11:37.000 Let's look, it must be this one. 11:37.000 --> 11:40.000 I had planned something really big for this one. 11:40.000 --> 11:46.000 It was going to be huge supply lines of pixels going all the way across the board. 11:46.000 --> 11:48.000 But then I ended up with this one. 11:48.000 --> 11:51.000 It never changes from this in the big picture. 11:51.000 --> 11:53.000 It's like glittering. 11:53.000 --> 11:56.000 But there's really not anything huge going on. 11:56.000 --> 12:02.000 If you zoom in, you can kind of see that the different parts of it dates fire to inside. 12:02.000 --> 12:05.000 But they really don't succeed. 12:05.000 --> 12:13.000 And I gave up on this one because I couldn't make it work. 12:13.000 --> 12:15.000 And that is the fun of this. 12:15.000 --> 12:20.000 I don't know what you will get because you try to make something work on the pixel scale. 12:20.000 --> 12:24.000 And then that expands to the entire board. 12:24.000 --> 12:26.000 And sometimes it works. 12:26.000 --> 12:27.000 Sometimes you can quickly fail. 12:27.000 --> 12:30.000 But I kept it here just for an example. 12:30.000 --> 12:32.000 I have a few more minutes. 12:32.000 --> 12:38.000 So let me show one where it was not so straightforward for me to have it work. 12:38.000 --> 12:41.000 But it ended up looking all right. 12:41.000 --> 12:44.000 And then I will also show a bit of the code. 12:44.000 --> 12:47.000 So in this one, you have it's very blue. 12:47.000 --> 12:48.000 It's a bit hard to see. 12:48.000 --> 12:52.000 But there will be some things that I will point out. 12:52.000 --> 12:53.000 Let me zoom in a bit. 12:53.000 --> 12:55.000 So I will just pause it and zoom in. 12:55.000 --> 12:59.000 So in this one, you end up having kind of, let's call them lectures. 12:59.000 --> 13:03.000 Where the things from above are bit blocked. 13:03.000 --> 13:09.000 And then once you have these lectures, then if enough blockage is happening, 13:09.000 --> 13:12.000 then you get these things that are moving a bit upwards again. 13:12.000 --> 13:14.000 These kind of broccoli shapes. 13:14.000 --> 13:18.000 And then it repeats things move down again and it repeats. 13:18.000 --> 13:21.000 And what's interesting about this one was that I was really, 13:21.000 --> 13:23.000 I had no idea what I was doing. 13:23.000 --> 13:26.000 I will show you the code for this. 13:26.000 --> 13:28.000 Just to show you an example. 13:28.000 --> 13:31.000 So I have been making this in the food side program language. 13:31.000 --> 13:35.000 It's a programming language for GPUs primarily. 13:35.000 --> 13:38.000 But it doesn't really matter in terms of these cellular automates. 13:38.000 --> 13:42.000 Or you can really do anything in any programming language that you pick. 13:42.000 --> 13:44.000 So this is the step function. 13:44.000 --> 13:45.000 This is a function. 13:45.000 --> 13:46.000 And it's really a mess. 13:46.000 --> 13:49.000 I have no idea why I did this. 13:49.000 --> 13:53.000 But this is, I just tried some things out and then it worked out. 13:53.000 --> 13:58.000 So for example, I'm apparently I wanted to do a module here. 13:58.000 --> 14:02.000 And then I'm multiplying it with some addition. 14:02.000 --> 14:05.000 And yeah, that's how it looks. 14:05.000 --> 14:06.000 OK. 14:06.000 --> 14:08.000 So now I show some examples. 14:08.000 --> 14:13.000 So let's try to summarize. 14:13.000 --> 14:18.000 It's very important to have some local changes that propagate and actually 14:18.000 --> 14:20.000 affects global changes. 14:20.000 --> 14:25.000 Because then you get things that look dynamic and look nice. 14:25.000 --> 14:27.000 There must be some activity. 14:27.000 --> 14:29.000 If there's too little, it just stops. 14:29.000 --> 14:31.000 If there's too much, you can't follow it. 14:31.000 --> 14:34.000 You have to find a balance. 14:34.000 --> 14:35.000 The use lots of color. 14:35.000 --> 14:37.000 I have also used different color spaces. 14:37.000 --> 14:42.000 There's some really nice color spaces out there, which are not just RGB, but something 14:42.000 --> 14:45.000 called okay lap and so on. 14:45.000 --> 14:47.000 Then we'll try it out. 14:47.000 --> 14:48.000 It's fun. 14:48.000 --> 14:49.000 Thank you. 14:49.000 --> 14:58.000 My time is up. 15:04.000 --> 15:07.000 Thank you.