Event called when canvas is resized

Processing
6

hi,
i try to compare processing and p5.js
and not see a problem,
processing resize window resize window and canvas
p5.js has the need of the event function.

// https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643

int mywidth=500, myheight=400;

void settings() {
  //  fullScreen();
  size(mywidth, myheight);
}


void setup() {
  //  size(400, 400);
  surface.setResizable(true);
  surface.setTitle("myTitle");
}

void draw() {
  background(200, 0, 0);
  draw_obj();
  if ( check_window() ) {
    println(" window changed to w: "+width+" h: "+height);
    mywidth = width;
    myheight = height;
  }
}

boolean check_window() {
  boolean changed = false;
  if ( mywidth != width )   changed = true;
  if ( myheight != height ) changed = true;
  return changed;
}


void draw_obj(){
  translate(width / 2, height / 2);
  fill(0,0,200);
  ellipse(0,     0,        80,          50);
  fill(200,200,0);
  ellipse(50,   50, width / 5, height / 10);  // test where object size depends on windows
}

like
https://editor.p5js.org/kll/sketches/SkZFY5Qg4

// https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643

function setup() {
//  createCanvas(windowWidth, windowHeight);
  createCanvas(200,200);
}

function draw() {
  background(200, 0, 0);
  draw_obj();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // disable that for test
  print(" windowinfo width: " + width + " height: " + height + " windowWidth " + windowWidth + " windowHeight " + windowHeight);
}

function draw_obj(){
  translate(width / 2, height / 2);
  fill(0,0,200);
  ellipse(0,     0,        80,          50);
  fill(200,200,0);
  ellipse(50,   50, width / 5, height / 10);  // test where object size depends on windows
}

but i see possible conflicts about:
p5.js window resize or browser zoom

add, anyhow for resizable sketches must plan
carefully if want use objects what size depends on
that settings, so i make a example with

  • a fix radius and
  • a window dependable radius
1 Like