質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

解決済

円柱の曲面に文字や図形を表示したい。

P5_USER
P5_USER

総合スコア73

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

1回答

0グッド

1クリップ

7945閲覧

投稿2018/02/22 01:54

いつもお世話になっています。

前提・実現したいこと

表題通りです。
円柱の曲面に文字や図形を表示したいです。

テクスチャマッピングなるもので要件を満足する方法があるのですが、
エディター内で、文字や図形の大きさを直接弄ることが出来ないので
他に良い方法がないものかと思案しております。

該当のソースコード

こちらを参考にしました。
円柱のコードですが、ここに追加する形で実現したいです。

processing

1import processing.opengl.*; 2float rad = 0; 3void setup(){ 4size(400, 400, OPENGL); 5} 6void draw(){ 7rad = rad + 1; 8noStroke(); 9directionalLight(255,255,255,1,1,-1); 10background(0); 11translate(width/2, height/2,0); 12 13pillar(150, 50 , 50); //円柱の作成(長さ,上面の半径,底面の半径) 14} 15void pillar(float length, float radius1 , float radius2){ 16 17float x,y,z; 18pushMatrix(); 19//上面の作成 20beginShape(TRIANGLE_FAN); 21y = -length / 2; 22vertex(0, y, 0); 23for(int deg = 0; deg <= 360; deg = deg + 10){ 24x = cos(radians(deg)) * radius1; 25z = sin(radians(deg)) * radius1; 26vertex(x, y, z); 27} 28endShape(); //底面の作成 29beginShape(TRIANGLE_FAN); 30y = length / 2; 31vertex(0, y, 0); 32for(int deg = 0; deg <= 360; deg = deg + 10){ 33x = cos(radians(deg)) * radius2; 34z = sin(radians(deg)) * radius2; 35vertex(x, y, z); 36} 37endShape(); 38//側面の作成 39beginShape(TRIANGLE_STRIP); 40for(int deg =0; deg <= 360; deg = deg + 5){ 41x = cos(radians(deg)) * radius1; 42y = -length / 2; 43z = sin(radians(deg)) * radius1; 44vertex(x, y, z); 45x = cos(radians(deg)) * radius2; 46y = length / 2; 47z = sin(radians(deg)) * radius2; 48vertex(x, y, z); 49} 50endShape(); 51popMatrix(); 52}

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

3Dモデルの表面に何かの画像を描画したい場合、テクスチャーマッピング以外にそれができる方法はないと思います。

エディター内で、文字や図形の大きさを直接弄ることが出来ない

これはテクスチャーにする画像を別途外部に画像ファイルとして用意しなければならないということをおっしゃっていると思います。しかしテクスチャーにする画像(PImage)は画像ファイルをロードする方法以外に、プログラムから任意のテキストや画像や図形を描画して生成することもできます。

以下に簡単な例を挙げます。テクスチャーイメージを生成するためにcreateTextureメソッドを追加しています。それ以外に元のコードを変更した部分には//***とコメントを付けておきました。

Java

1import processing.opengl.*; 2 3float rotation = 0; //*** 4PImage texture; //*** 5 6void setup() { 7 size(400, 400, OPENGL); 8 9 texture = createTexture(); //*** 10} 11 12PImage createTexture() { 13 PImage img = createImage(314, 150, RGB); 14 PGraphics g = createGraphics(img.width, img.height); 15 g.beginDraw(); 16 g.noStroke(); 17 g.fill(255); 18 g.rect(0, 0, g.width, g.height); 19 20 g.fill(255, 0, 0); 21 g.textSize(64); 22 g.text("Texture", 5, 60); 23 24 g.fill(0, 0, 255); 25 g.textSize(64); 26 g.text("mapping!", 15, 120); 27 28 g.endDraw(); 29 img.pixels = g.pixels; 30 return img; 31} 32 33void draw() { 34 rotation += 1; //*** 35 noStroke(); 36 directionalLight(255, 255, 255, 1, 1, -1); 37 background(0); 38 translate(width / 2, height / 2); 39 40 pillar(150, 50 , 50); //円柱の作成(長さ,上面の半径,底面の半径) 41} 42 43void pillar(float length, float radius1, float radius2) { 44 float x, y, z; 45 float tx, ty; //*** 46 47 //pushMatrix(); //***不要 48 49 //上面の作成 50 beginShape(TRIANGLE_FAN); 51 y = -length / 2; 52 vertex(0, y, 0); 53 for(int deg = 0; deg <= 360; deg = deg + 10){ 54 x = cos(radians(deg)) * radius1; 55 z = sin(radians(deg)) * radius1; 56 vertex(x, y, z); 57 } 58 endShape(); 59 60 //底面の作成 61 beginShape(TRIANGLE_FAN); 62 y = length / 2; 63 vertex(0, y, 0); 64 for(int deg = 0; deg <= 360; deg = deg + 10){ 65 x = cos(radians(deg)) * radius2; 66 z = sin(radians(deg)) * radius2; 67 vertex(x, y, z); 68 } 69 endShape(); 70 71 //側面の作成 72 beginShape(TRIANGLE_STRIP); 73 texture(texture); //*** 74 for(int deg =0; deg <= 360; deg += 5){ 75 float radian = radians(-deg + rotation); //*** 76 float cos = cos(radian); //*** 77 float sin = sin(radian); //*** 78 x = cos * radius1; //*** 79 y = -length / 2; 80 z = sin * radius1; //*** 81 tx = texture.width * deg / 360; //*** 82 ty = 0; //*** 83 vertex(x, y, z, tx, ty); //*** 84 x = cos * radius2; //*** 85 y = length / 2; 86 z = sin * radius2; //*** 87 ty = texture.height; //*** 88 vertex(x, y, z, tx, ty); //*** 89 } 90 endShape(); 91 92 //popMatrix(); //***不要 93}
  • pushMatrix, popMatrix

なにやら呪文のように書いてありますが、現在のコードではなんの座標変換もしていないため冗長です。

  • rad

元のコードには回転アニメーションを意図したかのようにradという変数がありますが意味のある働きをしていません。上のコードでは回転するようにrotationという変数に置き換えて実装しています。

  • 側面の回転方向

元のコードではradians(deg)でsin/cosにより座標計算していますが、そのままでテクスチャーをマッピングすると左右が逆転した画像が描画されるため角度の符号を逆にしています。

投稿2018/02/22 03:53

KSwordOfHaste

総合スコア18378

P5_USER👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

P5_USER

2018/02/22 04:29

KSwordOfHasteさん ありがとうございます。 なるほど、てっきり静的な画像しか入力できないものと思っていました。 PImageがこれを可能にしてくれるのですね。 確認なんですけれども、 1)図形も同じようにPImageで作成することで、tweakモードでも対応できる動的な画像が生成される。 2)横倒し円柱に縦書き数字(よく道路のバイトでカチカチ押しているカウンタのようなもの)の場合は、g.Text()の文字を1文字区切りで座標を指定しなければならない。 ということでしょうか。
KSwordOfHaste

2018/02/22 04:46

1)について、tweak今初めてしったのでちょっとやってみましたが、テクスチャー生成をdraw()から呼び出すなどしてフレーム描画ごとに毎回動かすようにしていればtweakモードでライブ変更できると思います。setupのように初回しか実行されない部分はtweakで変更しても画面に反映されない(なんだか当たり前?)ように見えました。 2)今回初めてPGraphics使ってみたんですが要するにウィンドウへの表示用の機能はこいつにもついている(というか同じインターフェースなのかも)感じでした。Processingの描画機能にあるものならなんでも使えると思います。縦書き文字をどう実装すべきかは自分はやったことないので調べないとわかりません。
P5_USER

2018/02/22 04:47

分かりました。 ありがとうございます!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。