SkyPattern User Guide

SkyPattern is a geometric design tool that allows you to create and manipulate geometric elements in an interactive canvas. This guide will help you understand how to use the application effectively.

• Getting Started
  • Interface Overview
  • Basic Navigation
• Working with Elements
  • Adding New Elements
  • Element Types
    • Base Point
    • Constant
    • Angle Distance
    • Along Line
    • Intersect Lines
    • Intersect X and Y
    • Line
    • Bezier Curve
    • Arc
    • Advanced Intersections
    • Pattern Piece
  • Using Mathematical Expressions
    • Basic Arithmetic
    • Dynamic Functions (work with elements)
    • Static Math Functions
    • Constants and Element References
    • Important Notes
  • Element Management
    • Selecting Elements
    • Reordering Elements
    • Deleting Elements
• Canvas Controls
  • Coordinate System
  • Keyboard Shortcuts
  • Mouse Controls
• Saving and Loading
  • Cloud Documents
  • Local Backups
• Tips and Best Practices
  • Naming Elements
  • Building Complex Designs
  • Formula Examples
  • Troubleshooting
• Advanced Features
  • Bezier Curve Editing
  • Arc-Curve Intersections
  • Dynamic Measurements

Getting Started

Interface Overview

The SkyPattern interface consists of three main areas:

1. Top Toolbar: Contains the SkyPattern logo, save/load buttons for local backups
2. Canvas Area: Interactive SVG canvas where you can view and manipulate geometric elements
3. Right Panel: Element list, add/remove buttons, and property editors
4. Bottom Status Bar: Shows document ID and save status

Basic Navigation

• Pan: Click and drag with the mouse wheel (middle button) to move around
• Zoom: Scroll with the mouse wheel to zoom in/out
• Select Element: Click on any element in the canvas or element list to select it

Working with Elements

Adding New Elements

1. Click the ➕ button in the right panel, or press n key
2. A new unnamed element will be created and selected
3. Choose the element type from the dropdown in the editor
4. Configure the element properties

Element Types

Base Point

• Purpose: Creates a fixed point at specific X,Y coordinates
• Properties:
  • X coordinate (in cm)
  • Y coordinate (in cm)
• Example: x: 10, y: 20 creates a point at position (10cm, 20cm)

Constant

• Purpose: Defines a reusable numeric value
• Properties: Value (can be a mathematical expression)
• Example: value: 15 or value: 10 * 1.5

Angle Distance

• Purpose: Creates a point at a specific angle and distance from another point
• Properties:
  • From Point: Reference point name
  • Angle: Direction in degrees (0° = right/east, 90° = down/south, 180° = left/west, 270° = up/north)
  • Distance: How far from the reference point (in cm)
• Example: From "basePoint", angle 45°, distance 20

Along Line

• Purpose: Places a point along the line between two existing points
• Properties:
  • From Point: Start point of the line
  • To Point: End point of the line
  • Length: Distance along the line from start point (in cm)
• Example: Halfway along a line: length: len(@point1, @point2) * 0.5

Intersect Lines

• Purpose: Finds where two lines intersect
• Properties: Define two lines using from/to point pairs
• Example: Line 1 from "point1" to "point2", Line 2 from "point3" to "point4"

Intersect X and Y

• Purpose: Creates a point using X coordinate from one element and Y from another
• Properties:
  • Point X: Element to take X coordinate from
  • Point Y: Element to take Y coordinate from

Line

• Purpose: Draws a visible line between two points
• Properties: From point and to point

Bezier Curve

• Purpose: Creates smooth curved lines with control handles
• Properties: Multiple points with control angles and distances
• Usage: Click and drag the control handles to adjust curve shape

Arc

• Purpose: Creates circular arcs
• Properties: Center point and radius (in cm)

Advanced Intersections

• Intersect Arc and Curve: Finds intersection points between arcs and bezier curves
• Point Along Curve: Places points at specific distances along curves

Pattern Piece

• Purpose: Creates closed polygon shapes by connecting points, lines, and curves
• Properties: Array of element names (points or bezier curves)
• Features:
  • Automatically truncates bezier curves between adjacent points
  • Renders as a filled, closed path
  • Shows label at the shape's centroid
• Example: Points array: ["cornerA", "edgeCurve", "cornerB", "bottomLine", "cornerC"]
  • If edgeCurve is a bezier, it will be automatically truncated between cornerA and cornerB
  • Curves without adjacent points use their full length
• Usage: Define the boundary of pattern pieces for sewing patterns, technical drawings, or design templates

Using Mathematical Expressions

Most numeric properties accept mathematical expressions. You can use:

Basic Arithmetic

• 10 + 5, width * 2, radius / 3
• (10 + 5) * 2 (parentheses for grouping)
• Supports +, -, *, / operators

