Nme exercise note

Demos and projects
1

glsl-01

precision mediump float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy;
    st.x *= u_resolution.x / u_resolution.y;

    vec3 color = vec3(0.0);
    color = vec3(st.x, st.y, abs(sin(u_time)));

    gl_FragColor = vec4(color, 1.0);
}

glsl-02
nme https://nme.babylonjs.com/#LGPT2S#1

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution; // ScreenSize
uniform vec2 u_mouse;
uniform float u_time;

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
    // vec2 st = gl_FragCoord.xy/u_mouse;
	gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}
1 Like
2

glsl-03

precision mediump float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// Plot a line on Y using a value between 0.0-1.0
float plot(vec2 st) {    
    return smoothstep(0.02, 0.0, abs(st.y - st.x));
}

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
	float y = st.x;
	vec3 color = vec3(y);
    
    // Plot a line
 	float pct = plot(st);
	color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);
	gl_FragColor = vec4(color,1.0);
}
1 Like
3

glsl-04
y=x^{5}

precision mediump float;

#define PI 3.14159265359

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float plot(vec2 st,float pct){
    return smoothstep(pct-.02,pct,st.y)-smoothstep(pct,pct+.02,st.y);
}

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution;
    
    float y=pow(st.x,5.);
    
    vec3 color=vec3(y);
    
    float pct=plot(st,y);
    color=(1.-pct)*color+pct*vec3(0.,1.,0.);
    
    gl_FragColor=vec4(color,1.);
}

image

1 Like
4

glsl-05

uniform vec2 u_resolution;
uniform float u_time;

vec3 colorA=vec3(.149,.141,.912);
vec3 colorB=vec3(1.,.833,.224);

void main(){
    vec3 color=vec3(0.);
    
    float pct=abs(sin(u_time));
    
    // Mix uses pct (a value from 0-1) to
    // mix the two colors
    color=mix(colorA,colorB,pct);
    
    gl_FragColor=vec4(color,1.);
}
1 Like
5

glsl-06

uniform vec2 u_resolution;

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    vec3 color=vec3(0.);
    
    // Each result will return 1.0 (white) or 0.0 (black).
    float left=step(.1,st.x);// Similar to ( X greater than 0.1 )
    float bottom=step(.1,st.y);// Similar to ( Y greater than 0.1 )
    
    // The multiplication of left*bottom will be similar to the logical AND.
    color=vec3(left*bottom);
    
    gl_FragColor=vec4(color,1.);
}
1 Like
6

glsl-07

precision mediump float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main(){
  vec2 st = gl_FragCoord.xy/u_resolution.xy;
  st.x *= u_resolution.x/u_resolution.y;
  vec3 color = vec3(0.0);
  float d = 0.0;

  // Remap the space to -1. to 1.
  st = st *2.-1.;

  // Make the distance field
  d = length( abs(st)-.3 );
  // d = length( min(abs(st)-.3,0.) );
  // d = length( max(abs(st)-.3,0.) );

  // Visualize the distance field
  gl_FragColor = vec4(vec3(fract(d*10.0)), 1.0);

  // Drawing with the distance field
  // gl_FragColor = vec4(vec3( step(.3,d) ),1.0);
  // gl_FragColor = vec4(vec3( step(.3,d) * step(d,.4)),1.0);
  // gl_FragColor = vec4(vec3( smoothstep(.3,.4,d)* smoothstep(.6,.5,d)) ,1.0);
}

image
image630Ɨ632 63.2 KB

1 Like