To make the canvas size variable according to the window size. and to set the ratio.
Hello. I am Senbaku. (This memo is a reminder about canvas size.)
こんにちは。センバクです。キャンバスサイズについてのメモです。
訂正前版
👀間違っていたバージョンですが、記録のために残しておきます。後半の訂正版を見てください。
9:16の縦長比率にしたいとき。
function setup() {
let canvasHeight = windowHeight;
let canvasWidth = windowHeight * 9 / 16;
createCanvas(canvasWidth, canvasHeight);
}
function windowResized() {
let canvasHeight = windowHeight;
let canvasWidth = windowHeight * 9 / 16;
createCanvas(canvasWidth, canvasHeight);
} let canvasWidth = windowHeight * 9 / 16;の部分を変えると、好きな比率にできます。
A4の場合(1:1.414)
let canvasWidth = windowHeight / 1.414; 黄金比の場合(1:1.618)
let canvasWidth = windowHeight / 1.618;訂正版
デベロッパーツールでいろいろなデバイスでの表示のされ方を確認していた際、先日書いた上記の方法だと一部のデバイスでうまくウィンドウサイズに合わせて表示されていなかったので、解決策を調べました。concavepentagonさんという方がopenProcessingで公開されているfxhash用テンプレートが、大変参考になりました。
let canvasHeight;
let canvasWidth;
const aspect = 9 / 16;
function setupCanvas() {
canvasHeight = min(windowWidth, windowHeight * aspect) / aspect;
canvasWidth = canvasHeight * aspect;
createCanvas(canvasWidth, canvasHeight);
}
function setup() {
setupCanvas();
}
function windowResized() {
setupCanvas();
redraw();
}この書き方でかくと、しっかりどのデバイスでも狙ったアスペクト比で可変できました。