ワタタク今回の記事の目的はProcessingの「shapeMode()関数」を理解し、自分なりに使ってみること。
目次
【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);
【Processing】shapeMode()関数はどんな表現で使えそうか
僕はSVG形式（拡大しても画質が荒くなりにくい）画像で使うことになりそう。
【Processing】shapeMode()関数を使ってみた感想
2024年10月5日のWindows11では、SVG形式の画像を用意しにくいので、図形で記事を書きました。
SVG形式の画像を開くとMicrosoft Edgeで開かれてしまって編集とかしにくかったです。
ワタタクそれでは今日もレッツワクワクコーディング。
