Creating mesmerizing spiral patterns with dynamic RGB color gradients.
- Author
- Sukesh Ashok Kumar
This advanced example combines multiple concepts: polar coordinates, trigonometry, color gradients, and parametric drawing to create a beautiful filled circular spiral with smoothly transitioning colors. It demonstrates how mathematics and art merge in computer graphics.
Mathematical Concepts:
- Parametric circle equation: x = r·sin(θ), y = r·cos(θ)
- Radius variation: drawing concentric circles with decreasing radii
- Angular resolution: more points needed for larger circles (proportional spacing)
- Color gradients: mathematical functions mapping radius to RGB values
- Trigonometric oscillation: sin() creates wave pattern for green channel
- Linear interpolation: smooth color transitions
In This Example:
- Maximum radius: 150 pixels (outer edge)
- Minimum radius: 1 pixel (center point)
- Total circles drawn: 150 (one for each radius)
- Color mapping:
- Red: proportional to radius (bright outside, dark inside)
- Green: oscillates with sine wave (creates banding pattern)
- Blue: inverse of radius (dark outside, bright inside)
Programming Concepts:
- Nested loops: outer for radius, inner for angle
- Dynamic angle step calculation (adaptive resolution)
- Color calculation using mathematical formulas
- Typecasting to unsigned char for RGB values
- Trigonometric functions for circular motion
- Using define for mathematical constants
What you'll learn:
- How to create filled circles by drawing concentric outlines
- Adaptive point density (more points for larger circles)
- Creating complex color gradients with math functions
- Combining multiple color channels for rich effects
- Why polar coordinates excel for circular patterns
- The relationship between radius and color
- Using sine waves for oscillating color patterns
Color Gradient Formulas:
- Red channel: 255 × r/max_r → Linearly decreases from 255 (outside) to 0 (center)
- Green channel: 128 + 127 × sin(r × π/30) → Oscillates between 1 and 255, creating colored bands → Period ≈ 60 pixels (one complete wave every 60 radius units)
- Blue channel: 255 - 255 × r/max_r → Linearly increases from 0 (outside) to 255 (center) → Inverse of red channel
Adaptive Angular Resolution:
- angle_step = 2π / (6×r + 10)
- Larger circles (r=150): smaller steps, more points (≈910 points)
- Smaller circles (r=10): larger steps, fewer points (≈70 points)
- This ensures smooth curves at all radii without overdrawing center
Visual Effect: Creates a filled circle with radial color gradient (center to edge) combined with concentric colored bands (from oscillating green channel). The result is a vibrant, hypnotic spiral-like pattern.
Experiment Ideas:
- Change red formula to create different gradients
- Modify green oscillation frequency (change PI/30 to PI/20)
- Add rotation: angle + offset_angle where offset varies with radius
- Create actual spiral: angle + radius * 0.1
Compile:
gcc m-spiral-rgb.c gfx/simplegfx.c -o output/m-spiral-rgb -lX11 -lm
Note: -lm links the math library for sin(), cos() functions
Run:
1.9.1