<<< Previous Lecture ––––––– Next Lecture >>>

Hit Test & Drawing Text

How to check if the mouse is above a certain area using the if statement and the logical operator && (AND).

We also display some text on the screen. You must have the font file in a folder called data inside your sketch folder. You should use the Create Font tool to create the font file.

int rX = 200; // x coordinate
int rY = 200; // y coorinate
int rW = 50;  // width
int rH = 50;  // height
PFont font;

void setup() {
  size(640,480);
  font = loadFont("font.vlw");
  textFont(font,24);
}

void draw() {
  background(0);

  // 4 conditionals in one. All of them need to be true.
  if( mouseX >= rX && mouseX <= rX + rW && mouseY >= rY && mouseY <= rY +rH ){
    fill(255,0,0);
    rect(rX,rY,rW,rH);
    fill(0,120,0);
    text("Hello", rX, rY);
  }else{
    fill(255,255,255);
    rect(rX,rY,rW,rH);
  }  

}

Using Images

Here is the same example as above that also shows how to load images. The image that you use should also be inside the data folder.

int rX = 20; // x coordinate
int rY = 50; // y coorinate
int rW = 50; // width
int rH = 50; // height
PFont font;
PImage img;

void setup() {
size(640,480);
font = loadFont("font.vlw");
img = loadImage("picture.jpg");
textFont(font,24);
}

void draw() {
background(0);

// 4 conditionals in one. All of them need to be true.
if( mouseX >= rX && mouseX <= rX + rW && mouseY >= rY && mouseY <= rY +rH ){
fill(255,0,0);
rect(rX,rY,rW,rH);
fill(0,120,0);
text("Hello", rX, rY);
image(img, rX + rW + 5, rY, 400, 400);
}else{
fill(255,255,255);
rect(rX,rY,rW,rH);
}
text("Mouse X:" + mouseX,20,20);
}

Playing Video

In order to play video files, we need to use the built-in video library.

import processing.video.*;
Movie myMovie;
float videoSpeed = 1.0;

void setup() {
size(640,480);
myMovie = new Movie(this, "video.mov");
myMovie.loop();
myMovie.speed(1);
}

void draw() {
image(myMovie,0,0);
videoSpeed = map(mouseX, 0, width, 0, 2);
myMovie.speed(videoSpeed);
println(videoSpeed);
}

// Called every time a new frame is available to read
void movieEvent(Movie m) {
m.read();
}

Useful Links & Food For Thought

• Today’s Artist: Casey Reas (one of the creators of Processing)