Thursday, November 9, 2017

mockupulator: simple rectangle drag and drop in p5.js

So random p5.js thing / tool that has a small chance of being useful for someone else: I was wanting to do simple but parsnickety layout mockups, but Acorn (my default image maniuplator) was being weird and I don't have Sketch (or much Sketch mojo) so I multitasked during the UI talk to make - it's based on memories of an old "magnetic poetry" java applet I saw, you can just drag and drop the texty bits in the middle to where you want them.

Since the ENTIRE app is just the source code of that page (plus p5.js and the images I slice and dice) it would be easy to apply it to your own sliced up mockup.

Future versions I might never get to would make it save/restore state of the blocks and maybe make up blocks based on text rather than pre-existing image slices.

To quote Douglas Adams:
I have a well-deserved reputation for being something of a gadget freak, and am rarely happier than when spending an entire day programming my computer to perform automatically a task that would otherwise take me a good ten seconds to do by hand.
Ok, more like 50 minutes to save 10 minutes, but still!

No comments:

Post a Comment