We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpPrograms › String array - design question
Page Index Toggle Pages: 1
String array - design question (Read 949 times)
String array - design question
Apr 24th, 2010, 9:01pm
 
I was trying to work out a way of having an array of 60 words, with 20 of them displayed in a 4 x 5 grid on screen.  when the user mouses over one of them, it swaps that word out for the next one (the 21st in this case).

I was thinking of creating a class for the words that included their x and y and new their width with textWidth.  From this i think i should be able to roughly tell if a single word has been moused over.

Has anyone got any other suggestions?
Re: String array - design question
Reply #1 - Apr 25th, 2010, 12:14am
 
No other suggestion, it looks like a good starting point.
Well, don't store their x, y coordinates in terms of pixels, but of place on the grid, perhaps.
Re: String array - design question
Reply #2 - Apr 25th, 2010, 2:09am
 
This thread might be of help as well
http://processing.org/discourse/yabb2/num_1266090966.html
It describes a neat trick to do "mouse-over" checks with abitrary shaped objects (i.e. charcters) by "printing" them in specific colors into a buffer image and then checking the color under the mouse in this buffer-image rather than the displayed image.
It is simple but clever.
Re: String array - design question
Reply #3 - May 3rd, 2010, 5:52pm
 
Thanks for the responses.  I have been working on this recently and have run into a problem I can't work out a solution to.  Ultimately, each word can me moused over and swapped out, so I want the code to allow for the dynamic repositioning of text.

However, I am struggling to get the text to position itself on the correct row.  I thought I could get each word to look at the previous words end point, and then calculate whether the current word needed to be placed on a new line.  doesn't seem to work like that though.  any suggestions?

I have set the frame rate to 1 to help troubleshooting.

Code:
PFont font;
int displayedWords = 32;
int nextWord = displayedWords + 1;

int lineHeight = 30;
int space = 10;
int margin = space * 4;

String s = "You've asked me what the lobster is weaving there with his golden feet? I reply, the ocean knows this. You say, what is the ascidia waiting for in its transparent bell? What is it waiting for?";

String[] vernacular = split(s, ' ');

Word[] words = new Word[displayedWords];

void setup(){
 size(600,400);
 frameRate(1);
 font = loadFont("Serif-24.vlw");
 textFont(font);

 float xPos = margin;
 int row = 1;

 for(int i=0;i<words.length;i++){
   float wide = textWidth(vernacular[i]);
   words[i] = new Word(vernacular[i],xPos,row,wide);
   xPos = words[i].end;
 }
}

void draw(){
 background(0);
 for(int i=0;i<words.length;i++){
   if(i != 0){
     words[i].display();
     words[i].update();
     //line not working for vertical positioning
     //words[i].xPos = words[i-1].end;
     if(words[i].end > width-margin){
       words[i].row++;
       words[i].xPos = margin;
     }
   }
 }
}

class Word{
 String word;
 float xPos;
 float yPos;
 float wide;
 float end;
 float top;
 int row;

 //Constructor
 Word(String word, float xPos, int row, float wide){

   this.word = word;
   this.xPos = xPos;
   this.row = row;
   this.yPos = row * lineHeight;
   this.wide = wide;
   this.end = xPos + wide + space;
   this.top = yPos - lineHeight;
 }

 void display(){  
   text(word, xPos, yPos);
 }

 void update(){
   end = xPos + wide + space;
   yPos = row * lineHeight;
 }
}
Re: String array - design question
Reply #4 - May 4th, 2010, 2:32am
 
When you go to next margin, actually you must update all following words (next row).
Either by adding an additional loop, or, more efficiently, by using a backtracking mechanism, as I show below:
Code:
PFont font;
int displayedWords = 32;
int nextWord = displayedWords + 1;

int lineHeight = 30;
int space = 10;
int margin = space * 4;

String s = "You've asked me what the lobster is weaving there with his golden feet? I reply, the ocean knows this. You say, what is the ascidia waiting for in its transparent bell? What is it waiting for?";

String[] vernacular = split(s, ' ');

Word[] words = new Word[displayedWords];

void setup(){
size(600,400);
frameRate(1);
font = createFont("Times New Roman", 24);
textFont(font);

float xPos = margin;
int row = 1;

for(int i=0;i<words.length;i++){
float wide = textWidth(vernacular[i]);
words[i] = new Word(vernacular[i], xPos, row, wide);
xPos = words[i].end;
}
noLoop();
}

void draw(){
background(0);
for (int i = 0; i < words.length; i++) {
if (words[i].end > width-margin) {
// Beyond right margin, must wrap
if (words[i-1].row == words[i].row)
{
// Previous word on same row, just wrap
words[i].goNextRow();
}
else // Already wrapped on previous word
{
// Follows it
words[i].row = words[i-1].row;
if (words[i - 1].end + words[i].wide > width - margin)
{
// New pos beyond margin, wrap
words[i].goNextRow();
}
else
{
// Really follow it
words[i].xPos = words[i - 1].end;
}
}
words[i].update();
}
words[i].display();
}
}

class Word{
String word;
float xPos;
float yPos;
float wide;
float end;
float top;
int row;

//Constructor
Word(String word, float xPos, int row, float wide){

this.word = word;
this.xPos = xPos;
this.row = row;
this.wide = wide;
this.top = yPos - lineHeight;
update();
}

void display(){
text(word, xPos, yPos);
println(word + " " + xPos + " " + yPos);
}

void update(){
end = xPos + wide + space;
yPos = row * lineHeight;
}

void goNextRow() {
row++;
xPos = margin;
}
}
Page Index Toggle Pages: 1