プログラムを実行すると実行画面上に元画像が表示され、マウスカーソルに合わせて30°傾いた赤枠 (画面サイズの1/5) が表示される。
さらに実行画面上でクリックすると、dataフォルダに4つの画像が作られる。
コンソールに「完了」が表示されてからキーボードの0~4のキーを押すとこれらの画像が画面に表示される。
(元画像は実行画面の大きさ800x600にリサイズされる)
(クリックだけですべての画像が作成されるので、キーボードを使うのは結果確認のためだけ)
キー |
画像 |
意味 |
特徴 |
0 |
元jpg |
元画像 |
|
1 |
1選択範囲.jpg |
Processingの実行画面のスクリーンショット |
元画像にクリック時の赤枠がついたもの |
2 |
2描画機能.jpg |
Processingの描画機能で選択範囲を画面のサイズに拡大した画像 |
なめらかに拡大される |
3 |
3最近傍補間.jpg |
最近傍補間を使って選択範囲を画面のサイズに拡大した画像 |
元の1ピクセルがそのまま拡大されたような粗いドットが見える |
4 |
3双一次補間.jpg |
双一次補間を使って選択範囲を画面のサイズに拡大した画像 |
なめらかに拡大される |
完了時点でdataフォルダにあるファイル
実行例

赤枠は反時計回りに30°回転しているので、それを拡大した画像の中のものは時計回りに30°回転した状態になる。
前回の課題でも選択範囲に赤枠が表示されていた。
この赤枠を表示しているのはdraw関数の
translate(cx, cy); // 原点をカーソル位置に移動
scale(1/s); // 拡大率の逆数のスケールをかける
translate(-cx, -cy); // 枠内での中心位置移動
rect(0, 0, width, height); // 元画像サイズの長方形を描く
の部分。
普通に最後のrect関数を実行するだけだと実行画面を囲む赤枠が表示されるだけだが、translate関数とscale関数を使って位置と大きさを変更することでマウスカーソルの位置に合わせて動く1/5サイズの長方形にしていた。
これにrotate関数による回転を追加すれば、斜めの赤枠を表示させられる。
前回の最近傍補間、双一次補間による拡大では、座標変換を行うgetScaledPosition関数をnearestNeighbor関数とbilinear関数から呼び出して使っていた。
getScaledPosition関数では、座標変換ではなくPVector型の「ベクトル変数」を使った処理を行っている。
元のコード
f.sub(c); // fからcを引く
f.div(s); // fを1/s倍する
f.add(c); // fにcを加える
のコメント文にある通り、「sub」が引き算、「div」が割り算、「add」が足し算にあたる。
このgetScaledPosition関数に回転の処理を追加したい。
ベクトル f を 回転させる書式は
となる。関数名は rotate だが、座標系を回転させる関数とは全く別のもの。
角度を指定できるようにするにはgetScaledPosition、nearestNeighbor、bilinearの3つの関数で「float a」を受け取れるようにする必要がある。
締切後提出用フォーム
※ 点数はつきますが、欠席だった場合は出席にはなりません。
※ コードはTeamsのClass Notebookに保存してください。