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.
Last active
November 16, 2017 15:53
-
-
Save lmccart/c9109a9027ef5c99efa1 to your computer and use it in GitHub Desktop.
drag and drop with p5.js!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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