# Graphics programming replicating the transition from Chrono Trigger inside the gate

I started playing this game for the first time lately and this really peaked my interest

You can see the transition in motion starting at ~12:08

There seems to be some interesting maths taking place in there. It would appear that there are two different views combined together. The blue ripples are rendered first in the background and then the purple oscillating waves appear to be rendered on some sort of pseudo 3D projection.

How exactly they came to this result however is beyond me and curiosity has got the better of me.

I don't expect a lot of people would know how this is especially done but if anyone has done some extensive graphics programming, perhaps they could enlighten me.

-
Looks like 3 planes, one above, one below and one facing the camera. – Byte56 Jun 26 '14 at 18:55
The planes on top/bottom are also scaled non uniformly to give the illusion of depth. There's no "camera", just some scaling stuff or not. The "facing the camera" one is probably just an animation or something, or some clever tiling of an animation. – RandyGaul Jun 26 '14 at 19:37
Check out this Wikipedia article: en.wikipedia.org/wiki/Mode_7 – Neverender Jun 26 '14 at 19:41

I tried to duplicate the effect by using shader.

:) you could, as Byte56 said, set up three planes. A plane facing camera directly forward with Shader00, and then two plane with Shader01, perhapss as RandyGaul mentioned, top/bottom non uniformly scaled to give the illusion of depth.

They should, I believe, give sufficient 3D look to be convincing.

Both two shaders are not exactly the same as in your youtube link(also they are more of rough draft). However I believe these shaders can, hopefully, give you a place to start building your own version.

Tutorial : How to make a simple stripe pattern.

Each point in the plane has coordinate. Attempting to create a shader effect is basically visualizing 2D math onto the plane. Here let me introduce a simple example.

``````//This shader will visualize coordinates
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);
``````

The color red will represent x coordinate and the green hue will represent y coordinate. For now, we want to create simplest shader effect; a stripe. We won't need uv.y value for this tutorial.

``````vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);
``````

You can see that red hue gets intense as it directs to the right side. That's because x value of the coordinate gets higher as you move to the right side; the left end x coordinate starts from 0 and the right end x coordinate is 1.

Since we have this basic understanding let's try something "intuitive"

``````vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);
``````

There you have a stripe pattern. Wait... that doesn't look quite right. Yes this is just red and black. Stripe pattern is consist of more than just two color sections. There...!

``````vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);
``````

but what if we want to make N number of stripe?

What I am attempting to display is that if you try to approach shader programming with more of traditional programming "logic" then you are likely to fail. When it comes to shader, it's all about math.

Speaking of math, what's the pattern that most resembles "stripe" pattern? In other words, what's the equation that looks like stripes? Yes. Y = sin(X). However our X value ranges from 0.0~1.0 If we want to use Y = sin(X) we want our x value to range from 0.0 ~ 6.28(which is roughly 2 PI)

``````vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI;
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);
``````

We now have "stripe" in terms of pattern generated by an equation. Why should we take this approach? Not only can this be faster, but also it eliminates the need of writing ugly "if" conditions to have N number of stripe. If we wanted to have more than one stripe, we could simply extend the pattern by increasing the maximum X value further.

``````vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);
``````

You might say this shader doesn't produce the perfect stripe like from early shader, but really, all you need to do is write more fitting equation!

``````vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);
``````

Weeee~~~

Next : How to make a wavy stripe pattern.

-
Chrono Trigger was originally released for SNES, which didn't have planes, but it did have Mode 7. Same concept, just a technical detail. – Icy Defiance Jun 26 '14 at 21:06
Perhaps you can add to the answer by describing the how the shaders are created? Otherwise, if the links ever die, this answer will be mostly useless. – Byte56 Jun 26 '14 at 22:42
Agreed with Byte56, where can someone learn the knowledge to make glsl shaders like these and what is your thought process when writing it up? – oxysoft Jun 27 '14 at 2:35
@oxysoft These types of shaders are more of variations from traditional light effect shaders. As specific as they are, there aren't many resources that cover "how to make them". However that does not mean you cannot find examples. Try shadertoy.com and other "fun shader" websites to see many great examples of what you can do with shader. The best method, for you to learn how to make them, (I think) is to learn just general shader practices and study those "fun shader" examples found on internet. – Tofu_Craving_Redish_BlueDragon Jun 27 '14 at 16:42