Setting width/height dynamically
From Processing
| Versions: | 1.0+ |
| Contributors: | toxi, Scott Murray |
| Started: | 2006-01-31 |
Sometimes you might want your sketch to run in more than one situation (at different sizes) without having to recompile it. If you're intending to deploy your work online, you can use the param() function to retrieve the width and height settings for your applet as specified in the HTML and then pass those values to the size() function. Make sure to convert them into int values, and to give them a sensible default value if the conversion doesn't work.
Source Code
This snippet shows how to use the param() function:
void setup() { int w = int(param("width")); // int() will return 0 if param("width") doesn't exist if (w <= 0) { w = 100; } int h = int(param("height")); if (h <= 0) { h = 100; } size(w,h); } </souce> Using this approach you only need one version of the applet and can edit the dimensions via the applet's ''<param>'' tags in HTML. The example below will have the applet occupying the whole browser window. <source lang="html4strict"> <applet code="dynamicSizeDemo" archive="dynamicSizeDemo.jar" width="100%" height="100%" mayscript="true">
Support for applications
Using the unmodified param() approach from above will not work as expected if you're going to export your sketch as standalone application. This is because the param() function only works if the sketch is run inside a web browser. When running as application you can pass parameters via the command line, but these are by default not available to your sketch. Time for a hack!
/** dynamicsize taken from http://www.processinghacks.com/hacks/dynamicsize @author toxi (http://www.processinghacks.com/user/toxi) */ // this table is used to store all command line parameters // in the form: name=value static Hashtable params=new Hashtable(); // here we overwrite PApplet's main entry point (for application mode) // we're parsing all commandline arguments and copy only the relevant ones static public void main(String args[]) { String[] newArgs=new String[args.length+1]; /********************************************************* /* IMPORTANT: replace this with the name of your sketch * /*********************************************************/ newArgs[0]="DynamicSizeDemo"; for(int i=0; i<args.length; i++) { newArgs[i+1]=args[i]; if (args[i].indexOf("=")!=-1) { String[] pair=split(args[i], '='); params.put(pair[0],pair[1]); } } // pass on to PApplet entry point PApplet.main(newArgs); } // now we also overwrite the default param() function // if we're not online (i.e. running as application), the new function // will use the Hashtable to find the param String param(String id) { if (online) return super.param(id); else return (String)params.get(id); }
Adding this code to your sketch ensures an uniform behaviour of the param() function for both online and offline use. You can use the same approach of the setup() function above without any further change.
Run our hypothetical "DynamicSizeDemo" application via the commandline like this:
DynamicSizeDemo.exe width=800 height=600
Design Considerations for Live Resizing
Consider designing your visuals or interface to be easily repositioned and resizable, if desired. Position elements on-screen in relation to the width and height values instead of using absolute x/y values. Build methods into your classes for recalculating object positions, so you can call them whenever the width or height change, e.g. objectName.recalcPosition() or objectName.recalcPositionAndSize(). That makes it easy to ensure your visual elements remain where you want them to be (centered, aligned left or right, etc.) in relation to the overall window. Below is just one way you could do that.
//These values are defined at the top of your sketch. float oldWidth; float oldHeight; //At some point in setup(), *after* size() has been called, //update the values. void setup() { //... oldWidth = width; oldHeight = height; } //Now, at the top of your draw() loop, check every time to see if //width and height have changed. If so, set a flag or otherwise //trigger the repositioning of your on-screen elements. void draw() { //Check for window resize if(width != oldWidth || height != oldHeight) { //Width and/or height has changed since the last frame. //Call object methods to reposition/resize them, as desired. objectName1.recalcPositionAndSize(); objectName2.recalcPositionAndSize(); objectName3.recalcPosition(); objectName4.recalcPosition(); //Update values oldWidth = width; oldHeight = height; //Update oldHeight } //... Everything else in your draw() loop here }