Procedural Graphics System

User Guide - Version 1.2.0

What's New in Version 1.2.0:

Perlin Noise Generator: Create organic, natural-looking textures and patterns
Truchet Tiles Generator: Generate intricate geometric patterns from simple rotated tiles

Introduction

The Procedural Graphics System is a LiveCode application that generates images mathematically rather than using pre-drawn graphics. By manipulating pixel data directly, the system creates smooth, scalable gradients, organic noise patterns, and geometric tile designs at any resolution.

Key Concept: This system works by directly manipulating the imageData property of a LiveCode image object. Each pixel is encoded as 4 bytes (alpha, red, green, blue) and written into the image's binary data stream, allowing precise mathematical control over every pixel's color.

How It Works

Understanding the underlying mechanism

The system operates on three fundamental principles:

Binary Encoding: Colors are converted to binary format using binaryEncode with ARGB (Alpha-Red-Green-Blue) byte structure
Pixel-by-Pixel Generation: Each pixel's position is calculated mathematically to determine its color
Direct ImageData Application: The complete binary pixel data is applied to the image object in a single operation for maximum performance

Performance Note: By building the entire image data in memory before applying it to the image object, generation is extremely fast—even for large images. An 800×800 pixel gradient (640,000 pixels) typically generates in under 500 milliseconds.

User Interface Overview

The interface is divided into two main areas:

Control Panel (Left): 280 pixels wide, contains all generator controls and parameters
Display Area (Right): 900×900 pixel area for viewing generated images

Basic Workflow

Select a generator type from the dropdown menu
Choose start and end colors using the color picker buttons
Adjust generator-specific parameters (direction, angle, center position, etc.)
Set desired resolution (width and height in pixels)
Click GENERATE to create the image
Click Export as PNG to save the result

Generator Types

1. Linear Gradient

Creates a straight-line color transition from start to end color.

Parameters:

Direction: Horizontal, Vertical, or Diagonal

Horizontal (Left to Right): ┌─────────────────────────────┐ │Red → → → → → → → → → → Blue │ │Red → → → → → → → → → → Blue │ │Red → → → → → → → → → → Blue │ └─────────────────────────────┘ Vertical (Top to Bottom): ┌─────────────────────────────┐ │Red Red Red Red Red Red Red │ │ ↓ ↓ ↓ ↓ ↓ ↓ ↓ │ │ ↓ ↓ ↓ ↓ ↓ ↓ ↓ │ │Blue Blue Blue Blue Blue Blue│ └─────────────────────────────┘ Diagonal (Top-Left to Bottom-Right): ┌─────────────────────────────┐ │Red ╲ │ │ ╲ │ │ ╲ │ │ ╲ Blue │ └─────────────────────────────┘

2. Linear Gradient (Angled)

Creates a linear gradient rotated to any angle between 0° and 360°.

Parameters:

Angle: 0-360 degrees (0° = horizontal right, 90° = vertical down)

Angle	Direction
0°	Left to Right (horizontal)
45°	Top-Left to Bottom-Right
90°	Top to Bottom (vertical)
180°	Right to Left (reverse horizontal)
270°	Bottom to Top (reverse vertical)

3. Radial Gradient

Creates a circular gradient radiating from a center point outward to the edges.

Parameters:

Center X: Horizontal position (0-100%), where 0% = left edge, 50% = center, 100% = right edge
Center Y: Vertical position (0-100%), where 0% = top edge, 50% = center, 100% = bottom edge

Center Position Examples: 0%, 0% 50%, 0% 100%, 0% ┌─────────────┬─────────────┐ │● │● │● │ │ │ │ │ │ │ ●50%, 50% │ ●100%, 50% │ │ │ │ │● │● │● └─────────────┴─────────────┘ 0%, 100% 50%, 100% 100%, 100% ● = Gradient center point (start color) Gradient radiates outward from ● to edges (end color)

