Visuals in P5

Today we looked into displaying and manipulating images, and mouse and keyboard input.

Images
To add the images to the project you need to pop out the file tree. It’s a small “>” just under the play button in the editor. Once you see the files you can see the header “Sketch files” and next to it is an arrow pointing down. If you click on it you’ll get three choices. One of them is “Upload file”. Once you click on it a small window will open where you can drag files to add to the project.

The minimum to show an image:

let myPictureVar; 
//Creating a variable to contain the image
 
function preload()
{
  myPictureVar = loadImage('laDefense.jpg'); 
  //storing the image in the variable
}
 
function setup()
{
  image(myPictureVar,0,0); 
 //drawing the image from our variable at coordinate 0 and 0
}

The command “image()” that we use to place a picture can also be used to resize the picture if you give it height and width.

Why are we using a function called “preload”? Preload is a function that will run before even setup, and makes sure that it is done before setup gets started. This is useful if we’re working with bigger files, since they might not be fully in the computer’s memory when we run the program.

We also used the command “tint()” to change brightness, color and transparency of the image, and “filter()” to add filters such as GRAY, THRESHOLD, INVERT, BLUR etc.

Text
Drawing text on the screen works in a very similar way with the basic command text(). If you want to use any other font than P5s’ own, you need to upload a font-file to your project. Uploading it works the same way as with an image. Here’s a basic example of text, using a font I uploaded:

let someText;
let awesomeFont;

function preload()
{
  awesomeFont = loadFont("Incubus-30.vlw");
} 

void setup()
{
  createCanvas(640,480);
  someText = "Bring me to your leader!";
  textFont(awesomeFont);
  textSize(30);
 }

 
void draw()
{
   text(someText,50,240);
}

Webcam
Here’s the example code for getting a feed from your webcam. Each frame from that feed can then be manipulated as if it was an image like any other. Note the handy print-out letting you know what modes your camera has and is available to you.

let cam;

function setup() {
  createCanvas(810, 500);
  cam = createCapture(VIDEO);
   cam.size(810, 500);
  cam.hide();
}

function draw() {
  background(220);
  scale(-1,1); // This scale and the below negative X-coordinate
  image(cam,-810,0); //is there to mirror the camfeed.
}

Input
We looked at using the mouse and keyboard for input. For example when a key is pressed it will trigger a function called “keyPressed” if you’ve written it. You write this part completely outside of setup and draw. Within there you can get the value of the key pressed and either use that or just trigger something else.

The minimum:

function keyPressed()
{
  //here something would happen if any key is pressed
  if (key == 'd')
  {
    //here something would happen if the key pressed is 'd' 
  }
}

OR check keypressed, while inside draw()

if (keyPressed == true) 
{
    //code for stuff to happen
}

But for buttons that are not characters? Those keys are CODED, and you have to check for in a variable called keyCode. This is how you use the arrow key UP:

function keyPressed()
{
    if (keyCode == UP_ARROW)
    {
      //here something happens if UP is pressed.
    }
}    

What other CODED keys are there? Look in the reference for “keyCode”.

We also listed a bunch of other input-functions that work very similar:

keyReleased()
keyTyped()
 
mouseClicked()
mouseDragged()
mouseMoved()
mousePressed()
mouseReleased()
mouseWheel()

The small difference is of course found in the reference.