Skip to content

Instantly share code, notes, and snippets.

@lmccart
Last active November 16, 2017 15:53
Show Gist options
  • Save lmccart/c9109a9027ef5c99efa1 to your computer and use it in GitHub Desktop.
Save lmccart/c9109a9027ef5c99efa1 to your computer and use it in GitHub Desktop.
drag and drop with p5.js!

This example uses p5.js and p5.dom.js. Make sure you have version 0.2.1 or higher of p5.dom.js - you can grab it here.

You will need to run this with a local server, see this tutorial for help.

http://p5js.org

<html>
<head>
<script type="text/javascript" src="p5.js"></script>
<script type="text/javascript" src="p5.dom.js"></script>
<script type="text/javascript">
function setup() {
var c = createCanvas(400, 400);
devicePixelScaling(false);
background(0);
textSize(40);
text("drop it like it's hot", 40, 200);
c.drop(dropped, gotFile);
}
function dropped() {
background(0);
}
function gotFile(file) {
var img = createImg(file.data).hide();
image(img, 0, 0, width, height);
console.log(img)
noStroke();
for (var i=0; i<=width; i+=10) {
for (var j=0; j<=height; j+=10) {
fill(get(i, j));
ellipse(i, j, 10, 10);
}
}
stroke(0);
fill(255);
text(file.name, 20, 60);
text(file.size+' bytes', 20, 110);
}
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment