# SDF outline - draw

Hello Folks! I was studying SDF from some resources like this:

`youtube.com/watch?v=KRB57wyo8_4`
`openprocessing.org/sketch/1898567`

What I want is to try to understand a little more how SDFs work. What I want to do it to get the vertex coordinates to drawing the continues lines that makes the contour of the shape: is something like this:

doing this in a shader is easy, even using only dots with different colors in p5. But i want draw the paths with equidistant lines just like the example. I was trying two approaches. One drawing a grid and rotating vectors, making a flow field, and another from random points. The two strategies are what the open processing sketch uses. But how can I do to generate equidistant lines?

i feel that i missing something. A different approach maybe? My plan is for example, set different frequencies of the SDF and play whit the shapes. Here the sketch i was working.

``````let R = (a=1)=>Math.random()*a

function setup() {
createCanvas(400, 400);
}

function draw_circle([x,y],r,c) {
noStroke(); fill(c);
circle((x+1)*width/2, (y+1)*width/2, r/2);
}

function sdf_circle([x,y],[cx,cy],r){

x-=cx
y-= cy

return abs(dist(0,0,x,y))-r
}

function sdf_rep(x,r){
x/=r
x -= Math.floor(x)+0.5
x*=r
return x
}

function sdf([x,y]){

let c =  sdf_circle([x,y],[0,0],0.3)
let b = sdf_box([x,y], [0.3,0], [0.5,0.4])
c = min(b,c)
// c = abs(sdf_rep(c,0.1))
return c
}

function sdf_box([x,y], [cx,cy], [w,h]) {
x -= cx;
y -= cy;
return max(abs(x)-w, abs(y)-h);
}

function draw() {
// background(220);
//   for(let k = 0; k<100;k++){
//     let p = [R(2)-1,R(2)-1]
//     let d = sdf(p)

//     let c = '#000'
//     if(d<-.005)c = '#009099'
//     if(d>.005)c = '#fff911' ;

//     draw_circle(p,2,c)
//   }
// noLoop()

// field(25)

// flowRandom(2, 5, 10)
flowSVG(2, 5, 10)

}

function flowRandom(ppf, l, count) {

let gap = 0.02; // 0 thickness

let strokelen = l * 2 / width;

for (let i = 0; i < ppf; i++) {
let gX = R(2)-1
let gY = R(2)-1
let gX0 = gX;
let gY0 = gY;

for (let h = 0; h < count; h++) {
let d = sdf([gX, gY]);
let dx = sdf([gX + 2 / width, gY]);
let dy = sdf([gX, gY + 2 / height]);

let a = atan2(d - dx, d - dy);

let gXN = gX + cos(a) * strokelen;
let gYN = gY - sin(a) * strokelen;

//convert to screen coordinates
let X1 = width * (gX + 1.0) / 2.0;
let Y1 = height - height * (gY + 1.0) / 2.0;
let X2 = width * (gXN + 1.0) / 2.0;
let Y2 = height - height * (gYN + 1.0) / 2.0;

stroke(0);
line(X1, Y1, X2, Y2);

gX = gXN;
gY = gYN;
}
gX = gX0;
gY = gY0;

}

}

function field(divs) { // based on -1..1, -1..1, positive y is up
let gap = 2.0 / divs;

for (let j = 0; j < divs; j++) {
for (let i = 0; i < divs; i++) {

let gX = -1 + i * gap;
let gY = -1 + j * gap;

let d = sdf([gX, gY]);
let dx = sdf( [gX + gap / 100, gY]);
let dy = sdf([gX, gY + gap / 100]);

let a = atan2(d - dx, d - dy);

//convert to screen coordinates
let X1 = width * (gX + 1.0) / 2.0;
let Y1 = height - height * (gY + 1.0) / 2.0;
let X2 = X1 + 0.8 * cos(a) * width / divs;
let Y2 = Y1 + 0.8 * sin(a) * height / divs;

beginShape(LINES)
vertex(X1,Y1)
vertex(X2,Y2)
endShape()
}
}
}

function flowSVG(ppf, l, count) {

let gap = 0.005; // 0 thickness

let strokelen = l * 2 / width; // pixels to drawing units

for (let i = 0; i < ppf; i++) {
let gX = R(2)-1
let gY = R(2)-1

let gX0 = gX;
let gY0 = gY;
if ((sdf([gX,gY])) > gap) {
stroke(random(255),random(255),random(255));
} else {
stroke(random(255));
}
let pointstack = [];
for (let h = 0; h < count; h++) {
let d = sdf([gX,gY])
let dx = sdf([gX + 2 / width, gY]);
let dy = sdf([gX, gY + 2 / height]);

let a = atan2(d - dx, d - dy);

let gXN = gX + cos(a*1) * strokelen;
let gYN = gY - sin(a*1) * strokelen;

//convert to screen coordinates
let X1 = map(gX, -1, 1, 0, width);
let Y1 = map(gY, -1, 1, height, 0);
let X2 = map(gXN, -1, 1, 0, width);
let Y2 = map(gYN, -1, 1, height, 0);

if ((constrain(X2, 0, width) == X2) && (constrain(Y2, 0, height) == Y2)) {
pointstack.push([X2, Y2]);
} else { // hit edge, stop
h = count;
}

gX = gXN;
gY = gYN;
}

noFill()
beginShape();
for (let h = 0; h < pointstack.length; h++) {
vertex(pointstack[h][0], pointstack[h][1]);
}
endShape();

}
}
``````

This is what im getting

And something like this is what i want;