正三角形を円周上で回転させたい

Processingで
size(1000,1000);
ellipse(500,500,550,550);
の円周上を回り続ける正三角形のシステムを作っています。
正三角形の向きは回転するごとに変化させたいです。棘のボールが転がっているイメージです。
translateやrotateを使ってもうまくできなかったので教えてくださると幸いです。

thkana

2021/12/05 22:49

>棘のボールが転がっているイメージちょっとしたイラストを描くなど「イメージ」を伝える手段を講じてみては。なにをしたいのかよくわかりません。 > translateやrotateを使ってもうまくできなかった解決策はやっぱりtranslateやrotateで、しかしあなたの使い方が適切でないのだと思います。あるいは「うまくできなかった」プログラムを示して、「ここの動きが気に入らない」みたいな説明をしてみると通じるかもしれません。

行動規範の内容に同意します

回答2件

ベストアンサー

公式ドキュメントに、正多角形のサンプルがあります（円に内接する正多角形として描いているようですね）
Regular Polygon / Examples / Processing.org

translateやrotateで描きたい位置に動かしますが、今どこにどういう向きになっているか把握しなければなりません。
紙に絵を描いて回してみたりすると、わかりやすいかもしれません^^

そのままってのもあれなので、サイズを半分にしました^^;

Processing
1void setup() {
2  size(500, 500);
3}
4
5void draw() {
6  background(255);
7  noFill();
8
9  translate(width / 2, height / 2); // まずはとにかく中央を0,0に
10  rotate(frameCount / 200f); // 全体を回す
11
12  circle(0, 0, 275); // 親の円
13
14  for (int i = 0; i < 6; i++) { // とりあえず6個
15    //circle(150, 0, 50 * 2); // 外接円確認用 直径100
16    polygon(150, 0, 50, 3); // 中央から見て右に三角（三角が▷向きだから）
17
18    rotate(TWO_PI / 6); // 1/6周回す
19  }
20}
21
22void polygon(float x, float y, float radius, int npoints) {
23  float angle = TWO_PI / npoints;
24  beginShape();
25  for (float a = 0; a < TWO_PI; a += angle) {
26    float sx = x + cos(a) * radius;
27    float sy = y + sin(a) * radius;
28    vertex(sx, sy);
29  }
30  endShape(CLOSE);
31}

ほかにも描画したいものがある場合は、pushMatrix()・popMatrix()を適切な場所に入れてください。

半径から辺の長さを知りたい場合。
円に内接する正多角形 - 高精度計算サイト

辺の長さから半径を決めたい場合。
正多角形の外接円 - 高精度計算サイト

投稿2021/12/05 21:46

編集2023/07/29 10:53

TN8001

総合スコア9317

takaaa55

2021/12/06 14:20

私がイメージしているそのものでした。詳しい説明も書いてくださり、ありがとうございます。また一つ、できることが増えたので、少しずつ練習していこうと思います。本当にありがとうございます。

行動規範の内容に同意します

棘のボールが転がっているイメージ

転がっているというのが良く分からないですが、こんなイメージでしょうか？

以下ソースです。

processing
1float t;
2float r;
3float SCALE = 10;
4void setup(){
5  size(1000,1000);
6  ellipse(500,500,550,550);
7  t = 0;
8  r = (550+SCALE)/2;
9  noStroke();
10}
11
12void draw() { 
13  // 円周の位置を計算（10度単位）
14  t += PI * 10 / 180;
15  float x = r * sin(t);
16  float y = r * cos(t);
17
18  // 三角形の線の太さと色を指定
19  strokeWeight(0.1);
20  stroke(255, 0, 0);
21  noFill();
22
23  // 三角形の描画に関する処理
24  translate(x+500, y+500);
25  float x1 = sin(radians(120)); //  0.866;
26  float y1 = cos(radians(120)); // -0.5;
27  float x2 = sin(radians(240)); // -0.866;
28  float y2 = cos(radians(240)); // -0.5;
29  float x3 = sin(radians(360)); //  0.0;
30  float y3 = cos(radians(360)); //  1.0;
31  // 回転
32  rotate(-t);
33  // 拡大
34  scale(SCALE);
35  // 三角形の描画
36  triangle(x1, y1, x2, y2, x3, y3);
37}