Giter VIP home page Giter VIP logo

overshot-generator's Introduction

Flowing Curves Overshot Generator

This repo also generates a webpage at http://sminliwu.github.io/overshot-generator, where you can use the generator in your browser without any other installation or set-up.

This is a P5/Processing sketch that allows someone to quickly make and edit a draft to produce a flowing, curving design using an overshot structure. For a weaving-centered explanation on why this produces a flowing overshot design, read this article by Bonnie Inouye.

How to Use

There is an interactive tutorial embedded in the generator that guides a user through the basic key commands. In the order that you'd see them, those instructions are:

  1. Press '1', '3', or '5' to add a threading block of that width. Press 'r' to reverse pattern direction.

  2. Press 't' to switch to editing treadles (or to switch back to threading).

    1. Press a key '1' to '6' to add a treadling block.

    2. Blocks 1-4 are woven as overshot, so tabby rows are automatically inserted before each pattern pick.

  3. Press backspace to delete the most recent treadling or threading block.

Other Controls

  • +/- : adds/removes one warp (if editing threading) OR one pick/row (if editing treadling) to the draft.
  • Shift +/Shift - : zooms in/zooms out.
  • p : toggles the highlighted box (threading or treadling) between profile and normal modes.
  • Shift p : toggles both threading and treadling between profile and normal modes.
  • o : switches the profile mode of treadling.
  • You can also click within the threading, tie-up, or treadling to manually edit those boxes. (use at your own risk)

Files

  • OvershotCurveGen - Directory for Processing (Java) code for the flowing curves overshot generator.
  • index.html - HTML page that runs the P5.js generator.
  • overshotCurveGen.js - P5.js code for the flowing curves overshot generator.
  • Threading.js - Javascript class for the threading portion of the draft (top left quadrant)
  • Treadling.js - Javascript class for the treadling portion of the draft. (bottom right quadrant)

Features in Progress

  • Sidebar that fully explains the controls like this readme does.
  • Exporting the draft as an image.
  • Exporting an abbreviated threading draft using my own notation of block lengths with the shaft numbers.
  • Further optimizing the P5 version with whatever Javascript offers (suggestions welcome, not a JS expert).
  • If you have suggestions for other features/modifications, contact me AND/OR fork the repo to modify the tool!

overshot-generator's People

Contributors

sminliwu avatar

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.