Joining lines

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

Screen Shot 2016-04-19 at 11.49.27 AM

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]);
    }
  }     
}

Answers

  • Answer ✓

    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)

  • Answer ✓

    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.

  • Lerp all the things!

    Thank you guys

  • 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?

  • Answer ✓

    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.

  • Thank you koogs I'll try that way

Sign In or Register to comment.