Tutorial 7

Learning Objectives:

1. Mouse controls
2. Using variables and conditions to create multiple canvas
3. Loading Images
4. Exercises

Try some sample code

Follow this Thimble link

1. Mouse Controls

Basics

You can get the numerical X and Y coordinate values of the mouse by referencing the integer system variables mouseX and mouseY . A system variable is managed by the system meaning you do not give it a value but rather read the value from the variable. As the position of the mouse changes so does it's X and Y values.

Additionally we may also want to evalute and access the boolean system variable mouseIsPressed. A boolean variable is computer terminology for a variable that only holds two values (True/False). Your mouse button only has two state, a clicked or pressed state and an unclicked or not pressed state. Thus mouseIsPressed will be true when the mouse is held/pressed and false when it is not held/pressed.

Creating Square/Rectangular Buttons

We can create our own rectangular shaped buttons by making use of inequalities and comparing it with the mouseX and mouseY values. The last thing we need to do is to actually draw the button through the use of the rect function.

  // Draw a square labeled Canvas 1
  fill(255,0,0);
  rect(10,10,90,90);
  fill(0,0,0);
  text("Canvas 1",30,50);

  // Create a layer behind the scenes that 
  // tracks if the mouse is over the square
  if (mouseX > 10 && mouseX < 100 && mouseY > 10 && mouseY < 100 && mouseIsPressed == true)
  {
      canvas = 1;
  }

Creating Circular Buttons

Similarly we can create buttons that are circular in nature as well. However rather than using a set of inequalities we make use of an old friend from mathematics, the distance formula. The distance formula calculates the distance between any two points. In this case it is our mouse tip and the center of the circle. We ask the computer to compute the distance, once the distance is sufficiently close that is within the radius of the circle then we know the mouse tip is inside the circle.

  fill(255,0,255);
  ellipse(360,55,90,90);
  fill(0,0,0);
  text("Canvas 4",330,50);


  circle1D = sqrt((mouseX - 360)*(mouseX - 360) + (mouseY - 55)*(mouseY - 55))

  if (circle1D <= 45 && mouseIsPressed == true)
  {
    canvas = 4;
  }

2. Multiple Canvasses

Previously we have already learned how to use conditional statements. Because an escape room often requires multiple perspectives or viewpoints we will need to be able to switch between that. We can create a chain if-else to target specific functions. Those different functions will then serve as different canvases. You may also want to write a general function for items which all functions need to display such as a navigation menu.

function draw()
{
  if (canvas == 1)
  {
    canvas1();
  }
  else if (canvas == 2)
  {
    canvas2();
  }
  else if (canvas == 3)
  {
    canvas3();
  }
  else
  {
    canvas1();
  }

}

function canvas1()
{
  background(255,255,255);

  paintNavigation();

  image(picture1,10,120,640,480);
}

function canvas2()
{
  background(125,125,125);

  paintNavigation();

  image(picture2,10,120,640,480);
}

function canvas3()
{
  background(0,0,0);

  paintNavigation();

  image(picture3,10,120,640,480);
}

3. Loading Images

External images may be inserted and loaded onto our screen. There are a few processes necessary to do this.

a) First load your image into a dropbox account

b) Make your image public in your dropbox account

c) Copy the link and change

"https://www.dropbox.com/s/yjmw2w1utqyjv49/image3.jpg?dl=0" to

"https://dl.dropboxusercontent/s/yjmw2w1utqyjv49/image3.jpg"

d) Create a varaible to store the picture data

e) In the preload function, load the image using the hyperlink.

f) Draw the image using the image function with reference to the image variable.

The image function can have 3 or 5 parameters.

image(imagevariable,xcoordinate,ycoordinate);
image(imagevariable,xcoordinate,ycoordinate,horizontalresize,verticalresize);

var picture1;
var picture2;
var picture3;
var circle1D;
var circle2D;
var circle3D;
var canvas;

function preload() {
  picture1 = loadImage('https://dl.dropboxusercontent.com/s/0fjvux8xprt0yb8/image1.jpg');
  picture2 = loadImage('https://dl.dropboxusercontent.com/s/esul9am99ex0p3f/image2.jpg');
  picture3 = loadImage('https://dl.dropboxusercontent.com/s/yjmw2w1utqyjv49/image3.jpg');

}


function setup()
{
  //create a drawing service 700px wide, 500px tall
  createCanvas(700,500);

}

function draw()
{
  image(picture1,10,10);
}

4. Exercises

A) Exercise A will have you create four separate canvases for the 4 exercises. Create an appropriate navigation to toggle between the 4 exercises. Use rectangular shaped buttons with appropriate labels. Isolate this navigation from your canvas using shapes and colors. I would suggest you do this vertically on the left or right hand side.

B) Exercise B will have you create a set of 7 buttons horizontally. From left to right each button should follow the colors of the rainbow. Use circular buttons for this. Your task is to create a "hover on" effect where moving the mouse over the circle will create a visual change. You may choose to modify the current button effect as follows: increase the border thickness, change the border color, change the button color to be a lighter or darker shade, increase or decrease the size of the circle.

C) Exercise C will continue from exercise B (copy and paste your previous code to Exercise C). You will now create an on click effect. Clicking each button should display a flower of that color in the same location on your screen. This means that toggling between each button will show a different flower. Have your default flower be red. You must use images for your flowers. All the flowers should be the same size. The flower should display permanently meaning even after you release from your mouse button the flower will remain there until a different button is clicked.

D) Exercise D will have you practice a mouse over effect. Create 5 rectangle buttons horizontally. Show 5 animal pictures in each of the 5 buttons. Moving your mouse over will show the name of the animal in the box rather than the picture OR if you are artistically gifted put the words on top of the picture. Additionally clicking on the button will show on the canvas (not in the buttons) specific details about the animal including (natural habitat, preferred food, average age).

E) Exercise E will have you practice more mouse over effects. Create 5 circular buttons horizontally. Each button should have an image of a different type of environment. Note: you must learn to perform a circular crop of an image or find one that is circular in nature. Rolling your mouse over each button should bring up a caption just below the buttons with the name of the environment. Clicking on each button should change the background of your canvas to that environment. Default your canvas to the left most button. For each environment, present 3 buttons to load up to 3 different animals for that environment. You may design those buttons as you wish.