# Pre-alpha distance function reference thread **URL:** \ **Category:** Uncategorized\ **Created:** [August 20, 2021, 12:19am UTC](https://forum.electromage.com/t/pre-alpha-distance-function-reference-thread/1493 "2021-08-20T00:19:23Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![zranger1](https://forum.electromage.com/user_avatar/forum.electromage.com/zranger1/32/301_2.png) [@zranger1](https://forum.electromage.com/u/zranger1)\ **Post date:** [August 20, 2021, 12:19am UTC](https://forum.electromage.com/t/pre-alpha-distance-function-reference-thread/1493/1 "2021-08-20T00:19:23Z")
A thread for discussion and updates of the SDF/shader drawing techniques reference pages. (First discussed in [this thread](https://forum.electromage.com/t/rotation-functions/1462/4).) This will be a small repository of code and notes for drawing and animating shapes using distance functions in render2D(). There’s no basic tutorial yet - if you’re not familiar with the concepts, there are all kinds of guides and references listed in the thread mentioned above. I’ll post update notes here until the project gets complete enough to be considered ready for more general use. Links to the Repository [Toolkit Main Page](https://github.com/zranger1/PixelblazePatterns/tree/master/Toolkit) [2D SDF Reference](https://github.com/zranger1/PixelblazePatterns/blob/master/Toolkit/sdf2d.md) Latest Updates: #### 08/29/21 - Added many new symbol and marker SDFs. Thanks @scruffynerf! #### 08/27/21 - New Shapes! Gear, Diamond, Line Segment, Heart - More handy utility fns: mix(), smoothstep(), dot(), dot2() ---
**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\ **Post date:** [August 23, 2021, 3:22pm UTC](https://forum.electromage.com/t/pre-alpha-distance-function-reference-thread/1493/2 "2021-08-23T15:22:36Z")
I’ve been on the lookout for additional SDFs beyond the ones from IQ and PixelSpiritDeck Found some: [http://jcgt.org/published/0003/04/01/](http://jcgt.org/published/0003/04/01/) Includes card suits, arrows, and more. All worth adding to a library. Also, not SDFs (they are SVGs), but this idea is awesome and I can imagine a pattern that can be inspired by it… Make items have some relationship points, build items to connect, and suddenly it’s generative art. We’re quite a ways from this, but… it’s also not that far a stretch. Imagine a pattern that just made art all day long… If it’s making art and nobody sees it, is it real? [https://mystic-symbolic.art/](https://mystic-symbolic.art/) Added: Another good basic set of algos [https://thndl.com/square-shaped-shaders.html](https://thndl.com/square-shaped-shaders.html) Found it thru [curv/Shape\_Constructors.rst at master · curv3d/curv · GitHub](https://github.com/curv3d/curv/blob/master/docs/shapes/Shape_Constructors.rst) Which is also good, the entire shape library is actually written in itself. ---
**Author:** ![sorceror](https://forum.electromage.com/user_avatar/forum.electromage.com/sorceror/32/735_2.png) [@sorceror](https://forum.electromage.com/u/sorceror)\ **Post date:** [August 24, 2021, 8:28am UTC](https://forum.electromage.com/t/pre-alpha-distance-function-reference-thread/1493/3 "2021-08-24T08:28:15Z")
> [@Scruffynerf](#): > > If it’s making art and nobody sees it, is it real? Good question. I have a large stack of high res fractal prints which are wondering the same thing. > [@Scruffynerf](#): > > [https://mystic-symbolic.art/](https://mystic-symbolic.art/) Wow, they need a ‘put this on a t-shirt’ button and an ‘ask GPT-3 to design a religion around this’ button! ---
**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\ **Post date:** [August 26, 2021, 10:48pm UTC](https://forum.electromage.com/t/pre-alpha-distance-function-reference-thread/1493/4 "2021-08-26T22:48:35Z")
I’ve been totally into SDF world… I’m hoping to port all of the bits this can do… it’s a fun playground example. > **[Shadertoy](https://www.shadertoy.com/view/fll3Dn)** ---
**Author:** ![zranger1](https://forum.electromage.com/user_avatar/forum.electromage.com/zranger1/32/301_2.png) [@zranger1](https://forum.electromage.com/u/zranger1)\ **Post date:** [August 27, 2021, 11:31pm UTC](https://forum.electromage.com/t/pre-alpha-distance-function-reference-thread/1493/5 "2021-08-27T23:31:52Z")
Just updated the SDF toolkit! Added these shapes: - Gear (with arbitrary number and size of teeth) - Diamond - Line Segment - Heart Also added some utility functions to help with porting: - dot(x1,y1,x2,y2) - dot product - dot2(x,y) - dot product of a vector with itself - mix(low,high,value) - linear interpolation function - smoothstep(low,high,value) - threshold function with (cubic) sigmoidal interpolation. ---
**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\ **Post date:** [August 29, 2021, 1:17pm UTC](https://forum.electromage.com/t/pre-alpha-distance-function-reference-thread/1493/6 "2021-08-29T13:17:41Z")
These need some normalizing of size, and optimizing in general. We could also replace min and max with function names that are clear what they do, since for SDFs, min is a union and max is a difference (or add/remove) > **Pile of symbols Number 1** > > ```auto > // from https://www.shadertoy.com/view/XsXXDX > function markerT(x,y,size) { > size = size*2 > r1 = max(abs(x -size/3. + size/3.), abs(x - size/3. - size/3.)); > r2 = max(abs(y - size/3.), abs(y + size/3.)); > r3 = max(abs(x), abs(y)); > r = max(min(r1,r2),r3); > r -= size/2.; > return r; > } > > function markerCheck(px,py,size){ > x = -SQRT1_2 * (px - py); > y = SQRT1_2 * (px + py); > size = size*2 > r1 = max(abs(x - 2.*size/3.), abs(x - 1.*size/3.)); > r2 = max(abs(y - 2.*size/3.), abs(y - size/3.)); > r3 = max(abs(x),max(abs(x-size/3.), abs(y))); > r = max(min(r1,r2),r3); > r -= size/2; > return r; > } > > function markerCross(px,py,size){ > x = SQRT1_2 * (px - py); > y = SQRT1_2 * (px + py); > size = size/1.5 > r1 = max(abs(x - size), abs(x + size)); > r2 = max(abs(y - size), abs(y + size)); > r3 = max(abs(x), abs(y)); > r = max(min(r1,r2),r3); > r -= size*1.5; > return r; > } > > function markerClobber(px,py,size){ > size = size * 2 > c1y = -0.25; > c2x = 0.216507 > c2y = 0.125; > r1 = hypot(px, py - c1y*size) - size/3.5; > r2 = hypot(px - c2x*size, py - c2y*size) - size/3.5; > r3 = hypot(px + c2x*size, py - c2y*size) - size/3.5; > return min(min(r1,r2),r3); > } > > function markerAsterisk(px,py,size){ > x = SQRT1_2 * (px - py); > y = SQRT1_2 * (px + py); > size = size * 2 > r1 = max(abs(x)- size/2., abs(y)- size/10.); > r2 = max(abs(y)- size/2., abs(x)- size/10.); > r3 = max(abs(px)- size/2., abs(py)- size/10.); > r4 = max(abs(py)- size/2., abs(px)- size/10.); > return min( min(r1,r2), min(r3,r4)); > } > > function markerChevron(px,py,size){ > x = 1/SQRT2 * (px - py); > y = 1/SQRT2 * (px + py); > size = size * 2 > r1 = max(abs(x), abs(y)) - size/3; > r2 = max(abs(x-size/3.), abs(y-size/3.)) - size/3.; > return max(r1,-r2); > } > > function markerRing(px,py,size){ > r1 = circle(px,py,size); > r2 = circle(px,py,size/2); > return max(r1,-r2); > } > > function markerInfinity(px,py,size){ > c1x = .125 > size = size * 5 > r1 = circle(px-c1x*size,py,size/6); > r2 = circle(px-c1x*size,py,size/14); > r3 = circle(px+c1x*size,py,size/6); > r4 = circle(px+c1x*size,py,size/14); > return min( max(r1,-r2), max(r3,-r4)); > } > > function markerTag(px,py,size){ > x = -px; > y = py; > size = size * 3 > r1 = max(abs(x)- size/2., abs(y)- size/6.); > r2 = abs(x-size/1.5)+abs(y)-size; > return max(r1,.75*r2); > } > > ``` More coming soon… ---
**Author:** ![zranger1](https://forum.electromage.com/user_avatar/forum.electromage.com/zranger1/32/301_2.png) [@zranger1](https://forum.electromage.com/u/zranger1)\ **Post date:** [August 30, 2021, 1:53am UTC](https://forum.electromage.com/t/pre-alpha-distance-function-reference-thread/1493/7 "2021-08-30T01:53:37Z")
These are great! I just checked them in to the main SDF document. We can normalize and optimize at leisure. (PM me your github email address and I can add you as a contributor to this repository – if we keep working at it, we’ll soon have one of the most complete 2D collections around!) ---
**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\ **Post date:** [August 30, 2021, 2:56am UTC](https://forum.electromage.com/t/pre-alpha-distance-function-reference-thread/1493/8 "2021-08-30T02:56:48Z")
A few more: another heart (unsure which is better, this might be with tuning), and a 7 segment LED for Numbers (and yeah, we could do a [14 or even 16 segment LED](https://en.wikipedia.org/wiki/Fourteen-segment_display), and have alphanumerics…) Absolutely need sizing work, so we can use them smaller. > **Heart2 and 7SegmentLED** > > ```auto > function heart2(x,y,size) { > // From: https://www.shadertoy.com/view/ldVGzt by coyote & Fabrice > size = .4/size > y += .034; > x *= size; > y *= -size; > return sqrt( x*x + y*y - abs(x) * y ) - .4 > } > > function segment(x,y,size){ > return roundedRectangle(x,y,size/6,size/2) > } > > function sevenSegment(x,y,size,num) > { > seg= 5.0; > scale = 2.5 > a = .45 * size * scale > b = .225 * size * scale > seg = (num!=-1 && num!=1 && num!=4 ?min(segment(y+a,x,size),seg):seg); > seg = (num!=-1 && num!=1 && num!=2 && num!=3 && num!=7?min(segment(x-b,y+b,size),seg):seg); > seg = (num!=-1 && num!=5 && num!=6 ?min(segment(x+b,y+b,size),seg):seg); > seg = (num!=-1 && num!=0 && num!=1 && num!=7 ?min(segment(y,x,size),seg):seg); > seg = (num==0 || num==2 || num==6 || num==8 ?min(segment(x-b,y-b,size),seg):seg); > seg = (num!=-1 && num!=2 ?min(segment(x+b,y-b,size),seg):seg); > seg = (num!=-1 && num!=1 && num!=4 && num!=7 ?min(segment(y-a,x,size),seg):seg); > return seg; > } > > ``` Hmm, Would you like to play a game? [![](https://img.youtube.com/vi/dfT-OtWHfys/maxresdefault.jpg "War Games W.O.P.R - Missile Launch Codes") ](https://www.youtube.com/watch?v=dfT-OtWHfys) Now that’s a pattern… do a WOPR countdown, and then show missles striking… all in ultra low res. Oh, and it’d have to do the DEFCON changes as well [![](https://img.youtube.com/vi/iNyOyCXbEhE/maxresdefault.jpg "Real Working WarGames Film Defcon Sign (UK Edition!)") ](https://www.youtube.com/watch?v=iNyOyCXbEhE) Talk about a countdown pattern… You’d want two keys to turn this on. Ok, last video: [![](https://img.youtube.com/vi/vh64Wqpy34c/maxresdefault.jpg "Wargames Case Mod - WOPR") ](https://www.youtube.com/watch?v=vh64Wqpy34c) yes, it had lots of LEDs in multiple panels… so the pattern could sit there and just blink leds calmly… most of the time.