componentResized

← All Butter documentation

Parameters

componentResized()

Normally, when you resize a Butter component, the sketch will automatically reset. This means you don't need to worry about updating any variables that are dependent on the canvas size.

However, sometimes your sketch does a lot of computation in setup (e.g. creating a grain texture or creating 3D geometry) that doesn't need to be redone when the canvas resizes. If you want to manually handle a resize, define a top-level function named componentResized, and it will get called whenever width and height change due to a resize.

let center

function setup() {
  createCanvas(windowWidth, windowHeight)
  center = createVector(width/2, height/2)
}

function componentResized() {
  center = createVector(width/2, height/2)
}

function draw() {
  clear()
  circle(center.x, center.y, 20)
}