This is a new series of tutorials and examples for the Shader Editor application.
Today I will start with a simple introduction to creating a wallpaper for your mobile phone.
First, install the application and open it.
After installation, you can use the eye icon to toggle between the source code and the output and the three dots icon to load, load samples, and save …
If you want to rename it after creating a new shader or save it as a new shader, just click on the icon with three lines and double-click on the name of the shader.
Now, you can load a default shader and then change it, or try to create a new one.
If you don’t have enough time then you can test with this source code to have a beautiful blue effect:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif uniform vec2 resolution; uniform float time; uniform vec4 mouse; uniform vec4 date; //#define time iTime #define R resolution.xy void mainImage( out vec4 fragC, in vec2 fC) { // vec2 pos = (fragCoord.xy/R.xy) * 8. - 4.; vec2 pos = (fC.xy/R.xy) * 8. - 4.; pos.x *= R.x / R.y; float s = .25, f = .0, k = f; vec3 p = vec3(pos, sin(time * .4) * .5 - .5)* s; for( int i=0; i< 9; i++ ) { p = abs(p)/dot(p,p)- 1.5; k = length(p) ; p = p*k+k; } f = dot(p,p)* s; fragC= vec4(f*.5, f *1.2, f * 5., 0.111);; } void main() { vec4 fragment_color; mainImage(fragment_color, gl_FragCoord.xy); gl_FragColor = fragment_color; } |
