Play with sequences of numbers to create nice graphs on a canvas.
This summer my kids found a math game, a sequence of numbers to be drawn on a squared paper, to get a nice schematic drawing.
All you need is a sequence of integers and a simple drawing rule pattern.
The movements must follow these paths sequence: right, up, left, down
The drawing is finished when you'll get the starting point.
Let's understand it better with this simple sequence: 3, 3, 9
The first line must be from the beginning point to right, the line must be 3 squares long.
The second draw will start from the end of the previous one, the line must be 3 squares long, up direction.
Then the third draw will start from the end of the previous one, the line must be 9 squares long, left direction.
We haven't reached the starting point, so we need to restart the sequence number, going down for 3 squares.
We did in sequence all the 4 movements, but we didn't reach the end point, so the let's go on moving right for 3 squares
And so on, until we finish the number sequence of movements right at the staring point.
###Let's the fun begin
Try strange combinations, and have fun:
1,2,3,4,5,6,7,8,9,1,1,2,3,4,5,6,7,8,9
2,2,2,8,8,8,1,1,1,3,3,3,4,4,4,5,5,5,6,6,6,7,7,7,9,9,9
1,1,1,2,2,2,3,3,3,4,4,4,5,5,5,6,6,6,7,7,7,8,8,8,9,9,9
This is a vue3 + canvas experiment.
yarn install
yarn dev
yarn lint
yarn build-vite
Prettier is and ESLint are used to make the project safe and reliable.
vue cli is use to scaffolding and serve the project
No tests at the moment, shame on me!
CompositionAPI, since we're on a vue3 project. Will be there in the next iteration.
0.3
0.2
- Added githup page and way to publish it: /scripts/gh-pages-deploy.js
- Added lovely tailwindcss.
- Fixed way to redraw canvas.
- Canvas now resize automatically.
- Grid size can be changed.
0.1.1
- Added colours to the lines.
0.1
- Initial release.