p5: Images

You can load image and audio files in p5.

The files are loaded by the sketch so don’t forget to copy them wherever you want to use your filed.

Find an image and put it in the a folder called “assets” inside your project folder

You can find the image used below here and upload yours

Loading an image can take some times so it’s good practice to load the image inside a function called preload:


//1- Declare variable for your image
var img;
var cloud;

//2- Preload the image (replace the name and path with your own)
// preload() runs once before setup
function preload() {
img = loadImage("assets/asterisk.png");
cloud = loadImage("assets/cloud.png");
}

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

function draw() {
//3- Displays the image at its actual size at point (0,0)
image(img, 0, 0);

//You can also resize the image
// Displays the image at point (0, height/2) at half size
//image(img, 0, height/2, img.width/2, img.height/2);

//and do everything you normally do with primitives

}

(Quick how to add an alpha channel in photoshop)

Create a scene with a background and an object following the mouse.

Tint filter
Try to call the function tint before displaying the image:


tint(0, 153, 204); // Tint blue r,g,b,a (add one parameter for alpha)
image(img, 0, 0);
noTint();
image(img, 50, 0);

Transformations
Transformations can be applied to images as well:


//change to center to facilitate rotation
imageMode(CENTER);

push();
translate(150, 150);
rotate(radians(45));
image(img, 0, 0, 200, 200);
pop();