Differences

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

--- shader:start [2025/05/28 09:52] – [Circle] mh
+++ shader:start [2026/05/26 10:02] (current) – [Documentation] mh
@@ Line 94: / Line 94: @@
 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 ====
@@ Line 125: / Line 150: @@
 ==== Online Editors ====
-* [[https://twigl.app/|TwiGL App]] and [[https://github.com/doxas/twigl|TwiGL GitHub]]
+* **[[https://twigl.app/|TwiGL App]]** and **[[https://github.com/doxas/twigl|TwiGL GitHub]]**
-* [[https://editor.isf.video/shaders/new|ISF Editor]]
+* **[[https://editor.isf.video/shaders/new|ISF Editor]]**
-* [[http://editor.thebookofshaders.com/|Book of Shader's Editor]]
+* **[[http://editor.thebookofshaders.com/|Book of Shader's Editor]]**
-* [[https://www.shadertoy.com/new|ShaderToy's Editor]]
+* **[[https://www.shadertoy.com/new|ShaderToy's Editor]]**
 ==== Tools ====
@@ Line 147: / Line 172: @@
 * [[https://shadertoyunofficial.wordpress.com/|Shadertoy's unofficial WordPress]]
+* [[https://www.xordev.com/|XOR website]]