Just trying to get my head around workflows for getting my sketch onto a website.

Using Processing 2.0 in JavaScript mode on windows 7 64 going into chrome or firefox

One method I am trying is to switch to javascript mode and just run the sketch. It works with a sample ball sketch from the processingjs.org site, but I cannot quite get my own sketch to run.

It comes up with the correct background and does not crash, but the text does not appear.

In the sketch I do load up a list.txt and helvetica font, and have included this in the sketch as follows;

Are there any other obvious no-nos I should look out for?

In the sketch I have some Comparator classes implementing Comparator....other than that, i don't know what to change.

Any thoughts, or should I try processingjs.org? - it's just their site seems a bit opaque for help other than Pomax's walkthrough.  BTW, is there any reason I would download the code from there?

Cheers.

I am setting up a public work that involves a keyboard, and for certain reasons I would like to prevent users from using a comma when tying input.

I've tried things like 

if (key == ",") return;

in spots,  but I am obviously mixing types and cannot see any reference about for this.

Can anyone help?

Thanks for looking....

My code is based on this:

2. /**
3. typedinput taken from http://wiki.processing.org/index.php/Typed_input
4. @author Tom Carden
5. */
6.  
7. String typedText = "your text here";
8.  
9. PFont font;
10.  
11. void setup() {
12.   size(400, 400);
13.   font = createFont("Helvetica", 18);  
14. }
15.  
16. void draw() {
17.   background(255);
18.   fill(255,0,0);
19.   textFont(font,18);
20.   // this adds a blinking cursor after your text, at the expense of redrawing everything every frame
21.   text(typedText+(frameCount/10 % 2 == 0 ? "_" : ""), 35, 45);
22. }
23.  
24. void keyReleased() {
25.   //if (key == ",") return;      //error
26.   if (key != CODED) {
27.     switch(key) {
28.     case BACKSPACE:
29.       typedText = typedText.substring(0,max(0,typedText.length()-1));
30.       break;
31.     case TAB:
32.       typedText += "    ";
33.       break;
34.     case ENTER:
35.     case RETURN:
36.       // comment out the following two lines to disable line-breaks
37.       typedText += "\n";
38.       break;
39.     case ESC:
40.     case DELETE:
41.       break;
42.     default: 
43.       typedText += key;
44.     }
45.   }
46. }

Hello,

Button question here...

When I vote, the table is sorted to bring up a different entry.

My problem is that when  the new entry comes up, it is automatically voted on if the button is being held down.

(the same happened with the keyboard, I thought the buttons might be momentary)

I'm sure there is a way to stop the voting for a new entry until a button release and a new press, but I could use a nudge...

Happy to show code if asked, but it is a bit spread out over classes (I will collapse it when I see if my multiple monitor displays work).

I'm using Processing 2.0.1

Looking at three ways:

1. Present mode

I'm looking into a cheap pc setup for an exhibition to run 6 monitors on 2 HD 5450 cards.

They seem to be the cheapest that support 3 monitors each, but are from 3 years ago and are said to support OpenGL 3.2

It might be new drivers will bump them up to OpenGL 4+, but if I use Processing 2.0 is OpenGL 3.2 ok?

Also, would this process be better in Windows 7 or XP?

I'm just rendering basic fonts on a screen, couldn't be simpler. Should I just go 32bit OS and processing for less headaches?

Just want to check before I buy!

Thanks.

2. class VotingScreen{      
3.   VotingSorting myVSorting;
4.   
5.   VotingScreen(){
6.     myVSorting = new VotingSorting(); 
7.   }
8.   
9.   void display(){
10.     myVSorting.display();
11.     if (millis() - timer >= 300) {
12.       myVSorting.update();
13.       timer = millis();
14.     }     
15.    }
16. } 

1. 
   
2. class VotingSorting{
3.   int Number;
4.   
5.   VotingSorting(){
6.     entriesVotingArray = new Entry [entries.size()];
7.     for( int i=0; i < entries.size(); i++ ){
8.         Entry myEntry = (Entry) entries.get(i);
9.         entriesVotingArray[i] = myEntry;  
10.         Entry myNoEntry = entriesVotingArray[i];
11.      }
12.   }
13.   
14.   void update(){
15.     entriesVotingArray = new Entry [entries.size()];  
16.     for( int i=0; i < entries.size(); i++ ){
17.         Entry myUEntry = (Entry) entries.get(i);
18.         entriesVotingArray[i] = myUEntry;      
19.         Entry myNEntry = entriesVotingArray[i];
20.      }
21.     Arrays.sort(entriesVotingArray, new ComparatorIndex());
22.     reverse(entriesVotingArray);
23.     Arrays.sort(entriesVotingArray, new ComparatorVoted());   
24.   }
25.   
26.   void display(){    
27.     Entry myVEntry = (Entry) entriesVotingArray[Number];
28.     myVEntry.display();
29.     myVEntry.votePosUpdate();
30.     if (up==true) {myVEntry.voting(1);}
31.     if (down==true) {myVEntry.voting(-1);}  
32.     }   
33. }

In VotingSorting I have comparators that sort an Array fed by the entries ArrayList  that is refreshed frequently by the Voting Screen above…

My problem is that when I have voted 14 times (the current size of ArrayList and Array) the entry presented for voting doesn’t change anymore. 

I can still vote, and new entries will interrupt and display to be voted on, but it goes back to the previous entry after voting and I’m stuck. 

Can anyone see how I can start giving random entries when I am stuck like this?

(BTW, I am using Number variable, but I am keeping that = 0 and doing everything by sorting the array for unvoted entries to feed the next entries to the top of the index (0). I guess the problem is moving to a randomised entry if there are no new (unvoted) entries. Does anyone know how I can put a break in there if it gets stuck???). New entries break in ok....

