Today, I learned how to place buttons on my simulations and how to track the position of my mouse.
My project today:
Fourth exercise
For this exercise we will work with adding buttons to the simulation. And this will allow us to control the simulation better.
1) Go over the two examples and try to learn how they work. For reference, see the Processing documentation about buttons.
http://processing.org/reference/
http://processing.org/learning/topics/button.html
2) Make a copy of button_exercise_2 and rename it. Modify this new version so that it prints to the window (using the Text stuff you learned last week) the x and y position of the cursor.
3) Modify the code so that when the button is pressed it displays some new text. Pick whatever text you like! :)
4) Place some text next to the button that explains what it does.
Dr. Bellis told me to try to figure out what each codes mean by myself, and understand it more as I create one of my own.
It was really confusing at first but as I tried changing the numbers for each code I got the gist of what the codes represent on the simulation.
For the second question where it asks me to make the window display the x and y positions of the cursor. I used the string method that I did for last internship and put in all the correct codes. The problem is, the texts did not show up on my simulation. I asked Dr. Bellis for help and we found that texts I want to display on the simulation window have to be written under void draw (), whereas before I just wrote the codes on the very bottom of the series of codes.
The outcome is:
Codes for cursor tracking:
PFont f;
f= createFont("Times New Romans", 16, true);
textFont (f, 24);
fill (83,130,229);
String MouseX_text= "MouseX:"+ nf(mouseX,1,2); //for X-coordinates
text (MouseX_text, 10, 400); fill (83, 130, 229);
String MouseY_text= "MouseY:"+ nf(mouseY,1,2); //for Y-coordinates
text (MouseY_text, 10, 420);
 |
| The screenshot eliminated my cursor automatically so you can see it, but the mouseX and mouseY shows the coordinates where the cursor is located. |
 |
| When the button (the box) is clicked by the cursor, it turns purple. (yea, I had fun with choosing the colors XD) After this I found that the box button is also draggable... which I think was an interesting unintentional outcome... |
Codes for stimulating a button with words showing:
int windowHeight = 640; //This sets the size of the window.
int windowWidth = 700;
float bx; // button x-position
float by; // button y-position
int boxSize = 75; //set the size for the box (square with 75 on each side)
boolean overBox = false; // This tracks whether or not the mouse is over the box.
boolean locked = false; // This tracks whether or not the box is ``locked". (I was not sure what "locked means, I am going to find it out on our next meeting)
float xOffset = 0.0;
float yOffset = 0.0;
int background_color = 0;
int display_text = 0;
void setup()
{
size(640, 360);
size(windowWidth, windowHeight); // Size must be the first statement
bx = 100;
by = 100;
//rectMode(RADIUS); //
}
////////////////////////////////////////////////////////////////////////////////
// This is always the part where we deal with all the drawing.
////////////////////////////////////////////////////////////////////////////////
void draw()
{
background(background_color);
// Test if the cursor is over the box
if (mouseX > bx-boxSize && mouseX < bx+boxSize && mouseY > by-boxSize && mouseY < by+boxSize) { //A command to tell the computer that if the cursor is within the box range, and is clicked the "if()" commands will show.
overBox = true;
if(!locked) {
stroke(255); // If we are over the box, change the colors.
fill(153);
}
} else {
stroke(153);
fill(153);
overBox = false;
}
// Draw the box
rect(bx, by, boxSize, boxSize);
PFont f;
if (display_text==1)
{
f= createFont ("Times New Romans", 16, true); //Here is where I added the texts and set the text to display_text= 1.
textFont (f, 24);
fill (224,97,97);
text ("HELLO~", 100, 240); //Hello will show up when the button is pressed.
}
else if (display_text==2)
{
f= createFont ("Times New Romans", 16, true);
textFont (f, 24);
fill (56,183,214);
text ("BYE", 100, 240); //Same idea here.
}
}
////////////////////////////////////////////////////////////////////////////////
// Here is where we tell the program how to deal with:
// 1) When the mouse button is pressed.
////////////////////////////////////////////////////////////////////////////////
// This code tells us what to do when the box is pressed.
void mousePressed() {
if(overBox) {
locked = true;
fill(19, 230, 128);
if ( background_color == 0 )
{
background_color = 100;
display_text = 1; //display_text= 1 is the command for calling up the "hello" when the button is pressed.
}
else if ( background_color == 100 ) //When it is clicked again, if background color is 100 (gray) it will change to 0 (black) as written below+ call up display_text= 2 which is the command for "bye".
{
background_color = 0;
display_text = 2;
}
} else {
locked = false;
}
//xOffset = mouseX-bx;
//yOffset = mouseY-by;
}
 |
| Clicked once |
 |
| Click back. |
