.

float circle(vec2 uv,float radius){ return length(uv)-radius; } float sdBox( in vec2 p, in vec2 b ) { vec2 d = abs(p)-b; return length(max(d,0.0)) + min(max(d.x,d.y),0.0); } void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord.xy / iResolution.xy; //convert pixels from screen resolution[1920x1080] to 0-1 space uv -= 0.5; //center uv.x *= iResolution.x / iResolution.y; // make a proper square instead of a rectangle float d = sdBox( uv,vec2(0.3) ); //set square side //float d= circle(uv,0.3);//set circle radius vec4 color = vec4(0.0); //set background-color if(d<0.0) color = vec4(1.0);//set inside color fragColor = vec4(color);//color the canvas }

https://codeshare.io https://www.shadertoy.com/view/XdlSD4 https://www.shadertoy.com/view/ldyGWm https://www.shadertoy.com/view/3sXSD2 https://www.shadertoy.com/view/lttBzN KodeLife : instant feedback shaders: no objects, no memory allocation, no recursion Linear Algebra : vector [point, direction] float, vec2 , vec3, vec4 swizzle : uv.x, uv.xy, , uv.xyz , uv.yx length: distance from origin float l = length(uv); dot product of 2 vectors 1. Shows how similar they are for normalized vectors : https://twitter.com/freyaholmer/status/1200807790580768768 If dot product = 0 , the 2 vectors are perpendicular to each other. =1, they are same , =-1 opposite direction 2. dot(a,b) = length(a) * length(b) cos[angle] OR angle = acos (dot(a,b)/length(a) * length(b)) 3. (a,b) . (x,y) = ax + by dot product of 2 vectors is a scalar float a = dot(xy,uv); cross product of two 3D vectors gives a vector that is perpendicular to both the vectors. [right hand rule symbolism] a d bf-ec b X e = af-dc