Skip to content
an html5 app for carpet weaving
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
README.md
canvasUtils.js
index.html
main.js
style.css
utils.js
weaver.js

README.md

carpetweaver

a html5 app for carpet border weaving

###idea image panels in the first row are:

  • palette - drag image to fill it with colors, click to select one
  • tassels - this 1px wide canvas creates tassels of the carpet, put several colors on it and they will be looped
  • outer rim - the outer rim of the carpet, works just like tassels
  • inner rim - and the inner same as well
  • corner - corner canvas is always rectangular and defines border height, when weaving corner image is flipped and flopped
  • border A - canvas with border, it should match corner along both right and bottom edges
  • border B - optional border

###options

  • update - set carpet weaving method, it can be
    • automatic - weaving may take 20-100ms
    • on change - only when change is applied
    • manual - only when render button is pressed (one with flash)
  • border - sets how borders is looped
    • AA - border A canvas is duplicated
    • AB - border A and B are placed one after other
    • ABA - as above but A is always ending the strip
  • duplicate rows - in case border is too short some rows/columns may be duplicated
    • void - first option turns this off
    • border A first column
    • border A last column
    • border B first column
    • border B last column

###keys (image panels):

  • x - swap colors
  • f - flood fill
  • shift - pan the image
  • ctrl - pick a color

###keys (general)

  • ctrl+s - save
  • ctrl+z - undo
You can’t perform that action at this time.