learn GLSL from zero
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean

Lesson 7 of 10 · Strange attractors on the GPU

3D projection

Rotate and flatten space onto the screen.

The particles live in 3D, but the screen is flat. We rotate them slowly and project them: dividing by depth makes distant points look smaller.

The attractor floats and turns, and seeing it from every angle reveals its geometry.

p.xy / (p.z + k)Perspective projection: the farther away, the smaller it looks. uRot makes the structure turn.
TryMove Stretch and Inflate: they edit d and a in the equation. The form reconfigures instantly.

The code

vec3 attractor(vec3 p){
  // Aizawa · mueve los números y mira
  float a=0.95, b=0.70, c=0.60, d=3.50, e=0.25, f=0.10;
  float dx = (p.z - b)*p.x - d*p.y;
  float dy = d*p.x + (p.z - b)*p.y;
  float dz = c + a*p.z - p.z*p.z*p.z/3.0
           - (p.x*p.x + p.y*p.y)*(1.0 + e*p.z) + f*p.z*p.x*p.x*p.x;
  return vec3(dx, dy, dz);
}
close