function sdfCircle x y cx cy r return Math sqrt x cx 2 y cy 2 r function sdfRectangle x y cx cy w h let dx Math max Math abs x cx w 2 0 let dy Math max Math abs y cy h 2 0 return Math sqrt dx dx dy dy function sdfUnion d1 d2 return Math min d1 d2 function sdfTransform x y angle tx ty let cosA Math cos angle let sinA Math sin angle let nx cosA x sinA y tx let ny sinA x cosA y ty return nx ny Example of combining circle and teeth shapes function wheelCogSDF x y Main wheel parameters let wheelRadius 1 5 let numTeeth 12 let toothWidth 0 2 let toothHeight 0 4 let smoothness 0 1 Main wheel SDF let wheel sdfCircle x y 0 0 wheelRadius Create teeth SDF let teeth Number MAX_VALUE for let i 0 i numTeeth i let angle i 2 Math PI numTeeth let tx ty sdfTransform x y angle wheelRadius 0 let tooth sdfRectangle tx ty 0 0 toothWidth toothHeight teeth sdfUnion teeth tooth Combine wheel and teeth return sdfUnion wheel teeth Test the wheel cog SDF function function renderSDF let canvas document createElement canvas canvas width 400 canvas height 400 document body appendChild canvas let ctx canvas getContext 2d for let x 0 x canvas width x for let y 0 y canvas height y let sx x canvas width 4 2 let sy y canvas height 4 2 let d wheelCogSDF sx sy let color Math max Math min 1 d 1 0 255 ctx fillStyle rgb color color color ctx fillRect x y 1 1 renderSDF function sdfCircle x y cx cy r return Math sqrt x cx 2 y cy 2 r function sdfRectangle x y cx cy w h let dx Math max Math abs x cx w 2 0 let dy Math max Math abs y cy h 2 0 return Math sqrt dx dx dy dy function sdfUnion d1 d2 return Math min d1 d2 function sdfIntersection d1 d2 return Math max d1 d2 function sdfSmoothUnion d1 d2 k let h Math max k Math abs d1 d2 0 0 k return Math min d1 d2 h h k 0 25 function sdfSmoothIntersection d1 d2 k let h Math max k Math abs d1 d2 0 0 k return Math max d1 d2 h h k 0 25 Example of combining two shapes function combinedSDF x y let shapeA sdfCircle x y 0 0 1 let shapeB sdfRectangle x y 1 5 1 5 1 1 let k 0 5 smoothness factor return sdfSmoothUnion shapeA shapeB k Test the combined SDF function function renderSDF let canvas document createElement canvas canvas width 600 canvas height 600 document body appendChild canvas let ctx canvas getContext 2d for let x 0 x canvas width x for let y 0 y canvas height y let sx x canvas width 4 2 let sy y canvas height 4 2 let d combinedSDF sx sy let color Math max Math min 1 d 1 0 255 ctx fillStyle rgb color color color ctx fillRect x y 1 1 renderSDF function sdfCircle x y cx cy r return Math sqrt x cx 2 y cy 2 r function sdfRectangle x y cx cy w h let dx Math max Math abs x cx w 2 0 let dy Math max Math abs y cy h 2 0 return Math sqrt dx dx dy dy function sdfUnion d1 d2 return Math min d1 d2 function sdfIntersection d1 d2 return Math max d1 d2 function sdfSmoothUnion d1 d2 k let h Math max k Math abs d1 d2 0 0 k return Math min d1 d2 h h k 0 25 function sdfSmoothIntersection d1 d2 k let h Math max k Math abs d1 d2 0 0 k return Math max d1 d2 h h k 0 25 Example of combining two shapes function combinedSDF x y let shapeA sdfCircle x y 0 0 1 let shapeB sdfRectangle x y 1 5 1 5 1 1 let k 0 5 smoothness factor return sdfSmoothUnion shapeA shapeB k Test the combined SDF function function renderSDF let canvas document createElement canvas canvas width 600 canvas height 600 document body appendChild canvas let ctx canvas getContext 2d for let x 0 x canvas width x for let y 0 y canvas height y let sx x canvas width 4 2 let sy y canvas height 4 2 let d combinedSDF sx sy let color Math max Math min 1 d 1 0 255 ctx fillStyle rgb color color color ctx fillRect x y 1 1 if d 0 5 d 0 47 ctx fillStyle red ctx fillRect x y 1 1 if d 0 26 d 0 25 ctx fillStyle blue ctx fillRect x y 1 1 renderSDF
let shapeA sdfCircle x y 0 0 1 let shapeB sdfRectangle x y 1 5 1 5 1 1 let k 0 5 smoothness factor return sdfSmoothUnion shapeA shapeB k Test the combined SDF function function renderSDF let canvas document createElement canvas canvas width 600 canvas height 600 document body appendChild canvas let ctx canvas getContext 2d for let x 0 x canvas width x for let y 0 y canvas height y let sx x canvas width 4 2 let sy y canvas height 4 2 let d combinedSDF sx sy let color Math max Math min 1 d 1 0 255 ctx fillStyle rgb color color color ctx fillRect x y 1 1 renderSDF function sdfCircle x y cx cy r return Math sqrt x cx 2 y cy 2 r function sdfRectangle x y cx cy w h let dx Math max Math abs x cx w 2 0 let dy Math max Math abs y cy h 2 0 return Math sqrt dx dx dy dy function sdfUnion d1 d2 return Math min d1 d2 function sdfIntersection d1 d2 return Math max d1 d2 function sdfSmoothUnion d1 d2 k let h Math max k Math abs d1 d2 0 0 k return Math min d1 d2 h h k 0 25 function sdfSmoothIntersection d1 d2 k let h Math max k Math abs d1 d2 0 0 k return Math max d1 d2 h h k 0 25 Example of combining two shapes function combinedSDF x y let shapeA sdfCircle x y 0 0 1 let shapeB sdfRectangle x y 1 5 1 5 1 1 let k 0 5 smoothness factor return sdfSmoothUnion shapeA shapeB k Test the combined SDF function function renderSDF let canvas document createElement canvas canvas width 600 canvas height 600 document body appendChild canvas let ctx canvas getContext 2d for let x 0 x canvas width x for let y 0 y canvas height y let sx x canvas width 4 2 let sy y canvas height 4 2 let d combinedSDF sx sy let color Math max Math min 1 d 1 0 255 ctx fillStyle rgb color color color ctx fillRect x y 1 1 if d 0 5 d 0 47 ctx fillStyle red ctx fillRect x y 1 1 if d 0 26 d 0 25 ctx fillStyle blue ctx fillRect x y 1 1 renderSDF