/skuler

Simple, web-based sketching app using swappable Kuler themes/palettes/swatches

Primary LanguageCoffeeScriptMIT LicenseMIT

Skuler

Simple, web-based sketching app using swappable Kuler themes/palettes/swatches.

This was made to test an idea about restricting a drawing to a limited set of colors.
It was built with HTML5 Canvas, SVG, and JavaScript (via CoffeeScript). Tested only with Chrome (v30).

Usage

  1. Open http://senocular.github.io/skuler/skuler.html
  2. Select a color
  3. Draw something
  4. Select another color
  5. Draw some more
  6. Visit Adobe Kuler
  7. Download a new Kuler theme (.ASE)
  8. Drag the .ASE file into the Skuler window
  9. ...
  10. Profit!!!

Keyboard Shortcuts

  • CTRL + M: New document
  • CTRL + Z: Undo
  • CTRL + Y: Redo
  • Page Up: Select previous swatch
  • Page Down: Select next swatch
  • UP Arrow: Increase lightness
  • DOWN Arrow: Decrease lightness
  • LEFT Arrow: Increase saturation
  • RIGHT Arrow: Decrease saturation
  • ,: Decrease brush size
  • .: Increase brush size

TODO

  • ❔ Brush size UI
  • ❔ Load .ASE button vs just drag and drop
  • ❔ Required browser features detection

Known Issues

  • With keyboard shortcuts, lightness depends on saturation. To get full lightness (white/black) you need to fully desaturate first. In other words, the arrow keys are a direct coorelation of the location of the selection within the triangle color picker.
  • Color triangle doesn't register when interaction moves off the visible area of the triangle. Probably won't fix.
  • Undo will undo strokes as well as saturation and lightness settings, but not selected swatch or pen size.