147 lines
4.4 KiB
Markdown
147 lines
4.4 KiB
Markdown
# 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!
|
|
|