https://github.com/bbkane/cross_tile
Fun with tile shapes and JavaScript
https://github.com/bbkane/cross_tile
Last synced: about 1 year ago
JSON representation
Fun with tile shapes and JavaScript
- Host: GitHub
- URL: https://github.com/bbkane/cross_tile
- Owner: bbkane
- Created: 2017-07-30T04:31:54.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-01T04:36:42.000Z (almost 9 years ago)
- Last Synced: 2025-03-24T19:49:32.647Z (over 1 year ago)
- Language: TypeScript
- Size: 9.77 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tiling Crosses
I was doodling with crosses on graph paper and was surpised to see that I could cover the graph paper with only cross shapes. They also look pretty neat when colored oddly, so I wrote this code to play with them more efficiently.
## The logic behind `transform_point`:
I wanted to note how I came up with the formula for `transform_point`. I need to talk to my old Linear Algebra professor to get his perspective on how I might have been able to solve this more efficiently somehow.
The goal is to map a point in `p` (a square field of points (really also squares))
to the center of a cross in `c` (a square field of crosses turned caddy-corner).
Graph paper and square counting led to the following table (where x is the row, y is the column and indices start at 1):
| side length of `p` (called `n`) | 1 | 2 | 3 | 4 |
|--------------------|---|---|---|----|
| side length of `c` | 3 | 6 | 9 | 12 |
| x_0 in `c` | 2 | 3 | 4 | 5 |
| y_0 in `c` | 2 | 2 | 2 | 2 |
Those are some very easily predicted patterns and we can get the following information from them:
- the origin in `p` : `(1, 1)` is mapped onto `(n + 1, 2)` in `c`
- the number of tiles required to map a `p` of size `n` to `c` is `n * 3`
By inspecting the graph, we can also see the following shifts:
- `(x + 1, y)` corresponds to `(x + 2, y + 1)`. When you shift a square to the right in `p`, the corresponding center square in `c` is shifted to the right 2 and down 1 (In graphics, the vertival axis typically goes from top to bottom).
- `(x, y + 1)` corresponds to `(x - 1, y + 2)`. Similar explanation to the above.
Now a formula can start to be derived. We can scale the shifts in `x` and `y` by multiplying by a constant and to make it a real formula instead of just a correlation we simply add the offset from the orgin:
`(x + dx, y + dy) -> (n + 1, 2) + dx(x + 2, y + 1) + dy(x -1, y + 2)`
If we simply set `x` and `y` to `0`, we end up with a formula for coordinates from the origin:
`(dx, dy) -> (n + 1, 2) + dx(2, 1) + dy(-1, 2)`
Finally, though I've been using indices starting at one, in programming we usually start indices at zero. It's a simple matter to subtract one from the origin part of the formula. In this final form, I'm also renaming `dx` to `x` and `dy` to `y` because at this point they're offsets from the origin just like any other points.
`(x, y) -> (n, 1) + x(2, 1) + y(-1, 2)`
### Generalization
I'm pretty sure this generalizes to vector spaces of any dimensionality. To get from space `A` to space `B`, add the origin in `B` to a constant times a whatever the unit vector in `A` maps to in `B` for each unit vector in A.
## TypeScript
This is also the first time I've really used TypeScript. By opening the directory in VSCode and Running the build task once, I get compilation on save! NOTE: I'm putting all js/ts files in the ts/ folder. The js/ folder is a build artifact of the ts/ folder and I'm having git ignore it!