Fascinating problem! I think I have an understanding of what you want to do, but it's a little scary to approach this one. In trying to write a sketch to solve this I discovered that it's difficult to calculate the y value for the strings. The x value can be calculated by the length of the string without any issue, but the y value isn't that easy because there can be any number of strings with that length.
So I was going to say I'd use a HashMap where I have the y-values as keys and the strings as values, but then I realized that they aren't necessarily unique. It seems like you're a beginner so I don't want to overwhelm you, but the solution I have in mind uses classes.
I would create a class and create an array of that object to store the Strings with x's, y's, indices, and values.
Here's my attempt:
final String text = "this is will only have a two word form as I want to see if this can work";
PFont font; //this is the font I'm gonna use to draw with later
Word[] words; //this is where I'll store my sentence later
//this is a basic CLASS. I can create instances of it later and store things inside it
class Word
{
String value;
int index;
float x, y;
Word(String value, int index)
{
this.value = value;
this.index = index;
//we're not gonna set x and y in here, we'll calculate that later
}
int length() { return value.length(); }
}
//this is where I'll give all my variables values
void setup()
{
String[] sentence = split(text, " ");
words = new Word[sentence.length];
//initially all the words are in order, so we'll store these i values as indices
for(int i=0;i<sentence.length;i++)
words[i] = new Word(sentence[i], i);
size(300, 300);
font = createFont("arial",18);
//sort the list by word length
sortList();
//find the x and y coordinates of each word in the list
findCoordinates();
}
void sortList()
{
//here I sort the list of words using a basic bubble sort
boolean flag = true;
while(flag)
{
flag = false;
for(int i=0;i<words.length-1;i++)
{
if(words[i].length() > words[i+1].length())
{
//swap the two
Word word = words[i];
words[i] = words[i+1];
words[i+1] = word;
flag = true;
}
}
}
}
void findCoordinates()
{
float y = 50;
for(int i=0;i<words.length;i++)
{
//I noticed that there was a relationship between the length of words
//and their x position, so I wrote this formula for it
float x = 30+40*(words[i].length()-1);
//I used the global y like you did. If the length of the current word
//is different than the previous one, then reset the y
if(i!=0 && words[i].length() != words[i-1].length())
y = 50;
//since we now know the x and y of the word, save it!
words[i].x = x;
words[i].y = y;
//and we'll increment y since the next word will be below this one
y += 18;
}
}
//this helps me later when I draw the lines, so I can do it in their original order
Word getWordAt(int index)
{
//goes through the list and finds the one with specified index
for(int i=0;i<words.length;i++)
if(words[i].index==index)
return words[i];
return null;
}
//this is where I'll draw the lists on the screen
void draw()
{
background(255);
textAlign(CENTER,CENTER);
textFont(font);
fill(0);
//let's print the words to the screen now
for(int i=0;i<words.length;i++)
{
text(words[i].value, words[i].x, words[i].y);
}
//and over here, let's draw the lines!
for(int i=0;i<words.length-1;i++)
{
line(getWordAt(i).x, getWordAt(i).y, getWordAt(i+1).x, getWordAt(i+1).y);
}
}
It's a big and interesting problem, and it's a little scary to be honest, but that's how I'd organize it! There's not really a better way to do this. I have another sketch where I did it without classes, but it gets a little messy.
I hope that this makes sense and you learn something from it. Happy programming!