2e:null 2f:["$","title",null,{"children":"Hexagonal game board with ‹hex grid› cells | Olivier Lange | Observable"}] 34:[{"id":"34562fa493849609e48fba1fa5fde53769796da1d530fe52ece28a5efcca10f77f60866e3688aeaaa30401a20269680ebc6016342953e5bc4df3c0a72d9f529c","href":"https://static.observableusercontent.com/files/34562fa493849609e48fba1fa5fde53769796da1d530fe52ece28a5efcca10f77f60866e3688aeaaa30401a20269680ebc6016342953e5bc4df3c0a72d9f529c","name":"Screenshot 2021-05-27 at 01.21.51.png","type":"image/png","lastModified":1622071315427.508,"size":66306},{"id":"08e5ecd05c0d980976baa01d71f37474b9b7724daf401d7a48575a8957642c6740b46bee03bb25d8abed4a73bbf2cfbac2101b10e013322548b3b831f03535c8","href":"https://static.observableusercontent.com/files/08e5ecd05c0d980976baa01d71f37474b9b7724daf401d7a48575a8957642c6740b46bee03bb25d8abed4a73bbf2cfbac2101b10e013322548b3b831f03535c8","name":"Screenshot 2021-05-27 at 01.22.44.png","type":"image/png","lastModified":1622071368039.205,"size":61018},{"id":"d2ecebc1cbee1f971efcf7d7768e1c9fb9ff274c00c1e79475d9a59260c4b71b6a5c50fe8b45da515df04a1c80b64a267fd7eaf0ff798298cbcbb19273c3a870","href":"https://static.observableusercontent.com/files/d2ecebc1cbee1f971efcf7d7768e1c9fb9ff274c00c1e79475d9a59260c4b71b6a5c50fe8b45da515df04a1c80b64a267fd7eaf0ff798298cbcbb19273c3a870","name":"Screenshot 2021-05-27 at 01.23.51.png","type":"image/png","lastModified":1622071434916.804,"size":69065}] 32:{"id":"899a4c0768161f9b","slug":"hexgrid-game-board","title":"Hexagonal game board with ‹hex grid› cells","thumbnail":"168b705dc1c3897c03251c1a724acd9561a2ea731cc3d81d44e70f06503b3642","access_level":"public","create_time":"$D2021-05-26T20:00:17.178Z","update_time":"$D2021-06-02T20:16:46.712Z","view_time":null,"first_public_time":"$D2021-05-26T21:52:30.974Z","has_unpublished_edits":null,"fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"3febe0974a7138cb","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/52639e5630d4e3e4e2772fe77680883002a0b9352d8dd7a649dbcb67b1e1fb3a","tier":"starter_2024"},"version":514,"publish_version":514,"role":null,"authored":false,"authors":[{"type":"individual","id":"deea7e78e25caede","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/05f7623b298d024c8fdb05b03c59e2d52fe0349b7c85bced7cdea69e7dcb847a","tier":null}],"members":[{"type":"individual","id":"deea7e78e25caede","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/05f7623b298d024c8fdb05b03c59e2d52fe0349b7c85bced7cdea69e7dcb847a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"58c9f171676a532b","slug":"hexgrids","title":"Hexagonal Grids","owner":{"id":"3febe0974a7138cb","login":"olange","name":"Olivier Lange"}},"type":"notebook","body":{"title":"Hexagonal game board with ‹hex grid› cells","cells":[{"id":41,"value":"# Hexagonal game board
with ‹hex grid› cells\n\nThis notebook shows how to create a _game board_ in an **hexagonal** shape, made of many ‹hex grid› _cells_ — in other words, a game board with a **honeycomb** layout.\n\nIt implements the `cube_ring()` and `cube_spiral()` [ring algorithms](https://www.redblobgames.com/grids/hexagons/#rings) of the [«Hex Grids»](https://www.redblobgames.com/grids/hexagons/) reference article from Red Blob Games / Amit Patel.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"html`

**Cube coordinates** used to address the ‹hex grid› *cells* of our hexagonal *game board*
Image: excerpt from the Coordinate systems › Cube coordinates section of Hexagonal Grids article.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"---\n## Prolegomena\n\nWe chose to use [cube coordinates](https://www.redblobgames.com/grids/hexagons/#coordinates-cube) for the ‹hex grid› cells, with a `‹q:0;r:0;s:0›` _origin_ at the **center** of the game board.\n\nThe game board is represented by **an array**, containing the _cube coordinates_ of all its ‹hex grid› _cells_. We used two simple [ring algorithms](https://www.redblobgames.com/grids/hexagons/#rings), to populate this array.\n\nThe **first _cell_** of the _game board_ is placed in the **center** of the board; and the following are placed on rings, growing outwards, in a spiral shape.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"---\n## Spiral rings\n\nOur `hexSpiral()` function implements the `cube_spiral()` pseudo-function, described in the [‹Rings› section](https://www.redblobgames.com/grids/hexagons/#rings) of the «Hexagonal Grids» article.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"html`

**Spiral rings with a radius of 3**
Image: excerpt from the Spiral rings section of Hexagonal Grids article.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"### Sample result\n\nAt a radius of 3, we get a spiral of 1 + 6 + 12 + 18 = 37 cells — the spiral is made of 3 rings of radius [1,2,3], plus the center cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"spiralR3 = hexSpiral( center, 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"### Algorithm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"This `hexSpiral()` function returns an ordered list of hexgrid cells, in cube coordinates (q,r,s)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"function hexSpiral( center, radius) {\n let results = [];\n for( let k = 0; k <= radius; k++) {\n const ring = hexRing( center, k);\n console.log(ring);\n results = results.concat( ring);\n }\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"---\n## Single Ring\n\nOur `hexRing()` function implements the `cube_ring()` pseudo-function, described in the [‹Rings› section](https://www.redblobgames.com/grids/hexagons/#rings) of the «Hexagonal Grids» article.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"html`

**Ring with a radius of 3**
Image: excerpt from the Single rings section of Hexagonal Grids article.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"### Sample result\n\nAt a radius of 3, we get a ring of 18 cells.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"ringR3 = hexRing( center, 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"### Algorithm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"function hexRing(center, radius) {\n let results = [];\n if( radius === 0) {\n results.push( center); \n } else {\n const dir4 = hexgrid.Hex.direction(4); // South-West\n let hex = center.add( dir4.scale( radius));\n for( let i = 0; i < 6; i++) {\n for( let j = 0; j < radius; j++) {\n results.push( hex);\n hex = hex.neighbor( i);\n }\n }\n }\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"---\n## Configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"center = new hexgrid.Hex(0,0,0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"## Reference articles\n\n* [Red Blob Games › Hexagonal Grids › Coordinate systems](https://www.redblobgames.com/grids/hexagons/#coordinates-cube) by Amit Patel\n* [Red Blob Games › Hexagonal Grids › Rings algorithms](https://www.redblobgames.com/grids/hexagons/#rings) _idem_\n* [Red Blob Games › Implementation of Hex Grids › Source Code](https://www.redblobgames.com/grids/hexagons/implementation.html#codegen) _idem_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Dependencies\n\nWe're using our [@gongfuio/hexgrid](https://www.npmjs.com/package/@gongfuio/hexgrid) library, which republishes on NPMJS, as an ES6 module, the Javascript [Implementation of Hex Grids](https://www.redblobgames.com/grids/hexagons/implementation.html) from [Amit Patel (Red Blob Games)](https://www.redblobgames.com/grids/hexagons/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"hexgrid = import('https://unpkg.com/@gongfuio/hexgrid@1.0.0/dist/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"