p5.jsでのウィンドウリサイズで描画を保持する方法

Question

p5.jsでブラウザのウィンドウサイズを変更させたとき、Canvasのサイズをそれに合わせるためにはresizeCanvas()を使うと思いますが、リサイズと同時にそれまでの描画がリセットされてしまいます。

キャンバスサイズを可変にし、かつ描画を保持できるような方法はないでしょうか。

Answer 1

「保持する」というのを、
サイズを変える前の画を保存して、サイズを変えたあと保存した画を描く
とするならば

var redraw=false;
var bg=0;
var img;

function setup() {
  createCanvas(200, 200);
  background(bg);
  ellipse(width/2, height/2, width/3, height/3);
}

function draw() {
  if (redraw==true) { 
    background(bg);
    image(img, 0, 0);
    redraw=false;
  }
}

function mousePressed() {
  bg=204;
  redraw=true;
  img=get();
  resizeCanvas(300, 300);
}

ってなことは出来ますが。

Comments

[Bokoko33]

ご回答ありがとうございます。
なるほど、確かに画面を画像として保存するという手段がありましたね。
get()でイメージとして保存できることは知らなかったので参考にさせていただきます。ありがとうございます。