Joining lines

alexdontsurf

Hi there! I want to do some variations of this logo:

The problem is that i don't know how to stop lines before intersection point so letters don't overlap the lines

String original = "STELLAR";`
String[] splited = original.split(" ");
char[] letters;

PFont myFont;

void setup() 
{
  frameRate(1);
  size(500, 300);
  pixelDensity(displayDensity());


  myFont = createFont("MaisonNeue-Bold", 15);
  fill(15);
  textFont(myFont);
  textAlign(CENTER, CENTER);

}

void draw()
{

  background(255);
  for(int s=0; s< splited.length; s++)
  {  
    letters = splited[s].toCharArray();  
  }  

  int xPos[]=new int [letters.length];
  int yPos[]=new int [letters.length];

  for (int i = 0; i<letters.length; i++) 
  {  
    xPos[i]= (int) random(width/5, width - width/5);
    yPos[i]= (int) random(height/5, height - height/5);
    text(letters[i], xPos[i], yPos[i] );

    if (i>0)
    {       
      stroke(0);
      line(xPos[i-1], yPos[i-1], xPos[i], yPos[i]);
    }
  }     
}

koogs

you could use lerp: https://processing.org/reference/lerp_.html

float gap = .1;
line(lerp(x0, x1, gap), lerp(y0, y1, gap), lerp(x0, x1, 1 - gap), lerp(y0, y1, 1 - gap));

(untested)

TfGuy44

My first thought:

String original = "STELLAR";
String[] splited = original.split(" ");
char[] letters;

PFont myFont;

void setup() 
{
  frameRate(1);
  size(500, 300);
  //pixelDensity(displayDensity());


  myFont = createFont("MaisonNeue-Bold", 15);
  fill(15);
  textFont(myFont);
  textAlign(CENTER, CENTER);

}

void draw()
{

  background(255);
  for(int s=0; s< splited.length; s++)
  {  
    letters = splited[s].toCharArray();  
  }  

  int xPos[]=new int [letters.length];
  int yPos[]=new int [letters.length];

  for (int i = 0; i<letters.length; i++) 
  {  
    xPos[i]= (int) random(width/5, width - width/5);
    yPos[i]= (int) random(height/5, height - height/5);
    text(letters[i], xPos[i], yPos[i] );

    if (i>0)
    {       
      stroke(0);
      float sx = lerp(xPos[i-1], xPos[i], .1 );
      float ex = lerp(xPos[i-1], xPos[i], .9 );
      float sy = lerp(yPos[i-1], yPos[i], .1 );
      float ey = lerp(yPos[i-1], yPos[i], .9 );
      line(sx, sy, ex, ey);
    }
  }     
}

That's Ok. But the gap is longer for longer lines. Hrm.

alexdontsurf

Lerp all the things!

Thank you guys

alexdontsurf

TfGuy44 true, and it sometimes it overlap a letter.

Do you think if I use vectors I can do something with dist() to detect when a line collides with some imaginary radius?

koogs

actually, you are right - better to use a distance because with lerp() the gap will differ with line length, which isn't what you want.

alexdontsurf

Thank you koogs I'll try that way