Home

Discs

This shader renders three discs that can be controlled by moving your mouse or tapping the screen. They overlap to produce different colors.

For this sketch I used a lot of words with arguments, that is:

: r
  \ distance the discs according to the x-coordinate
  0.6 -0.6 mouse resolution / .x mix
;

:: r ( -- r) 
   \ distance the discs according to the x-coordinate
   0.6 -0.6 mouse resolution / .x mix
;

It’s slightly cleaner and shows the power of concatenative languages, how statements can be simply cut-and-pasted around your program for better abstractions. In the below sketch, inlining r means literally replacing r with 0.6 -0.6 mouse resolution / .x mix. No parentheses required.

Toggle shader source Remix this


:: disc ( rgb theta r1 r2 -- rgb )
   \ draw a disc
   \ of width r2
   \ of color rgb
   \ rotated at angle theta
   \ r2 away from the origin
   r1 0 vec2 theta rotate
   uv -
   length
   r2 step
   rgb
   *
;

: theta
  \ rotate the discs according the y-coordinate
  0 3.141592 2 * mouse resolution / .y mix
;

: r
  \ distance the discs according to the x-coordinate
  0.6 -0.6 mouse resolution / .x mix
;

: pi 3.141592 ;
  
: main
  \ red disc
  1.0 0.0 0.0 vec3
  theta r 0.3 disc
  
  \ green disc
  0.0 1.0 0.0 vec3
  2 3 / pi * theta + r 0.3 disc
  
  \ blue disc
  0.0 0.0 1.0 vec3
  4 3 / pi * theta + r 0.3 disc
  
  \ mix the three
  + +
  
  1.0 vec4
;