Upload a media file is to easy to do you just have to create a variable (img) and a function preload().In the function preload()
we will load the image, by using img= loadImage()
. Then when we want to put the image somewhere we will put the variable img.
In this example, much of this code is the same as the interaction with mouse. We only add an image in the background at the screen.
var img;
var d = 100;
function setup(){
createCanvas(1250, 500);
}
function preload(){
img= loadImage('/images/image.jpg')
}
function draw(){
//clear background
background(img);
//draw face
fill('#FCD0B4');
ellipse(mouseX,mouseY,d,d);
//draw eyes
fill(0,0,255);
ellipse(mouseX-d/6,mouseY-d/7,d/5,d/5);
ellipse(mouseX+d/6,mouseY-d/7,d/5,d/5);
fill(255,0,0,100);
triangle(mouseX, mouseY-d/20, mouseX+d/12, mouseY+d/7, mouseX-d/12, mouseY+d/7);
//draw mouth
fill(255,0,0);
arc(mouseX,mouseY+d/4,d/2.5,d/4.5,0,PI,CHORD);
}