Sizing Normalization

← All Butter documentation

Unlike in regular p5.js sketches, components in Butter give users more control of sizing: if you use createCanvas(windowWidth, windowHeight), users can resize nonuniformly in two axes; otherwise, users can only uniformly scale the component. Read the Butter createCanvas docs for more info on that.

When users have full nonuniform sizing controls, rather than making you deal with a full unconstrained range of inputs, Butter will normalize the size that users provide. Butter will scale the provided width and height such that the smallest size is 360 and automatically update the pixelDensity to accommodate.

In practice, this means:

• When users uniformly scale your component, the visuals will also uniformly scale automatically!
• You effectively only have to worry about the aspect ratio when creating a fully resizable component rather than the combination of aspect ratio and scale.
• If you want to separately control the size of the content within the box, you will need to create a field for it, e.g. scale = createSlider(...).