feat: pattern editor
This commit is contained in:
146
presets/examples/README.md
Normal file
146
presets/examples/README.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# 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!
|
||||
|
||||
100
presets/examples/bouncing-squares.json
Normal file
100
presets/examples/bouncing-squares.json
Normal file
@@ -0,0 +1,100 @@
|
||||
{
|
||||
"name": "Bouncing Squares",
|
||||
"description": "Multiple colored squares bouncing around",
|
||||
"layers": [
|
||||
{
|
||||
"type": "shape",
|
||||
"shape": "rectangle",
|
||||
"position": {
|
||||
"x": 8,
|
||||
"y": 8
|
||||
},
|
||||
"size": {
|
||||
"width": 3,
|
||||
"height": 3
|
||||
},
|
||||
"color": {
|
||||
"type": "solid",
|
||||
"value": "ff0000"
|
||||
},
|
||||
"intensity": 1.0,
|
||||
"animation": {
|
||||
"type": "oscillateX",
|
||||
"axis": "x",
|
||||
"params": {
|
||||
"center": 8,
|
||||
"amplitude": 6,
|
||||
"frequency": 0.5,
|
||||
"phase": 0
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "shape",
|
||||
"shape": "rectangle",
|
||||
"position": {
|
||||
"x": 8,
|
||||
"y": 8
|
||||
},
|
||||
"size": {
|
||||
"width": 3,
|
||||
"height": 3
|
||||
},
|
||||
"color": {
|
||||
"type": "solid",
|
||||
"value": "00ff00"
|
||||
},
|
||||
"intensity": 1.0,
|
||||
"animation": {
|
||||
"type": "oscillateY",
|
||||
"axis": "y",
|
||||
"params": {
|
||||
"center": 8,
|
||||
"amplitude": 6,
|
||||
"frequency": 0.7,
|
||||
"phase": 1.57
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "shape",
|
||||
"shape": "rectangle",
|
||||
"position": {
|
||||
"x": 8,
|
||||
"y": 8
|
||||
},
|
||||
"size": {
|
||||
"width": 2,
|
||||
"height": 2
|
||||
},
|
||||
"color": {
|
||||
"type": "solid",
|
||||
"value": "0000ff"
|
||||
},
|
||||
"intensity": 1.0,
|
||||
"animation": {
|
||||
"type": "rotate",
|
||||
"params": {
|
||||
"speed": 1.0
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
50
presets/examples/moving-triangle.json
Normal file
50
presets/examples/moving-triangle.json
Normal file
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "Moving Triangle",
|
||||
"description": "A triangle moving back and forth with gradient colors",
|
||||
"layers": [
|
||||
{
|
||||
"type": "shape",
|
||||
"shape": "triangle",
|
||||
"position": {
|
||||
"x": 8,
|
||||
"y": 8
|
||||
},
|
||||
"size": {
|
||||
"radius": 4
|
||||
},
|
||||
"color": {
|
||||
"type": "gradient",
|
||||
"color1": "ff00ff",
|
||||
"color2": "00ffff"
|
||||
},
|
||||
"intensity": 1.0,
|
||||
"animation": {
|
||||
"type": "move",
|
||||
"params": {
|
||||
"startX": 3,
|
||||
"startY": 8,
|
||||
"endX": 13,
|
||||
"endY": 8,
|
||||
"duration": 2.0
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
46
presets/examples/pulsing-circle.json
Normal file
46
presets/examples/pulsing-circle.json
Normal file
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "Pulsing Circle",
|
||||
"description": "A pulsing circle in the center with rainbow colors",
|
||||
"layers": [
|
||||
{
|
||||
"type": "shape",
|
||||
"shape": "circle",
|
||||
"position": {
|
||||
"x": 8,
|
||||
"y": 8
|
||||
},
|
||||
"size": {
|
||||
"radius": 4
|
||||
},
|
||||
"color": {
|
||||
"type": "rainbow"
|
||||
},
|
||||
"intensity": 1.0,
|
||||
"animation": {
|
||||
"type": "pulse",
|
||||
"params": {
|
||||
"minScale": 0.5,
|
||||
"maxScale": 1.5,
|
||||
"frequency": 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
66
presets/examples/spiral-rainbow.json
Normal file
66
presets/examples/spiral-rainbow.json
Normal file
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"name": "Spiral Rainbow",
|
||||
"description": "A rotating spiral pattern with rainbow gradient",
|
||||
"layers": [
|
||||
{
|
||||
"type": "pattern",
|
||||
"pattern": "spiral",
|
||||
"color": {
|
||||
"type": "palette",
|
||||
"stops": [
|
||||
{
|
||||
"position": 0.0,
|
||||
"color": "ff0000"
|
||||
},
|
||||
{
|
||||
"position": 0.17,
|
||||
"color": "ff8800"
|
||||
},
|
||||
{
|
||||
"position": 0.33,
|
||||
"color": "ffff00"
|
||||
},
|
||||
{
|
||||
"position": 0.5,
|
||||
"color": "00ff00"
|
||||
},
|
||||
{
|
||||
"position": 0.67,
|
||||
"color": "0088ff"
|
||||
},
|
||||
{
|
||||
"position": 0.83,
|
||||
"color": "8800ff"
|
||||
},
|
||||
{
|
||||
"position": 1.0,
|
||||
"color": "ff0088"
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"centerX": 8,
|
||||
"centerY": 8,
|
||||
"arms": 5,
|
||||
"rotationSpeed": 1.0
|
||||
}
|
||||
}
|
||||
],
|
||||
"parameters": {
|
||||
"speed": {
|
||||
"type": "range",
|
||||
"min": 0.1,
|
||||
"max": 3.0,
|
||||
"step": 0.1,
|
||||
"default": 1.0
|
||||
},
|
||||
"brightness": {
|
||||
"type": "range",
|
||||
"min": 0.1,
|
||||
"max": 1.0,
|
||||
"step": 0.1,
|
||||
"default": 1.0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user