Lissajous curve in raymarching using GLSL over WebGL
This "effect" is also posted to glslsandbox.
After posting this article, I found that it is not a raymarching (i.e. asort of ray tracing) but just only SLSL effect.
I took a mistake but I decided to leave this article title "as it is".
uniform vec2 resolution;
uniform float time;
void main() {
vec2 pos = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
float v = 0.0;
for (int i = 0; i < 500; i++) {
float s = time + float(i) * 0.0075;
vec2 mpos = 0.8 * vec2(sin(s * 5.0), - cos(s * 6.0));
float t = 0.01 / length(mpos - pos);
v += pow(t, 2.0) * float(i + 1) / 100.0;
}
gl_FragColor = 1.0 * vec4(vec3(v), 1.0);
}
See also
- Lissajous curve - wikipedia
- 電気通信大学校章(リサジュー図形)(Japanese)
- nico, "ray marching (with THREE.js)", Youpi!, Dec 8 2015.