# Example Custom Presets

This directory contains example custom preset configurations that demonstrate the capabilities of the LEDLab Preset Editor.

## Available Examples

### 1. Pulsing Circle (`pulsing-circle.json`)
A simple preset featuring a single circle at the center that pulses in and out using rainbow colors.

**Features:**
- Rainbow color generation
- Pulse animation (scale oscillation)
- Centered positioning

### 2. Bouncing Squares (`bouncing-squares.json`)
Multiple colored rectangles bouncing around the matrix in different directions.

**Features:**
- Multiple layers with different shapes
- Oscillating animations on X and Y axes
- Different colors per layer
- Phase offsets for varied motion

### 3. Spiral Rainbow (`spiral-rainbow.json`)
A rotating spiral pattern with a full rainbow gradient.

**Features:**
- Pattern layer (spiral)
- Multi-stop color palette
- Configurable rotation speed and arm count

### 4. Moving Triangle (`moving-triangle.json`)
A triangle that moves linearly across the screen with a gradient color scheme.

**Features:**
- Triangle shape
- Linear movement animation
- Gradient colors

## How to Use

1. Open the LEDLab application
2. Navigate to the **🎨 Editor** view
3. Click the **📥 Import JSON** button
4. Select one of the example JSON files
5. Review the configuration in the editor
6. Click **▶️ Preview** to test on a selected node
7. Modify parameters to customize
8. Click **💾 Save** to store your customized version

## Creating Your Own Presets

Use these examples as templates for creating your own custom presets. The general structure is:

```json
{
  "name": "Preset Name",
  "description": "Description of what the preset does",
  "layers": [
    {
      "type": "shape" | "pattern",
      "shape": "circle" | "rectangle" | "triangle" | "blob" | "point" | "line",
      "pattern": "trail" | "radial" | "spiral",
      "position": { "x": 8, "y": 8 },
      "size": { "radius": 3, "width": 5, "height": 5 },
      "color": {
        "type": "solid" | "gradient" | "palette" | "rainbow" | "radial",
        "value": "hexcolor",
        ...
      },
      "animation": {
        "type": "move" | "rotate" | "pulse" | "oscillateX" | "oscillateY" | "fade",
        "params": { ... }
      }
    }
  ],
  "parameters": {
    "speed": { "type": "range", "min": 0.1, "max": 2.0, "step": 0.1, "default": 1.0 },
    "brightness": { "type": "range", "min": 0.1, "max": 1.0, "step": 0.1, "default": 1.0 }
  }
}
```

## Building Blocks Reference

### Shape Types
- **circle**: Round shape with radius
- **rectangle**: Four-sided shape with width and height
- **triangle**: Three-sided shape with radius (determines size)
- **blob**: Soft circle with energy field falloff
- **point**: Single pixel
- **line**: Line between two points

### Pattern Types
- **trail**: Fade effect on previous frames
- **radial**: Gradient radiating from center
- **spiral**: Rotating spiral arms

### Color Types
- **solid**: Single color
- **gradient**: Linear blend between two colors
- **palette**: Multi-stop gradient
- **rainbow**: Color wheel effect
- **radial**: Gradient from center outward

### Animation Types
- **move**: Linear movement from point A to B
- **rotate**: Rotation around center
- **pulse**: Scale oscillation
- **oscillateX/Y**: Sine wave movement on X or Y axis
- **fade**: Fade in or out

## Tips

1. **Layer Order Matters**: Layers are rendered in order, so later layers appear on top
2. **Combine Multiple Shapes**: Create complex effects by layering shapes with different animations
3. **Use Phase Offsets**: For oscillating animations, use different phase values to desynchronize motion
4. **Experiment with Colors**: Try different color combinations and gradients
5. **Start Simple**: Begin with one layer and gradually add complexity
6. **Test Early**: Preview frequently to see how your changes look in real-time

## Advanced Techniques

### Creating Trails
Add a trail pattern layer with high decay factor combined with moving shapes:

```json
{
  "type": "pattern",
  "pattern": "trail",
  "params": {
    "decayFactor": 0.85
  }
}
```

### Synchronized Motion
Use the same frequency and phase for oscillating animations to create synchronized movement.

### Color Cycling
Use the rainbow color type with pulse or rotate animations for dynamic color effects.

## Need Help?

Refer to the main LEDLab documentation or experiment in the editor. The preview function lets you see changes in real-time!