knitcodemonkey / hexagon-quilt-map Goto Github PK
View Code? Open in Web Editor NEWTrying to "randomize" my quilt hexis
Home Page: https://knitcodemonkey.github.io/hexagon-quilt-map/
License: MIT License
Trying to "randomize" my quilt hexis
Home Page: https://knitcodemonkey.github.io/hexagon-quilt-map/
License: MIT License
Describe the bug
Number of rows incorrect on right triangles
Additional context
In order to show the half hexagons and second half of the right triangles, we are adding an additional row to the row selected, and then cutting off the top half row and bottom half row.
For Right triangles, though, we, at the very least, to always end on an even row, either the number selected or number selected + 1.
Ideally, we'd have twice the number of rows selected, which would always result in an even number. We are passing in the shape to the functions that generate the list of fabrics. We may be able to utilize that section to allow for twice the number of fabrics to be generated based on the shape.
Selecting any form fields or refreshing the page re-randomizes the quilt.
It will only randomize on first load, or when pressing a "Randomize" button.
imageList
as a JSON string to localstorage
?Hexagon is the only shape
Add a Square shape:
[ ] Add a form select to include Square
[ ] Create a Square component
[ ] Allow prop to load either the Hexagon or Square layout
[ ] Default to Hexagon
Right now, it is random, but what if we could do gradients, or tesselating patterns?
Hexagons are formed using CSS and background images.
Hexagonal Grids from Red Blob Games
The Hexagonal Grids website has some great info on how to format hexagons, diamonds, and other shapes in a grid-like gaming system. The same layouts would work well for our purposes. It would be work exploring if CSS really is the best option, or if we should be implementing the grid with canvas or SVGs.
Currently, the README.md is the default from create-react-app
Quilt fails to update number of spaces when form is used to adjust width and height.
Adjusting width and/or height also runs generateAllImages()
Quilt doesn't add more spaces
Quilt now has the appropriate number of spaces for the size of the quilt.
There is only one image set: "Bee Creative"
Currently the current image order for the quilt saves to localStorage, but not any of the form fields. Those are important to maintaining the same quilt you'd previously generated
When you refresh page, all form fields revert to their defaults
When you refresh the page, all selections stay as you selected them.
Here are a couple images. We may want to have right triangles and isosceles triangles.
Currently, the only way to save the current layout is to screenshot it
A button to save image/pdf that includes
Describe the bug
Though you can place fabrics in specific spaces, randomize clears those.
Expected behavior
It would be nice to have a new button that says something like "randomize others" so that you can keep the ones you've selected, and populate the rest based on those manually specified fabric placements.
As I stated in comments to #21,
It took me to go through
specks
,HomePage
,QuiltSection
, and one ofthe shapes components
to realize what **"you can place fabrics in specific spaces" actually means, and that by selecting one of the fabrics below and clicking on the tiles we can change them to the fabric selected below!
That feature should be stated somewhere on the web page or in documentation because it is totally not obvious.
Currently, the layouts are randomly generated, and you can only change the entire layout.
If you click on a single space, you can choose a different fabric from the set, and save it, allowing you to come up with your own layouts.
AND/OR
You can choose a fabric, and click on the spaces to change them to that fabric.
At the moment, the form accepts hexagons wide and tall, and adjusts the number of hexagons correctly, but the layout only works if you use an even number for width.
Accepts any whole number of hexagons wide and tall.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.