├── .gitignore ├── .prettierignore ├── .prettierrc.js ├── CHANGELOG.md ├── README.md ├── api-docs ├── api.md ├── generate.js ├── jsdocs.json ├── test.md └── wiki-examples │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ └── index.ts │ ├── tsconfig.json │ └── webpack.config.js ├── assets ├── banner.png ├── banner2.png └── intro.png ├── dist ├── conditions.d.ts ├── gird.function.d.ts ├── globals.d.ts ├── grid-init.d.ts ├── grid-point.d.ts ├── grid.3d.d.ts ├── grid.d.ts ├── grid.function.d.ts ├── operators.d.ts ├── pretty-grid.d.ts └── pretty-grid.js ├── examples ├── browser-simple-p5 │ ├── index.html │ └── sketch.js └── node-typescript-p5 │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ └── index.ts │ ├── tsconfig.json │ └── webpack.config.js ├── package-lock.json ├── package.json ├── src ├── conditions.ts ├── globals.ts ├── grid-init.ts ├── grid-point.ts ├── grid.3d.ts ├── grid.function.ts ├── grid.ts ├── operators.ts └── pretty-grid.ts ├── tests ├── conditions.test.js ├── create-grid.test.js ├── grid.3d.test.js └── grid.test.js ├── tsconfig.json ├── webpack.config.js └── website ├── .gitignore ├── README.md ├── babel.config.js ├── blog ├── 2019-05-28-first-blog-post.md ├── 2019-05-29-long-blog-post.md ├── 2021-08-01-mdx-blog-post.mdx ├── 2021-08-26-welcome │ ├── docusaurus-plushie-banner.jpeg │ └── index.md └── authors.yml ├── docs ├── api │ ├── API.md │ └── _category_.json ├── examples │ ├── _category_.json │ ├── conditions.md │ ├── creating-grids.md │ ├── iterating.md │ ├── operators.md │ ├── prerequisites.md │ └── transforming.md └── getting-started.md ├── docusaurus.config.js ├── package-lock.json ├── package.json ├── sidebars.js ├── src ├── components │ ├── examples │ │ └── example.tsx │ └── features │ │ └── feature.tsx ├── css │ └── custom.css ├── hooks │ ├── examples │ │ ├── examples.ts │ │ └── sketches │ │ │ ├── create-2d.ts │ │ │ ├── create-3d.ts │ │ │ ├── create-ellipse.ts │ │ │ ├── draw-odd-even.ts │ │ │ ├── sketch.config.ts │ │ │ └── transform.ts │ └── features.ts └── pages │ ├── index.module.css │ ├── index.tsx │ └── markdown-page.md ├── static ├── .nojekyll ├── 2d-transform-scatter.png ├── 2d-transform-sine.png ├── conditions-evenRows-3.png ├── creating-grid.png ├── ellipse-grid.png ├── ellipse-indices.png ├── features │ ├── 2d-grid-ellipse-orange.png │ ├── 2d-grid-select-orange.png │ ├── 2d-grid-transform-orange.png │ ├── 2d-pattern.png │ ├── 2dgrid-orange.png │ ├── 3d-grid-orange.png │ └── 3d-grid-select-multiple.png ├── grid3d.png ├── img │ ├── docusaurus.png │ ├── favicon.ico │ ├── logo.svg │ ├── undraw_docusaurus_mountain.svg │ ├── undraw_docusaurus_react.svg │ └── undraw_docusaurus_tree.svg ├── intro.png ├── operators.png └── translate.png └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | examples/**/dist 4 | examples/local 5 | .DS_STORE 6 | 7 | pretty-grid-test -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | trailingComma: "all", 4 | singleQuote: true, 5 | printWidth: 80, 6 | tabWidth: 4 7 | }; -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 0.0.10 (14-02-22) 2 | 3 | - added ellipse grid shape 4 | - bugfix: pass column and row indices in draw method 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pretty Grid 2 | 3 | ![intro](assets/banner2.png) 4 | 5 | **Create and manipulate grids using javascript.** 6 | 7 | ## Documentation 8 | Setup and documentation at [the prety-grid docsite](https://prettygrid.vadimgouskov.com) ✨ 9 | 10 | 11 | ## Quick install 12 | 13 | ### Browser 14 | ```html 15 | 16 | ``` 17 | 18 | ### Node 19 | 20 | ```bash 21 | npm install pretty-grid 22 | ``` 23 | 24 | 25 | 26 | ## Introduction 27 | 28 | Creating and manipulating a grid layout on an x-y-z plane requires repetative code involving nested for loops and n-d arrays. `pretty-grid` makes this process more straight-forward, readable and versatile. 29 | 30 | 31 | Using `pretty-grid`, this simplifies to: 32 | 33 | ```ts 34 | import { createGrid } from "pretty-grid"; 35 | 36 | const grid = createGrid({cols: 5, rows: 8, width: 1920, height: 1080}); 37 | ``` 38 | 39 | for 3-Dimensional grid, use the `createGrid3d` method 40 | 41 | ```ts 42 | import { createGrid3D } from "pretty-grid"; 43 | 44 | const grid = createGrid3D({cols: 3, rows: 5, layers: 8, width: 300, height: 500, depth: 800}); 45 | ``` 46 | 47 | Using a couple of `pretty-grid`'s helper methods you can already create a complex looking grid layout in only a few lines of code: 48 | 49 | ```ts 50 | import {Grid, and, oddRows, oddCols, evenRows} from 'pretty-grid' 51 | // Grid (cols, rows, width, height) 52 | const grid = new Grid(20, 10, 500, 500); 53 | grid.every(point => whiteDot(point.x, point.y)); 54 | grid.every(point => orangeCircle(point.x, point.y), and(oddRows(), oddCols())); 55 | grid.translate(10,10) 56 | .every(point => blueDot(point.x, point.y), evenRows()); 57 | ... 58 | ``` 59 | 60 | > 61 | . 62 | 63 | This results in: 64 | 65 | ![intro](assets/intro.png) 66 | 67 | > To make this example unopinionated, we illustrate this example using the `whiteDot`, `orangeCircle` and `blueDot` pseudo methods to draw a grid on an html canvas. You as the developer, implement your own functions to draw to your target of choice. I use the amazing [p5.js library](https://p5js.org) for most of my examples. 68 | 69 | 70 | The full documentation can be found [here](https://prettygrid.vadimgouskov.com) ✨ 71 | 72 | ## Examples 73 | 74 | - [Hello World](https://editor.p5js.org/VadimGouskov/sketches/m7-A9JZzn) 75 | - [Translating](https://editor.p5js.org/VadimGouskov/sketches/z5YkEcAWR) 76 | - [Operators: AND](https://editor.p5js.org/VadimGouskov/sketches/mp0Y_3N-S) 77 | - [Operators: OR](https://editor.p5js.org/VadimGouskov/sketches/TsPk41HtS) 78 | - [Operators: NOT](https://editor.p5js.org/VadimGouskov/sketches/Y8WipTN7U) 79 | - [Operators: AND OR NOT Combined](https://editor.p5js.org/VadimGouskov/sketches/owm9JDEHe) 80 | - [Custom Operators](https://editor.p5js.org/VadimGouskov/sketches/mHWaqUVFP) 81 | - [Shapes: Ellipse Grids](https://editor.p5js.org/VadimGouskov/sketches/gDVloSS0J) 82 | - [Shape Origins: Rectangle Grid](https://editor.p5js.org/VadimGouskov/sketches/HkOOuzeQz) 83 | - [Shape Origins: Ellipse Grid](https://editor.p5js.org/VadimGouskov/sketches/ROnn9dDoE) 84 | - [README example](https://editor.p5js.org/VadimGouskov/sketches/6CiLATPQ2) 85 | 86 | > These editable code examples are created using p5.js editor. Feel free to use `pretty-grid` in combination with other js (drawing) libraries. The full p5.js editor collection can be found [here](https://editor.p5js.org/VadimGouskov/collections/1uEQLKloQ). 87 | 88 | ## Contributing 89 | 90 | The goal of `pretty-grid` is to make grid drawing easier for everybody. 91 | If you have a suggestion about the docs, API, tutorials or somethıng else, please post it in one of the folowing ways: 92 | 93 | - [Open an issue](https://github.com/VadimGouskov/pretty-grid/issues) on GitHub and tag it with the green "Suggestion" label 94 | 95 | 103 | -------------------------------------------------------------------------------- /api-docs/api.md: -------------------------------------------------------------------------------- 1 | ## Classes 2 | 3 |
4 |
Grid
5 |
6 |
Grid3D
7 |
8 |
GridPoint
9 |
10 |
11 | 12 | ## Members 13 | 14 |
15 |
createGrid ⇒ Grid
16 |

Create a grid

17 |
18 |
createGrid3D ⇒ Grid3D
19 |
20 |
createPoint ⇒ GridPoint
21 |
22 |
23 | 24 | ## Functions 25 | 26 |
27 |
getPoints() ⇒ Array.<Array.<GridPoint>>
28 |

Get all the current points on the grid 29 | warning: gets the points array by reference. Changes to individual points will be reflected in the original grid object. 30 | To get a deep copy use grid.copy(). eg. grid.copy.get()

31 |
32 |
set() ⇒ void
33 |

Replaces all the current points on the grid 34 | warning: sets a reference to the provided points. Changes in made by this grid object to the points will be reflected in the provided points array.

35 |
36 |
getPoint(col, row) ⇒ GridPoint
37 |

Gets a point from from indeces [col, row]

38 |
39 |
getFlat() ⇒ Array.<GridPoint>
40 |

returns a one dimensional array of GridPoints of the grid. One column pushed after the other.

41 |
42 |
draw(func, condition) ⇒ Grid
43 |

Loops over the points in the grid, passing each point to the provided func parameter 44 | Provide a drawing function

45 |
46 |
every(func, condition) ⇒ Grid
47 |

Loops over the points in the grid, passing each point to the provided func parameter

48 |
49 |
transform(func, condition) ⇒ Grid
50 |

Transforms x, y values of points on the grid using the supplied transform function. 51 | control which points are getting affected by supplying a condition

52 |
53 |
translate(x, y, [condition]) ⇒ Grid
54 |

Translates the entire grid by x en y coordinates

55 |
56 |
copy() ⇒ Grid
57 |

Creates a deep copy of the current grid object

58 |
59 |
setPoint(col, row, layer, point)
60 |
61 |
every(func, condition) ⇒ Grid3D
62 |

Loops over the points in the grid, passing each point to the provided func parameter

63 |
64 |
transform(func, condition) ⇒ Grid3D
65 |

Transforms x, y, z values of points on the grid using the supplied transform function. 66 | control which points are getting affected by supplying a condition