Understanding Percentages: X and Y percentages are independent 2D coordinates. They don't need to sum to 100%. For example, X=50%, Y=50% places the center in the middle of the image, while X=100%, Y=100% places it at the bottom-right corner.

4. Conical Gradient

Creates an angular sweep around a center point, like a color wheel or radar sweep.

Parameters:

Center X, Y: Same as radial gradient (0-100%)
Start Angle: Where the gradient begins (0-360°), where 0° = right/east position
Sweep Angle: How far the gradient sweeps (1-360°), where 360° = full circle
Direction: Clockwise or Counter-clockwise color progression

Conical Gradient Visualization: Full Circle (Sweep = 360°): 0° (Start Color) │ 315° ┌──┼──┐ 45° │ │ │ 270°─┼──●──┼─90° │ │ 225° └─────┘ 135° │ 180° (End Color) Half Circle (Sweep = 180°): 0° (Start) │ ┌──┼──┐ │ │ │ ← Gradient sweeps │ ● │ from 0° to 180° │ │ └─────┘ │ 180° (End Color) (Rest filled with end color)

Start Angle	Starting Position
0°	Right (3 o'clock)
90°	Bottom (6 o'clock)
180°	Left (9 o'clock)
270°	Top (12 o'clock)

5. Perlin Noise

Generates organic, natural-looking noise patterns using Perlin noise algorithm. Perfect for creating textures that mimic natural phenomena like clouds, terrain, water, or marble.

Parameters:

Scale: Size of noise features (1-100)
- Low values (1-20): Fine, detailed noise
- Medium values (20-50): Balanced texture
- High values (50-100): Large, smooth features
Octaves: Layers of detail (1-8)
- 1 octave: Simple, smooth noise
- 4-6 octaves: Natural, complex textures
- 8 octaves: Maximum detail and complexity
Persistence: How quickly detail fades (0.0-1.0)
- 0.1-0.3: Subtle details, smooth appearance
- 0.5: Balanced (default)
- 0.7-0.9: Prominent details, rough texture

Perlin Noise Characteristics: Low Scale (Fine Detail): High Scale (Large Features): ┌─────────────────────┐ ┌─────────────────────┐ │░▒▓░▒░▓▒░▒▓░▒░▓▒░▒▓│ │░░░░▒▒▒▓▓▓▓▒▒▒░░░░│ │▒░▓▒░▓░▒▓░▒▓░▒░▓▒░▓│ │░░░░▒▒▒▓▓▓▓▒▒▒░░░░│ │░▓▒░▓▒░▓▒░▓▒░▓▒░▓▒░│ │▒▒▒▒▒▓▓▓▓▓▓▓▓▒▒▒▒▒│ │▓▒░▓░▒░▓▒░▓░▒░▓▒░▓▒│ │▒▒▒▒▒▓▓▓▓▓▓▓▓▒▒▒▒▒│ └─────────────────────┘ └─────────────────────┘ Low Octaves (Smooth): High Octaves (Detailed): ┌─────────────────────┐ ┌─────────────────────┐ │░░░░▒▒▒▓▓▓▓▓▓▒▒▒░░░│ │░▒░▓▒▓░▒▓░▓▒░▓▒▓░▒│ │░░░░▒▒▒▓▓▓▓▓▓▒▒▒░░░│ │▒▓▒░▓░▒▓▒░▓▒░▓░▒▓▒│ │▒▒▒▒▒▓▓▓▓▓▓▓▓▒▒▒▒▒│ │░▒▓░▒▓░▒▓░▒▓░▒▓░▒▓│ │▒▒▒▒▒▓▓▓▓▓▓▓▓▒▒▒▒▒│ │▓▒░▓▒░▓▒▓░▒▓▒░▓▒░▓│ └─────────────────────┘ └─────────────────────┘ ░ = Dark values ▒ = Mid values ▓ = Light values

Parameter Interaction: These parameters work together to create the final texture:

Scale determines the overall feature size
Octaves add layers of increasing detail
Persistence controls how much each octave contributes

Start with Scale=30, Octaves=4, Persistence=0.5 for natural-looking results, then adjust to taste.

6. Truchet Tiles

Generates intricate patterns by placing and rotating simple geometric tiles. Each tile contains a quarter-circle arc, and when randomly rotated, creates complex maze-like or flowing patterns.

Parameters:

Tile Size: Size of each square tile in pixels (10-200)
- Small (10-30): Dense, intricate patterns
- Medium (30-60): Balanced detail
- Large (60-200): Bold, simple patterns
Line Thickness: Width of the arc lines (1-50 pixels)
- Thin lines: Delicate, web-like appearance
- Thick lines: Bold, graphic look
- Recommended: 20-30% of tile size

Truchet Tile Basics: Base Tile (Quarter-Circle Arc): ┌─────────┐ │╭────────┤ ← Arc connects ││ │ two adjacent edges ││ │ ││ │ │╰────────┤ ← Arc endpoints └─────────┘ Four Possible Rotations (0°, 90°, 180°, 270°): 0° 90° 180° 270° ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │╭────────┤ │ ╭│ ├────────╮│ │╮ │ ││ │ │ ││ │ ││ │││ │ ││ │ │ ││ │ ││ │││ │ ││ │ │ ││ │ ││ │││ │ │╰────────┤ ├────────╯│ │╭────────┤ │╰╮ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ Random Pattern Example (4×4 grid): ┌─────┬─────┬─────┬─────┐ │╭──┐ │ ╭──╮│╭──┐ │╭────┤ ││ │ │ │ ││││ │ ││ │ ││ ╰─┼─╯ ╰┼╯│ ╰─┼╯ │ ├┤ │ ├┤ ├┤ │ ││ ╭─┼─╮ ╭┼╮│ ╭─┼╮ │ ││ │ │ │ ││││ │ ││ │ │╰──╯ │ ╰──╯│╰╯ │ │╰────┤ └─────┴─────┴─────┴─────┘ (Creates flowing, maze-like patterns)

Pattern Characteristics:

Each tile is randomly rotated (0°, 90°, 180°, or 270°)
Arcs from adjacent tiles connect to form continuous paths
The same parameters produce different patterns each time due to randomization
Try multiple generations with the same settings to explore variations

Interpolation Methods

Control how colors transition between start and end (applies to gradients and Perlin noise)

Gradient and Perlin noise generators support three interpolation methods:

Linear: Smooth, even transition (default)
Ease In (Slow Start): More start color visible, accelerates toward end color
Ease Out (Slow End): Accelerates from start color, more end color visible

Note: Truchet Tiles do not use interpolation as they create discrete geometric patterns with solid colors.

Resolution Control

Set the output dimensions in pixels:

Width: 1-4096 pixels
Height: 1-4096 pixels

Tips:

Square dimensions (e.g., 800×800, 1000×1000) work best for radial and conical gradients to maintain circular symmetry
For Truchet Tiles, choose dimensions divisible by your tile size for seamless edge-to-edge patterns
Perlin noise works well at any aspect ratio

Practical Applications

Linear Gradients

Background images for presentations
Toolbar backgrounds
Button textures
Sky effects in games

Radial Gradients

Spotlight effects
Vignettes
Button highlights
Circular badges or icons

Conical Gradients

Color wheel pickers
Circular progress indicators (using partial sweeps)
Gauge/meter backgrounds
Pie chart slices
Loading spinners

Perlin Noise

Cloud textures for sky backgrounds
Terrain height maps for 3D landscapes
Water surfaces and wave patterns
Marble, wood grain, or stone textures
Organic background patterns
Displacement maps for visual effects
Procedural game terrain

Truchet Tiles

Decorative wallpapers and backgrounds
Maze or labyrinth generation
Islamic geometric art patterns
Textile and fabric designs
Modern geometric branding elements
Game level textures and floor patterns
Abstract art compositions

Tips & Techniques

Creating Subtle Effects

Use colors close in hue for subtle, professional gradients
Try same color with different brightness levels (e.g., dark blue to light blue)
Ease-In/Ease-Out creates more natural-looking transitions
For Perlin noise, use high persistence (0.7+) with low octaves (2-3) for smooth, flowing textures

Creating Dramatic Effects

Use complementary colors (opposite on color wheel) for maximum contrast
Off-center radial gradients create dynamic compositions
Partial conical sweeps (90° or 180°) create striking angular designs
For Perlin noise, combine high octaves (6-8) with low persistence (0.3) for rough, detailed textures
Use thin line thickness in Truchet Tiles for intricate, delicate patterns

Combining Techniques

Generate Perlin noise with contrasting colors for organic camouflage patterns
Use small tile sizes (10-20px) in Truchet Tiles for dense, complex textures suitable as overlays
Layer multiple Perlin noise patterns at different scales for more realistic natural textures
Try Truchet Tiles with colors similar to your UI for subtle geometric backgrounds

Performance Considerations

Generation time increases with image size (pixels = width × height)
An 800×800 image (640,000 pixels) typically generates in under 500ms
Perlin noise with high octaves (6-8) takes longer than simple gradients
Truchet Tiles with small tile sizes require more calculations
Very large images (2000×2000+) may take several seconds
The status bar shows generation time for each image

Export Options

Once an image is generated, click Export as PNG to save it. PNG format is used because it:

Preserves image quality (lossless compression)
Supports full color range
Is widely compatible with other applications
Can be used directly in web, print, or other LiveCode projects

Technical Notes

ImageData Format: The system writes directly to the image object's imageData property. Each pixel is encoded as 4 bytes in ARGB format:

Byte 1 (Alpha): 0 = opaque, 255 = transparent
Byte 2 (Red): 0-255
Byte 3 (Green): 0-255
Byte 4 (Blue): 0-255

This binary format allows extremely fast pixel manipulation compared to setting individual pixel properties.

Perlin Noise Algorithm

The Perlin noise implementation uses a gradient-based approach with:

Pseudo-random gradient vectors generated from a permutation table
Smooth interpolation (fade function) for organic transitions
Octave layering for fractal detail at multiple scales
Persistence controlling amplitude reduction across octaves

Truchet Tile System

The Truchet tile generator:

Divides the canvas into a grid based on tile size
Randomly assigns one of four rotations (0°, 90°, 180°, 270°) to each tile
Draws quarter-circle arcs using direct pixel manipulation
Creates continuous patterns through edge alignment

Troubleshooting

Issue	Solution
Image appears banded or blocky	This is normal for very small dimensions. Try increasing resolution.
Generation takes a long time	Large dimensions (2000+ pixels) require processing millions of pixels. Consider reducing size for preview. Perlin noise with many octaves is particularly intensive.
Radial gradient not circular	Use square dimensions (e.g., 800×800 instead of 1920×1080) for perfect circles.
Perlin noise looks too smooth or too noisy	Adjust octaves (more = more detail) and persistence (higher = rougher texture). Start with 4 octaves and 0.5 persistence.
Truchet tiles have gaps or don't align	Ensure image dimensions are evenly divisible by tile size. For example, 800×800 with 40px tiles = 20×20 grid (perfect fit).
Truchet pattern looks too busy	Increase tile size or decrease line thickness for a cleaner look.
Colors don't match expected result	Different displays may show colors differently. Export and view on target display.
Export button disabled	You must generate an image first before exporting.

Conclusion

The Procedural Graphics System provides powerful, mathematically-precise generation of gradients, organic textures, and geometric patterns through direct imageData manipulation. By controlling every pixel programmatically, it creates infinitely scalable, high-quality graphics suitable for any application.

From smooth color transitions to natural noise patterns to intricate tile designs, the system offers creative flexibility while maintaining exceptional performance. The foundation in binary imageData encoding ensures maximum speed while providing complete creative control over the final output.