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

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

ただいまの
回答率

90.50%

  • Processing

    255questions

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

国旗を幾何変換を用いて描く

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 295

Chuchuchu

score 11

今回質問させていただくのは中国の国旗を幾何変換を用いてどのように描くことが出来るのかについてです。この国旗の左上の星部分の集まりを幾何変換で描くことが可能みたいですがやり方が思い浮かびません。一応普通に描くだけのコードは書けたのですがもう少し工夫したものを作りたいと思い質問させていただきました。(コードはアメリカ合衆国の国旗を作りましたが中国も同じような作り方で作成することはできます)

size(1900,1000);
int i,j;
background(255,255,255);
smooth();

noStroke();

fill(60,59,110);
rect(0,0,760,538.5);

fill(178,34,52);
for(i=0;i<4;i++){ //4Line
  rect(760,153.8*i,1140,76.9);
}
for(i=4;i<7;i++){ //3Line
  rect(0,153.8*i,1900,76.9);
}

fill(255); //WHITE

for(i=0;i<6;i++){
  for(j=0;j<5;j++){
beginShape();
vertex(32*cos(radians(-90))+63.3+126.6*i,32*sin(radians(-90))+53.8+107.6*j);
vertex(32*cos(radians(144-90))+63.3+126.6*i,32*sin(radians(144-90))+53.8+107.6*j);
vertex(32*cos(radians(2*144-90))+63.3+126.6*i,32*sin(radians(2*144-90))+53.8+107.6*j);
vertex(32*cos(radians(3*144-90))+63.3+126.6*i,32*sin(radians(3*144-90))+53.8+107.6*j);
vertex(32*cos(radians(4*144-90))+63.3+126.6*i,32*sin(radians(4*144-90))+53.8+107.6*j);
endShape();
  }
}

for(i=0;i<5;i++){
  for(j=0;j<4;j++){
beginShape();
vertex(32*cos(radians(-90))+126.6+126.6*i,32*sin(radians(-90))+107.6+107.6*j);
vertex(32*cos(radians(144-90))+126.6+126.6*i,32*sin(radians(144-90))+107.6+107.6*j);
vertex(32*cos(radians(2*144-90))+126.6+126.6*i,32*sin(radians(2*144-90))+107.6+107.6*j);
vertex(32*cos(radians(3*144-90))+126.6+126.6*i,32*sin(radians(3*144-90))+107.6+107.6*j);
vertex(32*cos(radians(4*144-90))+126.6+126.6*i,32*sin(radians(4*144-90))+107.6+107.6*j);
endShape();
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

単純な図形なので特に無理して幾何変換しなくてもよい気がしますが・・・

それよりもまず先に「同じことを不必要に繰り返している」点をもっとスッキリと書くとよいと思います。
一つの星を書く処理ですが、5つの頂点は非常に規則的に計算できるにもかかわらずわざわざ5行で個別に書いておられますがループにすればよいですよね?
また「星を一つ描く」という小さな単位でも「メソッド」としておくと全体がスッキリします。

// 座標(0, 0)を中心に星を一つ描く
void drawStar() {
  beginShape();
  for (int v = 0; v < 5; v++) {
    float x = 32 * cos(radians(v * 144 - 90));
    float y = 32 * sin(radians(v * 144 - 90));
    vertex(x, y);
  }
  endShape();
}

上記のメソッドを呼び出すと固定的な座標にしか星を描けないように見えます。しかしこのように単純に座標固定で表現したコードを手軽に「任意の位置、任意の回転、任意の倍率で色々描けるように」する手として座標変換機能が使えます。本件の例では「位置を任意に変える」のに次のように書けます。

// 座標(cx, cy)を中心に星を一つ描く
void drawStar(float cx, float cy) {
  pushMatrix();          // 変換マトリックスを退避する
  translate(cx, cy);     // 座標系をcx, cyだけ移動する
  beginShape();
  for (int v = 0; v < 5; v++) {
    float x = 32 * cos(radians(v * 144 - 90));
    float y = 32 * sin(radians(v * 144 - 90));
    vertex(x, y);
  }
  endShape();
  popMatrix();          // 変換マトリックスを元に戻す
}

これさえ作っておけば、星の中心座標を計算しつつこのメソッドを呼び出せばよいということになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/18 19:34

    あの・・・質問に足りなかった部分があってそれを補足するのはいいですが、内容を変更しすぎないようにお願いします。解答してみたら「タイトルが変わっていた!」なんてことが起きると「アレレ?」と思っちゃいますので。

    キャンセル

  • 2018/05/20 15:58

    失礼しました。回答ありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    星を動かしたいです!

    書いた星を動かしたいです この中に組み込みたいと思っています( ;  ; ) 全然わからなくて困っているので助けてください! void setup(){ size(80

  • 解決済

    1次元配列、オートマンセルをつかってチェルピンスキーのギャスゲットを描画したいのですが、、、

    前提・実現したいこと 1次元配列、オートマンセルをつかってチェルピンスキーのギャスゲットを描画したいのですが、、、 プログラミングの独学を始めたばっかりで全く分かりません。。。

  • 受付中

    processingで特定の点の軌跡を残したい

    processing で、 円Aの周上を動径の回転に沿って移動する点を中心とする円Bを描き、 円Bの周上を動径の回転に沿って移動する点を中心とする円Cを描き、

  • 解決済

    緯度経度から方位角を算出する式

    前提・実現したいこと 以下のサイトの計算式を使用して緯度経度から方位角と距離を計算するプログラムをpythonを用いて作成を行いました。 CASIO2地点間の距離 python

  • 解決済

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

    いつもお世話になっています。  前提・実現したいこと 表題通りです。 円柱の曲面に文字や図形を表示したいです。 テクスチャマッピングなるもので要件を満足する方法があるのです

  • 解決済

    表示に穴を開けるには。

     前提・実現したいこと 以下の図の赤丸のようにスケールバーの指定の場所をくり抜いて奥の表示を出現させるテクニック、あるいは目的の描写を周囲に被らせないように行うトリミングのテクニッ

  • 受付中

    緯度経度間の距離を求める関数のベクトル化

    下記のプログラムを処理高速化のためにベクトル化した場合の処理を教えてください。 下記の処理は2点の緯度経度の点の距離を求めるプログラムです。 def CAL_PHI(ra,rb

  • 解決済

    条件文での比較のエラー

    緑色の矩形内に赤い直線がある場合,白い線としたいと思っています そこで矩形の頂点(a,b,c,d)の4点と直線の両端(X1,X2)の座標を求め、 条件文で矩形の座標間に

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

  • Processing

    255questions

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