p5.js | drop() Function
Last Updated :
20 Aug, 2019
The drop() function is an inbuilt function which is used to register a callback function that gets called every time when a file has been dropped on the element after loading it. Every dropped file is loaded into memory and pass it as p5.File object to the callback function. When multiple files drop at the same time then it will display multiple calls to the callback function.
This function requires p5.dom library. So add the following line in the head section of the index.html file.
<script language= "javascript"
type= "text/javascript" src= "path/to/p5.dom.js" >
</script>
|
Syntax:
drop( callback, fxn )
Parameters: This function accepts two parameters as mentioned above and described below:
- callback: This parameter is used to hold the loaded file which is called for each file drop.
- fxn: This parameter is used when callback function is triggered when files are dropped with the drop event.
Below examples illustrate the drop() function in p5.js:
Example 1:
function setup() {
var cvs = createCanvas(400, 300);
background( 'red' );
textAlign(CENTER);
textSize(24);
fill( 'white' );
text( 'Drop file from device' , width / 2, height / 2);
cvs.drop(gotFile);
}
function gotFile(file) {
background( 'green' );
text( 'Received file name with extension:' , width / 2, height / 2);
text(file.name, width / 2, height / 2 + 50);
}
|
Output:
- Before Drop a File:
- After Drop a File:
Example 2:
var img;
function setup() {
var cvs = createCanvas(600, 400);
background( 'red' );
textAlign(CENTER);
textSize(24);
fill( 'white' );
text( 'Drop file from device' , width / 2, height / 2);
cvs.drop(gotFile);
}
function draw() {
if (img) {
image(img, 0, 0, width, height);
}
}
function gotFile(file) {
img = createImg(file.data).hide();
}
|
Output:
- Before Drop a File:
- After Drop a File:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...