トップページに、Processingについて書いた記事を、辞書のように見つけやすくしてみました

【Processing】texture()関数の使い方【3D表現に写真を貼り付けるために使う】

5【Processing】texture()関数の使い方【3D表現に写真を貼り付けるために使う】
  • URLをコピーしました!
ワタタク

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

この記事を書いた人
  • クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
  • コンセプトは「クリエイティブコーディング1万時間の歩き方」
  • 参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

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

目次

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

texture()関数について
  • textureは英語で「質感」や「テクスチャー」を意味
  • texture()関数は、3D表現に画像を貼り付けるために使い
  • texture() 関数は、beginShape() endShape() の間、および vertex()の呼び出しの前に呼び出す必要があります。
  • textureMode()関数。画像の位置を正確に指定する関数と一緒に使用する。これを書かないと画像が表示されなかったです
  • 塗りつぶしの色は無視される
  • 色を使用する場合はtint() を使用して、シェイプに適用するテクスチャの色を指定します。

【Processing】texture()関数の主な書き方

void draw(){
beginShape();
texture(image)	
vertex(数値,数値,数値,数値);
endShape();
}

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

星の形に画像をはりつける。

size(400, 400, P3D); // ウィンドウサイズを400x400ピクセル、3Dモードに設定
background(255); // 背景を白に設定
noStroke(); // 図形の輪郭線を描画しないように設定
PImage img = loadImage("Bled lake.jpg"); // 画像を読み込む
textureMode(NORMAL); // 画像の位置を正確に指定する

beginShape();
texture(img);
vertex(200, 50, 0.5, 0); // 頂点1:星の上の頂点
vertex(240, 150, 0.6, 0.3); // 頂点2:右上の頂点
vertex(350, 150, 1, 0.3); // 頂点3:右の頂点
vertex(260, 220, 0.7, 0.6); // 頂点4:右下の頂点
vertex(300, 350, 0.8, 1); // 頂点5:下の頂点
vertex(200, 270, 0.5, 0.8); // 頂点6:中央下の頂点
vertex(100, 350, 0.2, 1); // 頂点7:左下の頂点
vertex(140, 220, 0.3, 0.6); // 頂点8:左下の頂点
vertex(50, 150, 0, 0.3); // 頂点9:左の頂点
vertex(160, 150, 0.4, 0.3); // 頂点10:左上の頂点
endShape(CLOSE); // 図形の描画を終了

【Processing】texture()関数はどんな表現で使えそうか

特定の図形や形などを用意し、画像を貼り付ける表現をするときに使う。

【Processing】texture()関数を使ってみた感想

星の形はvertex()関数をたくさん書かないといけない。

僕は画像表現をしていきたいので、基礎を終えて作品をつくるときは、texture()関数をたくさん使うことになるかもしれない。

ワタタク

それでは今日もレッツワクワクコーディング。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次