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

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

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

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

Q&A

解決済

1回答

635閲覧

扇状の描画位置指定方法について

msw

総合スコア9

Processing

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

0グッド

0クリップ

投稿2020/01/02 06:12

編集2020/01/02 07:35

前提・実現したいこと

ご指摘があった為、修正し改めて質問をさせて頂きます。
Processingで木の枝にMinimライブラリを使って大きさを変化させた円を描画させるプログラムを作っています。
円の描画位置は下図のように木の枝の先に木の実がくっ付いている様に見えるイメージを考えています。
※ペイント3Dで編集した画像の為、該当のソースコードの実行画面ではありません。
完成予想図

発生している問題・エラーメッセージ

randomを使って指定範囲内で円の描画をさせていますが、この方法では四角形になってしまい木の枝以外の場所にも円が描画されてしまう。

該当のソースコード

※該当のソースコードはMinimを抜いたサンプルプログラムです。

processing

1float x; 2float y; 3 4void setup() { 5 fullScreen(); 6 smooth(); 7 frameRate(10); 8 colorMode(HSB, 360, 100, 100, 200); 9 10 Tree(30, width/2, height, PI, width/6); //木の太さ・描画位置,PI=π 180° 11 12} 13 14void draw() { 15 x = random(650, 1250); //横 16 y = random(200, 300); //縦 17 noStroke(); 18 fill(random(255), random(255), random(255), 50); 19 ellipse(x,y,10,10); 20 21 fill(#959592); 22 rect(0, 1030, 2000, 50); 23} 24 25//木の生成 26void Tree(float strokeWeight, float x, float y, float rotate, float length) { 27 pushMatrix(); //座標を一時保存 28 translate(x, y); //座標移動 29 rotate(rotate); //座標回転 30 strokeWeight(strokeWeight); //線の輪郭線の太さ 31 stroke(#64482A); //線の色 32 line(0, 0, 0, length); //線の描画,配列の長さ 33 popMatrix(); //変更した座標を元に戻す 34 if (strokeWeight<2)return; 35 if (x%5>3 && strokeWeight<3)return; 36 Tree(strokeWeight*2/3, x-sin(rotate)*length, y+cos(rotate)*length, rotate-PI/10, length*2/3); 37 Tree(strokeWeight*2/3, x-sin(rotate)*length, y+cos(rotate)*length, rotate+PI/10, length*2/3); 38}

補足情報(FW/ツールのバージョンなど)

Processing 3.5.3

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

thkana

2020/01/02 06:34

発生している問題・エラーメッセージの欄を```で囲むのは、そこに画面上に現れたテキストをそのまま貼った時に表示が乱れないためです。現象をあなたが記述するのなら```で囲む意味はありません。今回は、そこを囲ってしまったために、マークダウン表記がそのまま表示されてしまって、質問に表示されていません(質問を投稿した後自分で見返していないのですか?)。 > 違和感が無いように木の形に合わせた位置 ではあまりに抽象的で分かりかねます。「こうしたい」というのが図で、手描きでいいのであると意図が伝わるんじゃないかと思います。 > Minimライブラリを使って大きさを変化させた円を描画させる Minimは「音」を扱うためのライブラリです。Minimによって音を解析したデータによって描画を変えるということではあるのでしょうがしかし円の描画には直接関係ありません。情報を削ぎすぎて必要なところが書いてないよりはいいんですけれど、さすがにMinimは関係ないので、余計なところを削いだ(でも動く)サンプルプログラムにしていただけませんか。
msw

2020/01/02 07:38 編集

質問を修正しました。発生している問題の欄の```を削除しましたが、画像は表示されいるでしょうか?
guest

回答1

0

ベストアンサー

とりあえず、梢の先の位置を保持して、なんとかならないか、と考えてみて

・準備
冒頭に変数を追加

Processing

1float minx, maxx; 2float miny, maxy; 3ArrayList<PVector> bow=new ArrayList<PVector>();

Tree関数を

Processing

1void Tree(float strokeWeight, float x, float y, float rotate, float length) { 2 pushMatrix(); //座標を一時保存 3 translate(x, y); //座標移動 4 rotate(rotate); //座標回転 5 strokeWeight(strokeWeight); //線の輪郭線の太さ 6 stroke(#64482A); //線の色 7 line(0, 0, 0, length); //線の描画,配列の長さ 8 popMatrix(); //変更した座標を元に戻す 9 if (strokeWeight<2 || x%5>3 && strokeWeight<3) { 10 float xx=x-sin(rotate)*length; 11 float yy=y+cos(rotate)*length; 12 if (xx<minx) { 13 minx=xx; 14 } 15 if (xx>maxx) { 16 maxx=xx; 17 } 18 if (yy<miny) { 19 miny=yy; 20 } 21 if (yy>maxy) { 22 maxy=yy; 23 } 24 PVector endp=new PVector(xx, yy); 25 bow.add(endp); 26 return; 27 } 28 Tree(strokeWeight*2/3, x-sin(rotate)*length, y+cos(rotate)*length, rotate-PI/10, length*2/3); 29 Tree(strokeWeight*2/3, x-sin(rotate)*length, y+cos(rotate)*length, rotate+PI/10, length*2/3); 30}

としてみる。その上で...

・試作1

Processing

1void draw() { 2EXIT: 3 while (true) { 4 x = random(minx, maxx); //横 5 y = random(miny, maxy); //縦 6 for (PVector p : bow) { 7 if (dist(x, y, p.x, p.y )<20) { 8 9 noStroke(); 10 fill(random(255), random(255), random(255), 50); 11 ellipse(x, y, 10, 10); 12 13 break EXIT; 14 } 15 } 16 } 17 fill(#959592); 18 rect(0, 1030, 2000, 50); 19}

おおよそ梢のあたりでランダムに生成した点がいずれかの梢の末端から距離20以内だったら描画する、としてみた。
どうでしょうね。サンプル


改善案
乱数で「ハズレだったらもう一度」方式は、現実的には大丈夫だけどリクツの上では「永遠に欲しい値が得られない」という可能性があるので、あまり気持ちよくない。
「梢の一つを乱数で選んで、そこから半径20の範囲のどこかに円を描く」に変えてみる。実用上ほぼ変わらないけれど。
それと全く質問に関係ない変更をひとつ。

Processing

1void draw() { 2 int n=(int)random(0, bow.size()); 3 float r=random(0, 20); 4 float th=random(0, PI*2); 5 x=bow.get(n).x+r*cos(th); 6 y=bow.get(n).y+r*sin(th); 7 8 noStroke(); 9 colorMode(HSB,255,255,255,100); 10 fill(random(255), 255, 255, 50);//HSBでこうした方が色が華やかになるかな 11 ellipse(x, y, 10, 10); 12 colorMode(ARGB); 13 14 fill(#959592); 15 rect(0, 1030, 2000, 50); 16}

サンプル2

投稿2020/01/02 10:00

編集2020/01/02 13:26
thkana

総合スコア7610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問