You may know of coloring books as a childhood amusement or as a means to adult relaxation. How about as a medium to explore the mathematics of symmetry?
This is a Coloring Book about Group Theory. It is both digital and on paper.
By coloring on paper, readers can explore symmetry and the beauty of math.
Following along on the digital copy to brings the concepts and illustrations to life in interactive animations.
The illustrations in this book are drawn in javascript by algorithms that follow the symmetry rules of the groups that the illustrations belong to. These algorithms also use generative art techniques to add components of randomness - notice the illustrations never repeat.
The content in this "book" is presented in the form of a coloring book for multiple reasons: link
Yes please. This is an open source project and contributions are greatly appreciated.
Please see below on how to get started with running the project locally. The project's ISSUES lists known bugs and areas of improvement. You are more than invited to submit pull requests to resolve these, or any other areas of improvement you are aware of. Thanks <3
Printable posters available at /posters
- Includes printable frieze group posters
-
Create a circular pattern: /circular-pattern
-
Frieze Groups explorer: /frieze
-
Wallpaper Groups explorer: /wallpaper
-
Guide to symmetries in the plane: /symmetries
- Add parameter
?print
for version formatted for printing
- Add parameter
-
Worksheet at /worksheet
- Print this worksheet -- meant for Second Sunday at Pioneer Works
- Designed to be printed in landscape mode on 11x17 paper
-
Frieze pattern cards at /cards
- Print and cut into cards with one pattern piece per card.
- Try to arrange these cards to generate the Frieze Patterns.
- Clone the repo
$ git clone [email protected]:aberke/coloring-book.git
Fractals Submodule:
This repo uses a submodule, which is the fractals
directory. This will initally be empty.
- Fill the fractals directory: run
git submodule update --init --recursive
- To pull in changes from the
fractals
submodule, run$ git submodule update --recursive --remote
Files are transpiled and built to /dist
by gulp and are served by a node http-server.
- Install node modules
$ npm install
- Build with gulp
$ gulp build
- There should then be a
/dist/
directory of the processedsrc
files
- There should then be a
- Run
$ gulp serve
- This uses
gulp watch
to reprocesssrc
files as they're updated
- This uses
- Visit https://127.0.0.1:5000
Run/Build in production mode with --production
flag.
- This also concatenates + minifies the files.
$ gulp build --production
$ gulp serve --production
URL parameters:
?debug
- Uses jshint to lint Javascript via gulp via
$ gulp lint
command - jshint settings are in
.jshintrc
and ignore paths are in.jshintignore
- Production is deployed on heroku at https://coloring-book.herokuapp.com
- Uses http server to serve assets. Reason: this allows AngularJS includes.
- Staging is deployed at https://coloring-book-staging.herokuapp.com
ALWAYS push to Staging before production.
Git Config looks something like:
...
[remote "origin"]
url = [email protected]:aberke/coloring-book.git
fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
remote = origin
merge = refs/heads/master
[submodule "fractals"]
url = https://github.com/aberke/fractals
[remote "production"]
url = https://git.heroku.com/coloring-book.git
fetch = +refs/heads/*:refs/remotes/heroku/*
[remote "staging"]
url = https://git.heroku.com/coloring-book-staging.git
fetch = +refs/heads/*:refs/remotes/staging/*
Workflow:
- Feature done, looks good, push to staging
$ git push staging <branch-name>
- Staging looks good, push to production
$ git push production
Use the /style-guide
This book is designed for print with 7" x 9" trim size. It can also be printed on standard 8.5x11 (aka "letter") paper
- Use Firefox browser (best obeys @page CSS specs)
- Use File > Page Setup to create (custom) page size with 7"x9" dimensions
- Go to /print-book
- Make sure the illustrations look good (or click to recreate them)
- File > Print (Open the browser’s print dialog)
- "Open PDF in Preview"
- Save as PDF at
/book.pdf
In print production for full bleed pages, the pages must be 9.25"x7.25" so that 0.125" can be cut off from each side.
- Add URL parameter
?print-full-bleed-size
This resizes the pages, but keeps the interior margins the same. - Same process as above, but use (custom) page size with 7.25"x9.25" dimensions.
?grayscale
to set the content to grayscale?disable-animations
to disable animations?print
to test printer friendly styling of the page- This will also disable animations (for better browser performance)
?debug
- Can optionally contain within maximum height via URL parater
?height=HEIGHT
Can upload images to combine into GIFs here: https://gifmaker.me/
- Use Quicktime player to take screencast
- Use ?animate URL param to auto animate things on the page upon page load
- Use PicGIF (downloaded for mac) to convert movie --> GIF
- OR Use https://giphy.com/create/gifmaker to convert .mov file to gif
/pieces
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.