【Processing】textureWrap()の使い方【テクスチャ（画像や模様）がどうなるかを決めるための関数】

2024年11月20日2025年12月17日

URLをコピーしました！

ワタタク

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

この記事を書いた人

クリエイティブコーダー Watataku のプロフィール写真 — ワタタク(Watataku)

上達の研究家 / アーティスト

「才能」ではなく「発見」で描く。文系・36歳からの上達ハック。

ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
  - KITTE大阪の18メートルあるAxCROSS大型スクリーン
  - 虎ノ門ヒルズステーションタワーB2F TOKYO NODE エントランスサイネージで展示
  - UN:O（東京大手町）にある会員限定のサテライトオフィスにて2作品常設展示
- 開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示
【上達の秘密】
- 起源の物語：未経験から虎ノ門ヒルズ展示までの全記録（Genesis）
- 思考の技術：「上達」をシステム化する、モレスキン6冊の運用設計図
  - ※虎ノ門ヒルズでの実績を出した「思考」と「経験」を、再現可能な形に体系化

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

【Processing】textureWrap()について

textureWrap()について

「Texture Wrap」は、日本語で「テクスチャの包み方」という意味
textureWrap()は、テクスチャ（画像や模様）の端っこがどうなるかを決めるための関数
- テクスチャの包み方の設定を変えることで、画像が繰り返されたり、端で止まったりする
  - ゲームの背景を作ったり、パターンが続くように見せたいときに便利です。例えば、レンガの壁を描いたり、無限に広がる海を作ったりすることができるみたい
【注意点】適切なテクスチャのサイズや繰り返し方法を選ばないと、画像がうまく表示されなかったり、不自然に見えたりすることです

【Processing】textureWrap()の使い方【画像とコード】

保留問題とする。

すぐ先のコードを入力すると以下の画像が点滅するような効果になった。

画像をリサイズできない、sizeも800,800で書いているが、400,400のサイズになっている。

PImage img;

void setup() {
  size(800, 800, P3D); // ウィンドウのサイズを800x800に設定
  img = loadImage("deer.jpg"); // 画像を読み込む
  img.resize(800, 800); // 画像を800x800にリサイズ
  textureWrap(REPEAT); // 画像を繰り返し表示する設定
  
  beginShape();
  texture(img);
  vertex(0, 0, 0, 0);
  vertex(width, 0, 1, 0);
  vertex(width, height, 1, 1);
  vertex(0, height, 0, 1);
  endShape(CLOSE);
}

Copy

PImage img;

void setup() {
  size(800, 800, P3D); // ウィンドウのサイズを800x800に設定
  img = loadImage("deer.jpg"); // 画像を読み込む
  img.resize(800, 800); // 画像を800x800にリサイズ
  textureWrap(REPEAT); // 画像を繰り返し表示する設定
  
  beginShape();
  texture(img);
  vertex(0, 0, 0, 0);
  vertex(width, 0, 1, 0);
  vertex(width, height, 1, 1);
  vertex(0, height, 0, 1);
  endShape(CLOSE);
}