YouTube2Text

ORGANIC TOWNS FROM SQUARE TILES - a talk by OSKAR STÅLBERG at INDIECADE EUROPE 2019 — Transcript

by IndieCade Europe · 5,264 words · 705 segments · language en · Watch on YouTube

Full transcript

  1. 4:25let's start okay it is me again so our
  2. 4:33next speaker is Oscar who will show you
  3. 4:36how the wavefunction collapses I told
  4. 4:39him I'm gonna make a joke so I had to
  5. 4:40please welcome Oscar oh now it's working
  6. 4:51yeah hello everyone yeah I'm Oscar
  7. 4:53Stalberg I'll be talking to you about my
  8. 4:57new project that looks like this that I
  9. 4:59am currently working on the talk will be
  10. 5:02quite technical probably more technical
  11. 5:03than a lot of talk so far but I'll start
  12. 5:06by just introducing myself
  13. 5:07my name is Oscar Stalberg I've worked in
  14. 5:12video games for like 7 years now I think
  15. 5:15I started out at Ubisoft massive so my
  16. 5:17first part is I worked on was the
  17. 5:19division where I made this cool
  18. 5:21holographic map and sort of maps and
  19. 5:23urban environments has been a big part
  20. 5:25of my work ever since in the middle here
  21. 5:29you see two like web demos I did a long
  22. 5:31time ago those are accessible like
  23. 5:33online you can play them in browser and
  24. 5:35build your own little house or build
  25. 5:36your own mobile planet so I'm very
  26. 5:39interested in procedural stuff in
  27. 5:41general and that's the talk is gonna be
  28. 5:42a lot about procedural stuff and the
  29. 5:45last gift you see er here is from the
  30. 5:48game bad north which is what I like the
  31. 5:50past two years I was working on the game
  32. 5:52bad north so it's a small procedurally
  33. 5:57generated micro strategy game where you
  34. 6:00defend Islands against Vikings that also
  35. 6:04started as a procedural project like all
  36. 6:07my projects do and then I was kind of at
  37. 6:09a good place in my career where I
  38. 6:10figured well might as well put a game on
  39. 6:13top of this and like do my first indie
  40. 6:15project yeah but that's all out now it
  41. 6:17actually shipped on mobile two days ago
  42. 6:19so now we've shipped on all the
  43. 6:21platforms that we were gonna ship on
  44. 6:24yeah and if you want to see cool gifts
  45. 6:27like this you could follow me on Twitter
  46. 6:28that's my Twitter handle right there but
  47. 6:31today I'm going to talk about my new
  48. 6:33project it doesn't have a name yet the
  49. 6:36working title is placed
  50. 6:39because you're building nice little
  51. 6:40places kind of but this is what it looks
  52. 6:43like
  53. 6:43and it's kind of the it's kind of a
  54. 6:46combination of a lot of themes I have
  55. 6:49been working on lately so it uses a lot
  56. 6:53of the same core ideas from bad north
  57. 6:56but it also combines it with some with
  58. 6:58things from brick block that thing where
  59. 7:00you build a house and a bunch of other
  60. 7:03stuff and then it introduces the new way
  61. 7:05of doing a like a non-square grid you
  62. 7:07can see so we can create kind of more
  63. 7:08organic looking tiles which is something
  64. 7:11I've been wanting to trying out try out
  65. 7:12for a very long time yeah so i'ma talk
  66. 7:17about just like the different techniques
  67. 7:19that go into making this thing so so
  68. 7:24first of all what is it its a mix
  69. 7:27between the algorithms marching cubes
  70. 7:29which is quite a simple algorithm but
  71. 7:31like that's a good first procedural
  72. 7:34algorithm to implement and the algorithm
  73. 7:36wavefunction collapse which is a bit
  74. 7:37weirdly named algorithm but it's an
  75. 7:39algorithm for like placing tiles or
  76. 7:41inside a space as its a mix between
  77. 7:44those and then it's also running on an
  78. 7:48irregular quadrilateral grid so
  79. 7:51quadrilateral means that all the like
  80. 7:54you see how the little black grid here
  81. 7:56it's all made of squares or not squares
  82. 7:59it's made of quads right so they all
  83. 8:01have four corners but it's irregular
  84. 8:04right here you have three quads meeting
  85. 8:08at a corner and you can build there if
  86. 8:10you want to or here you have five of
  87. 8:12them being a corner and you can probably
  88. 8:14yeah here's there's six of them meeting
  89. 8:16at all that's too far away I can build
  90. 8:18like that there we go so I'm gonna start
  91. 8:21to talk just about how I am approaching
  92. 8:24the generation of a grid like this it
  93. 8:28took me some time to like I knew I'd
  94. 8:30been wanting to work on a grid similar
  95. 8:32to that for some time but it took me a
  96. 8:34while to figure out the best approach
  97. 8:35for it so imma just show you a get like
  98. 8:38some of you might have seen this gif on
  99. 8:40Twitter before so that was the only
  100. 8:42slide now it's just gonna be in unity
  101. 8:44and a couple of pictures
  102. 8:47so here you can see how the grid is made
  103. 8:51so I start by creating a bunch of
  104. 8:53triangles within a hexagon and then I
  105. 8:56randomly join some of the triangles into
  106. 8:59quads so that's the only random element
  107. 9:02in creating the grid because after that
  108. 9:05like the grid like if you and I just see
  109. 9:07that with the position of that
  110. 9:08particular grid patch then you know it's
  111. 9:10deterministic yeah so then it randomly
  112. 9:14joined some of the triangles into quads
  113. 9:15and then it subdivides all the quads and
  114. 9:19all the triangles because obviously you
  115. 9:21can subdivide subdivide a quad into four
  116. 9:25new quads but you can also subdivide a
  117. 9:26triangle into three quads so it's like
  118. 9:30if you run the smoothing algorithm
  119. 9:31function in any 3d software that's
  120. 9:34basically what it does and then I run a
  121. 9:36relax algorithm on that to make it all
  122. 9:39kind of smooth and nice and not like
  123. 9:40jagged and sharp yeah so I do that and
  124. 9:45the point of that kind of is the point
  125. 9:48of using a quadrilateral grid like that
  126. 9:50well the point of using it rather than a
  127. 9:53just a square grid is of course because
  128. 9:55like town escapes look more fun when
  129. 9:57they have fun and interesting organic
  130. 9:59shapes I mean Pirates of all towns kind
  131. 10:01of look like this a lot but it's also
  132. 10:04because if we have if it's all made of
  133. 10:05quads then you can use square tiles and
  134. 10:08place them there so that means it's
  135. 10:10quite easy to input like that's a good
  136. 10:12functional you can like you can
  137. 10:13tessellate square so you can place them
  138. 10:15next to each other they have edges that
  139. 10:17bump up against each other so it's like
  140. 10:19that's how we normally use tiles and
  141. 10:20games so it's just a more fun way of
  142. 10:22using pretty regular game tiles actually
  143. 10:26the first actually did some work for
  144. 10:29those who game released of like a few
  145. 10:32months ago called night call that takes
  146. 10:34place in Paris you're a taxi driver
  147. 10:36driving around and they just needed a
  148. 10:37view of Paris like you're driving around
  149. 10:39on the actual map of Paris and they just
  150. 10:41needed a view of Paris
  151. 10:43this sort of swish by in the rear view
  152. 10:44mirror as you're driving around so bait
  153. 10:46so they contacted me to help them out
  154. 10:48with that and that was my first attempt
  155. 10:50to try out making a quadrilateral grid
  156. 10:52so this is what I did for that one so
  157. 10:54you can see how like the grid it or the
  158. 10:56here it's actually generating it within
  159. 11:00city blocks that are like the actual
  160. 11:02blocks from actual data of Paris but
  161. 11:07that was pretty complicated to write
  162. 11:09because when you and you can see how it
  163. 11:11gets kind of wonky around a lot of
  164. 11:13especially like sharper places but for
  165. 11:15my new project and I wanted to figure
  166. 11:17out is and there's a lot of like I have
  167. 11:18to do a lot of intersection tests
  168. 11:20because you're kind of tiling it up
  169. 11:21you're like you have is an irregular
  170. 11:23polygon an arbitrary regular polygon and
  171. 11:25then you're tiling it up with quads
  172. 11:27along the edges and then you sort of
  173. 11:28keep filling it in until you filled it
  174. 11:29in all the way but if you make a mistake
  175. 11:31and the quads start sort of overlap each
  176. 11:34other then it will all turn inside out
  177. 11:36and then it will start building towards
  178. 11:38infinity and you obviously don't want
  179. 11:39that so that was quite tricky and you
  180. 11:42have to do a lot of just line line
  181. 11:43intersections and quad quad
  182. 11:44intersections check like can I play
  183. 11:46something here so in this new project
  184. 11:48I'm making I want it to be very
  185. 11:50performant and be able to run like in
  186. 11:51the browser or in mobile and stuff like
  187. 11:53that so then I wanted a solution that
  188. 11:55didn't contain where I didn't have to do
  189. 11:57any intersection tests and stuff like
  190. 11:59that so I'm very happy that I bet I
  191. 12:02figured out this model yeah and we can
  192. 12:06actually see let me show you it
  193. 12:08generating on the fly so now the game is
  194. 12:09running so we'll turn off the game and
  195. 12:11then we will turn that like I can tell
  196. 12:15the game how fast its update loop is
  197. 12:17supposed to run so now it's quite slow
  198. 12:19it's just going to be able to do eight
  199. 12:20steps each frame normally I run like a
  200. 12:26couple of like eight milliseconds each
  201. 12:27frame so we'll see the yeah here you can
  202. 12:30see how like it's building everything
  203. 12:33and the sort of tiles are slowly falling
  204. 12:37into place there's still some
  205. 12:38awkwardness but that will sort of soon
  206. 12:46and all these like red things are
  207. 12:49marking out like where it's supposed to
  208. 12:51generate new because now it's just
  209. 12:52generated a little grid patch in the
  210. 12:53middle here it's actually up to speed
  211. 13:01here a little bit yep so now you can see
  212. 13:03it like now it's generating these little
  213. 13:06grid patches and like a challenge here
  214. 13:08was also you can't like a relaxation
  215. 13:12algorithm you can only run a relaxation
  216. 13:13algorithm on a finite set of points but
  217. 13:16I wanted this to be a erratically
  218. 13:17infinite grid where you could just keep
  219. 13:19building forever I mean obviously you
  220. 13:21will run out of memory but you can like
  221. 13:22build a bit here and then remove those
  222. 13:24things build them here remove those
  223. 13:25things built-in mirrors you can kind of
  224. 13:26walk by building in different directions
  225. 13:28like if I place if a place a tile like
  226. 13:32here it will start to build like build
  227. 13:35grid in this direction too so what I
  228. 13:37have to do is I have to generate a bunch
  229. 13:39of these little patches so here you can
  230. 13:42see the clear like the the patches made
  231. 13:44of triangles that are subdivided that
  232. 13:46turn into quads but I have to generate
  233. 13:48clusters of those patches that I then
  234. 13:50can sew in clusters of three as you can
  235. 13:53see here with this thing that kind of
  236. 13:54bends into place I relax them together
  237. 13:57and then with the final result I can
  238. 13:59interpolate between a bunch of different
  239. 14:01of those relaxed clusters and then you
  240. 14:03get like a seamless tiling thing made
  241. 14:06out of quads so you can see how like
  242. 14:08here's obviously the borders between the
  243. 14:10different patches and you can see how it
  244. 14:11all lines up perfectly in the end yeah
  245. 14:17so now it's generated like everything it
  246. 14:19has to generate for my current size of
  247. 14:21the world but if I keep building this
  248. 14:22way yeah you see how now like it wants
  249. 14:24to generate more in this direction and a
  250. 14:26bit more in this because there's like oh
  251. 14:27yeah
  252. 14:29so and a very interesting thing in
  253. 14:31generating the quad grid this way in
  254. 14:34starting with generating triangles is I
  255. 14:37got an interesting opportunity use
  256. 14:38something I've been wanting to use for a
  257. 14:40long time which is there is a way of
  258. 14:43thinking about hexagons like has any of
  259. 14:46you ever built a hexagon based games
  260. 14:48yeah few knots yeah okay a few people
  261. 14:51there is a very interesting way of
  262. 14:53thinking about hexagons where instead of
  263. 14:56where you can think about them as as
  264. 14:58cubes in a sort of diagonal plane
  265. 15:01stacked like this because as you can see
  266. 15:04here these are cubes but they're also
  267. 15:05hexagons and then you can use integers
  268. 15:08instead of floats for their positions
  269. 15:12you don't get precision errors and you
  270. 15:13can do like a lot of the math becomes
  271. 15:14much more straightforward than if you're
  272. 15:16using positions and angles and stuff
  273. 15:18like that then you get a lot of floats
  274. 15:20and then if you build a very large grid
  275. 15:21you start getting flowing points issues
  276. 15:23and stuff like that so it's a very nice
  277. 15:25way to approach hexagons yeah and it
  278. 15:31also makes sure that the grid kind of
  279. 15:33has this nice irregular shape right so
  280. 15:36none of these not like there isn't an
  281. 15:38underlying square grid that creates this
  282. 15:40this quadrant but but it's all made of
  283. 15:42hexagons yeah another fun thing with the
  284. 15:46hexagons is oh yeah and if you want to
  285. 15:49look further into there's an amazing
  286. 15:50article that I've used a bunch of times
  287. 15:52written by like the addresses here by
  288. 15:54Amit Patel he does a bunch of I mean I'm
  289. 15:56sure you've come across some of his work
  290. 15:57before he does a lot of really
  291. 15:59interesting really well explained sort
  292. 16:03of articles and blog posts about some
  293. 16:04fundamental like path finding algorithms
  294. 16:07ways to structure your grids graphs
  295. 16:11stuff like that and like procedural
  296. 16:13generation stuff in general so I got a
  297. 16:15lot of my hexagon math from him yeah and
  298. 16:23an interesting way to illustrate this as
  299. 16:25well is that since all the verts here
  300. 16:28have an origin position on this like as
  301. 16:32integers I can actually use I'll show
  302. 16:36you the bounding box I'm using to decide
  303. 16:37like how what's the center of this world
  304. 16:39is and how far out I'm going to generate
  305. 16:40so this looks like that and it looks
  306. 16:42like a kind of a hexagon but if we build
  307. 16:45it a lot in one direction you can see
  308. 16:47that it acts it is actually a box but
  309. 16:50that's projected down into the flat
  310. 16:51plane into the hexagon space so it
  311. 16:54becomes a bounding box but in in hexagon
  312. 16:58space which means that you get less of
  313. 17:00the obvious bounding box center that you
  314. 17:03would get if it was just a grid aligned
  315. 17:07bounding box the normal way you would do
  316. 17:09it so that's a nice little illustration
  317. 17:12of what's
  318. 17:14yeah so that's kind of it about know
  319. 17:17there's a few more things about the grid
  320. 17:20so yeah obviously when I run the relax
  321. 17:22algorithm to make the grid look as as
  322. 17:25sort of nice and relaxed and smooth as
  323. 17:27possible I found an interesting way of
  324. 17:28doing that and that could be a general
  325. 17:30way if you have like an irregular quad
  326. 17:31and you want to turn that quad into more
  327. 17:33of a square but you don't want to align
  328. 17:35it to the the axis of the of the world
  329. 17:40you're working and this is very
  330. 17:41convenient and fast an easy way to do
  331. 17:42that where so you start by like
  332. 17:44calculating the center and you get the
  333. 17:46vectors like from each corner to the
  334. 17:49center right and then if you just rotate
  335. 17:52them all like rotate one of them nothing
  336. 17:55and 190 degrees one one eighty degrees
  337. 17:57and one 270 degrees and the way you can
  338. 17:59rotate a 2d vector is if you just flip
  339. 18:01the you flip the coordinates and it
  340. 18:05invert one of them that's a 90 degree
  341. 18:07rotation of a 2d vector so that's a
  342. 18:08super cheap way of doing it so you
  343. 18:10rotate them and then you average them
  344. 18:11and then you rotate them back out and
  345. 18:13then you just move towards that right so
  346. 18:15then you get a perfect square in the end
  347. 18:16of course in my relaxation I can't make
  348. 18:19a perfect square out of them because
  349. 18:20like I could make a perfect square out
  350. 18:22of one grid but since they're all
  351. 18:23budding up or one quad but since they're
  352. 18:25all budding up against each other this
  353. 18:27I'm sort of accumulating these little
  354. 18:29forces like they sees a little red green
  355. 18:31blue yellow force on these corners I'm
  356. 18:34accumulating them from all the like for
  357. 18:36each verse for all the adjacent quads
  358. 18:38and then I sum them up and then I do
  359. 18:39that over multiple iterations and that's
  360. 18:42kind of the slowest parts of the with
  361. 18:45one of slowest algorithms that I have
  362. 18:47running the relaxation because you have
  363. 18:50to do it quite a lot of times like when
  364. 18:51you saw the grid relax in the beginning
  365. 18:54you can see how like it actually takes a
  366. 18:56while to relax all of them and it keeps
  367. 18:57like it's still having effective and 256
  368. 19:00steps out which is how fast I'm running
  369. 19:02it yeah yeah so that's the the grid I'm
  370. 19:07working on another interesting thing I
  371. 19:09do with the grid is I I want to create
  372. 19:12like sort of different areas that are
  373. 19:14dif work aortic and some feel more
  374. 19:18orderly so you can see how some of these
  375. 19:22some of these
  376. 19:25hexxus are like this here you can
  377. 19:28clearly see the remnants of a triangle
  378. 19:30right and here's clearly the remnant of
  379. 19:32a triangle
  380. 19:33whereas this piece here is just made out
  381. 19:38of six very big triangles so this piece
  382. 19:41becomes much less chaotic than this one
  383. 19:43here that's made out of more anyway and
  384. 19:46this one here is made of a ton of small
  385. 19:48little triangles like you can see how
  386. 19:49the triangles is kind of made up of
  387. 19:50learn or Mike here's the mid-level
  388. 19:54here's the very very big triangles and
  389. 20:01yeah this is the more chaotic one so
  390. 20:04these end up like if you build around
  391. 20:05those areas you get a much more chaotic
  392. 20:08looking town with like weird Wonka
  393. 20:10shaped houses like you see like that's a
  394. 20:12weird
  395. 20:14that's a weird house shape obviously
  396. 20:16whereas if you build in the more axis
  397. 20:21aligned areas you can build nice big
  398. 20:23square ish function so that's kind of an
  399. 20:25option I want to I want to give the user
  400. 20:26in the end to kind of choose what kind
  401. 20:28of style they want to build their
  402. 20:29environment in but I don't want them to
  403. 20:31be able to build a completely square
  404. 20:33thing too big like they're always
  405. 20:34supposed to butt up against the sort of
  406. 20:36organic nature of a city and that's kind
  407. 20:41of one of the fundamental sort of
  408. 20:43aesthetical things of this project is I
  409. 20:46really like the in urban environments I
  410. 20:48really like the combination of the
  411. 20:51artificial and the plant and the
  412. 20:53symmetrical which is like whenever you
  413. 20:55build a house usually well not anymore
  414. 20:56but it used to be did you build it kind
  415. 20:58of symmetrical with a clear sort of idea
  416. 21:00and repetition and patterns but then you
  417. 21:02know it always butts up against another
  418. 21:04house was sort of a weird angles and you
  419. 21:05have to make it a bit of a weird angle
  420. 21:06and then after a while when you're
  421. 21:08renovated you've changed like half of
  422. 21:10the house likely or so in the end you
  423. 21:11have this sort of organic asymmetry
  424. 21:13growing so new symmetrical things keep
  425. 21:15popping up but then they kind of become
  426. 21:17more organic and symmetrical less the
  427. 21:18environment grows around them and that's
  428. 21:20kind of a thing that I wanna an
  429. 21:22aesthetic that I want to that I want to
  430. 21:24work with in this game I'm hoping to add
  431. 21:26later like right now I just have these
  432. 21:27little grassy patches but I'm hoping to
  433. 21:29add later stuff like plants that
  434. 21:32actually grow slowly over time like
  435. 21:34vines growing on the walls would
  436. 21:35obviously be ideal but even just a
  437. 21:38little tree
  438. 21:38or whatever and stuff like that it kind
  439. 21:40of grows slowly over time so house
  440. 21:43obviously this is a very tile based
  441. 21:45thing so if you just look at the how it
  442. 21:49all comes together and turn off the grid
  443. 21:51of this grid - so these are here you can
  444. 21:54see how it's all divided into little
  445. 21:56tiles and these I for this project I
  446. 22:00have to build a lot of tiles to make the
  447. 22:02make the whole thing work so this is
  448. 22:05actually what it looks like in Maya when
  449. 22:06I'm building them so that's quite a few
  450. 22:08tiles I'm up to about 200 tiles already
  451. 22:11but I reckon I'll have to build like 3
  452. 22:12or 400 to satisfy all the possibilities
  453. 22:15of what you whatever you can build and
  454. 22:17so these tiles look very similar to
  455. 22:20something that you would use for a
  456. 22:21normal marching squares algorithm and
  457. 22:23one core one core idea is that the tiles
  458. 22:27sit on kind of the corners right so if
  459. 22:31we select a small little house piece
  460. 22:33here so this is just a single block of
  461. 22:35house right but it's made up out of like
  462. 22:38four corners on top and then four
  463. 22:41corners on the bottom like this so each
  464. 22:44of these little modules have like this
  465. 22:49one obviously only has one corner that
  466. 22:50sort of inside the house block whereas
  467. 22:53it has like the rest of the corners are
  468. 22:54outside the house book so we can look at
  469. 22:57what that looks like so here is all
  470. 23:01these tiles imported into Maya but they
  471. 23:05don't have a texture here this this mesh
  472. 23:07here is actually just for debug purposes
  473. 23:08for me to be able to see what I'm
  474. 23:09working on
  475. 23:10and here incidentally is actually the
  476. 23:12different tiles I'm building being
  477. 23:14recombined into bigger tiles because I
  478. 23:16don't wanna have to build all of these
  479. 23:18weird combinations myself so whenever
  480. 23:21you have tiles that could fit it like
  481. 23:22you could have a corner like this
  482. 23:23against the corner like that and they're
  483. 23:25not intersecting I might as well just
  484. 23:26generate that out of the meshes I
  485. 23:28already have instead of building it
  486. 23:30manually because there's a lot of
  487. 23:31combinations to build obviously this
  488. 23:33like goes into forever here and here
  489. 23:37also you can see how let's pick the
  490. 23:40thing we were looking at before here's
  491. 23:42that little thing so if we select this
  492. 23:44one here I should be able to click on it
  493. 23:45and yeah oh it's a bit slow when I try
  494. 23:50and display all those so you can see how
  495. 23:52this how it
  496. 23:52little square on the or a little cube on
  497. 23:55the corner here that's because that's
  498. 23:56the only cube that's inside whereas if I
  499. 23:59click this piece of wall here it has
  500. 24:01four cubes because it has four corners
  501. 24:03that are inside and it has four cubes
  502. 24:05that are outside so that means of course
  503. 24:08that you can like taking those corners
  504. 24:12in sequence you can combine them into
  505. 24:13right if it was just inside and outside
  506. 24:15it's not that simple but if it was just
  507. 24:17insides and outsides you could you could
  508. 24:19put it into just a binary number right
  509. 24:21so this one here could be this one here
  510. 24:25could be one zero zero zero zero zero
  511. 24:28zero zero so that's like the byte that's
  512. 24:30one or if the corner was placed here
  513. 24:32instead of here then it's going to be 0
  514. 24:341 0 0 0 0 0 which is 2 so that's a great
  515. 24:37way you can just index them like that
  516. 24:38and then when you ask for them again and
  517. 24:40the algorithm is very easy to just ask
  518. 24:42access the right the right one straight
  519. 24:43away now in my case there is one pretty
  520. 24:47significant piece of complexity above
  521. 24:51that which is that I want to be able to
  522. 24:53use multiple colors so if I build let's
  523. 24:57run the game again if I build with more
  524. 25:02than one life I build with like color
  525. 25:04colors of blocks of different colors
  526. 25:06next to each other I want to like make a
  527. 25:08little comment in the mesh of what
  528. 25:09happens when those two blocks meet right
  529. 25:11so here you can see I'll let's make it
  530. 25:13run faster there we go
  531. 25:16so here you can see how this green meets
  532. 25:17the yellow so then there's like a little
  533. 25:19trimming like this and it has like a
  534. 25:21slightly taller window and when these
  535. 25:23ones meet each other like that there's a
  536. 25:25little bit of a drainpipe yeah basically
  537. 25:28I want to be able to and here these meet
  538. 25:29and they have like slightly different
  539. 25:30heights so I want to be able to comment
  540. 25:32what happens when different colors meet
  541. 25:34but that also means that I have to like
  542. 25:36it's not enough to have a court like a
  543. 25:39house corner like this I need to have a
  544. 25:41corner where like the top or house side
  545. 25:44like that I need to have one where the
  546. 25:45top part is one material color and the
  547. 25:48bottom one is another material they
  548. 25:51don't this doesn't all only work for a
  549. 25:53green and white though like whichever
  550. 25:55color you choose you can pick this one
  551. 25:56and they recolor them offers so I have
  552. 25:59to do that one but then I also have to
  553. 26:01do like ok what happens if we split the
  554. 26:02colors this way around and what happens
  555. 26:04if we split the colors
  556. 26:06like here's one that splits the name for
  557. 26:07different ways so then I have to like
  558. 26:10assign different colors and build all
  559. 26:11these kinds of different combinations so
  560. 26:12that's a lot of work and that's why I
  561. 26:14think I'll need another if I didn't have
  562. 26:16the different colors I think I only
  563. 26:17would theoretically need 667 pieces to
  564. 26:20make this whole thing work but with the
  565. 26:21different colors the permutation count
  566. 26:23kind of explodes so now I think it will
  567. 26:25be like in the three four hundreds or
  568. 26:27something like that yeah so the marching
  569. 26:32squares part the marching cubes part of
  570. 26:35the algorithm that's the simple part
  571. 26:36that's the part that can figure out that
  572. 26:39you know but this is a corner and can
  573. 26:43place the corner on the corner of a
  574. 26:44house but that's not all it takes
  575. 26:46because obviously I have a bunch of
  576. 26:47different types of corners right so I
  577. 26:49have this top corner here it's like a
  578. 26:51simple type I have now became a
  579. 26:53different type but then of course I have
  580. 26:54like this little corner here where it's
  581. 26:56like a terrace or this little thing here
  582. 26:59where it's like a bigger roof or than
  583. 27:02those all kinds of things like that so
  584. 27:03that's where the wavefunction collapse
  585. 27:05algorithm comes into place so let's see
  586. 27:07if we can actually see this unfold in
  587. 27:09real time so if I turn on the gizmos I
  588. 27:11select the that's the graph I need to
  589. 27:16select and then turn on off the graph
  590. 27:17gives me turn on the cube there we go
  591. 27:20so nope that's the wrong one yeah okay I
  592. 27:22think this should work yes
  593. 27:24so here it became very very slow and now
  594. 27:26it's the drawing of everything that's
  595. 27:27very small so what you see here the
  596. 27:29white wireframes you see is the entire
  597. 27:33possibility space right so for each of
  598. 27:35these little slots it there is there a
  599. 27:42bunch of different modules that are
  600. 27:43possible but it's usually not that many
  601. 27:45like on a corner slots maybe there's
  602. 27:47like I don't know 20 different ones
  603. 27:49because it's like a few different styles
  604. 27:51but then they can be rotated and mirror
  605. 27:53different ways so it starts with all of
  606. 27:56those being so let's just maybe look at
  607. 28:03its bit slow if you have everything
  608. 28:04selected so let's maybe look at them
  609. 28:07here I think it's still yeah so here if
  610. 28:09you look at this corner you can see kind
  611. 28:11of the shadows of let's turn on the word
  612. 28:12from the shadows of the different
  613. 28:15possibilities you see like it could have
  614. 28:16a chimney here it still thinks it could
  615. 28:19have a like a pointy side and achieve me
  616. 28:22here it actually can't in the end
  617. 28:23because that would there would have to
  618. 28:25be a similar chimney on this side and
  619. 28:27there's not but it doesn't know that yet
  620. 28:29because the algorithm hasn't gotten that
  621. 28:30far yet right so right now this thing's
  622. 28:33that there are eleven possibilities for
  623. 28:36this cube and those are the ones we see
  624. 28:38here and this one things that are that
  625. 28:40there are ten possibilities for this one
  626. 28:42this only thinks there are eight like
  627. 28:45you can see the shadow of the the kind
  628. 28:48of trimming we were looking at before
  629. 28:49here but as to then ask the wavefunction
  630. 28:52collapse algorithm runs fewer and fewer
  631. 28:55things are possible and in the end it
  632. 28:56all collapses so if you're just running
  633. 28:59again we can if we select everything we
  634. 29:01see all the gizmos for it yeah and the
  635. 29:07so obviously the wavefunction collapse
  636. 29:09is an algorithm that can be quite slow
  637. 29:11I've managed to build my thing in a way
  638. 29:12so that I can run it like if we run it
  639. 29:16very slow and I can keep clicking and
  640. 29:19even though it hasn't finished figuring
  641. 29:21out what things are supposed to look
  642. 29:22like I can still keep building and then
  643. 29:25it will just like if we just make it
  644. 29:26faster again okay now I selected it so
  645. 29:29now it's very slow then it will kind of
  646. 29:32resolve it all anyway after the fact so
  647. 29:37there's like two kinds of propagation
  648. 29:39happening first there's a propagation
  649. 29:40where like if you build something it
  650. 29:43needs to propagate out and tell all its
  651. 29:44neighbors like hey something changed so
  652. 29:46everything is possible again and that
  653. 29:49one tells its neighbor hey I changed and
  654. 29:50that means I could have a different side
  655. 29:52towards you so that means everything's
  656. 29:53possible for you again and that kind of
  657. 29:55propagates out obviously if you have
  658. 29:56disconnected houses like this it won't
  659. 29:59propagate to them so if I select all of
  660. 30:02these and build here it might even be so
  661. 30:06fast that yeah cuz if I build here you
  662. 30:08see how this entire chunk it becomes
  663. 30:10like everything becomes possible again
  664. 30:11and then the possibility space collapses
  665. 30:13and yeah where I said but if I build
  666. 30:15over here these aren't connected to this
  667. 30:17but if I connect them like this then
  668. 30:19yeah that all happens so that I have
  669. 30:23done a longer totten like hour-long talk
  670. 30:25on just the topic of wavefunction
  671. 30:27collapse for anyone who wants to dive
  672. 30:28deeper into that so that's the name
  673. 30:30again of the algorithm that kind of
  674. 30:31figures out which pieces fit next to
  675. 30:33each other and select
  676. 30:33them but the core idea is like you make
  677. 30:36you build a large possibility space
  678. 30:38where everything is possible in my case
  679. 30:40here not everything is possible because
  680. 30:42just the right like corner pieces or
  681. 30:44side pieces that satisfy the constraints
  682. 30:45around they are possible and then you
  683. 30:49start removing you start as soon as you
  684. 30:51place this one piece that big means that
  685. 30:52a bunch of the pieces next to them are
  686. 30:53not possible anymore so then you start
  687. 30:55removing those and then that means that
  688. 30:56a bunch of other ones are not possible
  689. 30:58anymore and that propagates and the
  690. 30:59whole thing collapses and in the end no
  691. 31:01it's just one possibility and that's
  692. 31:03what you end up showing the player yeah
  693. 31:07that went by way quicker than I thought
  694. 31:10because I have a bunch of other things
  695. 31:11but maybe we'll cut for questions to
  696. 31:14wrap it up maybe yeah ok but all I'll
  697. 31:17have this project running on my computer
  698. 31:20I will be sitting around somewhere so if
  699. 31:21anyone want has further questions or
  700. 31:23want to take a look at anything or stuff
  701. 31:25like that
  702. 31:25then you are most welcome to approach me
  703. 31:27thank you
  704. 31:29[Applause]
  705. 31:53you

About this transcript

This page contains the full transcript of ORGANIC TOWNS FROM SQUARE TILES - a talk by OSKAR STÅLBERG at INDIECADE EUROPE 2019 by IndieCade Europe, generated from the public captions YouTube serves with the video. The transcript has 5,264 words across 705 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.