In today’s section, we’ll see some other ways in which we can use if statements.
We’ll also get a chance to use some new functions, such as link();.
Recall that the link(); function will take a user to whatever webpage is specified.
To use it, put the exact URL that you want it to go to, surrounded by double-quotes.
For example, to take a user to amazon.com, You would write link("http://www.amazon.com");.
Problem 1
|
First, you will write a simple program that takes will take the user to
google.com whenever the user clicks anywhere on the screen.
Use an if-statement and the link(); function to do this.
HINT: I recommend you set the frameRate(); to a low number, like 5,
so that it does not open too many windows/tabs in a single click.
|
Problem 2
|
Building off of the first problem, in this one you are going to write a program that opens up three
different web URLs depending on which section of the screen is clicked.
Your canvas should be a square with three sections - one orange, one yellow, and one teal.
Clicking in orange will take you to amazon.com, yellow will take you to google.gom, and teal will
take you to espn.com.
You must use if statements to check if the mouse is clicked, and to check which section of the screen it is in.
|
Congratulations, you just built your first click-able “button” in processing!
In essence, you split the screen up in to 3 large buttons (with no text labels) and made each do a different action when clicked-on.
Typically, buttons do not fill such a large part of the screen.
Next, let’s modify the size of the buttons, and even try adding some text-labels.
Problem 3
|
In this problem, modify the size of each of the buttons to reflect the anmiation.
Notice how the buttons still span the entire width of the screen, but there are now gabs between each button.
The websites should only be opened when the mouse is clicked within the colorful button areas.
If the mouse is clicked in the gray area, nothing should happen.
You can do this by adding some extra if statements.
The idea is that you need to check both the lower and upper Y-coordinate limits for each button.
|
You might recall that in class, we very briefly talked about how to display text in a processing canvas.
The function to use is called text();
This function takes three arguments.
The first is the text that you want to display, surrounded by double-quotes.
The second and third are the X/Y coordinates of the bottom-left of the text, which you can use to position the text correctly.
You’ll need to use this function in the next problem.
Also, you probably want to add the line textSize(24); to the setup function.
This will make the text larger (size 24) so that it’s easier to see on-screen.
Problem 4
|
Use the text(); function to add labels to each of the buttons.
Other than the labels, you program should just do the same thing it did in problem 3.
Remember to reset the fill to a dark color before drawing the words on the canvas!
|
Problem 5
|
Now, change the bottons so that they have a 50-pixel buffer from the edge of the canvas on either side.
The buttons should only be clickable when the mouse is in the colorful region.
How to accomplish this? - More if-statements!
|
Problem 6
|
Last, change the code so that whenever a button is clicked, the color becomes temporarily darker.
This can be acheived by drawing a semi-trnsparent dark triangle over the original
colorful triangle, only when the mouse is clicking on it.
|