【Processing】shapeMode()関数の使い方【図形や画像をどのように表示させるか】

2024年10月5日

URLをコピーしました！

ワタタク

今回の記事の目的はProcessingの「shapeMode()関数」を理解し、自分なりに使ってみること。

記事内のProcessingのバージョンは4.3。

【Processing】shapeMode()関数について

shapeMode()関数について

shapeMode()関数は、あらかじめ作成している図形や画像（SVG）をどのように表示させます
- あらかじめ作成していない図形も表示させることができる
3つの書き方がある（詳しい書き方は後述）
- shapeMode(CORNER);
  - 左上の角を基準にして描く
- shapeMode(CORNERS);
  - 図形や画像の対角線上の2つの角を基準にして描くことができます
  - shapeMode(CENTER);
    - 真ん中を基準にして描く
    - 図形を中心点から描画し、shape()関数の3番目と4番目のパラメータを幅と高さとして指定
主にPShape、loadShape()関数、shape()関数と一緒に使う

【Processing】shapeMode()関数の使い方3つ【画像とコード】

shapeMode(CORNER);
shapeMode(CORNERS);
shapeMode(CENTER);

の順で3つを載せています。

1 shapeMode(CORNER);

// 画面の大きさを横400ピクセル、縦400ピクセルにするよ
size(400, 400);
// 背景を白色にする
background(255);
// 図形の左上の角を基準にして描く
shapeMode(CORNER);
// 左上の角が(100, 100)の位置に、幅100ピクセル、高さ100ピクセルの四角形を描く
rect(100, 100, 100, 100);

2 shapeMode(CORNERS);

// 画面の大きさを横400ピクセル、縦400ピクセルにするよ
size(400, 400);
// 背景を白色に
background(255);
// 図形の2つの角を基準にして描く
shapeMode(CORNERS);
// 左上の角が(100, 100)の位置に、右下の角が(200, 250)の位置にある長方形を描く
rect(100, 100, 200, 250);

3 shapeMode(CENTER);

// 画面の大きさを横400ピクセル、縦400ピクセルにする
size(400, 400);
// 背景を白色にする
background(255);
// 図形の中心を基準にして描く
shapeMode(CENTER);
// 中心が(200, 200)の位置に、幅200ピクセル、高さ200ピクセルの四角形を描く
rect(200, 200, 200, 200);