Kurt Grüng

Research, Design & Development
Explore my works  here

Creative Coding

by

Kurt

, ,

Creative coding animation techniques span math, physics, generative art, and real-time graphics.

Trigonometric Motion (Oscillation & Loops)

Core idea: Use sin() and cos() for smooth periodic motion.

Common uses

  • Floating UI elements
  • Orbital motion
  • Waveforms
  • Lissajous curves
  • Loopable animations

Example (JS):

const x = centerX + Math.cos(time) * radius;
const y = centerY + Math.sin(time) * radius;

GLSL:

float wave = sin(uv.x * 10.0 + uTime);

Why it’s powerful:

  • Perfect for seamless loops
  • Cheap computation
  • Predictable motion

Perlin / Simplex Noise (Organic Motion)

Core idea: Replace predictable sine waves with controlled randomness.

Used for:

  • Flow fields
  • Smoke / fog
  • Terrain
  • Wavy distortions
  • Blob animations
  • Camera drift

Concept:

x += noise(x * scale, y * scale, time) * amplitude;

In shaders:

float n = snoise(vec3(uv * 2.0, uTime));

Why it’s powerful:

  • Natural motion
  • Infinite variation
  • Smooth randomness (not jittery)

You’ve already leaned toward real Perlin noise in your Three.js experiments — this is where creative coding really shines.

Easing Functions (Motion Design Feel)

Core idea: Map linear time into expressive motion.

Instead of:

position = start + progress * distance;

Use:

progress = easeInOutCubic(t);

Common easing:

  • easeInQuad
  • easeOutExpo
  • easeInOutCubic
  • spring-based motion

Essential for:

  • UI animation
  • Scroll-based motion
  • Cinematic camera moves

Physics-Based Animation

Core idea: Simulate forces instead of scripting positions.

Techniques:

  • Verlet integration
  • Springs & dampers
  • Gravity fields
  • Collision systems
  • Boids (flocking)

Example:

velocity += force;
position += velocity;
velocity *= 0.98; // friction

Best for:

  • Particle systems
  • Cloth / ropes
  • Interactive systems
  • Reactive UI motion

Shader-Based Distortion & Post-Processing

Core idea: Animate pixels instead of objects.

Common effects:

  • UV distortion
  • Chromatic aberration
  • Bloom
  • Glitch
  • Pixel sorting
  • Scanlines
  • Afterimage trails

Example distortion:

uv.x += sin(uv.y * 10.0 + uTime) * 0.02;

This pairs perfectly with your Three.js + EffectComposer setups.

Procedural Geometry Deformation

Move vertices instead of objects:

vec3 pos = position;
pos.z += sin(pos.x * 5.0 + uTime) * 0.2;

Used for:

  • Wavy tubes
  • Audio-reactive meshes
  • Morphing forms
  • Abstract landscapes

Flow Fields

Particles follow directional vectors generated from noise.

Concept:

angle = noise(x * scale, y * scale) * Math.PI * 2;
velocity.x = Math.cos(angle);
velocity.y = Math.sin(angle);

Results:

  • Mesmerizing line art
  • Organic swarms
  • Ink-like systems

Advanced Hybrid Techniques

Combine:

  • Noise + vertex displacement
  • Physics + flow fields
  • Camera path + easing + noise
  • Post-processing + temporal feedback

Hybrid:

  • Perlin-noise animated tube
  • Camera moving along spline
  • Subtle chromatic aberration
  • Afterimage pass for ghost trails
  • Film grain overlay

That’s peak creative coding aesthetic.

Tags