p5.js | drop() Function
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() { // Create Canvas of given size var cvs = createCanvas(400, 300); // Set the background color background( 'red' ); // Set the text position textAlign(CENTER); // Set the font size textSize(24); // Set the text color fill( 'white' ); // Display the text on the screen text( 'Drop file from device' , width / 2, height / 2); // Function to drop the file cvs.drop(gotFile); } function gotFile(file) { // Set the background color background( 'green' ); // Display the text on the screen text( 'Received file name with extension:' , width / 2, height / 2); // Drop file with given position text(file.name, width / 2, height / 2 + 50); } |
Output:
- Before Drop a File:
- After Drop a File:
Example 2:
var img; function setup() { // Create Canvas of given size var cvs = createCanvas(600, 400); // Set the background color background( 'red' ); // Set the text position textAlign(CENTER); // Set the font size textSize(24); // Set the text color fill( 'white' ); // Display the text on the screen text( 'Drop file from device' , width / 2, height / 2); // Function to drop the file 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:
Contact Us