3e:null 3f:["$","title",null,{"children":"Shadertoy style drawing | Claudio Esperança | Observable"}] 45:T7f3,md`# Shadertoy style drawing [Shadertoy](https://www.shadertoy.com/) is a wonderful playground for exercising your shader coding skills. It provides you with all the infrastructure of a complete WebGL program, except for the fragment shader code. The vertex shader, however, is fixed and simply draws two triangles that cover the whole canvas. It is up to the user to provide code that computes the color of each pixel. I find it a delight to browse the many examples in the [Shadertoy](https://www.shadertoy.com/) site and marvel at the enormous appeal of this approach. So how does one draw a primitive, a circle or a triangle, say, using only the fragment shader? The idea is to write code that tests each pixel and decides whether or not it is inside the primitive. Better still is to write a *signed distance function* (SDF) for the primitive, i.e., a function that returns how far the pixel is from the border of the primitive: a negative number if it is inside the primitive, or a positive number if outside. *Inigo Quilez*, the brain behind Shadertoy, has a [great page with several such functions for 2D shapes](https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm), some of which we reproduce here. Several modeling operators can be easily expressed with SDFs. For instance, if two shapes are described by SDFs ${tex`A(p)`} and ${tex`B(p)`}, then the shape corresponding to their union and intersection are described by SDFs ${tex`min(A(p),B(p))`} and ${tex`max(A(p),B(p))`}, respectively. Also, by adding or subtracting a constant to an SDF makes the shape shrink or expand, which is a convenient way to produce rounded corners. Note: in order to understand how these distance functions work, one needs to be familiar with linear algebra concepts such as points and vectors, the dot product operator, etc. Since the functions are written in GLSL, they use several GLSL builtin math functions. *Shaderific* has a [very nice reference page](https://www.shaderific.com/glsl-functions) for these. `46:Tbf2,shaders = ({ vertex: ` attribute vec4 position; void main() { gl_Position = position; // Vertex position } `, circle: ` // Distance from p to a circle of radius 0.7 float signedDistance (in vec2 p) { return sdCircle (p, 0.7); } `, box: ` // Distance from p to a box 1.5 units wide and 1 units high float signedDistance (in vec2 p) { return sdBox(p, vec2(0.75, 0.5)); } `, boxAndCircle: ` // Distance from p to the intersection between a box 1.5 units wide and 1 units high // and a circle of radius 0.7 float signedDistance (in vec2 p) { return max(sdBox(p, vec2(0.75, 0.5)), sdCircle(p,0.7)); } `, boxOrCircle: ` // Distance from p to the union between a box 1.5 units wide and 1 units high // and a circle of radius 0.7 float signedDistance (in vec2 p) { return min(sdBox(p, vec2(0.75, 0.5)), sdCircle(p,0.7)); } `, boxMinusCircle: ` // Distance from p to the difference between a box 1.5 units wide and 1 units high // and a circle of radius 0.7 float signedDistance (in vec2 p) { return max(sdBox(p, vec2(0.75, 0.5)), -sdCircle(p,0.7)); } `, circleMinusBox: ` // Distance from p to the difference between a circle of radius 0.7 // and a box 1.5 units wide and 1 units high float signedDistance (in vec2 p) { return max(-sdBox(p, vec2(0.75, 0.5)), sdCircle(p,0.7)); } `, plainColoring : ` // Simple coloring scheme for distance d: white inside // and orange outside vec3 color (in float d) { return vec3(1.0) - sign(d)*vec3(0.1,0.4,0.7); } `, iqColoring: ` // Inigo Quilez's coloring scheme for a distance function. Draws isolines // and highlights the region close to the border. Nice! vec3 color (in float d) { vec3 col = vec3(1.0) - sign(d)*vec3(0.1,0.4,0.7); col *= 1.0 - exp(-3.0*abs(d)); float c = cos(150.0*d); col *= 0.8 + 0.2*c*c*c; col = mix( col, vec3(1.0), 1.0-smoothstep(0.0,0.01,abs(d)) ); return col; } `, fragment: function(distanceFunc,colorFunc) { return ` precision mediump float; uniform vec3 iResolution; // Size of the viewport in pixels uniform float distanceOffset; // Offset value to be added to distance function // // Signed distance from point 'p' to a circle of radius 'r' centered at the origin // float sdCircle( in vec2 p, in float r ) { return length(p)-r; } // // Signed distance from point 'p' to an axes-aligned rectangle centered at the origin and // having width and height equal to b.x/2 and b.y/2, respectively. // 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); } ${distanceFunc} ${colorFunc} void main() { // Translate coordinates to center of screen and normalize to range [-1..1] vec2 p = (2.0*gl_FragCoord.xy-iResolution.xy)/iResolution.y; // Compute signed distance to the shape and offset it float d = signedDistance(p) + distanceOffset; // Coloring vec3 col = color(d); gl_FragColor = vec4(col,1.0); } `} })47:[] 43:{"id":"c6cd66e89bd382b8","slug":"shadertoy-style-drawing","title":"Shadertoy style drawing","thumbnail":"6775e80a8a5f96d5aa0512cbe7f5ccdd3f25829a631343d301172445e188a593","access_level":"public","create_time":"$D2020-07-10T11:52:33.253Z","update_time":"$D2021-04-20T14:21:00.196Z","view_time":null,"first_public_time":"$D2020-07-10T21:08:40.369Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024","bio":"Computer Graphics & Visualization @ufrj.br "},"version":255,"publish_version":255,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"bio":"Computer Graphics & Visualization @ufrj.br "}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[{"id":"460d4458de30f9df","reply_to_id":null,"content":"Great explanation, example, and exposition of the code necessary for setting this up. I was looking for a way to do shadertoy style drawing in Observable and I found that, and a great little article with it right here :)","create_time":"$D2021-07-16T23:05:28.227Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"9a139ab1d56ae60e","login":"vezwork","name":"Elliot","avatar_url":"https://avatars-next.observableusercontent.com/d991101c2093a3ab1f88200840442f1eac491eb43e5d6e51b65ec7c20d8edec2","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":114,"collection":{"id":"e0d24a292dccabae","slug":"computacao-grafica","title":"Computer Graphics","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"type":"notebook","body":{"titling":"auto","title":"Shadertoy style drawing","cells":[{"id":0,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`** Canvas and interface**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"canvas = html`