See this running at levi.dev/hex-grid!
Levi was bored with the standard grid layout and wanted to play with particle systems and crazy animations. So he made hex-grid.
Levi uses this package for his professional portfolio, so you know it must be pretty cool!
Some features of this package include:
- A particle system complete with neighbor and anchor position spring forces.
- An assortment of persistent animations that make the grid exciting to watch.
- An assortment of transient animations that make the grid exciting to interact with.
- A control panel that enables you to adjust most of the many different parameters of this system.
- The ability to display custom collections of posts.
- These posts will be displayed within individual tiles.
- These tile posts can be expanded for more information.
- The contents of these posts use standard Markdown syntax, which is then parsed by the system for displaying within the grid.
An example app is included in this project's repository. This currently uses data from Levi's portfolio, but there are plans to include a separate data collection.
The media for Levi's portfolio is stored in an AWS S3 bucket. The textual content and metadata is stored in a MongoDB database hosted by MongoLab.
The following diagrams help to visualize how the grid is expanded.
This image illustrates how the grid is expanded in order to show an enlarged area with details for a given tile. The grid is divided into six sectors around the given tile. These are then each translated in a different direction.
This image illustrates which tile positions lie within the viewport after both the grid has been expanded and panning has occurred in order to center the viewport on the expanded tile. This also illustrates where new tiles will need to be created in order to not show gaps within the expanded grid.
This image illustrates how the hex-grid system stores data for three different types of tile relationships. For each of these relationships, both the vertical and horizontal grid configurations are illustrated.
Each tile holds a reference to each of its neighbor tiles. These references are stored in an array that is indexed according to the position of the neighbor tiles relative to the given tile. The left-most images show which positions correspond to which indices.
The expanded grid holds an array with references to each of the six sectors. The middle images show which sectors correspond to which indices.
A sector stores references to its tiles within a two-dimensional array. The right-most images show how this two-dimensional array is indexed.
The following packages/libraries/projects were used in the development of hex-grid:
- Gulp.js
- Bower
- dat.gui
- Showdown
- Additional packages that are available via NPM (these are listed within the
package.jsonfile)
MIT