Rotate checkerboard so it always fills viewer?

Discussions
1

Is there a way to rotate the Checkerboard so that it always fills the viewer (before passing it down the chain)?

To put it another way, in QC, generators with infinite bounds could be rotated/transformed in a “pre-rendered” state, anything like this currently?

This might make for a FR, a node called Generate 2-color Pattern or something, piled into one generator checkerboard, stripes, dots, wave. I guess we could also make our own “procedural” textures in GLSL, but I’m still new with all that.

2

Ok, Make Image with Shadertoy gave me an opportunity to chip away at some basic fragment shader stuff.

(If I am allowed to ask one more little question here before it becomes another discussion, how could I introduce “softness” into the shader? Smoothstep? Btw, tried to insert the shader code for convenient viewing, no luck with the Vuo site…)  

checkerboard_shadertoy.vuo (5.63 KB)

3

If you place 2 spaces after each line it should automatically format per line:

Test
Test
Test

Yup- you want smoothstep() works great!

4

Or indent 4 spaces for code. The Markdown link below every post/comment text field has instructions.

1 Like
5

Ok, I’m lazy… here’s the very basic GLSL checkerboard. I saw a fancier one on the shadertoy site with smoothstep, but I understand this one, so I stuck with it to learn. Still don’t have the smoothstep function working here, I struggle.

//rotation formula
vec2 rot(vec2 uv,float a)
{
    return vec2(uv.x * cos(a) - uv.y * sin(a), uv.y * cos(a) + uv.x * sin(a));
}

void main(){
//normalize stuff
    vec2 uv = iResolution.xy;
    uv = .5 * (uv - 2.0 * gl_FragCoord.xy) / uv.x;

//global rotation
    uv = rot(uv, iGlobalTime);

//checkerboard square size in pixels
    float size = 50.0 / iResolution.x;
    uv = floor(uv.xy / size);
    float checkerboard = mod(uv.x + mod(uv.y, 2.0), 2.0);
    gl_FragColor = checkerboard * vec4(1.0, 1.0, 1.0, 1.0);
}
6

Great @jstrecker, I was trying to get three back ticks to indicate blocks of code, but wasn’t working. Great to know that 4 spaces is the trick! I have been also using this cheatsheet: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

But most probably that isn’t the same syntax of markdown that Vuo uses. I know John is a living programming gem, but I just find it impossible to read quickly that cheat sheet, maybe its the color and all. Must me me.

There is also online markdown for code highlighting… (may be useful in future, as it looks like Vuo is going to get some pretty intense coding updates: GLSL in 1.3 & Future Plans for running C/C++ code directly.

We need a bigger forum!

7

Screen Shot 2016-03-09 at 1.56.55 pm.jpg
Screen Shot 2016-03-09 at 1.56.55 pm.jpg1920×1080 101 KB

Hey @jersmi, I got tired of trying to fit smoothstep() into the shader and cheated instead. I have used smoothstep() for lots of things like this, but this was easier.

//rotation formula
vec2 rot(vec2 uv,float a)
{
return vec2(uv.x * cos(a) - uv.y * sin(a), uv.y * cos(a) + uv.x * sin(a));
}
void main(){

//normalize stuff
vec2 uv = iResolution.xy;
uv = .5 * (uv - 2.0 * gl_FragCoord.xy) / uv.x;
//global rotation
uv = rot(uv, iGlobalTime);

//checkerboard square size in pixels
float size = 50.0 / iResolution.x;

//draw smooth checkerboard
uv.x = sin(uv.x/size);  //draw a sine wave on the X axis as many times as size permits
uv.y = cos(uv.y/size);  //draw a cos wave on the Y axis as many times as size permits

float smoothcheckerboard = uv.x * uv.y;

gl_FragColor = smoothcheckerboard * vec4(1.0, 1.0, 1.0, 1.0);
}

Also understand that as we are multiplying smoothcheckerboard with RGBA (in vec4) we are also creating an image with alpha, which when saved as a PNG from within Vuo will contain transparent black checkers. (which is AWESOME-but maybe not what you want- the resulting PNG will be white unless viewed with alpha)

To make it opaque, just remove the alpha from the final equation:

//rotation formula
vec2 rot(vec2 uv,float a)
{
return vec2(uv.x * cos(a) - uv.y * sin(a), uv.y * cos(a) + uv.x * sin(a));
}
void main(){
//normalize stuff
vec2 uv = iResolution.xy;
uv = .5 * (uv - 2.0 * gl_FragCoord.xy) / uv.x;
//global rotation
uv = rot(uv, iGlobalTime);
//checkerboard square size in pixels
float size = 50. / iResolution.x;
uv.x = sin(uv.x/size);  
uv.y = cos(uv.y/size);
float smoothcheckerboard = uv.x * uv.y;
gl_FragColor = vec4(smoothcheckerboard * vec3(1.0, 1.0, 1.0), 1.0);  //alpha not multiplied by checkerboard pattern
}
8

Very nice.

Here’s a different approach, taken from Shader - Shadertoy BETA , converted for Vuo with a few other changes (like making it rotate from the center). I like this one because it uses fwidth for smoothstep antialiasing. (What’s the best way to change color for this one?)

float divs = 16.0;
float rot = 0.0;  //initial rotation in degrees
float aa = 8.0;
float PI = 3.14159265359;
    
void main()
{
	float d = rot / (180.0 / PI);				//rotation in degrees							
	float t = d + (iGlobalTime * 0.1);				
	float st = sin(t);
    float ct = cos(t);
	vec2 div = divs*iResolution.yy/iResolution.xx;
	vec2 uv = 0.5*iResolution.xy - gl_FragCoord.xy; 
	uv = uv.xy / iResolution.y; 
	vec2 xy0 = divs*uv;
    vec2 xy;
    xy.x =  ct*xy0.x + st*xy0.y;				// rotate grid by t
    xy.y = -st*xy0.x + ct*xy0.y;
    //xy.x -= iGlobalTime*0.2;					//animate x-axis
	vec2 sxy = sin(PI*xy);
    vec2 b = fwidth(sxy)*aa;					
	vec2 pxy = smoothstep( -b, b, sxy );
	pxy = 2.0*pxy - 1.0;						// remap to [-1..1]
    float a = 0.5*(pxy.x * pxy.y) + 0.5;		// combine sine waves and remap to [0..1]
    float c = sqrt( a );						// correct for gamma
	gl_FragColor = vec4(c, c, c, 1.0);
}

checkerboard0.png