Giter Club home page Giter Club logo

coloring-book's Introduction

coloring-book

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. alt text

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.

http://beautifulsymmetry.onl

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.

Why a Coloring Book?

The content in this "book" is presented in the form of a coloring book for multiple reasons: link

Contribute

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

Posters

Printable posters available at /posters

  • Includes printable frieze group posters

Playful Pages

Worksheets

  • 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.

Development

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 processed src files
  • Run $ gulp serve
    • This uses gulp watch to reprocess src files as they're updated
  • Visit http://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

Debugging

URL parameters:

  • ?debug

Linting

  • Uses jshint to lint Javascript via gulp via $ gulp lint command
  • jshint settings are in .jshintrc and ignore paths are in .jshintignore

Deployment

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

Style Guide

Use the /style-guide

Printable Copy

This book is designed for print with 7" x 9" trim size. It can also be printed on standard 8.5x11 (aka "letter") paper

For regenerating the PDF at /coloring-book.pdf:

  • 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
Full Bleed Printing

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.

Helpful URL parameters:

  • ?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

Making Art Assets

Wallpaper Patterns

  • Can optionally contain within maximum height via URL parater ?height=HEIGHT

Making GIFs

Can upload images to combine into GIFs here: http://gifmaker.me/

Screencast to GIFs Workflow

  • 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

/pieces

License

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

coloring-book's People

Contributors

aberke avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

coloring-book's Issues

Frieze patterns should move across page at the same speed

Frieze pattern transformations all have the same animation speed. The result is that larger patterns move across the page more quickly than smaller patterns, which is not aesthetically pleasing. An example of this is on the cover page - the top frieze pattern moves across the page more quickly than the below frieze patterns.

A solution could be to define the desired px/milliseconds of transformation speed, and then factor in the size of a pattern when computing the transformation's animation interval.

It should be more obvious which illustrations are "clickable"

Make more obvious click targets for the interactive illustrations.
This could mean:

  • Giving SVGs a "transparent" fill so that they have a click target that is not just the black lines.
  • Making clickable shapes a slightly different color when hovered over, or using some similar cue to the user.
  • Any other ideas?

Fix External requirement on CDN hosted SVG library

The illustrations for this project are drawn with javascript as SVGs (scalable vector graphics). The library used to draw and transform these SVGs is raphael.js: https://dmitrybaranovskiy.github.io/raphael/

The issue is that this project currently depends on an externally hosted version of this library: https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js
This creates 2 main problems:

  1. The dependency on the cloudflare CDN means that if cloudflare decided to no longer host this library, the project would completely break.
  2. Local development can only be done with an internet connection

The issue could be resolved in multiple ways - whichever works best. Possible solutions:

  • Simply include the library in local assets (easier said than done due to raphael.js dependencies)
  • Update the build process to build the raphael library into the local assets for the project
  • (larger task) use alternative to raphael.js

Please do not hesitate to reach out if you want to work on this issue! [email protected]

Reassess use of AngularJS and possibly shift project to new front end framework

This is a large task.
This project was built with the AngularJS framework, which is now old technology. The new Angular or other JS frameworks such as React, etc, may be more appropriate.

The use of the front end framework is largely separated from the logic and algorithms that build the illustrations, so in that sense this should not be too messy a task.

Any other ideas or approaches to modernize the use of JS in this project are welcome and appreciated! Please help.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.