levskaya / eschersketch

A drawing program for exploring symmetrical designs

Eschersketch

This is a program built to experiment with pattern design in the classical wallpaper groups and rosette point groups. It allows the user to draw and layout repeating patterns in real-time.

This version has been completely overhauled from an earlier simplistic prototype. It works reasonably well with mobile and desktop browsers. Undo/Redo and a basic set of vector graphic primitives are now supported.

It features PNG and SVG export. It also exports high-res PNG "tiles" that are suitable for use with tools like Photoshop pattern fill, graphics textures, or upload to services such as Spoonflower and Contrado to be used in printed patterns.

Local Install / Build Setup

Built with ES6, webpack, babel, Vue 2.0. Project Structure derives from the vuejs es6 webpack template. (repo, docs) Running locally requires npm and should be as easy as running the following:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

Code Comments

Currently Vue handles all DOM-related UI elements, it does not however handle the canvas drawing and state management, as that's not really what it's built to do. I may consider making canvas management a bit more Vue-ish to exploit its reactivity tools, but will likely separately organize, simplify and generalize drawing state management.

Almost all actions are routed through a simple global state store and event bus, it has not yet been ported into Vuex but this would not be difficult.

External Libs/Tools

• The color panel code is derived from Vue-Color. It's been tweaked to fix a touch-event handling bug and to modify style defaults.
• Canvas touch-handling is handled by Hammer.js
• Uses eligrey's FileSaver.js and canvas-toBlob.js polyfills to support saving files.
• Uses a modified canvas2svg to export to SVG.
• Also using vue-markdown-loader for handling inline written content.
• icomoon was used to help with icon generation.