p5 gui - Canvas textbox with buttons

edited July 2017 in p5.js

So I was fiddling around with p5 (which seems fantastic, mind you) and happened to lack a proper gui implementation. I checkout out the external p5 gui, which seems to be a quicksettings wrapper. It uses html-elements, which is fine. However, I wanted to see a gui as part of the canvas itself.

After a few hours I suddenly had something that seems to work fine, despite being limited to a simple textbox with a "close dialogue" button. (and custom buttons) Not sure if this will help anyone, but I decided to post the code here.

Note: instance mode: "var gp5 = new p5(something)"

http://paste.ideaslabs.com/show/GRfE7tsC3k

Edit: Just realized: You need to call Gui.draw(); in your p5 draw function

Tagged:
Sign In or Register to comment.