P5JS INTERACTIVITY

In the basic introduction you can learn the programming syntax. However, to make interesting things with code one need to think in terms of combining the different programming components into basic structures. These structures are called patterns. Programming patterns differ depending on what kind of programming one is doing. When working with interaction design there is a set of commonly known strategies for making interactive elements. In the following we will walk you through the different common strategies.

Programming PONG

Core_programming_session_one.mov



In this video I go through the core concepts of programming with P5.JS by programming a simple pong game.

The video is a bit fast paced, so do make sure to pause and scroll back and forth.

Also, it may be helpful to start with some of the more simple videos below.

SIMPLE INTERACTIVE EXEAMPLES

We are creating a repository of examples for you to play with. Please have a look at them to start off with, they can be found here. We will extend it during the course as we find out what is interesting for you to play with.

ADVANCED interactive Examples

We are creating a repository of examples for you to play with.

Interactive pattern cheat sheet

The secret trick to mastering programming is to recognize the patterns that makes up structures for common solutions to problems. In the following we have collected the most common patterns that everry interaction design programmer needs to know to create basic interactions.

We have tried to make the examples as generic as possible. Although there are only examples from one platform, it should be relatively simple to convert it to the other. Be aware that the main method in Processing is called draw(), where in Arduino it is called loop(). Simply change the words depending on the platform used.

function draw() {
  var btnPressed = mouseIsPressed;
  if (btnPressed == true) {
    print("Button is down");
  } else {
    print("Button is up");
  }
}

Doing something while a button is pressed

To change something while a button is pressed. The code looks like this.

var btnPressedOld = false;

function draw() {
  var btnPressed = mouseIsPressed;

  if (btnPressed == false && btnPressedOld == true) {
    print("Button has been clicked");

  }
  btnPressedOld = btnPressed;
}

Detecting a push button event

The above example only works for doing something WHILE the button is pressed, and it is not the same as an event. An event is when something changes from one state to another; e.g. you want something to happen when the button is released => going from a pressed state to a not pressed state. This requires us to "remember" the old state an compare it to detect the change.

var btnPressedOld = false;
var toggle = false;

function draw() {
  var btnPressed = mouseIsPressed;
  if (btnPressed == true && btnPressedOld == false) {
    // button has been pressed.
    toggle = !toggle;

  }
  btnPressedOld = btnPressed;

  if (toggle == true) {
    background(0, 255, 0);
    // the butten has been toggled on.
  } else {
    background(0);
  }
}

Make a toggle button

Toggling with a pushbutton is a common solution to turning things on an off. This is one way to do it.

var btnPressedOld = false;
var timer = 0;


function draw() {
  // do something every two seconds
  if (millis() - timer > 2000) {
    timer = millis();
    print("tick");
    //do something here
  }
}

Make an interval timer

To make something happen every x miliseconds. This pattern is a generic solution.

var timeWhenPressed = 0;
var oldMouseState = 0;
var timerActive = false;

function draw() {
  if (mouseIsPressed == true) {
    timeWhenPressed = millis();
    timerActive = true;
  }

  if (millis() - timeWhenPressed > 2000 && timerActive == true) {
    // do something two seconds later
    timerActive = false;
    print("Two seconds later");
  }
}

Timing an event

To time an event; e.g. you want something to happen two seconds after the button is pressed. To do so you need to register the time the button was pressed and look for when the two seconds has passed from then.

var btnPressedOld = false;

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

function draw() {
  background(100);
  if (mouseX > 100 && mouseX < 200 && mouseY > 100 && mouseY < 200 && mouseIsPressed) {
    if (btnPressedOld == false) {
      /// Code in here will only run once, when the mouse has clicked within a 100x100 square positioned at 100,100.
      print("pressed");
    }
    btnPressedOld = true;
    fill(0, 255, 0);
  } else {
    btnPressedOld = false;
    fill(0,255, 255);
  }
  rect(100,100,100,100);
}

Detect a mouse click within a square

In Processing you sometimes need to design your own button interaction. To do this, we need to define the active area of the mouse pointer. Here is a simple pattern to solve this problem:

var value = 0;
var speed = 2;
var direction = 1;

function draw() {
  value = value + direction * speed;
  if (value > 255 || value < 0) {
    direction = direction * -1;
  }
  background(value);
}

Fade in and fade out

To make something fade in and fade out you need to created a counter and add/subtract from it over time.

var currentState = 0;
var btnPressedOld = 0;

function draw() {


  if (mouseIsPressed == false && btnPressedOld == true) {
    currentState = currentState + 1;
    if (currentState > 2) {
      currentState = 0;
    }
  }
  btnPressedOld = mouseIsPressed;

  if (currentState == 0) {
    background(0);

  } else if (currentState == 1) {
    background(0, 255, 0);


  } else if (currentState == 2) {

    background(0, 255, 255);

  }
}

Creating a state machine

As the complexity of your code grows you will need to have multiple states where different lines of code should happpen:

var buttonPushedTime = 0;
var lastButtonState = false;

function draw() {
  background(120);
  if (mouseIsPressed && !lastButtonState) {
    buttonPushedTime = millis();
  }


  if (mouseIsPressed && millis() - buttonPushedTime > 3000) {
    print("button has been pressed for 3 seconds");
  }

  lastButtonState = mouseIsPressed;
}

Detecting a long press

Check if a button has been pressed for a particular minimum time (in this example 3 seconds). This can provide safety (e.g. for a reset button, check that someone actually means it, not just touched the button by accident) and provides implicit debouncing of a glitchy signal.