Dynamic Functions (work with elements)

• len(@point1, @point2) - distance between two points in cm
• angle(@point1, @point2) - angle from point1 to point2 in degrees
• getX(@pointName) - get X coordinate of a point
• getY(@pointName) - get Y coordinate of a point
• bisect(@centerPoint, @point1, @point2) - angle that bisects the angle between two points from a center

IMPORTANT: When referencing element names in functions, you must prefix them with @. For example: len(@basePoint, @corner) not len(basePoint, corner).

Static Math Functions

• Trigonometry: sin(radians), cos(radians), tan(radians)
• Inverse trig: asin(value), acos(value), atan(value)
• Two-argument arctangent: atan2(y, x)
• Exponential/Logarithmic: exp(x), log(x), log10(x)
• Basic math: sqrt(x), abs(x), pow(base, exponent), sign(x)
• Rounding: ceil(x), floor(x), round(x), trunc(x)
• Multiple arguments: min(a, b, c, ...), max(a, b, c, ...)

Constants and Element References

• Built-in constants: PI (3.14159...), GOLDEN_RATIO (1.618...)
• Element references: Use element names directly: myConstant, centerRadius
• Element names in functions: Use @elementName to reference element names in function calls

Important Notes

• Trigonometric functions expect radians, but SkyPattern angles are in degrees
• To convert: sin(myAngle * PI / 180) or cos(myAngle * PI / 180)
• Element names are case-sensitive
• Functions require parentheses and comma-separated arguments

Element Management

Selecting Elements

• Click on elements in the canvas
• Use the element list in the right panel
• Selected elements are highlighted

Reordering Elements

• Use ⬆︎ and ⬇︎ buttons to change calculation order
• Elements are calculated in list order, so dependencies must come first

Deleting Elements

• Select the element and click the ➖ button
• Be careful: other elements referencing this one will lose their calculations

Canvas Controls

Coordinate System

• Origin (0,0) is at the top-left
• X increases going right (east)
• Y increases going down (south)
• Angles: 0° = right, 90° = down, 180° = left, 270° = up
• All distances are in centimeters (cm)

Keyboard Shortcuts

• n: Add new element
• Click outside elements to deselect

Mouse Controls

• Click: Select elements
• Mouse wheel click and drag: Pan the canvas
• Mouse wheel scroll: Zoom in/out
• Bezier handles: Click and drag to adjust curve control points

Saving and Loading

Cloud Documents

If you have a document ID (shown in the bottom status bar), your work automatically saves to the cloud every 500ms.

Local Backups

• Save: Click the "S" button to download a JSON backup
• Load: Click the "L" button to upload a JSON file
• Useful for working offline or sharing designs

Tips and Best Practices

Naming Elements

• Use descriptive names like "centerPoint", "radius", "cornerAngle"
• Names are used in formulas, so avoid spaces and special characters
• Use camelCase or underscores: baseWidth or base_width

Building Complex Designs

1. Start with base points to establish key positions
2. Create constants for important measurements
3. Use angle/distance and along-line elements to create related points
4. Add lines and curves to visualize the design
5. Use intersections to find derived points

Formula Examples

• Constants: myRadius / 2 - half the radius constant
• Perpendicular angle: angle(@center, @corner) + 90 - 90 degrees from the angle
• Shifted position: getX(@point1) + 5 - X position shifted 5cm right
• Midpoint distance: len(@point1, @point2) * 0.5 - half the distance between points
• Fraction along line: len(@point1, @point2) / 3 - one third the distance
• Trigonometry: sin(angle(@p1, @p2) * PI / 180) * 10 - sine of angle times 10
• Complex expressions: sqrt(pow(getX(@p2) - getX(@p1), 2) + pow(getY(@p2) - getY(@p1), 2)) - distance formula
• Angle bisector: bisect(@vertex, @arm1, @arm2) - angle that splits two arms evenly
• Min/max: max(getX(@p1), getX(@p2), getX(@p3)) - rightmost X coordinate

Troubleshooting

• Element not calculating: Check that all referenced elements exist and are calculated first
• Unexpected positions: Verify formulas and element order
• Performance issues: Simplify complex curves or reduce the number of elements

Advanced Features

Bezier Curve Editing

• Select a bezier curve to see control handles
• Drag handles to adjust curve shape
• Control angles are in degrees, distances in canvas units (cm)

Arc-Curve Intersections

• Useful for finding precise intersection points
• Intersection index selects which intersection point to use (0, 1, 2...)

Dynamic Measurements

• Elements update automatically when dependencies change
• Create parametric designs by changing base values

This guide covers the essential features of SkyPattern. Experiment with different element types and formulas to create complex geometric designs!