Basic Interactivity with p5.js

Authored by John Kuiphoff (adapted from http://p5js.org/learn/examples/Image_Load_and_Display_Image.php)


One of the most rewarding aspects of programming is the ability to create programs that respond to things. These things might include button presses, mouse events and other types of inputs. Later in the semester we will explore lots of ways to make interactive software and will use physical sensors that manipulate objects on the screen. But for right now, let's implement a few basic components to allow users to poke and prod our sketches.

Circular Buttons

In the example below, we will implement a circular button. When the mouse is over the button, the button will change color (and the cursor will display a hand). If a user clicks the button, the background color of the sketch will change to a random color.

var backgroundColor;
var isOverCircle;

function setup() 
{
  // set canvas size
  createCanvas(400, 400);
  
  // default background color
  backgroundColor = color(255, 255, 255);
}

function draw() 
{
  background(backgroundColor);

  // get distance between mouse and circle
  var distance = dist(mouseX, mouseY, 200, 200); 
  
  // if the distance is less than the circle's radius
  if(distance < 50)
  {
    isOverCircle = true;
  } else {
    isOverCircle = false;
  }
  
  // draw a circle
  ellipseMode(CENTER);
  stroke(0);
  strokeWeight(5);
  if(isOverCircle == true)
  {
    fill(100);
    cursor(HAND);
  } else {
    fill(200); 
    cursor(ARROW); 
  }
  ellipse(200, 200, 100, 100);
  
}

function mousePressed()
{
  if(isOverCircle == true)
  {
    backgroundColor = color(random(255), random(255), random(255));
  }
}

In this example, we are keeping track of a variable called isOverButton. This is a boolean variable, meaning that it's value can be true or false. In the draw() loop, we check if the distance between the mouse and the circle's position is less than or equal to the circle's radius (which is half of the circle's diameter). If the answer is true, we know that the mouse must be inside the circle. When that happens, we set the value of isOverCircle equal to true. If the mouse is not inside the circle, we set the value of isOverCircle equal to false.

Knowing this, we can implement a rollover effect to indicate to the user that the circle is a button. We are also using the value of isOverCircle in the mousePressed() event handler to check if we should change the background color to a random color.

In the sketch below, you can see the distance between the circle and the mouse. It also indicates the value of isOverCircle.

Rectangular Buttons

Rectangular buttons are little bit more tricky than circular ones. The dist() function won't work in this case because a rectangle has corners. To figure out if the mouse is over the rectangle, we will actually need to check four questions:

If ALL four of these conditions are true, we can assume that the mouse is over the rectangle.

var backgroundColor;
var isOverRectangle;

function setup() 
{
  // set canvas size
  createCanvas(400, 400);
  
  // default background color
  backgroundColor = color(255, 255, 255);
}

function draw() 
{
  background(backgroundColor);

  // check if mouse is inside the rectangle
  // mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height
  if (mouseX >= 150 && mouseX <= 150+100 && mouseY >= 150 && mouseY <= 150+100) 
  {
    isOverRectangle = true;
  } else {
    isOverRectangle = false;
  }
  
  // draw a rectangle
  rectMode(CORNER);
  stroke(0);
  strokeWeight(5);
  if(isOverRectangle == true)
  {
    fill(100);
    cursor(HAND);
  } else {
	fill(200); 
	cursor(ARROW); 
  }
  rect(150, 150, 100, 100);
  
}

function mousePressed()
{
  if(isOverRectangle == true)
  {
    backgroundColor = color(random(255), random(255), random(255));
  }
}

This can be a little bit difficult to grasp. So, I've included three sketches below to show how this works. The first one simply checks the x-axis:

The second one checks the y-axis:

The third one checks the x-axis and the y-axis:

Implementing a Slider

One of the wonderful things about p5.js is the ability for the library to create and interact with native HTML components. In the example below, we will be creating a slider to change the size of the text on the screen.

To make this work, we will first need to make a small change to your index.html file. Open your index.html file using Sublime Text or the p5js editor and uncomment the following line:

<!--<script src="libraries/p5.dom.js" type="text/javascript"></script>-->

How do we uncomment the line, you ask? Simply remove the <!-- from the beginning and the --> from the end. It should look like this:

<script src="libraries/p5.dom.js" type="text/javascript"></script>

Save you index.html file. By uncommenting out this Javascript file, your page will now include the p5.dom.js library. This library allows p5.js to interface directly with native HTML elements, including: text, hyperlinks, images, inputs, video, audio, and a webcam.

In this example, we will scratch the surface of what this library is capable of doing. Again, we will be creating a slider that controls the size of the text.

Open your sketch.js file and type in the following code:

var textSizeSlider;

function setup() {
  createCanvas(400, 400);

  // create a slider (min, max, default value)
  textSizeSlider = createSlider(10, 72, 36);
  textSizeSlider.position(25, 25);
}

function draw() 
{
  background(255);
  
  // display text
  noStroke();
  fill(100);
  textAlign(CENTER);
  textFont("Georgia");
  textSize(textSizeSlider.value()); 
  text("Size: " + textSizeSlider.value(), width/2, height/2); 
}

Hey, wait a minute. You probably wondering what all those text() functions mean. Here is a list of a few functions that you can use to manipulate text:

Now back to the slider. The first thing that we needed to do was to a global variable for the slider:

var textSizeSlider;

Then, in the setup() function, we created a slider and positioned it onto the screen:

// create a slider (min, max, default value)
textSizeSlider = createSlider(10, 72, 36);
textSizeSlider.position(25, 25);

To obtain the value in the slider, you can refer to: textSizeSlider.value()

Implementing an HTML Button

var textColorButton;

var textColor;

function setup() {
  createCanvas(400, 400);

  // default text color
  textColor = color(0, 0, 0);

  // create clear button
  textColorButton = createButton('Change Color');
  textColorButton.position(25, 25);
  textColorButton.mousePressed(changeColor); 
}

function draw() 
{
  background(255);
  
  // display text
  noStroke();
  fill(textColor);
  textAlign(CENTER);
  textFont("Georgia");
  textSize(72); 
  text("Color", width/2, height/2); 
}

function changeColor()
{
  textColor = color(random(255), random(255), random(255));
}
comments powered by Disqus