Differences

This shows you the differences between two versions of the page.

--- shader:start [2025/05/21 17:27] – [Circle] mh
+++ shader:start [2025/06/02 21:23] (current) – external edit 127.0.0.1
@@ Line 9: / Line 9: @@
 ==== Normalized input Coordinates ====
-Generally the ''vec2 uv'' is used to describe a normalized input coordinates by dividing the coordinate by the current resolution :
+Generally the **''vec2 uv''** is used to describe a normalized input coordinates by dividing the coordinate by the current resolution :
 Different compilers use different syntax to describe the resolution. Here we'll use Shadertoy's standard.
@@ Line 57: / Line 57: @@
     float d = length(uv);
     float r = .3
-    float c = 1.-smoothstep(r, r-.02, d);
+    float c = smoothstep(r, r-.02, d);
     // Output to screen
@@ Line 89: / Line 89: @@
 <WRAP info>
-**Note :** when adding or removing regions in this manner, note that the color value for each RGB component of each pixel **can go** below 0.0 and above 1.0.</br>
+**Note :** when adding or removing regions in this manner, the color value for each RGB component of each pixel **can go** below 0.0 and above 1.0.
-Shaders will automatically clamp the output between 0.0 and 1.0 but during the calculation of the color, the real value must be taken into account.</br>
+Shaders will automatically clamp the output between 0.0 and 1.0 but during the calculation of the color, the real value must be taken into account.
 This behavior can lead to unexpected behaviors and colors in certain regions where multiple subtractions/additions have been applied.</WRAP>
+==== Rectangle ====
+To draw a rectangle we can use a function that draws bands using **''smoothstep''** and then multiply it twice to draw a band horizontally and another band vertically.
+The band function would look like this
+<code glsl>
+float drawBand(float t, float start, float end, float blur){
+    float step1 = smoothstep(start-blur, start+blur, t);
+    float step2 = smoothstep(end+blur, end-blur, t); //This one is inverted because it's on the other side, going from 1 to 0.
+    return step1*step2;
+}
+</code>
+Then get a rectangle by calling this function twice on the x and y :
+<code glsl>
+    float mask = 0.;
+    float b = .01;
+    mask = drawBand(uv.x, -.2, .2, b);
+    mask *= drawBand(uv.y, -.2, .2, b);
+</code>
 ==== Adding Color ====