hashbrown

11-08-2017, 04:56 PM

I'm trying to plot the following equation : y = random( floor(uv.x) ):

https://s1.postimg.org/7jjvlsjxsb/plot1.png (https://postimg.org/image/7jjvlsjxsb/)

figure 1

I've tried other equations and they work just fine:

https://s1.postimg.org/4add90877f/Screen_Shot_2017-11-09_at_1.37.08_AM.png (https://postimg.org/image/4add90877f/)

https://s1.postimg.org/5vfvmmzhej/Screen_Shot_2017-11-09_at_1.37.33_AM.png (https://postimg.org/image/5vfvmmzhej/)

The problem starts when I try equations with steep angles like y = random(floor(uv.x)), they get their horizontal lines cut off :(

https://s1.postimg.org/9184zr1h63/Screen_Shot_2017-11-09_at_1.39.14_AM.png (https://postimg.org/image/9184zr1h63/)

The color gets cut off at a certain angle.

https://s1.postimg.org/67zm5x93fv/Screen_Shot_2017-11-09_at_2.11.15_AM.png (https://postimg.org/image/67zm5x93fv/)

I'm not sure what I'm doing wrong, but this is what I've tried so far:

out vec4 color;

float Random(in float x) {

return fract(sin(x) * 1e4);

}

void main () {

vec2 uv = gl_FragCoord.xy/ screen.xy;

vec2 ndc = vec2(uv.x * 2.0 - 1.0, uv.y * 2.0 - 1.0);

uv.x *= screen.x / screen.y;

uv -= 0.5; // -0.5 <-> 0.5

uv *= 5.0; // Zoom Out, if not we don't see much

vec4 final = vec4(0.0);

final.a = 1.0;

float i = floor(uv.x); // Integer Coords

float f = fract(uv.x); // Fractional Coords

// Calculate Graph

// This Works

// float u = f * f * (3.0 - 2.0 * f );

// float x = mix(Random(i), Random(i + 1.0), u);

float x = Random(i); // No horizontal Lines :(

float y = uv.y;

// Plot

float blur = 0.01;

final.r = smoothstep(x - blur, x, y); // bottom

final.r -= smoothstep(x - blur, x, y - blur);

color = final;

}

I'm clearly not understanding something :/ I re-edited the entire question with new and shorter code. As always, thanks!

https://s1.postimg.org/7jjvlsjxsb/plot1.png (https://postimg.org/image/7jjvlsjxsb/)

figure 1

I've tried other equations and they work just fine:

https://s1.postimg.org/4add90877f/Screen_Shot_2017-11-09_at_1.37.08_AM.png (https://postimg.org/image/4add90877f/)

https://s1.postimg.org/5vfvmmzhej/Screen_Shot_2017-11-09_at_1.37.33_AM.png (https://postimg.org/image/5vfvmmzhej/)

The problem starts when I try equations with steep angles like y = random(floor(uv.x)), they get their horizontal lines cut off :(

https://s1.postimg.org/9184zr1h63/Screen_Shot_2017-11-09_at_1.39.14_AM.png (https://postimg.org/image/9184zr1h63/)

The color gets cut off at a certain angle.

https://s1.postimg.org/67zm5x93fv/Screen_Shot_2017-11-09_at_2.11.15_AM.png (https://postimg.org/image/67zm5x93fv/)

I'm not sure what I'm doing wrong, but this is what I've tried so far:

out vec4 color;

float Random(in float x) {

return fract(sin(x) * 1e4);

}

void main () {

vec2 uv = gl_FragCoord.xy/ screen.xy;

vec2 ndc = vec2(uv.x * 2.0 - 1.0, uv.y * 2.0 - 1.0);

uv.x *= screen.x / screen.y;

uv -= 0.5; // -0.5 <-> 0.5

uv *= 5.0; // Zoom Out, if not we don't see much

vec4 final = vec4(0.0);

final.a = 1.0;

float i = floor(uv.x); // Integer Coords

float f = fract(uv.x); // Fractional Coords

// Calculate Graph

// This Works

// float u = f * f * (3.0 - 2.0 * f );

// float x = mix(Random(i), Random(i + 1.0), u);

float x = Random(i); // No horizontal Lines :(

float y = uv.y;

// Plot

float blur = 0.01;

final.r = smoothstep(x - blur, x, y); // bottom

final.r -= smoothstep(x - blur, x, y - blur);

color = final;

}

I'm clearly not understanding something :/ I re-edited the entire question with new and shorter code. As always, thanks!