Sand Table Pattern Maker

Launch Pattern Maker

This is part of my Sand Table Build

Built with p5.js

Installation

The great news is that this doesn't need to be compiled or installed to run, simply open it in your browser here!

That said, everyone likes to tweak things, so if you'd like to do that, go ahead and clone or Download from Github and then open the index.html file in your favorite browser.

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.

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)
• 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.