67 |
68 |
69 | 70 | 71 | 72 | ## Grid 73 | **Kind**: global class 74 | 75 | 76 | ### new Grid(cols, rows, width, height, [shape]) 77 | The main Grid class containing all a two dimensional array of GridPoints and methods to manipulate the GridPoints on grid. 78 | 79 | 80 | | Param | Type | Description | 81 | | --- | --- | --- | 82 | | cols | number | the amount of columns the grid needs to contain | 83 | | rows | number | the amount of rows the grid needs to contain | 84 | | width | number | the width of the grid | 85 | | height | number | the height of the grid | 86 | | [shape] | [GridShape](#GridShape) | the shape of the grid (RECTANGLE or ELLIPSE). Defaults to a rectangular shaped grid. | 87 | 88 | 89 | 90 | ## Grid3D 91 | **Kind**: global class 92 | 93 | 94 | ### new Grid3D(cols, rows, layers, width, height, depth) 95 | The main Grid class containing all a two dimensional array of GridPoints and methods to manipulate the GridPoints on grid. 96 | 97 | 98 | | Param | Type | Description | 99 | | --- | --- | --- | 100 | | cols | number | the amount of columns the grid needs to contain | 101 | | rows | number | the amount of rows the grid needs to contain | 102 | | layers | number | the amount of layers the grid needs to contain | 103 | | width | number | the width of the grid | 104 | | height | number | the height of the grid | 105 | | depth | number | the depth of the grid | 106 | 107 | 108 | 109 | ## GridPoint 110 | **Kind**: global class 111 | **Properties** 112 | 113 | | Name | Type | Description | 114 | | --- | --- | --- | 115 | | x | number | the x coordinate of the point | 116 | | y | number | the y coordinate of the point | 117 | | z | number | the y coordinate of the point | 118 | 119 | 120 | 121 | ### new GridPoint(x, y, [z]) 122 | Represent a single point on the grid. 123 | 124 | 125 | | Param | Type | Description | 126 | | --- | --- | --- | 127 | | x | number | the x coordinate of the point | 128 | | y | number | the y coordinate of the point | 129 | | [z] | number | the y coordinate of the point | 130 | 131 | 132 | 133 | ## createGrid ⇒ [Grid](#Grid) 134 | Create a grid 135 | 136 | **Kind**: global variable 137 | 138 | | Param | Type | 139 | | --- | --- | 140 | | options | GridOptions | 141 | 142 | **Example** 143 | ```js 144 | const grid = createGrid({cols: 3, rows: 5, width 1080, height: 1080}); 145 | ``` 146 | 147 | 148 | ## createGrid3D ⇒ [Grid3D](#Grid3D) 149 | **Kind**: global variable 150 | 151 | | Param | 152 | | --- | 153 | | options | 154 | 155 | **Example** 156 | ```js 157 | const grid = createGrid({cols: 3, rows: 5, layers: 8 , width 1080, height: 1080, depth: 1080}); 158 | ``` 159 | 160 | 161 | ## createPoint ⇒ [GridPoint](#GridPoint) 162 | **Kind**: global variable 163 | **Returns**: [GridPoint](#GridPoint) - a point on a the x, y, z plane. Can be set to a specific index on the grid using the `Grid` or `Grid3D` `setPoint` methods 164 | 165 | | Param | 166 | | --- | 167 | | x | 168 | | y | 169 | | z | 170 | 171 | **Example** 172 | ```js 173 | // Create and set a point on a grid 174 | const grid = createGrid({cols:5, rows: 8, width 1920, height: 1080}); 175 | const firstPoint = createPoint(-10, -10); 176 | grid.setPoint(0, 0, firstPoint); 177 | ``` 178 | 179 | 180 | ## GridShape : enum 181 | Enum used to determine the grid shape in the [Grid](#Grid) constructor. 182 | Values: RECTANGLE or ELLIPSE. 183 | 184 | **Kind**: global enum 185 | **Read only**: true 186 | 187 | 188 | ## getPoints() ⇒ Array.<Array.<GridPoint>> 189 | Get all the current points on the grid 190 | warning: gets the points array by reference. Changes to individual points will be reflected in the original grid object. 191 | To get a deep copy use grid.copy(). eg. grid.copy.get() 192 | 193 | **Kind**: global function 194 | 195 | 196 | ## set() ⇒ void 197 | Replaces all the current points on the grid 198 | warning: sets a reference to the provided points. Changes in made by this grid object to the points will be reflected in the provided points array. 199 | 200 | **Kind**: global function 201 | 202 | 203 | ## getPoint(col, row) ⇒ [GridPoint](#GridPoint) 204 | Gets a point from from indeces [col, row] 205 | 206 | **Kind**: global function 207 | 208 | | Param | Type | Description | 209 | | --- | --- | --- | 210 | | col | number | the col index | 211 | | row | number | the row index | 212 | 213 | 214 | 215 | ## getFlat() ⇒ [Array.<GridPoint>](#GridPoint) 216 | returns a one dimensional array of GridPoints of the grid. One column pushed after the other. 217 | 218 | **Kind**: global function 219 | 220 | 221 | ## ~~draw(func, condition) ⇒ [Grid](#Grid)~~ 222 | ***Deprecated*** 223 | 224 | Loops over the points in the grid, passing each point to the provided func parameter 225 | Provide a drawing function 226 | 227 | **Kind**: global function 228 | **Returns**: [Grid](#Grid) - returns @this Grid Object. Used for chaining Grid methods 229 | 230 | | Param | Type | Description | 231 | | --- | --- | --- | 232 | | func | GridFunction | a function that handles drawing of each individual point | 233 | | condition | Condition | an optional condition for which points to draw | 234 | 235 | 236 | 237 | ## every(func, condition) ⇒ [Grid](#Grid) 238 | Loops over the points in the grid, passing each point to the provided func parameter 239 | 240 | **Kind**: global function 241 | **Returns**: [Grid](#Grid) - returns @this Grid Object. Used for chaining Grid methods 242 | 243 | | Param | Type | Description | 244 | | --- | --- | --- | 245 | | func | GridFunction | a function to access each point and row/col indices | 246 | | condition | Condition | an optional condition for which points to execute func over | 247 | 248 | 249 | 250 | ## transform(func, condition) ⇒ [Grid](#Grid) 251 | Transforms x, y values of points on the grid using the supplied transform function. 252 | control which points are getting affected by supplying a condition 253 | 254 | **Kind**: global function 255 | **Returns**: [Grid](#Grid) - returns @this Grid Object. Used for chaining Grid methods 256 | 257 | * @example 258 | // Translates the grid on the x-axis by 5 and on the y-axis by 8 259 | grid.transform((point) => { 260 | point.x += 5; 261 | point.y += 8; 262 | return point; // Make sure to return the transformed point 263 | }) 264 | 265 | | Param | Type | Description | 266 | | --- | --- | --- | 267 | | func | TransformFunction | a function to transform the point's x, y values. Must return the transformed point. | 268 | | condition | Condition | an optional condition for which points to be affected | 269 | 270 | 271 | 272 | ## translate(x, y, [condition]) ⇒ [Grid](#Grid) 273 | Translates the entire grid by x en y coordinates 274 | 275 | **Kind**: global function 276 | **Returns**: [Grid](#Grid) - returns @this Grid Object. Used for chaining Grid methods 277 | 278 | | Param | Type | Description | 279 | | --- | --- | --- | 280 | | x | number | the x coordinates to translate the points with | 281 | | y | number | the y coordinates to translate the points with | 282 | | [condition] | Condition | an optional condition for which points to translate | 283 | 284 | 285 | 286 | ## copy() ⇒ [Grid](#Grid) 287 | Creates a deep copy of the current grid object 288 | 289 | **Kind**: global function 290 | **Returns**: [Grid](#Grid) - a new instance of Grid of with the same coordinate values as @this Grid 291 | 292 | 293 | ## setPoint(col, row, layer, point) 294 | **Kind**: global function 295 | 296 | | Param | 297 | | --- | 298 | | col | 299 | | row | 300 | | layer | 301 | | point | 302 | 303 | **Example** 304 | ```js 305 | // Create and set a point on a grid 306 | const grid = createGrid({cols: 3, rows: 5, layers: 8 , width 1080, height: 1080, depth: 1080}); 307 | const firstPoint = createPoint(-540, -540, -540); 308 | grid.setPoint(0, 0, 0, firstPoint); 309 | ``` 310 | 311 | 312 | ## every(func, condition) ⇒ [Grid3D](#Grid3D) 313 | Loops over the points in the grid, passing each point to the provided func parameter 314 | 315 | **Kind**: global function 316 | **Returns**: [Grid3D](#Grid3D) - returns @this Grid3D Object. Used for chaining Grid methods 317 | 318 | | Param | Type | Description | 319 | | --- | --- | --- | 320 | | func | GridFunction | a function to access each point and row/col indices | 321 | | condition | Condition | an optional condition for which points to execute func over | 322 | 323 | **Example** 324 | ```js 325 | // draw a spheres on the grid where the size depends on the position on the grid 326 | // sphere is a pseudo function to draw spheres to a html canvas. 327 | grid.every((point, col, row, layer) => { 328 | const radius = (col + row + layer + 1) * 5; 329 | sphere(point.x, point.y, point.z, radius); 330 | }) 331 | ``` 332 | 333 | 334 | ## transform(func, condition) ⇒ [Grid3D](#Grid3D) 335 | Transforms x, y, z values of points on the grid using the supplied transform function. 336 | control which points are getting affected by supplying a condition 337 | 338 | **Kind**: global function 339 | **Returns**: [Grid3D](#Grid3D) - returns @this Grid3D Object. Used for chaining Grid methods 340 | 341 | | Param | Type | Description | 342 | | --- | --- | --- | 343 | | func | TransformFunction | a function to transform the point's x, y values. **Must return the transformed point.** | 344 | | condition | Condition | an optional condition for which points to be affected | 345 | 346 | **Example** 347 | ```js 348 | // Translates the grid on the y-axis by 10 and on the z-axis by 5 349 | grid.transform((point) => { 350 | point.y += 10; 351 | point.z += 5; 352 | return point; // Make sure to return the transformed point 353 | }) 354 | ``` 355 | -------------------------------------------------------------------------------- /api-docs/generate.js: -------------------------------------------------------------------------------- 1 | // import exec method from child_process module 2 | const { execSync } = require("child_process"); 3 | const jsdoc2md = require('jsdoc-to-markdown') 4 | const fs = require('fs'); 5 | 6 | // tsc throws error on linting issues, don't break the script 7 | try { 8 | execSync("tsc src/grid.ts src/grid.3d.ts src/grid-point.ts --outDir api-docs"); 9 | } catch (err) { 10 | 11 | } 12 | 13 | // Jsdocs to Markdown 14 | const md = jsdoc2md.renderSync({ files: ["api-docs/grid.js", "api-docs/grid.3d.js", "api-docs/grid-point.js"], configure: "api-docs/jsdocs.json" }); 15 | 16 | // Output 17 | fs.writeFileSync('api-docs/api.md', md); 18 | 19 | // Cleanup 20 | execSync("rm api-docs/grid.js api-docs/conditions.js api-docs/globals.js"); 21 | -------------------------------------------------------------------------------- /api-docs/jsdocs.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | } -------------------------------------------------------------------------------- /api-docs/test.md: -------------------------------------------------------------------------------- 1 | 4 | 5 | ## Instantiates a new 2 Dimensional Grid. 6 | 7 | The horizontal distance between each column: width / (cols - 1) 8 | The vertical distance between each row : height / (rows - 1) 9 | **Kind**: global class 10 | 13 | 14 | ### new Instantiates a new 2 Dimensional Grid. 15 | 16 | The horizontal distance between each column: width / (cols - 1) 17 | The vertical distance between each row : height / (rows - 1)(cols, rows, width, height) 18 | 19 | | Param | 20 | | ------ | 21 | | cols | 22 | | rows | 23 | | width | 24 | | height | 25 | -------------------------------------------------------------------------------- /api-docs/wiki-examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | P5 Typescript Example Project 6 | 7 | 8 | 9 |
10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /api-docs/wiki-examples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-typescript-p5", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "start": "webpack serve --open --mode development ", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "dependencies": { 13 | "p5": "^1.4.0", 14 | "pretty-grid": "^0.0.10" 15 | }, 16 | "devDependencies": { 17 | "@types/p5": "^1.3.3", 18 | "typescript": "^4.5.4", 19 | "webpack": "^5.49.0", 20 | "webpack-cli": "^4.7.2", 21 | "webpack-dev-server": "^3.11.2", 22 | "html-webpack-plugin": "^5.3.2", 23 | "ts-loader": "^9.2.5" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /api-docs/wiki-examples/src/index.ts: -------------------------------------------------------------------------------- 1 | import { Grid, evenRows, and, evenCols, oddRows, oddCols, odd, GridShape } from 'pretty-grid'; 2 | import p5 from 'p5'; 3 | 4 | const s = (p: p5) => { 5 | const CANVAS_WIDTH = 250; 6 | const CANVAS_HEIGHT = 250; 7 | let exportName = 'simple'; 8 | 9 | const grid = new Grid(5, 8, CANVAS_WIDTH, CANVAS_HEIGHT); 10 | 11 | p.setup = () => { 12 | const canvas = p.createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT); 13 | canvas.parent('sketch'); 14 | p.noLoop(); 15 | }; 16 | 17 | p.draw = () => { 18 | p.background(32); 19 | p.ellipseMode(p.CENTER); 20 | 21 | // Drawing 22 | 23 | // Translating 24 | /* 25 | exportName = "translate"; 26 | grid.draw(point => whiteDot(point.x, point.y)); 27 | grid.translate(10, 20); 28 | grid.draw(point => orangeCircle(point.x, point.y)); 29 | */ 30 | // Chaining 31 | 32 | // Conditions 33 | /* 34 | exportName = "conditions-evenRows"; 35 | grid.draw(point => whiteDot(point.x, point.y)); 36 | */ 37 | //grid.draw(point => orangeCircle(point.x, point.y), evenRows()); 38 | 39 | // Operators 40 | /* 41 | exportName = "operators"; 42 | grid.draw(point => whiteDot(point.x, point.y)); 43 | grid.draw(point => orangeCircle(point.x, point.y), and(evenCols(), oddRows())); 44 | */ 45 | 46 | // introduction 47 | /* 48 | exportName = "intro"; 49 | const introGrid = new Grid(20, 10, 500, 500); 50 | introGrid.draw(point => whiteDot(point.x, point.y)); 51 | introGrid.draw(point => orangeCircle(point.x, point.y), and(oddRows(), oddCols())); 52 | introGrid.translate(10,10) 53 | introGrid.draw(point => blueDot(point.x, point.y), evenRows()); 54 | */ 55 | 56 | // vanilla js 57 | /* 58 | exportName = "vanillajs" 59 | // initialize grid 60 | const COLS_AMOUNT = 5; 61 | const ROWS_AMOUNT = 8; 62 | const GRID_WIDTH = 500; 63 | const GRID_HEIGHT = 500; 64 | 65 | const COLS_DISTANCE = GRID_WIDTH / (COLS_AMOUNT - 1); 66 | const ROWS_DISTANCE = GRID_HEIGHT/ (ROWS_AMOUNT - 1); 67 | const points = []; 68 | 69 | for (let i = 0; i < COLS_AMOUNT; i++) { 70 | points[i] = []; 71 | for (let j = 0; j < ROWS_AMOUNT; j++) { 72 | points[i][j] = { 73 | x : i * COLS_DISTANCE, 74 | y : j * ROWS_DISTANCE 75 | }; 76 | } 77 | } 78 | */ 79 | 80 | // Ellipse grid 81 | 82 | exportName = 'ellipse-grid'; 83 | 84 | const ellipseGrid = new Grid(16, 8, CANVAS_WIDTH, CANVAS_WIDTH, GridShape.ELLIPSE); 85 | ellipseGrid.translate(CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2); 86 | ellipseGrid.draw((point) => whiteDot(point.x, point.y)); 87 | 88 | p.saveCanvas(exportName, 'png'); 89 | }; 90 | 91 | const orangeDot = (x: number, y: number) => { 92 | drawDot(x, y, '#ff6700'); 93 | }; 94 | 95 | const blueDot = (x: number, y: number) => { 96 | drawDot(x, y, '#0000ff'); 97 | }; 98 | 99 | const whiteDot = (x: number, y: number) => { 100 | drawDot(x, y, '#fff'); 101 | }; 102 | 103 | const drawDot = (x: number, y: number, color: string) => { 104 | p.fill(color); 105 | p.circle(x, y, 5); 106 | }; 107 | 108 | const orangeCircle = (x: number, y: number) => { 109 | p.push(); 110 | p.noFill(); 111 | p.stroke('#ff6700'); 112 | p.strokeWeight(3); 113 | p.circle(x, y, 20); 114 | p.pop(); 115 | }; 116 | }; 117 | 118 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 119 | const myP5 = new p5(s); 120 | -------------------------------------------------------------------------------- /api-docs/wiki-examples/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es2015", 5 | "declaration": true, 6 | "outDir": "./dist", 7 | "esModuleInterop": true 8 | }, 9 | "include": [ 10 | "src/**/*" 11 | ] 12 | } -------------------------------------------------------------------------------- /api-docs/wiki-examples/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | 5 | module.exports = { 6 | entry: './src/index.ts', 7 | plugins: [ 8 | new HtmlWebpackPlugin({ 9 | template: 'index.html' 10 | }), 11 | ], 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.ts$/, 16 | use: 'ts-loader', 17 | exclude: /node_modules/, 18 | }, 19 | ], 20 | }, 21 | resolve: { 22 | extensions: ['.ts', '.js'], 23 | }, 24 | output: { 25 | filename: 'bundle.js', 26 | path: path.resolve(__dirname, 'dist'), 27 | clean: true, 28 | }, 29 | // TODO: add images, fonts, data loaders https://webpack.js.org/guides/asset-management/#loading-images 30 | }; -------------------------------------------------------------------------------- /assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/assets/banner.png -------------------------------------------------------------------------------- /assets/banner2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/assets/banner2.png -------------------------------------------------------------------------------- /assets/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/assets/intro.png -------------------------------------------------------------------------------- /dist/conditions.d.ts: -------------------------------------------------------------------------------- 1 | import { GridPoint } from "./grid-point"; 2 | export declare type Condition = (point: GridPoint, col?: number, row?: number, layer?: number) => boolean; 3 | export declare type ConditionCreator = (...args: any[]) => Condition; 4 | export declare const all: ConditionCreator; 5 | export declare const even: ConditionCreator; 6 | export declare const odd: ConditionCreator; 7 | export declare const evenCols: ConditionCreator; 8 | export declare const oddCols: ConditionCreator; 9 | export declare const evenRows: ConditionCreator; 10 | export declare const oddRows: ConditionCreator; 11 | export declare const rows: (start: number, end: number) => Condition; 12 | export declare const cols: (start: number, end: number) => Condition; 13 | -------------------------------------------------------------------------------- /dist/gird.function.d.ts: -------------------------------------------------------------------------------- 1 | import { GridPoint } from "./grid-point"; 2 | export declare type GridFunction = (point: GridPoint, col?: number, row?: number, layer?: number) => void; 3 | export declare type TransformFunction = (point: GridPoint, col?: number, row?: number, layer?: number) => GridPoint; 4 | -------------------------------------------------------------------------------- /dist/globals.d.ts: -------------------------------------------------------------------------------- 1 | export declare type ShapeOrigin = "top-left" | "center"; 2 | /** 3 | * Sets the origin mode for all rectangular grids that are initialized after calling this function. Default is CORNER. 4 | * @param {ShapeOrigin} origin The new origin for rectangle grids 5 | */ 6 | export declare const rectangleShapeOrigin: (origin: ShapeOrigin) => void; 7 | /** 8 | * Sets the origin mode for all ellipse grids that are initialized after calling this function. Default is CENTER. 9 | * @param {ShapeOrigin} origin the The new origin for ellipse grids 10 | */ 11 | export declare const ellipseShapeOrigin: (origin: ShapeOrigin) => void; 12 | /** 13 | * Sets the origin mode for all ellipse grids that are initialized after calling this function. Default is CENTER. 14 | * @param {ShapeOrigin} origin the The new origin for ellipse grids 15 | */ 16 | export declare const cuboidShapeOrigin: (origin: ShapeOrigin) => void; 17 | export declare type ShapeOrigins = { 18 | Rectangle: ShapeOrigin; 19 | Ellipse: ShapeOrigin; 20 | Cuboid: ShapeOrigin; 21 | }; 22 | export declare const shapeOrigins: ShapeOrigins; 23 | -------------------------------------------------------------------------------- /dist/grid-init.d.ts: -------------------------------------------------------------------------------- 1 | import { GridPoint } from "./grid-point"; 2 | export declare function initRectangleGrid(cols: number, rows: number, width: number, height: number, depth?: number): GridPoint[][]; 3 | export declare const initEllipseGrid: (cols: number, rows: number, width: number, height: number, depth?: number) => GridPoint[][]; 4 | -------------------------------------------------------------------------------- /dist/grid-point.d.ts: -------------------------------------------------------------------------------- 1 | export interface GridPointInterface { 2 | x: number; 3 | y: number; 4 | z?: number; 5 | } 6 | /** 7 | * Represent a single point on the grid. 8 | * @class 9 | * @name GridPoint 10 | * @param {number} x the x coordinate of the point 11 | * @param {number} y the y coordinate of the point 12 | * @param {number} [z] the y coordinate of the point 13 | * @property {number} x the x coordinate of the point 14 | * @property {number} y the y coordinate of the point 15 | * @property {number} z the y coordinate of the point 16 | */ 17 | export declare class GridPoint implements GridPointInterface { 18 | x: number; 19 | y: number; 20 | z: number; 21 | constructor(x: number, y: number, z?: number); 22 | } 23 | /** 24 | * @name createPoint 25 | * @param x 26 | * @param y 27 | * @param z 28 | * @returns {GridPoint} a point on a the x, y, z plane. Can be set to a specific index on the grid using the `Grid` or `Grid3D` `setPoint` methods 29 | * 30 | * @example 31 | * // Create and set a point on a grid 32 | * const grid = createGrid({cols:5, rows: 8, width 1920, height: 1080}); 33 | * const firstPoint = createPoint(-10, -10); 34 | * grid.setPoint(0, 0, firstPoint); 35 | */ 36 | export declare const createPoint: (x: number, y: number, z?: number) => GridPoint; 37 | -------------------------------------------------------------------------------- /dist/grid.3d.d.ts: -------------------------------------------------------------------------------- 1 | import { Condition } from "./conditions"; 2 | import { GridFunction, TransformFunction } from "./grid.function"; 3 | import { GridPoint } from "./grid-point"; 4 | declare type Points3D = GridPoint[][][]; 5 | interface Grid3DInterface { 6 | getPoints: () => Points3D; 7 | getPoint: (col: number, row: number, layer: number) => GridPoint; 8 | setPoint: (col: number, row: number, layer: number, point: GridPoint) => void; 9 | every: (func: GridFunction, condition?: Condition) => Grid3D; 10 | translate: (x: number, y: number, z: number, condition?: Condition) => Grid3D; 11 | } 12 | declare type Grid3DOptions = { 13 | cols: number; 14 | rows: number; 15 | layers: number; 16 | width: number; 17 | height: number; 18 | depth: number; 19 | }; 20 | /** 21 | * The main Grid class containing all a two dimensional array of GridPoints and methods to manipulate the GridPoints on grid. 22 | * @class 23 | * @name Grid3D 24 | * @param {number} cols the amount of columns the grid needs to contain 25 | * @param {number} rows the amount of rows the grid needs to contain 26 | * @param {number} layers the amount of layers the grid needs to contain 27 | * @param {number} width the width of the grid 28 | * @param {number} height the height of the grid 29 | * @param {number} depth the depth of the grid 30 | */ 31 | export declare class Grid3D implements Grid3DInterface { 32 | private points; 33 | /** 34 | * 35 | * @param {Grid3DOptions} options 36 | */ 37 | constructor(options: Grid3DOptions); 38 | getPoints(): GridPoint[][][]; 39 | getPoint(col: number, row: number, layer: number): GridPoint; 40 | /** 41 | * @method 42 | * @name setPoint 43 | * @param col 44 | * @param row 45 | * @param layer 46 | * @param point 47 | * 48 | * @example 49 | * // Create and set a point on a grid 50 | * const grid = createGrid({cols: 3, rows: 5, layers: 8 , width 1080, height: 1080, depth: 1080}); 51 | * const firstPoint = createPoint(-540, -540, -540); 52 | * grid.setPoint(0, 0, 0, firstPoint); 53 | */ 54 | setPoint(col: number, row: number, layer: number, point: GridPoint): void; 55 | /** 56 | * Loops over the points in the grid, passing each point to the provided func parameter 57 | * @method 58 | * @name every 59 | * @param {GridFunction} func - a function to access each point and row/col indices 60 | * @param {Condition} condition - an optional condition for which points to execute func over 61 | * @returns { Grid3D } returns @this Grid3D Object. Used for chaining Grid methods 62 | * 63 | * @example 64 | * // draw a spheres on the grid where the size depends on the position on the grid 65 | * // sphere is a pseudo function to draw spheres to a html canvas. 66 | * grid.every((point, col, row, layer) => { 67 | * const radius = (col + row + layer + 1) * 5; 68 | * sphere(point.x, point.y, point.z, radius); 69 | * }) 70 | */ 71 | every(func: GridFunction, condition?: Condition): Grid3D; 72 | /** 73 | * Transforms x, y, z values of points on the grid using the supplied transform function. 74 | * control which points are getting affected by supplying a condition 75 | * 76 | * @method 77 | * @name transform 78 | * @param {TransformFunction} func - a function to transform the point's x, y values. **Must return the transformed point.** 79 | * @param {Condition} condition - an optional condition for which points to be affected 80 | * @returns { Grid3D } returns @this Grid3D Object. Used for chaining Grid methods 81 | * 82 | * @example 83 | * // Translates the grid on the y-axis by 10 and on the z-axis by 5 84 | * grid.transform((point) => { 85 | * point.y += 10; 86 | * point.z += 5; 87 | * return point; // Make sure to return the transformed point 88 | * }) 89 | * 90 | */ 91 | transform(func: TransformFunction, condition?: Condition): Grid3D; 92 | translate(x: number, y: number, z: number, condition?: Condition): this; 93 | } 94 | /** 95 | * @name createGrid3D 96 | * @param options 97 | * @returns {Grid3D} 98 | * 99 | * @example 100 | * const grid = createGrid({cols: 3, rows: 5, layers: 8 , width 1080, height: 1080, depth: 1080}); 101 | */ 102 | export declare const createGrid3D: (options: Grid3DOptions) => Grid3D; 103 | export {}; 104 | -------------------------------------------------------------------------------- /dist/grid.d.ts: -------------------------------------------------------------------------------- 1 | import { Condition } from './conditions'; 2 | import { GridFunction, TransformFunction } from './grid.function'; 3 | import { GridPoint } from './grid-point'; 4 | /** 5 | * Enum used to determine the grid shape in the [Grid]{@link #Grid} constructor. 6 | * Values: RECTANGLE or ELLIPSE. 7 | * @readonly 8 | * @enum {number} 9 | */ 10 | export declare enum GridShape { 11 | RECTANGLE = 0, 12 | ELLIPSE = 1 13 | } 14 | /** 15 | * The main Grid class containing all a two dimensional array of GridPoints and methods to manipulate the GridPoints on grid. 16 | * @class 17 | * @name Grid 18 | * @param {number} cols the amount of columns the grid needs to contain 19 | * @param {number} rows the amount of rows the grid needs to contain 20 | * @param {number} width the width of the grid 21 | * @param {number} height the height of the grid 22 | * @param {GridShape} [shape] the shape of the grid (RECTANGLE or ELLIPSE). Defaults to a rectangular shaped grid. 23 | */ 24 | export declare class Grid { 25 | private points; 26 | /** 27 | * Instantiates a new 2 Dimensional Grid. 28 | * The horizontal distance between each column: width / (cols - 1) 29 | * The vertical distance between each row : height / (rows - 1) 30 | 31 | */ 32 | constructor(cols: number, rows: number, width: number, height: number, shape?: GridShape); 33 | /** 34 | * Get all the current points on the grid 35 | * warning: gets the points array by reference. Changes to individual points will be reflected in the original grid object. 36 | * To get a deep copy use grid.copy(). eg. grid.copy.get() 37 | * 38 | * @method 39 | * @name getPoints 40 | * @returns {GridPoint[][]} 41 | * 42 | 43 | */ 44 | getPoints(): GridPoint[][]; 45 | /** 46 | * Replaces all the current points on the grid 47 | * warning: sets a reference to the provided points. Changes in made by this grid object to the points will be reflected in the provided points array. 48 | * @method 49 | * @name set 50 | * 51 | * @returns {void} 52 | */ 53 | set(points: GridPoint[][]): void; 54 | /** 55 | * Gets a point from from indeces [col, row] 56 | * @method 57 | * @name getPoint 58 | * @param {number} col - the col index 59 | * @param {number} row - the row index 60 | * @returns {GridPoint} 61 | */ 62 | getPoint(col: number, row: number): GridPoint; 63 | /** 64 | * returns a one dimensional array of GridPoints of the grid. One column pushed after the other. 65 | * @method 66 | * @name getFlat 67 | * @type {GridPoint[]} 68 | */ 69 | getFlat(): GridPoint[]; 70 | /** 71 | * Loops over the points in the grid, passing each point to the provided func parameter 72 | * Provide a drawing function 73 | * @deprecated 74 | * @method 75 | * @name draw 76 | * @param {GridFunction} func - a function that handles drawing of each individual point 77 | * @param {Condition} condition - an optional condition for which points to draw 78 | * @returns { Grid } returns @this Grid Object. Used for chaining Grid methods 79 | */ 80 | draw(func: GridFunction, condition?: Condition): Grid; 81 | /** 82 | * Loops over the points in the grid, passing each point to the provided func parameter 83 | * @method 84 | * @name every 85 | * @param {GridFunction} func - a function to access each point and row/col indices 86 | * @param {Condition} condition - an optional condition for which points to execute func over 87 | * @returns { Grid } returns @this Grid Object. Used for chaining Grid methods 88 | */ 89 | every(func: GridFunction, condition?: Condition): Grid; 90 | /** 91 | * Transforms x, y values of points on the grid using the supplied transform function. 92 | * control which points are getting affected by supplying a condition 93 | * 94 | * @method 95 | * @name transform 96 | * @param {TransformFunction} func - a function to transform the point's x, y values. Must return the transformed point. 97 | * @param {Condition} condition - an optional condition for which points to be affected 98 | * @returns { Grid } returns @this Grid Object. Used for chaining Grid methods 99 | * 100 | * * @example 101 | * // Translates the grid on the x-axis by 5 and on the y-axis by 8 102 | * grid.transform((point) => { 103 | * point.x += 5; 104 | * point.y += 8; 105 | * return point; // Make sure to return the transformed point 106 | * }) 107 | */ 108 | transform(func: TransformFunction, condition?: Condition): Grid; 109 | /** 110 | * Translates the entire grid by x en y coordinates 111 | * @method 112 | * @name translate 113 | * @param {number} x - the x coordinates to translate the points with 114 | * @param {number} y - the y coordinates to translate the points with 115 | * @param {Condition} [condition] - an optional condition for which points to translate 116 | * 117 | * @returns { Grid } returns @this Grid Object. Used for chaining Grid methods 118 | */ 119 | translate(x: number, y: number, condition?: Condition): Grid; 120 | /** 121 | * Creates a deep copy of the current grid object 122 | * @method 123 | * @name copy 124 | * @returns { Grid } a new instance of Grid of with the same coordinate values as @this Grid 125 | */ 126 | copy(): Grid; 127 | } 128 | /** 129 | * Options to configure a grid 130 | * @typedef GridOptions 131 | * @property {number} cols 132 | * @property {number} rows 133 | * @property {number} width 134 | * @property {number} height 135 | * @property {GridShape} [shape] 136 | */ 137 | declare type GridOptionsType = { 138 | cols: number; 139 | rows: number; 140 | width: number; 141 | height: number; 142 | shape?: GridShape; 143 | }; 144 | /** 145 | * Create a grid 146 | * 147 | * @name createGrid 148 | * @param {GridOptions} options 149 | * @returns {Grid} 150 | * 151 | * @example 152 | * const grid = createGrid({cols: 3, rows: 5, width 1080, height: 1080}); 153 | */ 154 | export declare const createGrid: (options: GridOptionsType) => Grid; 155 | export {}; 156 | -------------------------------------------------------------------------------- /dist/grid.function.d.ts: -------------------------------------------------------------------------------- 1 | import { GridPoint } from "./grid-point"; 2 | export declare type GridFunction = (point: GridPoint, col?: number, row?: number, layer?: number) => void; 3 | export declare type TransformFunction = (point: GridPoint, col?: number, row?: number, layer?: number) => GridPoint; 4 | -------------------------------------------------------------------------------- /dist/operators.d.ts: -------------------------------------------------------------------------------- 1 | import { Condition } from './conditions'; 2 | export declare type Operator = (...conditions: Condition[]) => Condition; 3 | export declare const and: Operator; 4 | export declare const or: Operator; 5 | export declare const not: Operator; 6 | -------------------------------------------------------------------------------- /dist/pretty-grid.d.ts: -------------------------------------------------------------------------------- 1 | export { createGrid, Grid, GridShape } from './grid'; 2 | export { createGrid3D, Grid3D } from "./grid.3d"; 3 | export { Condition, ConditionCreator, even, odd, evenCols, oddCols, evenRows, oddRows, rows, cols } from './conditions'; 4 | export { and, or, not } from './operators'; 5 | export { ellipseShapeOrigin, rectangleShapeOrigin, ShapeOrigin } from './globals'; 6 | export { createPoint, GridPoint } from "./grid-point"; 7 | -------------------------------------------------------------------------------- /examples/browser-simple-p5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/browser-simple-p5/sketch.js: -------------------------------------------------------------------------------- 1 | console.log(this) 2 | 3 | const grid = new prettyGrid.Grid(5, 5, 500, 500); 4 | 5 | function setup() { 6 | createCanvas(500, 500); 7 | } 8 | 9 | function draw() { 10 | background(32); 11 | fill('yellow'); 12 | grid.draw(point => circle(point.x, point.y, 20)); 13 | } -------------------------------------------------------------------------------- /examples/node-typescript-p5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | P5 Typescript Example Project 6 | 7 | 8 | 9 |
10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/node-typescript-p5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-typescript-p5", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "start": "webpack serve --open --mode development ", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "dependencies": { 13 | "p5": "^1.4.0", 14 | "pretty-grid": "^0.0.8" 15 | }, 16 | "devDependencies": { 17 | "@types/p5": "^1.3.3", 18 | "html-webpack-plugin": "^5.3.2", 19 | "ts-loader": "^9.2.5", 20 | "typescript": "^4.5.4", 21 | "webpack": "^5.49.0", 22 | "webpack-cli": "^4.7.2", 23 | "webpack-dev-server": "^3.11.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /examples/node-typescript-p5/src/index.ts: -------------------------------------------------------------------------------- 1 | import { Grid } from 'pretty-grid'; 2 | import p5 from 'p5'; 3 | 4 | const s = (p: p5) => { 5 | const CANVAS_WIDTH = 500; 6 | const CANVAS_HEIGHT = 500; 7 | 8 | const grid = new Grid(5, 10, CANVAS_WIDTH, CANVAS_HEIGHT); 9 | 10 | p.setup = () => { 11 | const canvas = p.createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT); 12 | canvas.parent('sketch'); 13 | }; 14 | 15 | p.draw = () => { 16 | p.background(32); 17 | p.fill('hotpink'); 18 | p.ellipseMode(p.CENTER); 19 | 20 | // Drawing the main grid 21 | grid.draw((point) => { 22 | p.circle(point.x, point.y, 10); 23 | }); 24 | }; 25 | }; 26 | 27 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 28 | const myP5 = new p5(s); 29 | -------------------------------------------------------------------------------- /examples/node-typescript-p5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es2015", 5 | "declaration": true, 6 | "outDir": "./dist", 7 | "esModuleInterop": true 8 | }, 9 | "include": [ 10 | "src/**/*" 11 | ] 12 | } -------------------------------------------------------------------------------- /examples/node-typescript-p5/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | 5 | module.exports = { 6 | entry: './src/index.ts', 7 | plugins: [ 8 | new HtmlWebpackPlugin({ 9 | template: 'index.html' 10 | }), 11 | ], 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.ts$/, 16 | use: 'ts-loader', 17 | exclude: /node_modules/, 18 | }, 19 | ], 20 | }, 21 | resolve: { 22 | extensions: ['.ts', '.js'], 23 | }, 24 | output: { 25 | filename: 'bundle.js', 26 | path: path.resolve(__dirname, 'dist'), 27 | clean: true, 28 | }, 29 | // TODO: add images, fonts, data loaders https://webpack.js.org/guides/asset-management/#loading-images 30 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pretty-grid", 3 | "version": "0.0.15", 4 | "description": "Grid creation and manipulation made pretty.", 5 | "author": "Vadim Gouskov", 6 | "homepage": "https://prettygrid.vadimgouskov.com", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/VadimGouskov/pretty-grid" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/VadimGouskov/pretty-grid/issues" 13 | }, 14 | "main": "dist/pretty-grid.js", 15 | "browser": "dist/pretty-grid.js", 16 | "types": "dist/pretty-grid.d.ts", 17 | "files": [ 18 | "/dist" 19 | ], 20 | "scripts": { 21 | "build": "webpack", 22 | "test": "jest", 23 | "publish:safe": "npm run test && npm publish", 24 | "api-docs": "node api-docs/generate.js" 25 | }, 26 | "keywords": [ 27 | "grid", 28 | "create", 29 | "canvas", 30 | "pgrid", 31 | "prettygrid", 32 | "typescript", 33 | "javascript", 34 | "ts", 35 | "shape", 36 | "ellipse", 37 | "circular" 38 | ], 39 | "license": "MIT", 40 | "devDependencies": { 41 | "jest": "^27.4.7", 42 | "jsdoc-to-markdown": "^7.1.0", 43 | "prettier": "2.5.1", 44 | "ts-loader": "^9.2.6", 45 | "typescript": "^4.5.4", 46 | "webpack": "^5.65.0", 47 | "webpack-cli": "^4.9.1" 48 | } 49 | } -------------------------------------------------------------------------------- /src/conditions.ts: -------------------------------------------------------------------------------- 1 | import { GridPoint } from "./grid-point"; 2 | 3 | export type Condition = (point: GridPoint, col?: number, row?: number, layer?: number) => boolean; 4 | 5 | export type ConditionCreator = (...args: any[]) => Condition; 6 | 7 | export const all: ConditionCreator = (): Condition => (_, __, ___) => true; 8 | 9 | export const even: ConditionCreator = (): Condition => (_, col, row) => col % 2 === 0 && row % 2 === 0; 10 | 11 | export const odd: ConditionCreator = (): Condition => (_, col, row) => col % 2 !== 0 && row % 2 !== 0; 12 | 13 | export const evenCols: ConditionCreator = (): Condition => (_, col, __) => col % 2 === 0; 14 | 15 | export const oddCols: ConditionCreator = (): Condition => (_, col, __) => col % 2 !== 0; 16 | 17 | export const evenRows: ConditionCreator = (): Condition => (_, __, row) => row % 2 === 0; 18 | 19 | export const oddRows: ConditionCreator = (): Condition => (_, __, row) => row % 2 !== 0; 20 | 21 | export const rows = 22 | (start: number, end: number): Condition => 23 | (_, __, row) => { 24 | return row >= start && row <= end; 25 | }; 26 | 27 | export const cols = 28 | (start: number, end: number): Condition => 29 | (_, col, __) => { 30 | return col >= start && col <= end; 31 | }; 32 | -------------------------------------------------------------------------------- /src/globals.ts: -------------------------------------------------------------------------------- 1 | 2 | export type ShapeOrigin = "top-left" | "center" 3 | /** 4 | * Sets the origin mode for all rectangular grids that are initialized after calling this function. Default is CORNER. 5 | * @param {ShapeOrigin} origin The new origin for rectangle grids 6 | */ 7 | export const rectangleShapeOrigin = (origin: ShapeOrigin) => { 8 | shapeOrigins.Rectangle = origin; 9 | }; 10 | 11 | /** 12 | * Sets the origin mode for all ellipse grids that are initialized after calling this function. Default is CENTER. 13 | * @param {ShapeOrigin} origin the The new origin for ellipse grids 14 | */ 15 | export const ellipseShapeOrigin = (origin: ShapeOrigin) => { 16 | shapeOrigins.Ellipse = origin; 17 | }; 18 | 19 | /** 20 | * Sets the origin mode for all ellipse grids that are initialized after calling this function. Default is CENTER. 21 | * @param {ShapeOrigin} origin the The new origin for ellipse grids 22 | */ 23 | export const cuboidShapeOrigin = (origin: ShapeOrigin) => { 24 | shapeOrigins.Ellipse = origin; 25 | }; 26 | 27 | // Only accesible within the library 28 | export type ShapeOrigins = { 29 | Rectangle: ShapeOrigin; 30 | Ellipse: ShapeOrigin; 31 | Cuboid: ShapeOrigin; 32 | }; 33 | 34 | export const shapeOrigins: ShapeOrigins = { 35 | Rectangle: "top-left", 36 | Ellipse: "top-left", 37 | Cuboid: "top-left", 38 | }; 39 | -------------------------------------------------------------------------------- /src/grid-init.ts: -------------------------------------------------------------------------------- 1 | import { ShapeOrigin, shapeOrigins } from "./globals"; 2 | import { GridPoint } from "./grid-point"; 3 | 4 | export function initRectangleGrid(cols: number, rows: number, width: number, height: number, depth?: number): GridPoint[][] { 5 | const stepCols = width / (cols - 1); 6 | const stepRows = height / (rows - 1); 7 | 8 | depth ??= 0; 9 | 10 | if (cols === 0) { 11 | cols = 1; 12 | console.warn('Cannot create a grid with 0 columns, cols defaults to 1'); 13 | } 14 | 15 | if (rows === 0) { 16 | rows = 1; 17 | console.warn('Cannot create a grid with 0 rows, rows defaults to 1'); 18 | } 19 | 20 | const points: GridPoint[][] = [[]] 21 | 22 | for (let i = 0; i < cols; i++) { 23 | points[i] = []; 24 | for (let j = 0; j < rows; j++) { 25 | points[i][j] = new GridPoint(i * stepCols, j * stepRows, depth); 26 | } 27 | } 28 | 29 | return points; 30 | } 31 | 32 | export const initEllipseGrid = (cols: number, rows: number, width: number, height: number, depth?: number): GridPoint[][] => { 33 | const heightStep = height / rows; 34 | const widthStep = width / rows; 35 | const radialStep = (Math.PI * 2) / cols; 36 | 37 | depth ??= 0; 38 | 39 | const points: GridPoint[][] = [[]]; 40 | for (let col = 0; col < cols; col++) { 41 | points[col] = []; 42 | const theta = col * radialStep; 43 | 44 | for (let row = rows; row >= 1; row--) { 45 | const ringWidth = row * widthStep; 46 | const ringHeight = row * heightStep; 47 | 48 | let pointX = (ringWidth / 2) * Math.cos(theta); 49 | let pointY = (ringHeight / 2) * Math.sin(theta); 50 | 51 | points[col][row - 1] = new GridPoint(pointX, pointY, depth); 52 | } 53 | } 54 | return points; 55 | } -------------------------------------------------------------------------------- /src/grid-point.ts: -------------------------------------------------------------------------------- 1 | export interface GridPointInterface { 2 | x: number; 3 | y: number; 4 | z?: number; 5 | 6 | } 7 | 8 | /** 9 | * Represent a single point on the grid. 10 | * @class 11 | * @name GridPoint 12 | * @param {number} x the x coordinate of the point 13 | * @param {number} y the y coordinate of the point 14 | * @param {number} [z] the y coordinate of the point 15 | * @property {number} x the x coordinate of the point 16 | * @property {number} y the y coordinate of the point 17 | * @property {number} z the y coordinate of the point 18 | */ 19 | export class GridPoint implements GridPointInterface { 20 | x: number; 21 | y: number; 22 | z: number; 23 | constructor(x: number, y: number, z?: number) { 24 | this.x = x; 25 | this.y = y; 26 | this.z = z; 27 | } 28 | } 29 | /** 30 | * @name createPoint 31 | * @param x 32 | * @param y 33 | * @param z 34 | * @returns {GridPoint} a point on a the x, y, z plane. Can be set to a specific index on the grid using the `Grid` or `Grid3D` `setPoint` methods 35 | * 36 | * @example 37 | * // Create and set a point on a grid 38 | * const grid = createGrid({cols:5, rows: 8, width 1920, height: 1080}); 39 | * const firstPoint = createPoint(-10, -10); 40 | * grid.setPoint(0, 0, firstPoint); 41 | */ 42 | export const createPoint = (x: number, y: number, z?: number): GridPoint => { 43 | return new GridPoint(x, y, z); 44 | } -------------------------------------------------------------------------------- /src/grid.3d.ts: -------------------------------------------------------------------------------- 1 | import { Condition } from "./conditions"; 2 | import { GridFunction, TransformFunction } from "./grid.function"; 3 | import { Grid } from "./grid"; 4 | import { initRectangleGrid } from "./grid-init"; 5 | import { createPoint, GridPoint } from "./grid-point"; 6 | 7 | type Points3D = GridPoint[][][]; 8 | 9 | interface Grid3DInterface { 10 | getPoints: () => Points3D; 11 | getPoint: (col: number, row: number, layer: number) => GridPoint; 12 | setPoint: (col: number, row: number, layer: number, point: GridPoint) => void 13 | every: (func: GridFunction, condition?: Condition) => Grid3D; 14 | translate: (x: number, y: number, z: number, condition?: Condition) => Grid3D; 15 | } 16 | 17 | type Grid3DOptions = { 18 | cols: number; 19 | rows: number; 20 | layers: number; 21 | width: number; 22 | height: number; 23 | depth: number; 24 | } 25 | 26 | /** 27 | * The main Grid class containing all a two dimensional array of GridPoints and methods to manipulate the GridPoints on grid. 28 | * @class 29 | * @name Grid3D 30 | * @param {number} cols the amount of columns the grid needs to contain 31 | * @param {number} rows the amount of rows the grid needs to contain 32 | * @param {number} layers the amount of layers the grid needs to contain 33 | * @param {number} width the width of the grid 34 | * @param {number} height the height of the grid 35 | * @param {number} depth the depth of the grid 36 | */ 37 | export class Grid3D implements Grid3DInterface { 38 | private points: Points3D = [[[]]]; 39 | 40 | /** 41 | * 42 | * @param {Grid3DOptions} options 43 | */ 44 | constructor(options: Grid3DOptions) { 45 | let { cols, rows, layers, width, height, depth } = options; 46 | const stepLayer = depth / (layers - 1) 47 | 48 | if (layers === 0) { 49 | layers = 1; 50 | console.warn('Cannot create a grid with 0 layers, layers defaults to 1'); 51 | } 52 | 53 | for (let layer = 0; layer < layers; layer++) { 54 | this.points[layer] = initRectangleGrid(cols, rows, width, height, stepLayer * layer); 55 | } 56 | } 57 | 58 | getPoints() { 59 | return [...this.points]; 60 | } 61 | 62 | getPoint(col: number, row: number, layer: number) { 63 | return this.points[layer][col][row] 64 | } 65 | 66 | /** 67 | * @method 68 | * @name setPoint 69 | * @param col 70 | * @param row 71 | * @param layer 72 | * @param point 73 | * 74 | * @example 75 | * // Create and set a point on a grid 76 | * const grid = createGrid({cols: 3, rows: 5, layers: 8 , width 1080, height: 1080, depth: 1080}); 77 | * const firstPoint = createPoint(-540, -540, -540); 78 | * grid.setPoint(0, 0, 0, firstPoint); 79 | */ 80 | setPoint(col: number, row: number, layer: number, point: GridPoint) { 81 | this.points[layer][col][row] = point; 82 | } 83 | 84 | /** 85 | * Loops over the points in the grid, passing each point to the provided func parameter 86 | * @method 87 | * @name every 88 | * @param {GridFunction} func - a function to access each point and row/col indices 89 | * @param {Condition} condition - an optional condition for which points to execute func over 90 | * @returns { Grid3D } returns @this Grid3D Object. Used for chaining Grid methods 91 | * 92 | * @example 93 | * // draw a spheres on the grid where the size depends on the position on the grid 94 | * // sphere is a pseudo function to draw spheres to a html canvas. 95 | * grid.every((point, col, row, layer) => { 96 | * const radius = (col + row + layer + 1) * 5; 97 | * sphere(point.x, point.y, point.z, radius); 98 | * }) 99 | */ 100 | every(func: GridFunction, condition?: Condition): Grid3D { 101 | this.points.forEach((layer, layerIndex) => { 102 | layer.forEach((col, colIndex) => { 103 | col.forEach((point, rowIndex) => { 104 | if (!!condition && !condition(point, colIndex, rowIndex, layerIndex)) return; 105 | func(point, colIndex, rowIndex, layerIndex); 106 | }) 107 | }) 108 | }) 109 | return this; 110 | } 111 | 112 | /** 113 | * Transforms x, y, z values of points on the grid using the supplied transform function. 114 | * control which points are getting affected by supplying a condition 115 | * 116 | * @method 117 | * @name transform 118 | * @param {TransformFunction} func - a function to transform the point's x, y values. **Must return the transformed point.** 119 | * @param {Condition} condition - an optional condition for which points to be affected 120 | * @returns { Grid3D } returns @this Grid3D Object. Used for chaining Grid methods 121 | * 122 | * @example 123 | * // Translates the grid on the y-axis by 10 and on the z-axis by 5 124 | * grid.transform((point) => { 125 | * point.y += 10; 126 | * point.z += 5; 127 | * return point; // Make sure to return the transformed point 128 | * }) 129 | * 130 | */ 131 | transform(func: TransformFunction, condition?: Condition): Grid3D { 132 | let warning = false; 133 | this.points.forEach((layer, layerIndex) => { 134 | layer.forEach((col, colIndex) => { 135 | col.forEach((point, rowIndex) => { 136 | if (!!condition && !condition(point, colIndex, rowIndex, layerIndex)) return; 137 | const transformedPoint = func(createPoint(point.x, point.y, point.z), colIndex, rowIndex, layerIndex); 138 | 139 | if (!transformedPoint) { 140 | warning = true; 141 | return; 142 | } 143 | 144 | point.x = transformedPoint.x; 145 | point.y = transformedPoint.y; 146 | point.z = transformedPoint.z; 147 | }) 148 | }) 149 | }); 150 | 151 | if (warning) { 152 | console.warn("One or more functions did not return a point, make sure your transform function returns a point for it to be updated in the grid") 153 | } 154 | 155 | return this; 156 | } 157 | 158 | translate(x: number, y: number, z: number, condition?: Condition) { 159 | this.points.forEach((layer, layerIndex) => { 160 | layer.forEach((col, colIndex) => { 161 | col.forEach((point, rowIndex) => { 162 | if (!!condition && !condition(point, colIndex, rowIndex, layerIndex)) return; 163 | point.x += x; 164 | point.y += y; 165 | point.z += z; 166 | }) 167 | }) 168 | }) 169 | return this; 170 | } 171 | 172 | } 173 | 174 | /** 175 | * @name createGrid3D 176 | * @param options 177 | * @returns {Grid3D} 178 | * 179 | * @example 180 | * const grid = createGrid({cols: 3, rows: 5, layers: 8 , width 1080, height: 1080, depth: 1080}); 181 | */ 182 | export const createGrid3D = (options: Grid3DOptions) => { 183 | return new Grid3D(options); 184 | } -------------------------------------------------------------------------------- /src/grid.function.ts: -------------------------------------------------------------------------------- 1 | import { GridPoint } from "./grid-point"; 2 | 3 | export type GridFunction = (point: GridPoint, col?: number, row?: number, layer?: number) => void; 4 | 5 | export type TransformFunction = (point: GridPoint, col?: number, row?: number, layer?: number) => GridPoint 6 | -------------------------------------------------------------------------------- /src/grid.ts: -------------------------------------------------------------------------------- 1 | import { Condition } from './conditions'; 2 | import { GridFunction, TransformFunction } from './grid.function'; 3 | import { initEllipseGrid, initRectangleGrid } from './grid-init'; 4 | import { createPoint, GridPoint } from './grid-point'; 5 | 6 | 7 | /** 8 | * Enum used to determine the grid shape in the [Grid]{@link #Grid} constructor. 9 | * Values: RECTANGLE or ELLIPSE. 10 | * @readonly 11 | * @enum {number} 12 | */ 13 | export enum GridShape { 14 | RECTANGLE = 0, 15 | ELLIPSE = 1, 16 | } 17 | 18 | 19 | /** 20 | * The main Grid class containing all a two dimensional array of GridPoints and methods to manipulate the GridPoints on grid. 21 | * @class 22 | * @name Grid 23 | * @param {number} cols the amount of columns the grid needs to contain 24 | * @param {number} rows the amount of rows the grid needs to contain 25 | * @param {number} width the width of the grid 26 | * @param {number} height the height of the grid 27 | * @param {GridShape} [shape] the shape of the grid (RECTANGLE or ELLIPSE). Defaults to a rectangular shaped grid. 28 | */ 29 | export class Grid { 30 | private points: GridPoint[][] = [[]]; 31 | 32 | /** 33 | * Instantiates a new 2 Dimensional Grid. 34 | * The horizontal distance between each column: width / (cols - 1) 35 | * The vertical distance between each row : height / (rows - 1) 36 | 37 | */ 38 | constructor(cols: number, rows: number, width: number, height: number, shape?: GridShape) { 39 | if (cols === 0) { 40 | cols = 1; 41 | console.warn('Cannot create a grid with 0 columns, cols defaults to 1'); 42 | } 43 | 44 | if (rows === 0) { 45 | rows = 1; 46 | console.warn('Cannot create a grid with 0 rows, rows defaults to 1'); 47 | } 48 | 49 | // initialize grid 50 | if (shape === GridShape.ELLIPSE) { 51 | this.points = initEllipseGrid(cols, rows, width, height); 52 | } else { 53 | // default to rectangle grid 54 | this.points = initRectangleGrid(cols, rows, width, height) 55 | } 56 | } 57 | 58 | 59 | /** 60 | * Get all the current points on the grid 61 | * warning: gets the points array by reference. Changes to individual points will be reflected in the original grid object. 62 | * To get a deep copy use grid.copy(). eg. grid.copy.get() 63 | * 64 | * @method 65 | * @name getPoints 66 | * @returns {GridPoint[][]} 67 | * 68 | 69 | */ 70 | getPoints(): GridPoint[][] { 71 | return [...this.points]; 72 | } 73 | 74 | /** 75 | * Replaces all the current points on the grid 76 | * warning: sets a reference to the provided points. Changes in made by this grid object to the points will be reflected in the provided points array. 77 | * @method 78 | * @name set 79 | * 80 | * @returns {void} 81 | */ 82 | set(points: GridPoint[][]): void { 83 | // TODO set a deep copy makes more sence? or make it optional and provide a deep copy helper function 84 | this.points = points; 85 | } 86 | 87 | /** 88 | * Gets a point from from indeces [col, row] 89 | * @method 90 | * @name getPoint 91 | * @param {number} col - the col index 92 | * @param {number} row - the row index 93 | * @returns {GridPoint} 94 | */ 95 | 96 | getPoint(col: number, row: number): GridPoint { 97 | return this.points[col][row]; 98 | } 99 | 100 | /** 101 | * returns a one dimensional array of GridPoints of the grid. One column pushed after the other. 102 | * @method 103 | * @name getFlat 104 | * @type {GridPoint[]} 105 | */ 106 | getFlat(): GridPoint[] { 107 | return this.points.reduce((acc, val) => acc.concat(val), []); 108 | } 109 | 110 | /** 111 | * Loops over the points in the grid, passing each point to the provided func parameter 112 | * Provide a drawing function 113 | * @deprecated 114 | * @method 115 | * @name draw 116 | * @param {GridFunction} func - a function that handles drawing of each individual point 117 | * @param {Condition} condition - an optional condition for which points to draw 118 | * @returns { Grid } returns @this Grid Object. Used for chaining Grid methods 119 | */ 120 | draw(func: GridFunction, condition?: Condition): Grid { 121 | this.points.forEach((col, colIndex) => 122 | col.forEach((point, rowIndex) => { 123 | if (!!condition && !condition(point, colIndex, rowIndex)) return; 124 | func(point, colIndex, rowIndex); 125 | }), 126 | ); 127 | return this; 128 | } 129 | 130 | /** 131 | * Loops over the points in the grid, passing each point to the provided func parameter 132 | * @method 133 | * @name every 134 | * @param {GridFunction} func - a function to access each point and row/col indices 135 | * @param {Condition} condition - an optional condition for which points to execute func over 136 | * @returns { Grid } returns @this Grid Object. Used for chaining Grid methods 137 | */ 138 | every(func: GridFunction, condition?: Condition): Grid { 139 | this.points.forEach((col, colIndex) => 140 | col.forEach((point, rowIndex) => { 141 | if (!!condition && !condition(point, colIndex, rowIndex)) return; 142 | func(point, colIndex, rowIndex); 143 | }), 144 | ); 145 | return this; 146 | } 147 | 148 | /** 149 | * Transforms x, y values of points on the grid using the supplied transform function. 150 | * control which points are getting affected by supplying a condition 151 | * 152 | * @method 153 | * @name transform 154 | * @param {TransformFunction} func - a function to transform the point's x, y values. Must return the transformed point. 155 | * @param {Condition} condition - an optional condition for which points to be affected 156 | * @returns { Grid } returns @this Grid Object. Used for chaining Grid methods 157 | * 158 | * * @example 159 | * // Translates the grid on the x-axis by 5 and on the y-axis by 8 160 | * grid.transform((point) => { 161 | * point.x += 5; 162 | * point.y += 8; 163 | * return point; // Make sure to return the transformed point 164 | * }) 165 | */ 166 | transform(func: TransformFunction, condition?: Condition): Grid { 167 | let warning = false; 168 | this.points.forEach((col, colIndex) => 169 | col.forEach((point, rowIndex) => { 170 | if (!!condition && !condition(point, colIndex, rowIndex)) return; 171 | const transformedPoint = func(createPoint(point.x, point.y), colIndex, rowIndex); 172 | 173 | if (!transformedPoint) { 174 | warning = true; 175 | return; 176 | } 177 | 178 | point.x = transformedPoint.x; 179 | point.y = transformedPoint.y; 180 | }), 181 | ); 182 | 183 | if (warning) { 184 | console.warn("One or more functions did not return a point, make sure your transform function returns a point for it to be updated in the grid") 185 | } 186 | 187 | return this; 188 | } 189 | 190 | /** 191 | * Translates the entire grid by x en y coordinates 192 | * @method 193 | * @name translate 194 | * @param {number} x - the x coordinates to translate the points with 195 | * @param {number} y - the y coordinates to translate the points with 196 | * @param {Condition} [condition] - an optional condition for which points to translate 197 | * 198 | * @returns { Grid } returns @this Grid Object. Used for chaining Grid methods 199 | */ 200 | translate(x: number, y: number, condition?: Condition): Grid { 201 | this.points.forEach((col, colIndex) => 202 | col.forEach((point, rowIndex) => { 203 | if (!!condition && !condition(point, colIndex, rowIndex)) return; 204 | point.x += x; 205 | point.y += y; 206 | }), 207 | ); 208 | return this; 209 | } 210 | 211 | /** 212 | * Creates a deep copy of the current grid object 213 | * @method 214 | * @name copy 215 | * @returns { Grid } a new instance of Grid of with the same coordinate values as @this Grid 216 | */ 217 | copy(): Grid { 218 | const cols = this.points.length; 219 | // TODO take into account posibility of modified row 220 | const rows = this.points[0].length; 221 | 222 | // Width and height of grid do not matter, these will get set 223 | const copiedGrid = new Grid(cols, rows, 0, 0); 224 | const pointsDeepCopy: GridPoint[][] = JSON.parse(JSON.stringify(this.points)); 225 | copiedGrid.set(pointsDeepCopy); 226 | 227 | return copiedGrid; 228 | } 229 | 230 | /* 231 | getSection(startCol: number, endCol: number, startRow: number, endRow: number): Grid { 232 | const slice = this.points.slice(startCol, endCol + 1).map((i) => i.slice(startRow, endRow + 1)); 233 | const gridFromSlice = new Grid(slice[0].length, slice.length, 0, 0); 234 | gridFromSlice.set(slice); 235 | return gridFromSlice; 236 | } 237 | */ 238 | } 239 | 240 | /** 241 | * Options to configure a grid 242 | * @typedef GridOptions 243 | * @property {number} cols 244 | * @property {number} rows 245 | * @property {number} width 246 | * @property {number} height 247 | * @property {GridShape} [shape] 248 | */ 249 | 250 | 251 | type GridOptionsType = { 252 | cols: number; 253 | rows: number; 254 | width: number; 255 | height: number; 256 | shape?: GridShape; 257 | } 258 | 259 | /** 260 | * Create a grid 261 | * 262 | * @name createGrid 263 | * @param {GridOptions} options 264 | * @returns {Grid} 265 | * 266 | * @example 267 | * const grid = createGrid({cols: 3, rows: 5, width 1080, height: 1080}); 268 | */ 269 | export const createGrid = (options: GridOptionsType) => { 270 | return new Grid(options.cols, options.rows, options.width, options.height, options.shape); 271 | } -------------------------------------------------------------------------------- /src/operators.ts: -------------------------------------------------------------------------------- 1 | import { Condition } from './conditions'; 2 | 3 | export type Operator = (...conditions: Condition[]) => Condition; 4 | 5 | export const and: Operator = (...conditions: Condition[]) => { 6 | return (point, col, row) => { 7 | for (let condition of conditions) { 8 | if (!condition(point, col, row)) return false; 9 | } 10 | return true; 11 | }; 12 | }; 13 | 14 | export const or: Operator = (...conditions: Condition[]) => { 15 | return (point, col, row) => { 16 | for (let condition of conditions) { 17 | if (condition(point, col, row)) return true; 18 | } 19 | return false; 20 | }; 21 | }; 22 | 23 | export const not: Operator = (condition: Condition) => { 24 | return (point, col, row) => !condition(point, col, row); 25 | }; 26 | -------------------------------------------------------------------------------- /src/pretty-grid.ts: -------------------------------------------------------------------------------- 1 | export { createGrid, Grid, GridShape } from './grid'; 2 | export { createGrid3D, Grid3D } from "./grid.3d" 3 | export { Condition, ConditionCreator, even, odd, evenCols, oddCols, evenRows, oddRows, rows, cols } from './conditions'; 4 | export { and, or, not } from './operators'; 5 | export { ellipseShapeOrigin, rectangleShapeOrigin, ShapeOrigin } from './globals'; 6 | export { createPoint, GridPoint } from "./grid-point"; 7 | -------------------------------------------------------------------------------- /tests/conditions.test.js: -------------------------------------------------------------------------------- 1 | const { Grid, even, odd } = require('../dist/pretty-grid.js'); 2 | 3 | const GRID_ROWS = 5; 4 | const GRID_COLS = 5; 5 | const WIDTH = 100; 6 | const HEIGHT = 100; 7 | const grid = new Grid(GRID_COLS, GRID_ROWS, WIDTH, HEIGHT); 8 | 9 | test('Even Condition', () => { 10 | grid.getPoints().forEach((col, colİndex) => col.forEach((point, rowİndex) => { 11 | const result = even()(point, colİndex, rowİndex); 12 | expect(result).toBe((colİndex % 2 === 0 && rowİndex % 2 === 0)); 13 | })) 14 | }) 15 | 16 | test('Odd Condition', () => { 17 | grid.getPoints().forEach((col, colİndex) => col.forEach((point, rowİndex) => { 18 | const result = odd()(point, colİndex, rowİndex); 19 | expect(result).toBe((colİndex % 2 !== 0 && rowİndex % 2 !== 0)); 20 | })) 21 | }) 22 | -------------------------------------------------------------------------------- /tests/create-grid.test.js: -------------------------------------------------------------------------------- 1 | const { createGrid } = require('../dist/pretty-grid.js'); 2 | 3 | const GRID_ROWS = 5; 4 | const GRID_COLS = 7; 5 | const WIDTH = 100; 6 | const HEIGHT = 100; 7 | const grid = createGrid({ cols: GRID_COLS, rows: GRID_ROWS, width: WIDTH, height: HEIGHT }); 8 | 9 | test("Grid intervals", () => { 10 | const INTERVAL_ROWS = HEIGHT / (GRID_ROWS - 1); 11 | const INTERVAL_COLS = WIDTH / (GRID_COLS - 1); 12 | 13 | expect(grid.getPoint(1, 1).x).toBe(INTERVAL_COLS); // cols 14 | expect(grid.getPoint(1, 1).y).toBe(INTERVAL_ROWS); // rows 15 | expect(grid.getPoint(GRID_COLS - 1, GRID_ROWS - 1).x).toBe(WIDTH); // last col 16 | expect(grid.getPoint(GRID_COLS - 1, GRID_ROWS - 1).y).toBe(HEIGHT); // last col 17 | }) 18 | 19 | test("columns length", () => { 20 | expect(grid.getPoints().length).toBe(GRID_COLS); 21 | }) 22 | 23 | test("row length", () => { 24 | expect(grid.getPoints()[0].length).toBe(GRID_ROWS); 25 | }) -------------------------------------------------------------------------------- /tests/grid.3d.test.js: -------------------------------------------------------------------------------- 1 | const { createGrid3D } = require("../dist/pretty-grid.js"); 2 | 3 | 4 | const ROWS = 5; 5 | const COLS = 7; 6 | const LAYERS = 4; 7 | const WIDTH = 100; 8 | const HEIGHT = 100; 9 | const DEPTH = 100; 10 | const grid = new createGrid3D({ cols: COLS, rows: ROWS, layers: LAYERS, width: WIDTH, height: HEIGHT, depth: DEPTH }); 11 | 12 | 13 | test('Check dimensions', () => { 14 | expect(grid.getPoints().length).toBe(LAYERS); // cols 15 | expect(grid.getPoints()[0].length).toBe(COLS); // rows 16 | expect(grid.getPoints()[0][0].length).toBe(ROWS); // rows 17 | }) 18 | 19 | test("test translations", () => { 20 | // const layerStep = DEPTH / (LAYERS - 1); 21 | // const colStep = WIDTH / (COLS - 1); 22 | // const rowStep = HEIGHT / (ROWS - 1); 23 | 24 | const DX = 3; 25 | const DY = 5; 26 | const DZ = 8; 27 | 28 | grid.translate(DX, DY, DZ); 29 | const firstPoint = grid.getPoint(0, 0, 0); 30 | expect(firstPoint.x).toBe(DX); 31 | expect(firstPoint.y).toBe(DY); 32 | expect(firstPoint.z).toBe(DZ); 33 | 34 | const lastPoint = grid.getPoint(COLS - 1, ROWS - 1, LAYERS - 1); 35 | expect(lastPoint.x).toBe(WIDTH + DX); 36 | expect(lastPoint.y).toBe(HEIGHT + DY); 37 | expect(lastPoint.z).toBe(DEPTH + DZ); 38 | 39 | // cleanup 40 | grid.translate(-DX, -DY, -DZ); 41 | 42 | }) -------------------------------------------------------------------------------- /tests/grid.test.js: -------------------------------------------------------------------------------- 1 | const { Grid, createGrid } = require('../dist/pretty-grid.js'); 2 | 3 | const GRID_ROWS = 5; 4 | const GRID_COLS = 7; 5 | const WIDTH = 100; 6 | const HEIGHT = 100; 7 | const grid = new createGrid({ cols: GRID_COLS, rows: GRID_ROWS, width: WIDTH, height: HEIGHT }); 8 | 9 | 10 | test('Check dimensions', () => { 11 | expect(grid.getPoints().length).toBe(GRID_COLS); // cols 12 | expect(grid.getPoints()[0].length).toBe(GRID_ROWS); // rows 13 | }) 14 | 15 | test('Check interval', () => { 16 | const INTERVAL_ROWS = HEIGHT / (GRID_ROWS - 1); 17 | const INTERVAL_COLS = WIDTH / (GRID_COLS - 1); 18 | 19 | expect(grid.getPoint(1, 1).x).toBe(INTERVAL_COLS); // cols 20 | expect(grid.getPoint(1, 1).y).toBe(INTERVAL_ROWS); // rows 21 | expect(grid.getPoint(GRID_COLS - 1, GRID_ROWS - 1).x).toBe(WIDTH); // last col 22 | expect(grid.getPoint(GRID_COLS - 1, GRID_ROWS - 1).y).toBe(HEIGHT); // last col 23 | }) 24 | 25 | test('Deep copy of grid', () => { 26 | const deepCopy = grid.copy(); 27 | const copiedPoint = deepCopy.getPoint(0, 0); 28 | copiedPoint.x += 10; 29 | // check if modification of copiedPoint affects original grid 30 | expect(grid.getPoint(0, 0).x).toBe(0); 31 | }) 32 | 33 | test('Translate the entire grid', () => { 34 | const tx = 10; 35 | const ty = 15; 36 | const point = grid.getPoint(0, 0); 37 | const originalX = point.x; 38 | const originalY = point.y; 39 | 40 | grid.translate(tx, ty); 41 | 42 | expect(grid.getPoint(0, 0).x).toBe(originalX + tx); 43 | expect(grid.getPoint(0, 0).y).toBe(originalY + ty); 44 | 45 | // cleanup 46 | grid.translate(-tx, -ty) 47 | }) 48 | 49 | test('Test the getFlat funcions length', () => { 50 | const pointsArray = grid.getFlat(); 51 | 52 | expect(pointsArray.length).toBe(GRID_COLS * GRID_ROWS); 53 | }) 54 | 55 | test('Transform points', () => { 56 | const tranformGrid = createGrid({ cols: GRID_COLS, rows: GRID_ROWS, width: WIDTH, height: HEIGHT }); 57 | tranformGrid.transform((point) => { 58 | point.x += 10; 59 | return point; 60 | }) 61 | 62 | expect(tranformGrid.getPoint(0, 0).x).toBe(10); 63 | }) 64 | 65 | test('Tranform without point return should not mutate the point', () => { 66 | const nonTranfsormedGrid = createGrid({ cols: GRID_COLS, rows: GRID_ROWS, width: WIDTH, height: HEIGHT }); 67 | nonTranfsormedGrid.transform((point) => { 68 | point.x += 10; 69 | }) 70 | expect(nonTranfsormedGrid.getPoint(0, 0).x).toBe(0); 71 | }) 72 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist", 4 | "module": "es6", 5 | "target": "es5", 6 | "declaration": true, 7 | "moduleResolution": "node", 8 | "sourceMap": true, 9 | }, 10 | "include": [ 11 | "src/**/*" 12 | ] 13 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: './src/pretty-grid.ts', 5 | mode: "development", 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.ts?$/, 10 | use: 'ts-loader', 11 | exclude: /node_modules/, 12 | }, 13 | ], 14 | }, 15 | resolve: { 16 | extensions: ['.ts'], 17 | }, 18 | output: { 19 | path: path.resolve(__dirname, 'dist'), 20 | filename: 'pretty-grid.js', 21 | library: { 22 | name: 'prettyGrid', 23 | type: 'umd', 24 | }, 25 | globalObject: 'this', 26 | }, 27 | }; -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /website/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | Using SSH: 30 | 31 | ``` 32 | $ USE_SSH=true yarn deploy 33 | ``` 34 | 35 | Not using SSH: 36 | 37 | ``` 38 | $ GIT_USER= yarn deploy 39 | ``` 40 | 41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 42 | -------------------------------------------------------------------------------- /website/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /website/blog/2019-05-28-first-blog-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: first-blog-post 3 | title: First Blog Post 4 | authors: 5 | name: Gao Wei 6 | title: Docusaurus Core Team 7 | url: https://github.com/wgao19 8 | image_url: https://github.com/wgao19.png 9 | tags: [hola, docusaurus] 10 | --- 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 13 | -------------------------------------------------------------------------------- /website/blog/2019-05-29-long-blog-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: long-blog-post 3 | title: Long Blog Post 4 | authors: endi 5 | tags: [hello, docusaurus] 6 | --- 7 | 8 | This is the summary of a very long blog post, 9 | 10 | Use a `` comment to limit blog post size in the list view. 11 | 12 | 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 15 | 16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 17 | 18 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 19 | 20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 21 | 22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 23 | 24 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 25 | 26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 27 | 28 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 29 | 30 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 31 | 32 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 33 | 34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 35 | 36 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 37 | 38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 39 | 40 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 41 | 42 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 43 | 44 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 45 | -------------------------------------------------------------------------------- /website/blog/2021-08-01-mdx-blog-post.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | slug: mdx-blog-post 3 | title: MDX Blog Post 4 | authors: [slorber] 5 | tags: [docusaurus] 6 | --- 7 | 8 | Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/). 9 | 10 | :::tip 11 | 12 | Use the power of React to create interactive blog posts. 13 | 14 | ```js 15 | 16 | ``` 17 | 18 | 19 | 20 | ::: 21 | -------------------------------------------------------------------------------- /website/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg -------------------------------------------------------------------------------- /website/blog/2021-08-26-welcome/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: welcome 3 | title: Welcome 4 | authors: [slorber, yangshun] 5 | tags: [facebook, hello, docusaurus] 6 | --- 7 | 8 | [Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog). 9 | 10 | Simply add Markdown files (or folders) to the `blog` directory. 11 | 12 | Regular blog authors can be added to `authors.yml`. 13 | 14 | The blog post date can be extracted from filenames, such as: 15 | 16 | - `2019-05-30-welcome.md` 17 | - `2019-05-30-welcome/index.md` 18 | 19 | A blog post folder can be convenient to co-locate blog post images: 20 | 21 | ![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg) 22 | 23 | The blog supports tags as well! 24 | 25 | **And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config. 26 | -------------------------------------------------------------------------------- /website/blog/authors.yml: -------------------------------------------------------------------------------- 1 | endi: 2 | name: Endilie Yacop Sucipto 3 | title: Maintainer of Docusaurus 4 | url: https://github.com/endiliey 5 | image_url: https://github.com/endiliey.png 6 | 7 | yangshun: 8 | name: Yangshun Tay 9 | title: Front End Engineer @ Facebook 10 | url: https://github.com/yangshun 11 | image_url: https://github.com/yangshun.png 12 | 13 | slorber: 14 | name: Sébastien Lorber 15 | title: Docusaurus maintainer 16 | url: https://sebastienlorber.com 17 | image_url: https://github.com/slorber.png 18 | -------------------------------------------------------------------------------- /website/docs/api/API.md: -------------------------------------------------------------------------------- 1 | ## Classes 2 | 3 |
4 |
Grid
5 |
6 |
Grid3D
7 |
8 |
GridPoint
9 |
10 |
11 | 12 | ## Members 13 | 14 |
15 |
createGrid ⇒ Grid
16 |

Create a grid

17 |
18 |
createGrid3D ⇒ Grid3D
19 |
20 |
createPoint ⇒ GridPoint
21 |
22 |
23 | 24 | ## Functions 25 | 26 |
27 |
getPoints() ⇒ Array.<Array.<GridPoint>>
28 |

Get all the current points on the grid 29 | warning: gets the points array by reference. Changes to individual points will be reflected in the original grid object. 30 | To get a deep copy use grid.copy(). eg. grid.copy.get()

31 |
32 |
set() ⇒ void
33 |

Replaces all the current points on the grid 34 | warning: sets a reference to the provided points. Changes in made by this grid object to the points will be reflected in the provided points array.

35 |
36 |
getPoint(col, row) ⇒ GridPoint
37 |

Gets a point from from indeces [col, row]

38 |
39 |
getFlat() ⇒ Array.<GridPoint>
40 |

returns a one dimensional array of GridPoints of the grid. One column pushed after the other.

41 |
42 |
draw(func, condition) ⇒ Grid
43 |

Loops over the points in the grid, passing each point to the provided func parameter 44 | Provide a drawing function

45 |
46 |
every(func, condition) ⇒ Grid
47 |

Loops over the points in the grid, passing each point to the provided func parameter

48 |
49 |
transform(func, condition) ⇒ Grid
50 |

Transforms x, y values of points on the grid using the supplied transform function. 51 | control which points are getting affected by supplying a condition

52 |
53 |
translate(x, y, [condition]) ⇒ Grid
54 |

Translates the entire grid by x en y coordinates

55 |
56 |
copy() ⇒ Grid
57 |

Creates a deep copy of the current grid object

58 |
59 |
setPoint(col, row, layer, point)
60 |
61 |
every(func, condition) ⇒ Grid3D
62 |

Loops over the points in the grid, passing each point to the provided func parameter

63 |
64 |
transform(func, condition) ⇒ Grid3D
65 |

Transforms x, y, z values of points on the grid using the supplied transform function. 66 | control which points are getting affected by supplying a condition

67 |
68 |
69 | 70 | 71 | 72 | ## Grid 73 | **Kind**: global class 74 | 75 | 76 | ### new Grid(cols, rows, width, height, [shape]) 77 | The main Grid class containing all a two dimensional array of GridPoints and methods to manipulate the GridPoints on grid. 78 | 79 | 80 | | Param | Type | Description | 81 | | --- | --- | --- | 82 | | cols | number | the amount of columns the grid needs to contain | 83 | | rows | number | the amount of rows the grid needs to contain | 84 | | width | number | the width of the grid | 85 | | height | number | the height of the grid | 86 | | [shape] | [GridShape](#GridShape) | the shape of the grid (RECTANGLE or ELLIPSE). Defaults to a rectangular shaped grid. | 87 | 88 | 89 | 90 | ## Grid3D 91 | **Kind**: global class 92 | 93 | 94 | ### new Grid3D(cols, rows, layers, width, height, depth) 95 | The main Grid class containing all a two dimensional array of GridPoints and methods to manipulate the GridPoints on grid. 96 | 97 | 98 | | Param | Type | Description | 99 | | --- | --- | --- | 100 | | cols | number | the amount of columns the grid needs to contain | 101 | | rows | number | the amount of rows the grid needs to contain | 102 | | layers | number | the amount of layers the grid needs to contain | 103 | | width | number | the width of the grid | 104 | | height | number | the height of the grid | 105 | | depth | number | the depth of the grid | 106 | 107 | 108 | 109 | ## GridPoint 110 | **Kind**: global class 111 | **Properties** 112 | 113 | | Name | Type | Description | 114 | | --- | --- | --- | 115 | | x | number | the x coordinate of the point | 116 | | y | number | the y coordinate of the point | 117 | | z | number | the y coordinate of the point | 118 | 119 | 120 | 121 | ### new GridPoint(x, y, [z]) 122 | Represent a single point on the grid. 123 | 124 | 125 | | Param | Type | Description | 126 | | --- | --- | --- | 127 | | x | number | the x coordinate of the point | 128 | | y | number | the y coordinate of the point | 129 | | [z] | number | the y coordinate of the point | 130 | 131 | 132 | 133 | ## createGrid ⇒ [Grid](#Grid) 134 | Create a grid 135 | 136 | **Kind**: global variable 137 | 138 | | Param | Type | 139 | | --- | --- | 140 | | options | GridOptions | 141 | 142 | **Example** 143 | ```js 144 | const grid = createGrid({cols: 3, rows: 5, width 1080, height: 1080}); 145 | ``` 146 | 147 | 148 | ## createGrid3D ⇒ [Grid3D](#Grid3D) 149 | **Kind**: global variable 150 | 151 | | Param | 152 | | --- | 153 | | options | 154 | 155 | **Example** 156 | ```js 157 | const grid = createGrid({cols: 3, rows: 5, layers: 8 , width 1080, height: 1080, depth: 1080}); 158 | ``` 159 | 160 | 161 | ## createPoint ⇒ [GridPoint](#GridPoint) 162 | **Kind**: global variable 163 | **Returns**: [GridPoint](#GridPoint) - a point on a the x, y, z plane. Can be set to a specific index on the grid using the `Grid` or `Grid3D` `setPoint` methods 164 | 165 | | Param | 166 | | --- | 167 | | x | 168 | | y | 169 | | z | 170 | 171 | **Example** 172 | ```js 173 | // Create and set a point on a grid 174 | const grid = createGrid({cols:5, rows: 8, width 1920, height: 1080}); 175 | const firstPoint = createPoint(-10, -10); 176 | grid.setPoint(0, 0, firstPoint); 177 | ``` 178 | 179 | 180 | ## GridShape : enum 181 | Enum used to determine the grid shape in the [Grid](#Grid) constructor. 182 | Values: RECTANGLE or ELLIPSE. 183 | 184 | **Kind**: global enum 185 | **Read only**: true 186 | 187 | 188 | ## getPoints() ⇒ Array.<Array.<GridPoint>> 189 | Get all the current points on the grid 190 | warning: gets the points array by reference. Changes to individual points will be reflected in the original grid object. 191 | To get a deep copy use grid.copy(). eg. grid.copy.get() 192 | 193 | **Kind**: global function 194 | 195 | 196 | ## set() ⇒ void 197 | Replaces all the current points on the grid 198 | warning: sets a reference to the provided points. Changes in made by this grid object to the points will be reflected in the provided points array. 199 | 200 | **Kind**: global function 201 | 202 | 203 | ## getPoint(col, row) ⇒ [GridPoint](#GridPoint) 204 | Gets a point from from indeces [col, row] 205 | 206 | **Kind**: global function 207 | 208 | | Param | Type | Description | 209 | | --- | --- | --- | 210 | | col | number | the col index | 211 | | row | number | the row index | 212 | 213 | 214 | 215 | ## getFlat() ⇒ [Array.<GridPoint>](#GridPoint) 216 | returns a one dimensional array of GridPoints of the grid. One column pushed after the other. 217 | 218 | **Kind**: global function 219 | 220 | 221 | ## ~~draw(func, condition) ⇒ [Grid](#Grid)~~ 222 | ***Deprecated*** 223 | 224 | Loops over the points in the grid, passing each point to the provided func parameter 225 | Provide a drawing function 226 | 227 | **Kind**: global function 228 | **Returns**: [Grid](#Grid) - returns @this Grid Object. Used for chaining Grid methods 229 | 230 | | Param | Type | Description | 231 | | --- | --- | --- | 232 | | func | GridFunction | a function that handles drawing of each individual point | 233 | | condition | Condition | an optional condition for which points to draw | 234 | 235 | 236 | 237 | ## every(func, condition) ⇒ [Grid](#Grid) 238 | Loops over the points in the grid, passing each point to the provided func parameter 239 | 240 | **Kind**: global function 241 | **Returns**: [Grid](#Grid) - returns @this Grid Object. Used for chaining Grid methods 242 | 243 | | Param | Type | Description | 244 | | --- | --- | --- | 245 | | func | GridFunction | a function to access each point and row/col indices | 246 | | condition | Condition | an optional condition for which points to execute func over | 247 | 248 | 249 | 250 | ## transform(func, condition) ⇒ [Grid](#Grid) 251 | Transforms x, y values of points on the grid using the supplied transform function. 252 | control which points are getting affected by supplying a condition 253 | 254 | **Kind**: global function 255 | **Returns**: [Grid](#Grid) - returns @this Grid Object. Used for chaining Grid methods 256 | 257 | * @example 258 | // Translates the grid on the x-axis by 5 and on the y-axis by 8 259 | grid.transform((point) => { 260 | point.x += 5; 261 | point.y += 8; 262 | return point; // Make sure to return the transformed point 263 | }) 264 | 265 | | Param | Type | Description | 266 | | --- | --- | --- | 267 | | func | TransformFunction | a function to transform the point's x, y values. Must return the transformed point. | 268 | | condition | Condition | an optional condition for which points to be affected | 269 | 270 | 271 | 272 | ## translate(x, y, [condition]) ⇒ [Grid](#Grid) 273 | Translates the entire grid by x en y coordinates 274 | 275 | **Kind**: global function 276 | **Returns**: [Grid](#Grid) - returns @this Grid Object. Used for chaining Grid methods 277 | 278 | | Param | Type | Description | 279 | | --- | --- | --- | 280 | | x | number | the x coordinates to translate the points with | 281 | | y | number | the y coordinates to translate the points with | 282 | | [condition] | Condition | an optional condition for which points to translate | 283 | 284 | 285 | 286 | ## copy() ⇒ [Grid](#Grid) 287 | Creates a deep copy of the current grid object 288 | 289 | **Kind**: global function 290 | **Returns**: [Grid](#Grid) - a new instance of Grid of with the same coordinate values as @this Grid 291 | 292 | 293 | ## setPoint(col, row, layer, point) 294 | **Kind**: global function 295 | 296 | | Param | 297 | | --- | 298 | | col | 299 | | row | 300 | | layer | 301 | | point | 302 | 303 | **Example** 304 | ```js 305 | // Create and set a point on a grid 306 | const grid = createGrid({cols: 3, rows: 5, layers: 8 , width 1080, height: 1080, depth: 1080}); 307 | const firstPoint = createPoint(-540, -540, -540); 308 | grid.setPoint(0, 0, 0, firstPoint); 309 | ``` 310 | 311 | 312 | ## every(func, condition) ⇒ [Grid3D](#Grid3D) 313 | Loops over the points in the grid, passing each point to the provided func parameter 314 | 315 | **Kind**: global function 316 | **Returns**: [Grid3D](#Grid3D) - returns @this Grid3D Object. Used for chaining Grid methods 317 | 318 | | Param | Type | Description | 319 | | --- | --- | --- | 320 | | func | GridFunction | a function to access each point and row/col indices | 321 | | condition | Condition | an optional condition for which points to execute func over | 322 | 323 | **Example** 324 | ```js 325 | // draw a spheres on the grid where the size depends on the position on the grid 326 | // sphere is a pseudo function to draw spheres to a html canvas. 327 | grid.every((point, col, row, layer) => { 328 | const radius = (col + row + layer + 1) * 5; 329 | sphere(point.x, point.y, point.z, radius); 330 | }) 331 | ``` 332 | 333 | 334 | ## transform(func, condition) ⇒ [Grid3D](#Grid3D) 335 | Transforms x, y, z values of points on the grid using the supplied transform function. 336 | control which points are getting affected by supplying a condition 337 | 338 | **Kind**: global function 339 | **Returns**: [Grid3D](#Grid3D) - returns @this Grid3D Object. Used for chaining Grid methods 340 | 341 | | Param | Type | Description | 342 | | --- | --- | --- | 343 | | func | TransformFunction | a function to transform the point's x, y values. **Must return the transformed point.** | 344 | | condition | Condition | an optional condition for which points to be affected | 345 | 346 | **Example** 347 | ```js 348 | // Translates the grid on the y-axis by 10 and on the z-axis by 5 349 | grid.transform((point) => { 350 | point.y += 10; 351 | point.z += 5; 352 | return point; // Make sure to return the transformed point 353 | }) 354 | ``` 355 | -------------------------------------------------------------------------------- /website/docs/api/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "API reference", 3 | "position": 3, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "pretty-grid API reference" 7 | } 8 | } -------------------------------------------------------------------------------- /website/docs/examples/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "How-to", 3 | "position": 2, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "pretty-grid examples" 7 | } 8 | } -------------------------------------------------------------------------------- /website/docs/examples/conditions.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Use Conditions 6 | 7 | ## What are Conditions 8 | Some of `pretty-grid`'s `Grid` methods accept an optional [Condition](https://github.com/VadimGouskov/pretty-grid/blob/02c94cb0187fa8ef08ac96849c9edb3ecb4f0b38/src/conditions.ts#L3) to limit the `GridPoints` that that method affects. 9 | 10 | A `Condition` comes in the form of `(point, col, row) => boolean`. This method returns `true` or `false` for wether the `GridPoint` needs to be affected by the method or not. 11 | 12 | For example, if you only want to draw all the even numbered rows of the grid, use the `evenRows` condition: 13 | 14 | ```js 15 | grid.every((point) => whiteDot(point.x, point.y)); 16 | grid.every((point) => orangeCircle(point.x, point.y), evenRows()); 17 | ``` 18 | 19 | ![evenRows](/conditions-evenRows-3.png) 20 | 21 | ## What are Condition Creators 22 | 23 | Although a Condition can be directly supplied to the methods supporting conditions, `pretty-grid` uses a `ConditionCreator` that returns a `Condition` function and accepts any number of parameters ([closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)). 24 | 25 | This way, conditions can configured using various parameters of the `ConditionCreator` while all methods still rely on the same `Condition` function type. 26 | 27 | ## Existing Condition Creators 28 | 29 | ||| 30 | |---|---| 31 | |`all`| all the points in the grid (default)| 32 | |`even`| even rows and columns | 33 | |`odd`| odd rows and columns | 34 | |`evenCols`| even columns | 35 | |`oddCols`| odd columns| 36 | |`evenRows`| event rows| 37 | |`oddRows`| odd rows| 38 | |`cols`| all columns from `start` up and including `end`
fe. `cols(1, 5)`| 39 | |`rows`| all rows from `start` up and including `end`
fe. `rows(2, 4)`| 40 | 41 | 42 | ## Writing your own 43 | 44 | if you want to write your own conditions, you have two options: 45 | 46 | - write a `Condition` function if you only use the point's `x` and `y` values or it's column or row indices to determine the outcome of the condition 47 | 48 | ```js 49 | const myCondition = (point, col, row) => { 50 | // return a boolean based on your condition here based on point, col and/or row 51 | } 52 | // pass the condition function to the Grid method, fe. translate 53 | grid.translate(10, 20, myCondition); 54 | ``` 55 | 56 | > note the absence of braces: You should pass the `Condition`, not the result of it. The condition gets evaluated inside the `Grid` method 57 | 58 | - Write a [ConditionCreator](https://github.com/VadimGouskov/pretty-grid/blob/02c94cb0187fa8ef08ac96849c9edb3ecb4f0b38/src/conditions.ts#L5) that returns a [Condition](https://github.com/VadimGouskov/pretty-grid/blob/02c94cb0187fa8ef08ac96849c9edb3ecb4f0b38/src/conditions.ts#L3) if you want to provide any number of other arguments to base the condition on. 59 | 60 | ```js 61 | const myConditionCreator = (arg1, arg2) => { 62 | return (point, col, row) => { 63 | // return a boolean based on arg1, arg2, point coordinates or col/row indices. 64 | } 65 | } 66 | // execute the ConditionCreator function, so a condition is returned and pass it to a Grid method, 67 | // "50" and "true" are pseudo arguments that the condition could be based on 68 | grid.translate(10, 20, myConditionCreator(50, true)); 69 | 70 | ``` 71 | 72 | > Here the `ConditionCreator` __needs__ to be executed, provided with each optional parameters (here `50` and `true`). The `Condition` returned by the `ConditionCreator` is then passed to the Grid method 73 | -------------------------------------------------------------------------------- /website/docs/examples/creating-grids.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Create Grids 6 | 7 | ## Rectangular Grid 8 | 9 | To create a grid, use the `createGrid` method. This method accepts an object to specify the amount of columns (`cols`), `rows`, `width` and `height` of the grid. 10 | 11 | ```js 12 | const grid = createGrid({cols: 5, rows: 8, width: 500, height: 500}); 13 | ``` 14 | 15 | Drawing circles for every point on a 500 x 500 canvas, this will produce following output: 16 | 17 | ![rectangular-grid](/creating-grid.png) 18 | 19 | ## Elliptical Grid 20 | You can create elliptical grids as well by the setting the `shape` option to `GridShape.ELLIPSE` ([GridShape enum](../api/API.md#gridshape--enum)). 21 | 22 | ```ts 23 | const ellipseGrid = createGrid({cols: 16, rows: 8, width: 500, height: 500, shape: GridShape.ELLIPSE}); 24 | ``` 25 | 26 | ![ellipse-grid](/ellipse-grid.png) 27 | 28 | ## 3D Cuboid Grid 29 | Create 3D grids using the `createGrid3D` function. Just as with 2D grids, this function accepts an object to specify amount of columns (cols), rows, width and height of the grid. additionally you also pass the amount of `layers` and `depth` on the z-axis. 30 | ```ts 31 | const grid = createGrid3D({ layers: 8, 32 | cols: 5, 33 | rows: 3, 34 | height: HEIGHT, 35 | width: WIDTH, 36 | depth: DEPTH }) 37 | ``` 38 | 39 | ![grid3d](/grid3d.png) 40 | 41 | 42 | -------------------------------------------------------------------------------- /website/docs/examples/iterating.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Iterate 6 | 7 | ## Using the `every` method 8 | 9 | The `every` method accepts a function in the form of
10 | 11 | ```ts 12 | (point: GridPoint, col?: number, row?: number) => void 13 | ``` 14 | For 3D grids you can use the additional `layer` which is the point's layer index 15 | ```ts 16 | (point: GridPoint, col?: number, row?: number, layer?: number) => void 17 | ``` 18 | 19 | ## Example 20 | Grids are often used in visual applications. Use your favorite canvas drawing library in combination with `pretty-grid` to easily visualize your grid. 21 | You can draw your grid in the following ways: 22 | 23 | ```ts 24 | // define your draw function and pass it to the Grid.draw method 25 | const drawSomething = (point) => { 26 | /// use point.x, point.y or point.z to draw something cool on this point on the grid 27 | } 28 | 29 | grid.every(drawSomething); 30 | 31 | 32 | // or draw using an anonymous inline function 33 | grid.every(point => /* draw something on this point */); 34 | ``` 35 | 36 | > You could also use the optional `col`, `row` and `layer` parameters to use the column, row and layer indices of the point for your drawing logic. -------------------------------------------------------------------------------- /website/docs/examples/operators.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Use Operators 6 | 7 | ## What are operators 8 | Use Operators to combine any number of `Condition`s using logical operators. For example, To draw the points with an even column AND odd row indices: 9 | 10 | ```js 11 | grid.every( 12 | (point) => orangeCircle(point.x, point.y), 13 | and(evenCols(), oddRows()) 14 | ); 15 | ``` 16 | 17 | ![operators](/operators.png) 18 | 19 | ## Existing Operators 20 | ||| 21 | |---|---| 22 | |`and` | Logical AND | 23 | |`or` | Logical OR | 24 | |`not` | Logical NOT | 25 | 26 | -------------------------------------------------------------------------------- /website/docs/examples/prerequisites.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Prerequisites 6 | 7 | To try these tutorials yourself, first setup your project following the steps in [getting started](../getting-started.md) 8 | 9 | > There are many great (canvas) drawing libraries to choose from to create graphics in the browser. To make these tutorials clear and un-opinionated, pseudo functions are used to illustrate the examples in these tutorials. For example, `whiteDot(x, y), orangeCircle(x, y)`, ... The `x` and `y` arguments represent the coordinates of each point on the grid. 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /website/docs/examples/transforming.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Transform 6 | 7 | ## Transform 8 | Use the `transform` method to transform the x, y and/or z coordinates of the points on the grid. 9 | The first argument is the transform function, which will have as it's arguments the current point and it's col, row (and layer for 3D grids) index. Here you can mutate the point's x, y and z position and **must return the mutated point**. 10 | 11 | Some examples: 12 | ```ts 13 | // Make the points on the grid follow a sine wave pattern 14 | 15 | const grid = createGrid({ cols: 20, rows: 20, height: 500, width: 500 }) 16 | 17 | const transformSineWave = (point) => { 18 | point.y += Math.sin(point.x * 0.015) * 30; 19 | return point; 20 | } 21 | 22 | grid.transform(transformSineWave) 23 | ``` 24 | 25 | 26 | 27 | 28 | ```ts 29 | // increase the scattering of points from top-left to bottom-right 30 | const increasedScatter = (point, col, row) => { 31 | point.x += Math.random() * col; 32 | point.y += Math.random() * row; 33 | return point; 34 | } 35 | 36 | grid.transform(increasedScatter) 37 | ``` 38 | 39 | 40 | 41 | 42 | ## Translate 43 | Use the `translate` method to translate a grid by a x and y coordinate. For example to translate a grid by 10 pixels horizontally and 20 pixels vertically: 44 | 45 | ```js 46 | grid.translate(10, 20); 47 | ``` 48 | 49 | to visualize this: 50 | 51 | ```js 52 | grid.every((point) => whiteDot(point.x, point.y)); 53 | grid.translate(10, 20); 54 | grid.every((point) => orangeCircle(point.x, point.y)); 55 | ``` 56 | 57 | ![translate](/translate.png) 58 | 59 | To translate a grid on the z-axis, 3D grids implement the `translate` method using the 3rd `z` argument. 60 | 61 | ```ts 62 | my3dGrid.translate(10, 20, 30); 63 | ``` 64 | 65 | 66 | > `grid.translate(3, 5, 8)` is a shorthand for the `.transform` function: 67 | ```ts 68 | grid.transform(point => { 69 | point.x += 3; 70 | point.y += 5; 71 | point.z += 8; 72 | return point; 73 | }) 74 | ``` 75 | 76 | ## Chaining 77 | 78 | To write a sequence of `Grid` methods more compact, you chain grid methods after another. For example to translate a grid two times and draw it right afterwards: 79 | 80 | ```ts 81 | grid.translate(10, 20); 82 | .translate(30, 0); 83 | .every(point => ...); 84 | ``` 85 | 86 | Currently following methods support chaining: 87 | 88 | - every 89 | - transform 90 | - translate 91 | -------------------------------------------------------------------------------- /website/docs/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: intro 3 | sidebar_position: 0 4 | --- 5 | 6 | # Getting started 7 | 8 | ## Browser 9 | 10 | For a browser based project, add the folowing script tag to your `index.html` file 11 | 12 | ```html 13 | 14 | ``` 15 | 16 | All `pretty-grid` features can now be accessed from the `prettyGrid` global object. 17 | 18 | ```js 19 | const grid = new prettyGrid.Grid(3, 5, 500, 500); 20 | grid.every(point => ...); 21 | ``` 22 | 23 | A browser example project can be found [here](https://github.com/VadimGouskov/pretty-grid/tree/main/examples/browser-simple-p5) 24 | 25 | ## Node 26 | 27 | For a nodejs based project, install `pretty-grid` using: 28 | 29 | ```bash 30 | npm install pretty-grid 31 | ``` 32 | 33 | How to import features from `pretty-grid` 34 | 35 | ```js 36 | import { Grid } from 'pretty-grid'; 37 | 38 | const grid = new Grid(3, 5, 500, 500); 39 | grid.every(point => ...); 40 | ``` 41 | 42 | A node based example project can be found [here](https://github.com/VadimGouskov/pretty-grid/tree/main/examples/node-typescript-p5) 43 |
44 |
45 | 46 | Now that you got everything ready, visit the [Examples](examples/prerequisites.md) or [API reference](api/API.md) pages to start making Grids! 47 | -------------------------------------------------------------------------------- /website/docusaurus.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Note: type annotations allow type checking and IDEs autocompletion 3 | 4 | const lightCodeTheme = require('prism-react-renderer/themes/github'); 5 | const darkCodeTheme = require('prism-react-renderer/themes/dracula'); 6 | 7 | /** @type {import('@docusaurus/types').Config} */ 8 | const config = { 9 | title: 'Pretty Grid', 10 | tagline: 'Create and manipulate grids with Javascript', 11 | url: 'https://pretty-grid.vadimgouskov.com', 12 | baseUrl: '/', 13 | onBrokenLinks: 'throw', 14 | onBrokenMarkdownLinks: 'warn', 15 | favicon: 'img/favicon.ico', 16 | 17 | // GitHub pages deployment config. 18 | // If you aren't using GitHub pages, you don't need these. 19 | organizationName: 'Vadim Gouskov', // Usually your GitHub org/user name. 20 | projectName: 'pretty-grid', // Usually your repo name. 21 | 22 | // Even if you don't use internalization, you can use this field to set useful 23 | // metadata like html lang. For example, if your site is Chinese, you may want 24 | // to replace "en" with "zh-Hans". 25 | i18n: { 26 | defaultLocale: 'en', 27 | locales: ['en'], 28 | }, 29 | 30 | plugins: [require.resolve('docusaurus-plugin-fathom')], 31 | 32 | presets: [ 33 | [ 34 | 'classic', 35 | /** @type {import('@docusaurus/preset-classic').Options} */ 36 | ({ 37 | docs: { 38 | sidebarPath: require.resolve('./sidebars.js'), 39 | // Please change this to your repo. 40 | // Remove this to remove the "edit this page" links. 41 | editUrl: 42 | 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', 43 | }, 44 | blog: { 45 | showReadingTime: true, 46 | // Please change this to your repo. 47 | // Remove this to remove the "edit this page" links. 48 | editUrl: 49 | 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', 50 | }, 51 | theme: { 52 | customCss: require.resolve('./src/css/custom.css'), 53 | }, 54 | }), 55 | ], 56 | ], 57 | 58 | themeConfig: 59 | /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ 60 | ({ 61 | fathomAnalytics: { 62 | siteId: 'QSDUCUQL', 63 | }, 64 | navbar: { 65 | title: 'Pretty Grid', 66 | 67 | items: [ 68 | { 69 | type: 'doc', 70 | docId: 'intro', 71 | position: 'left', 72 | label: 'Docs', 73 | }, 74 | { 75 | href: 'https://github.com/VadimGouskov/pretty-grid', 76 | label: 'GitHub', 77 | position: 'right', 78 | external: true 79 | }, 80 | { 81 | href: 'https://vadimgouskov.com', 82 | label: 'Author', 83 | position: 'right', 84 | external: true 85 | }, 86 | ], 87 | }, 88 | footer: { 89 | style: 'dark', 90 | // links: [ 91 | // { 92 | // title: 'Docs', 93 | // items: [ 94 | // { 95 | // label: 'Tutorial', 96 | // to: '/docs/intro', 97 | // }, 98 | // ], 99 | // }, 100 | // { 101 | // title: 'Community', 102 | // items: [ 103 | // { 104 | // label: 'Stack Overflow', 105 | // href: 'https://stackoverflow.com/questions/tagged/docusaurus', 106 | // }, 107 | // { 108 | // label: 'Discord', 109 | // href: 'https://discordapp.com/invite/docusaurus', 110 | // }, 111 | // { 112 | // label: 'Twitter', 113 | // href: 'https://twitter.com/docusaurus', 114 | // }, 115 | // ], 116 | // }, 117 | // { 118 | // title: 'More', 119 | // items: [ 120 | // { 121 | // label: 'Blog', 122 | // to: '/blog', 123 | // }, 124 | // { 125 | // label: 'GitHub', 126 | // href: 'https://github.com/facebook/docusaurus', 127 | // }, 128 | // ], 129 | // }, 130 | // ], 131 | copyright: `Copyright © ${new Date().getFullYear()} Vadim Gouskov, this website is built with Docusaurus.`, 132 | }, 133 | prism: { 134 | theme: lightCodeTheme, 135 | darkTheme: darkCodeTheme, 136 | }, 137 | }), 138 | }; 139 | 140 | module.exports = config; 141 | -------------------------------------------------------------------------------- /website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids", 15 | "typecheck": "tsc", 16 | "install-custom": "npm i --legacy-peer-deps" 17 | }, 18 | "dependencies": { 19 | "@chakra-ui/react": "^2.5.1", 20 | "@docusaurus/core": "2.2.0", 21 | "@docusaurus/preset-classic": "2.2.0", 22 | "@emotion/react": "^11.10.6", 23 | "@emotion/styled": "^11.10.6", 24 | "@mdx-js/react": "^1.6.22", 25 | "@vercel/analytics": "^0.1.8", 26 | "clsx": "^1.2.1", 27 | "docusaurus-plugin-fathom": "^1.1.0", 28 | "framer-motion": "^10.2.4", 29 | "pretty-grid": "^0.0.15", 30 | "prism-react-renderer": "^1.3.5", 31 | "react": "^18.0.0", 32 | "react-dom": "^18.0.0", 33 | "react-p5": "^1.3.33", 34 | "react-syntax-highlighter": "^15.5.0" 35 | }, 36 | "devDependencies": { 37 | "@docusaurus/module-type-aliases": "2.2.0", 38 | "@tsconfig/docusaurus": "^1.0.5", 39 | "typescript": "^4.7.4" 40 | }, 41 | "browserslist": { 42 | "production": [ 43 | ">0.5%", 44 | "not dead", 45 | "not op_mini all" 46 | ], 47 | "development": [ 48 | "last 1 chrome version", 49 | "last 1 firefox version", 50 | "last 1 safari version" 51 | ] 52 | }, 53 | "engines": { 54 | "node": ">=16.14" 55 | } 56 | } -------------------------------------------------------------------------------- /website/sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | // @ts-check 13 | 14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ 15 | const sidebars = { 16 | // By default, Docusaurus generates a sidebar from the docs folder structure 17 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], 18 | 19 | // But you can create a sidebar manually 20 | /* 21 | tutorialSidebar: [ 22 | 'intro', 23 | 'hello', 24 | { 25 | type: 'category', 26 | label: 'Tutorial', 27 | items: ['tutorial-basics/create-a-document'], 28 | }, 29 | ], 30 | */ 31 | }; 32 | 33 | module.exports = sidebars; 34 | -------------------------------------------------------------------------------- /website/src/components/examples/example.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import p5Types from "p5"; //Import this for typechecking and intellisense 3 | import { Box, Code, Heading, Stack, Text } from "@chakra-ui/react"; 4 | import SyntaxHighlighter from 'react-syntax-highlighter'; 5 | import { stackoverflowDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'; 6 | import BrowserOnly from "@docusaurus/BrowserOnly"; 7 | import useIsBrowser from "@docusaurus/useIsBrowser"; 8 | 9 | interface Props { 10 | setup: (p5: p5Types, canvasParentRef: Element) => void 11 | draw: (p5: p5Types) => void 12 | title: string; 13 | text?: string; 14 | code?: string; 15 | } 16 | 17 | export const Example: React.FC = (props) => { 18 | 19 | const sectionId = props.title.replace(/ /g, "-") 20 | const isBrowser = useIsBrowser(); 21 | 22 | return ( 23 | 24 | 25 | }> 26 | {() => { 27 | const Sketch = require('react-p5'); 28 | return 29 | }} 30 | 31 | 32 | 33 | 34 | {props.title} 35 | 36 | 37 | {props.code && ( 38 | 39 | {props.code} 40 | )} 41 | 42 | ); 43 | }; -------------------------------------------------------------------------------- /website/src/components/features/feature.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Heading, Stack, Text } from "@chakra-ui/react"; 2 | import * as React from "react"; 3 | 4 | type Props = { 5 | img: string; 6 | title: string; 7 | text?: string 8 | } 9 | 10 | export const Feature: React.FC = (props) => { 11 | return 12 | 13 | 14 | 15 | {props.title} 16 | {props.text} 17 | 18 | } -------------------------------------------------------------------------------- /website/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */ 8 | :root { 9 | --ifm-color-primary: #FF6D00; 10 | --ifm-color-primary-dark: #FF6000; 11 | --ifm-color-primary-darker: #FF5400; 12 | --ifm-color-primary-darkest: #FF4800; 13 | --ifm-color-primary-light: #FF8500; 14 | --ifm-color-primary-lighter: #FF9100; 15 | --ifm-color-primary-lightest: #FF9E00; 16 | --ifm-code-font-size: 95%; 17 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); 18 | } 19 | 20 | /* For readability concerns, you should choose a lighter palette in dark mode. */ 21 | [data-theme='dark'] { 22 | --ifm-color-primary: #FF8500; 23 | --ifm-color-primary-dark: #FF7900; 24 | --ifm-color-primary-darker: #FF6D00; 25 | --ifm-color-primary-darkest: #FF6000; 26 | --ifm-color-primary-light: #FF9100; 27 | --ifm-color-primary-lighter: #FF9E00; 28 | --ifm-color-primary-lightest: #FFAA00; 29 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); 30 | } -------------------------------------------------------------------------------- /website/src/hooks/examples/examples.ts: -------------------------------------------------------------------------------- 1 | import p5Types from "p5"; 2 | import { create2d } from "./sketches/create-2d"; 3 | import { create3d } from "./sketches/create-3d"; 4 | import { createEllipse } from "./sketches/create-ellipse"; 5 | import { drawEvenOdd } from "./sketches/draw-odd-even"; 6 | import { transform } from "./sketches/transform"; 7 | 8 | type Example = { 9 | setup: (p5: p5Types, canvasParentRef: Element) => void 10 | draw: (p5: p5Types) => void 11 | title: string; 12 | text?: string; 13 | code?: string; 14 | } 15 | 16 | export const useExamples = (): Example[] => { 17 | return [{ 18 | title: "How to Create a 2D Grid", 19 | setup: create2d.setup, 20 | draw: create2d.draw, 21 | code: ` /* Creating and drawing a 2D rectangular grid */ 22 | import { createGrid } from "pretty-grid"; 23 | 24 | const grid = createGrid({ rows: 5, cols: 8, 25 | width: 400, height: 400 }); 26 | grid.every(point => { 27 | circle(point.x, point.y, 20); 28 | };` 29 | }, 30 | { 31 | title: "How to Create an Elliptical Grid", 32 | setup: createEllipse.setup, 33 | draw: createEllipse.draw, 34 | code: ` /* Creating and drawing a 2D Ellipse grid */ 35 | import { createGrid } from "pretty-grid"; 36 | 37 | const grid = createGrid({ rows: 4, cols: 15, 38 | width: 400, height: 400, 39 | shape: GridShape.ELLIPSE 40 | }) 41 | 42 | grid.every((point, _, row) => { 43 | circle(point.x, point.y, (row + 1) * 5); 44 | })` 45 | }, 46 | { 47 | title: "How to Create a 3D Grid ", 48 | setup: create3d.setup, 49 | draw: create3d.draw, 50 | code: ` /* Creating and drawing a 3D grid*/ 51 | import { createGrid3D } from "pretty-grid"; 52 | 53 | grid = createGrid3D({ rows: 3, cols: 5, layers: 8, 54 | width: 400, height: 400, depth: 400 55 | }) 56 | ` 57 | }, 58 | 59 | { 60 | title: "How to transform points on a Grid ", 61 | setup: transform.setup, 62 | draw: transform.draw, 63 | code: ` /* Creating and Transforming a 2D grid */ 64 | import { createGrid } from "pretty-grid"; 65 | 66 | const grid = createGrid({ rows: 15, cols: 15, 67 | width: 400, height: 400 68 | }); 69 | 70 | const transformSineWave = (point) => { 71 | point.x += Math.sin(point.y * 0.015) * 20; 72 | return point; 73 | } 74 | 75 | grid.transform(transformSineWave) 76 | ` 77 | }, 78 | { 79 | title: "How to draw all even/odd points on a Grid ", 80 | setup: drawEvenOdd.setup, 81 | draw: drawEvenOdd.draw, 82 | code: ` /* Creating and drawing selective points on a grid*/ 83 | import { createGrid, even, odd } from "pretty-grid"; 84 | 85 | const grid = createGrid({ rows: 8, cols: 8, 86 | width: 400, height: 400 87 | }); 88 | 89 | grid.every(point => { 90 | whiteCircle(point.x, point.y); 91 | }, even()) 92 | 93 | grid.every(point => { 94 | orangeCircle(point.x, point.y); 95 | }, odd()) 96 | ` 97 | }, 98 | ] 99 | } -------------------------------------------------------------------------------- /website/src/hooks/examples/sketches/create-2d.ts: -------------------------------------------------------------------------------- 1 | import p5Types from "p5"; 2 | import { createGrid, ellipseShapeOrigin, Grid, ShapeOrigin } from "pretty-grid"; 3 | import { sketchConfig } from "./sketch.config"; 4 | const { canvasWidth, canvasHeight } = sketchConfig; 5 | 6 | const GRID_WIDTH = canvasWidth * 0.66; 7 | const GRID_HEIGHT = canvasHeight * 0.66; 8 | let grid: Grid; 9 | const setup = (p5: p5Types, canvasParentRef: Element) => { 10 | 11 | p5.createCanvas(canvasWidth, canvasHeight).parent(canvasParentRef); 12 | grid = createGrid({ rows: 5, cols: 8, width: GRID_WIDTH, height: GRID_HEIGHT }) 13 | p5.noLoop(); 14 | }; 15 | 16 | const draw = (p5: p5Types) => { 17 | p5.background(0); 18 | p5.translate((canvasWidth - GRID_WIDTH) / 2, (canvasHeight - GRID_HEIGHT) / 2) 19 | 20 | grid.every(point => { 21 | p5.ellipse(point.x, point.y, 20, 20); 22 | }) 23 | 24 | }; 25 | 26 | export const create2d = { setup, draw }; -------------------------------------------------------------------------------- /website/src/hooks/examples/sketches/create-3d.ts: -------------------------------------------------------------------------------- 1 | import p5Types from "p5"; 2 | import { createGrid3D, Grid, Grid3D, } from "pretty-grid"; 3 | import { sketchConfig } from "./sketch.config"; 4 | const { canvasWidth, canvasHeight } = sketchConfig; 5 | 6 | const GRID_WIDTH = canvasWidth * 0.66; 7 | const GRID_HEIGHT = canvasHeight * 0.66; 8 | const GRID_DEPTH = GRID_WIDTH; 9 | let grid: Grid3D; 10 | let rotation = 0; 11 | const setup = (p5: p5Types, canvasParentRef: Element) => { 12 | 13 | p5.createCanvas(canvasWidth, canvasHeight, p5.WEBGL).parent(canvasParentRef); 14 | grid = createGrid3D({ rows: 3, cols: 5, layers: 8, width: GRID_WIDTH, height: GRID_HEIGHT, depth: GRID_DEPTH }) 15 | grid.translate(-GRID_WIDTH / 2, -GRID_HEIGHT / 2, -GRID_DEPTH / 2); 16 | }; 17 | 18 | const draw = (p5: p5Types) => { 19 | rotation += 0.01; 20 | p5.translate(0, 0, -GRID_DEPTH) 21 | p5.background(0); 22 | p5.stroke("white") 23 | p5.rotateX(-rotation); 24 | p5.rotateY(-rotation); 25 | grid.every(point => { 26 | p5.push(); 27 | p5.translate(point.x, point.y, point.z); 28 | p5.sphere(10); 29 | p5.pop() 30 | }) 31 | 32 | }; 33 | 34 | export const create3d = { setup, draw }; -------------------------------------------------------------------------------- /website/src/hooks/examples/sketches/create-ellipse.ts: -------------------------------------------------------------------------------- 1 | import p5Types from "p5"; 2 | import { createGrid, ellipseShapeOrigin, Grid, GridShape, ShapeOrigin } from "pretty-grid"; 3 | import { sketchConfig } from "./sketch.config"; 4 | 5 | const { canvasWidth, canvasHeight } = sketchConfig; 6 | 7 | const GRID_WIDTH = canvasWidth * 0.66; 8 | const GRID_HEIGHT = canvasHeight * 0.66; 9 | let grid: Grid; 10 | const setup = (p5: p5Types, canvasParentRef: Element) => { 11 | 12 | p5.createCanvas(canvasWidth, canvasHeight).parent(canvasParentRef); 13 | grid = createGrid({ rows: 4, cols: 15, width: GRID_WIDTH, height: GRID_HEIGHT, shape: GridShape.ELLIPSE }) 14 | p5.noLoop(); 15 | }; 16 | 17 | const draw = (p5: p5Types) => { 18 | p5.background(0); 19 | p5.translate(canvasWidth / 2, canvasHeight / 2) 20 | 21 | grid.every((point, _, row) => { 22 | p5.circle(point.x, point.y, (row + 1) * 5); 23 | }) 24 | 25 | }; 26 | 27 | export const createEllipse = { setup, draw }; -------------------------------------------------------------------------------- /website/src/hooks/examples/sketches/draw-odd-even.ts: -------------------------------------------------------------------------------- 1 | import p5Types from "p5"; 2 | import { createGrid, ellipseShapeOrigin, even, Grid, odd, ShapeOrigin } from "pretty-grid"; 3 | import { sketchConfig } from "./sketch.config"; 4 | const { canvasWidth, canvasHeight } = sketchConfig; 5 | 6 | const GRID_WIDTH = canvasWidth * 0.66; 7 | const GRID_HEIGHT = canvasHeight * 0.66; 8 | let grid: Grid; 9 | const setup = (p5: p5Types, canvasParentRef: Element) => { 10 | 11 | p5.createCanvas(canvasWidth, canvasHeight).parent(canvasParentRef); 12 | grid = createGrid({ rows: 8, cols: 8, width: GRID_WIDTH, height: GRID_HEIGHT }) 13 | p5.noLoop(); 14 | }; 15 | 16 | const draw = (p5: p5Types) => { 17 | p5.background(0); 18 | p5.translate((canvasWidth - GRID_WIDTH) / 2, (canvasHeight - GRID_HEIGHT) / 2) 19 | 20 | grid.every(point => { 21 | p5.circle(point.x, point.y, GRID_WIDTH / 8); 22 | }, even()) 23 | 24 | p5.fill("orange") 25 | grid.every(point => { 26 | p5.circle(point.x, point.y, GRID_WIDTH / 8); 27 | }, odd()) 28 | 29 | }; 30 | 31 | export const drawEvenOdd = { setup, draw }; -------------------------------------------------------------------------------- /website/src/hooks/examples/sketches/sketch.config.ts: -------------------------------------------------------------------------------- 1 | export const sketchConfig = { 2 | canvasWidth: 400, 3 | canvasHeight: 400, 4 | } -------------------------------------------------------------------------------- /website/src/hooks/examples/sketches/transform.ts: -------------------------------------------------------------------------------- 1 | import p5Types from "p5"; 2 | import { createGrid, ellipseShapeOrigin, Grid, GridShape, ShapeOrigin } from "pretty-grid"; 3 | import { sketchConfig } from "./sketch.config"; 4 | 5 | const { canvasWidth, canvasHeight } = sketchConfig; 6 | 7 | const GRID_WIDTH = canvasWidth; 8 | const GRID_HEIGHT = canvasHeight; 9 | let grid: Grid; 10 | const setup = (p5: p5Types, canvasParentRef: Element) => { 11 | 12 | p5.createCanvas(canvasWidth, canvasHeight).parent(canvasParentRef); 13 | grid = createGrid({ rows: 15, cols: 15, width: GRID_WIDTH, height: GRID_HEIGHT }) 14 | p5.noLoop(); 15 | }; 16 | 17 | const draw = (p5: p5Types) => { 18 | p5.translate(canvasWidth / 2, canvasHeight / 2); 19 | p5.scale(0.666); 20 | p5.translate(-canvasWidth / 2, -canvasHeight / 2); 21 | 22 | p5.background(0); 23 | 24 | const transformSineWave = (point) => { 25 | point.x += Math.sin(point.y * 0.015) * 20; 26 | return point; 27 | } 28 | 29 | grid.transform(transformSineWave) 30 | 31 | grid.every(point => p5.circle(point.x, point.y, 20)); 32 | 33 | }; 34 | 35 | export const transform = { setup, draw }; -------------------------------------------------------------------------------- /website/src/hooks/features.ts: -------------------------------------------------------------------------------- 1 | type HomePageFeature = { 2 | img: string; 3 | title: string; 4 | text: string 5 | } 6 | export const useFeatures = (): HomePageFeature[] => { 7 | return [ 8 | { img: "/features/2dgrid-orange.png", title: "Define a grid in 1 line of code", text: "tester" }, 9 | { img: "/features/2d-grid-ellipse-orange.png", title: "Use multiple shapes", text: "tester" }, 10 | { img: "/features/3d-grid-orange.png", title: "In 2 or 3 dimensions", text: "tester" }, 11 | { img: "/features/2d-grid-select-orange.png", title: "Select areas", text: "tester" }, 12 | { img: "/features/2d-grid-transform-orange.png", title: "Transform points", text: "tester" }, 13 | { img: "/features/2d-pattern.png", title: "Create patterns with ease", text: "tester" } 14 | ] 15 | } -------------------------------------------------------------------------------- /website/src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 8rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | } 12 | 13 | @media screen and (max-width: 996px) { 14 | .heroBanner { 15 | padding: 4rem; 16 | } 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } -------------------------------------------------------------------------------- /website/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 4 | import Layout from '@theme/Layout'; 5 | import { Alert, border, Box, ChakraProvider, Container, Heading, Highlight, SimpleGrid, Stack, Text } from '@chakra-ui/react' 6 | import { Link as ChakraLink } from '@chakra-ui/react' 7 | import Link from '@docusaurus/Link' 8 | 9 | 10 | 11 | import styles from './index.module.css'; 12 | import Head from '@docusaurus/Head'; 13 | import { Button, Spinner } from '@chakra-ui/react'; 14 | import { useFeatures } from '@site/src/hooks/features'; 15 | import { Feature } from '@site/src/components/features/feature'; 16 | import { Example } from '../components/examples/example'; 17 | import { useExamples } from '../hooks/examples/examples'; 18 | import BrowserOnly from '@docusaurus/BrowserOnly'; 19 | 20 | function HomepageHeader() { 21 | const { siteConfig } = useDocusaurusContext(); 22 | return ( 23 |
24 |
25 | 26 | {siteConfig.title} 27 | {siteConfig.tagline} 28 | 29 | 30 | 31 | 34 | Documentation 35 | 36 | 40 | Examples 41 | 42 | 43 |
44 |
45 | ); 46 | } 47 | 48 | export default function Home(): JSX.Element { 49 | const { siteConfig } = useDocusaurusContext(); 50 | const features = useFeatures(); 51 | const examples = useExamples(); 52 | return ( 53 | 54 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | Why Pretty Grid ? 64 | 65 | Creating 2D or 3D grids involves a lot of boiler plate code. 66 | Especially if you want to select or manipulate different areas across your grid. 67 |

68 | Pretty-Grid let's you define a 2D or 3D grid in a single line of code.
Additionally, Pretty-grid provides 69 | numerous helper methods to make complex point selections and transformations across multiple grids a breeze. 70 | 71 | 72 | 73 | 74 | 75 | {features.map(({ img, title }) => < Feature img={img} title={title}>)} 76 | 77 | 78 | 79 | 80 | Examples 81 | 82 | 83 | The examples below illustrate some basic capabilities of pretty-grid. If you want to learn more, check out the documentation section. 84 |

85 | 86 | 87 | These examples use the powerful p5.js library to draw to the html canvas. For brevity, the examples include the pretty-grid code only . 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | {examples.map(({ title, setup, draw, code }) => 97 | )} 98 | 99 | 100 | 101 | 102 | 103 | 104 | ); 105 | } 106 | -------------------------------------------------------------------------------- /website/src/pages/markdown-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown page example 3 | --- 4 | 5 | # Markdown page example 6 | 7 | You don't need React to write simple standalone pages. 8 | -------------------------------------------------------------------------------- /website/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/.nojekyll -------------------------------------------------------------------------------- /website/static/2d-transform-scatter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/2d-transform-scatter.png -------------------------------------------------------------------------------- /website/static/2d-transform-sine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/2d-transform-sine.png -------------------------------------------------------------------------------- /website/static/conditions-evenRows-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/conditions-evenRows-3.png -------------------------------------------------------------------------------- /website/static/creating-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/creating-grid.png -------------------------------------------------------------------------------- /website/static/ellipse-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/ellipse-grid.png -------------------------------------------------------------------------------- /website/static/ellipse-indices.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/ellipse-indices.png -------------------------------------------------------------------------------- /website/static/features/2d-grid-ellipse-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/features/2d-grid-ellipse-orange.png -------------------------------------------------------------------------------- /website/static/features/2d-grid-select-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/features/2d-grid-select-orange.png -------------------------------------------------------------------------------- /website/static/features/2d-grid-transform-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/features/2d-grid-transform-orange.png -------------------------------------------------------------------------------- /website/static/features/2d-pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/features/2d-pattern.png -------------------------------------------------------------------------------- /website/static/features/2dgrid-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/features/2dgrid-orange.png -------------------------------------------------------------------------------- /website/static/features/3d-grid-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/features/3d-grid-orange.png -------------------------------------------------------------------------------- /website/static/features/3d-grid-select-multiple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/features/3d-grid-select-multiple.png -------------------------------------------------------------------------------- /website/static/grid3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/grid3d.png -------------------------------------------------------------------------------- /website/static/img/docusaurus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/img/docusaurus.png -------------------------------------------------------------------------------- /website/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/img/favicon.ico -------------------------------------------------------------------------------- /website/static/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/static/img/undraw_docusaurus_mountain.svg: -------------------------------------------------------------------------------- 1 | 2 | Easy to Use 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /website/static/img/undraw_docusaurus_tree.svg: -------------------------------------------------------------------------------- 1 | 2 | Focus on What Matters 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /website/static/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/intro.png -------------------------------------------------------------------------------- /website/static/operators.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/operators.png -------------------------------------------------------------------------------- /website/static/translate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VadimGouskov/pretty-grid/28fa3e168d15d6a31fcaef3cd9acc7316c3ab33d/website/static/translate.png -------------------------------------------------------------------------------- /website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // This file is not used in compilation. It is here just for a nice editor experience. 3 | "extends": "@tsconfig/docusaurus/tsconfig.json", 4 | "compilerOptions": { 5 | "baseUrl": "." 6 | } 7 | } --------------------------------------------------------------------------------