Thanks for looking,......

Obviously, this does not work when the mouse strays away from the object.

Is there a simple way to 'lock down' the selection to keep the move active when the mouse strays?

I've looked at other code, and it is specific to their setup. What would be ideal I think is some sort of boolean that keeps the object selected if the mouse is not released after initial good selection. 

If anyone can give me  hint, I'd be happy!

I wonder if I could get an index number on a 2D array I am working with.

The array is asymmetrical, and I would like to enumerate how many items there are (not nulls)

I'm bringing in a text file with comma separated strings, the 2D Array is from a list like this;

fact, more fact, some more facts

text, more text, yet more text, too much text

bits, more bits

Would I use a nested for loop and count them somehow?

Hello,

I try to keep the questions until I am really stuck!

 

I have a sketch I am doing of what I want to be rectangles generated by a list read in by strings  (eventually an arrayList so I can add to it). The rects and strings are in a class called node with an array to iterate, and I have code to word wrap the strings and adjust the height of the rects.

 

Now I am trying to find out the best way to make the heights and width of the rects available and get the x and y positions of the rects (a class called Node) so I can draw lines linking them.

 

I have had thoughts to makes the lines part of the Node class and iterate them with i, but without much luck, also looked at PVector but could not really get my head around returning the values needed and using them with the line draw in the right place (in draw, or class?).

 

Also, I am aware that maybe I don't have the rect Node movement code in the best place for this, as I can never seem to access one value or the other in draw even if I do a return value, be it the rect position for lines, or height and width for bouncing it off walls and other rects.

 

I've looked at a lot of code and reference material, but could really use an experienced eye to look and give me a steer. PVector? ArrayList? i and j? Return x and y values in some spot? I tried to return them in class and access in draw with no luck.

 

So I am looking for the most sensible way to draw lines between these nodes and the most logical place to put the movement code.

 

Many thanks if you could help. - the // line is the pseudocode I would like to work, and I would also like height/width to be accessable while still using the height generating code in the class! line 75 on is credited to a processing user and is the height code.

 

PS. I have looked at this;

https://forum.processing.org/topic/circles-with-lines-connecting-farthest-neighbor

But again, the same issue of making rects from a string list and generating heights from that confuses it.

2. color r = int (random (50,200));
3. color g = int (random (50,200));
4. color b = int (random (50,200));
5. color a = int (100);
6. PFont font;                                   
7. int fontSize = 24;
8. Node[] myNode = new Node[3]; 
9. String[] newString = {"test0","teeeeeeeeeeeeeeeesttttttttttttttt1", "test2"};
10. 
    
11. void setup(){
12.   size(1200,800);
13.   smooth();
14.   font = createFont("Calibri", fontSize);      
15.   textFont(font,fontSize);
16.   for (int i = 0; i < myNode.length; i++) {    
17.     myNode[i] = new Node (newString[i],320,8);
18.   }
19. }
20. void draw(){
21.   background (100);    
22.   for (int i = 0; i < myNode.length;i++) {    
23.     myNode[i].display();
24.     //line (myNode[i].posX,myNode[i].posY,myNode[i+1].posX,myNode[i+1].posY,);
25.   }
26. }
27. class Node {                                  
28.   String nodeString = "";                        
29.   int specificWidth;        
30.   int lineSpacing;
31.   //boolean dir = false;
32.   float posX= (float)random(200,600);
33.   float posY= (float)random(200,600);
34.   float dirX=1;
35.   float dirY=1;
36.   float spdX= (float) random(-1,1);
37.   float spdY= (float) random(-1,1);
38.   
39.   Node(String nodeString_,int specificWidth_,int lineSpacing_) {
40.     nodeString= nodeString_;                    
41.     specificWidth = specificWidth_;
42.     lineSpacing = lineSpacing_;
43.     float posX;
44.     float posY;
45.     float dirX;
46.     float dirY;
47.     float spdX;
48.     float spdY;
49. 
    
50.   }
51. 
    
52. void display() {
53.   smooth(); 
54.   rectMode(CORNER);                            
55.   fill (r,g,b,a);                             
56.   rect(posX,posY,specificWidth,calculateTextHeight(nodeString, specificWidth, fontSize, lineSpacing));
57.   fill(255);
58.   text (nodeString,posX+(specificWidth/25),posY,specificWidth,1000);
59.   posX = posX+spdX*dirX;
60.   posY = posY+spdY*dirY;  
61.   if (posX <= 0){
62.     dirX*=-1;
63.   }
64.     if (posX >= width-specificWidth){
65.     dirX*=-1;
66.   }
67.   if (posY <= 0){
68.     dirY*=-1;
69.   }
70.     if (posY >= height- calculateTextHeight(nodeString, specificWidth, fontSize, lineSpacing)){
71.     dirY*=-1;
72.   }
73. }
74.  
75. //code reference - http://processing.org/discourse/beta/num_1195937999.html
76. //steven
77. int calculateTextHeight(String nodeString, int specificWidth, int fontSize, int lineSpacing) {
78.   String[] wordsArray;            
79.   String tempString = "";        
80.   int numLines = 0;
81.   float textHeight;
82.   wordsArray = split(nodeString, " ");       
83.   for (int i=0; i < wordsArray.length; i++) {            
84.     if (textWidth(tempString + wordsArray[i]) < specificWidth) {
85.        tempString += wordsArray[i] + " ";
86.     }
87.     else {
88.        tempString = wordsArray[i] + " ";
89.        numLines++;
90.     }
91.   }  
92.   numLines++; 
93.   textHeight = numLines * (textDescent() + textAscent() + lineSpacing); 
94.   return(round(textHeight));
95.   }
96. }