Sand Table Pattern Maker

Launch Pattern Maker

This is part of my Sand Table Build

Built with p5.js

Installation

npm install
npm run dev

Run using NPM

node sand-pattern.mjs --pattern=circle > circle.json

Or using the bin command:

sand-pattern --pattern=circle > circle.json

Controls

• Press "o" to toggle an overlay of the pattern settings in the canvas
• Press "c" to toggle the live coordinates and plotter mechanism view
• Press "d" to download a heightmap PNG of the pattern.
• Press "p" to play/pause playback of pattern.

How to Build a New Pattern

In order to build a new pattern a few things must be done:

1. Create a Pattern Class and save it to the assets/js/patterns folder
2. Link to Pattern Class file in index.html
3. Add the Pattern Class to the Patterns config in the main sketch file (sand_table_pattern_maker.js). This object must have a key that matches the class's this.key value and the object value must be a Class instantiation.

Pattern classes are made up of at least 4 methods:

• constructor - The class constructor defines a few aspect of the class including:
  • this.key - Used for identifying the class's properties in the main sketch file
  • this.name - Used for referencing the pattern in the UI.
  • this.config - This is an object that defines the pattern's input configuration options.
  • this.path - Initializes the pattern's output path coordinates
• draw - This class is called by the main sketch to draw the pattern. It reads and updates the UI input values and sends the input to the class's calc method.
• calc - This is where the algorithm for the pattern is implemented. Using the selected inputs, the method returns the coordinates for the complete path.

Once you've completed your design, submit a Pull Request and if it works, I'll merge it in. Thanks in advance!

Patterns

• XY Coordinates
• Circle
• Cross
• Cycloid (Epicycloid, Hypocycloid, Hypotrochoid)
• Curvature
• Diameters
• Free Draw
• Easter Eggs (Reference)
• Farris Curve (Reference)
• Fermat's Spiral (Reference)
• Fibonacci
• Fibonacci Lollipops
• Frames (Border Patterns)
• G-Code
• Gravity
• Heart (Reference)
• Space Filling Curves [1] [2] [3]
• Lissajous Curve (Lissajous Curves)
• Parametric (Butterfly Curve)
• Rectangle
• Rhodonea (Rose) Curve (Rose Curve)
• Shape Morph
• Shape Spin
• Spiral
• Spiral (Logarithmic) (Reference)
• Spokes
• Star
• Superellipse [1] [2] [3]
• Text
• Theta Rho Coordinates
• Wiggly Spiral
• Zig Zag

License

This work is licensed under a Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) License.

This work makes use of p5.js, which carries a GNU Lesser General Public License.