spore-ledlab/presets/examples

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:

{
  "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:

{
  "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!