Drop() function working randomly

p5.js Coding Questions
1

Hi. I’m definitely having trouble to make my drag and drop function working. The sketch below grabs the image from the user but don’t manage to save it as a p5 image every time. I’m around 33% successful drops.

Any idea for fixing this ? Or where the problem could be from ?

You can try my sketch here

var userFile;
var c = 0;
var d = 0;

function setup() {  
  
  canvas = createCanvas(windowWidth, windowHeight);

}

function gotFile(file) {
  
  var img;
  var gr;
  img = createImg(file.data).hide();
  
  if(img.width != 0){
    userFile = img;
    d++;
  }
  
  else  print("missed");
  
  c++;
  
  print(int(d/c*100)+"%");
  
}

function draw() {
  
  background(255);
  canvas.drop(gotFile);
  
  if(userFile) image(userFile,0,0,width,height);
  
}
2

Can you post the image files needed for the sketch please. I just get a blank canvas when i run the program.

3

I think you are supposed to drag an image on

4

this may help:

5

@codingking03 thanks for the tip

@colin my guess is that you need the show() method instead of hide() ?

1 Like
6

Hi @dan850 , you can drag any image on the sketch to try it
The hide function is called to prevent the image to be displayed as a new html element, you can try it to see by yourself (I replicate the method from the reference)
My goal is to store the image and then display it from the sketch itself.

1 Like
7

Hi @codingking03, I’ve been there, and replicate his method. Nice tutorial btw :relaxed:

1 Like