2016-05-07 39 views
1

私は楕円を脈動させる点を作成するために分割されているサイズの大きな円の配列を再作成しようとしています。私は、各円を点数で分割し、楕円を描く方法を知っています。そして、私は一連の同心円を作る方法を知っていますが、私はそれらをまとめることのために私の心を包んでいるようには見えません。私が行うとき、私はこのようになり、結果を受け取る。..楕円の同心円リング

Circle Overlap

個々の楕円は、元の楕円からの距離の増加に楕円の数を加算しているので、この結果は起こっています。それにもかかわらず、一連のサークルを複数のポイントで区切って楕円を作成するという元の問題を解決する方法がわかりません。

ありがとうございました。

円の円を描く
Blackhole b; 

void setup() { 
    size(750, 500); 
    smooth(); 
    b = new Blackhole(); 
} 

void draw() { 
    b.divide(); 
    b.display(); 

} 

class Blackhole { 
    PVector location; 
    PVector velocity; 
    PVector acceleration; 
    PVector center; 
    float speed = 0; 

    int [] eSize = {0, 25, 50, 75, 100, 125, 150, 175}; 
    float radius = 100; 
    int numPoints = 16; 
    float angle = TWO_PI/(float)numPoints; 
    float [] [] xyArray; 

    Blackhole() { 
    location = new PVector(width/2, height/2); 
    velocity = new PVector(0, 0); 
    acceleration = new PVector(.0, 0); 
    } 

    void divide() { 
    xyArray = new float [numPoints][3]; 
    for (int i=0; i<numPoints; i++) { 
     float x = radius*sin(angle*i)+width/2; 
     float y = radius*cos(angle*i)+height/2; 
     xyArray[i][0] = x; 
     xyArray[i][1] = y; 
    } 
    } 



    void display() { 
    background(#202020); 


    speed = speed + 0.05; 
    float pulse = noise(speed); 
    pulse = map(pulse, 0, 1, 150, 175); 

    noFill(); 
    stroke(255, 100); 
    for (int j = 0; j < eSize.length; j++) { 
     for (int i = 0; i < numPoints; i++) { 
     float x = xyArray[i][0]; 
     float y = xyArray[i][1]; 
     ellipse(width/2, height/2, pulse + eSize[j], pulse + eSize[j]); 
     ellipse(x, y, 5, 5); 
     } 
    } 
    } 
} 

答えて

1

が複雑化してはならないとあなたはすでにどのようにシステムの座標変換をデカルトの極性に理解しています。これがうまくいくような単純な 何か:あなたの値を使用すると、次のようになり

/* 
    draws a large circle with each vertex drawn as a smaller circle 
    sides = circle detail, the more sides, the more detaild the circle will be 
    largeRadius = large circle radius 
    smallRadius = radius of each small circle 
*/ 
void circleOfCircles(int sides,float largeRadius, float smallRadius){ 
    float angleIncrement = TWO_PI/sides; 
    for(int i = 0 ; i < sides; i++){ 
    float x = cos(angleIncrement * i) * largeRadius; 
    float y = sin(angleIncrement * i) * largeRadius; 
    ellipse(x,y,smallRadius,smallRadius); 
    } 
} 

float speed = 0; 
int [] eSize = {0, 25, 50, 75, 100, 125, 150, 175}; 
float radius = 100; 
int numPoints = 16; 


void setup(){ 
    size(750,500); 
    smooth(); 
} 
void draw(){ 
    background(#202020); 
    translate(width * 0.5, height * 0.5); 

    speed = speed + 0.05; 
    float pulse = noise(speed); 
    pulse = map(pulse, 0.0, 1.0, 150, 175); 

    noFill(); 
    stroke(255, 100); 
    for (int j = 0; j < eSize.length; j++) { 
    circleOfCircles(numPoints,pulse + eSize[j], 5); 
    } 
} 
/* 
    draws a large circle with each vertex drawn as a smaller circle 
    sides = circle detail, the more sides, the more detaild the circle will be 
    largeRadius = large circle radius 
    smallRadius = radius of each small circle 
*/ 
void circleOfCircles(int sides,float largeRadius, float smallRadius){ 
    float angleIncrement = TWO_PI/sides; 
    for(int i = 0 ; i < sides; i++){ 
    float x = cos(angleIncrement * i) * largeRadius; 
    float y = sin(angleIncrement * i) * largeRadius; 
    ellipse(x,y,smallRadius,smallRadius); 
    } 
} 

デカルト変換に極性が混乱している場合は、次のことができ、単にisolate transformations using pushMatrix() and popMatrix()

一般的には、できるだけシンプルにすることをお勧めします。 あなたはクラスを使用しています。機能をカプセル化することは良いことです。 これにより、将来他のスケッチに簡単に接続することができます。これらのいくつかは、コンストラクタで初期化が、再び使用されることはありません

PVector location; 
    PVector velocity; 
    PVector acceleration; 
    PVector center; 

しかし、私はあなたのクラスのいくつかの未使用の変数があります。

円の円を描く上での主な問題は、divide()xyArrayです。 divide()では、半径が1つの円の周りの点を計算していますが、display()ではさまざまな半径を使用するように見えます。 xyArrayを使用して2回ループする必要がなくなったdivide()機能を削除しました(位置を設定してから読み込むために1回)。 radiusの代わりにpulseRadiusが使用されており、pulseeSizeが考慮されます。ここで

は、あなたがやろうとしていたものはおそらくあるradiusを使用してコードの簡易版ですが、またpulseeSize

Blackhole b; 

void setup() { 
    size(750, 500); 
    smooth(); 
    b = new Blackhole(); 
} 

void draw() { 
    background(#202020); 
    b.display(); 
} 

class Blackhole { 
    float speed = 0; 

    int [] eSize = {0, 25, 50, 75, 100, 125, 150, 175}; 
    float radius = 100; 
    int numPoints = 16; 
    float angle = TWO_PI/(float)numPoints; 

    Blackhole() { 

    } 

    void display() { 

    speed = speed + 0.05; 
    float pulse = noise(speed); 
    pulse = map(pulse, 0, 1, 150, 175); 

    noFill(); 
    stroke(255, 100); 
    for (int j = 0; j < eSize.length; j++) { 
     for (int i = 0; i < numPoints; i++) { 

     float pulseRadius = radius + pulse + eSize[j]; 
     float x = pulseRadius * sin(angle*i)+width/2; 
     float y = pulseRadius * cos(angle*i)+height/2; 
     ellipse(x, y, 5, 5); 
     } 
    } 
    } 
} 

探査、hereはコードのJavaScriptのデモであるように関数とサイン呼び出しを使用して大きな円と2つの半径の点の数を変えます。

int numPoints = 16; 


void setup(){ 
    size(750,500); 
    smooth(); 
    noFill(); 
} 
void draw(){ 
    background(#202020); 
    translate(width * 0.5, height * 0.5); 

    for(int i = 0 ; i < numPoints; i++){ 
    stroke(255, (i+1) * 10); 
    circleOfCircles((int)map(sin(frameCount * .001 + i),-1.0,1.0,12 , 64),//number of sides 
         map(sin(frameCount * .010 + i),-1.0,1.0,100,225),//large radius 
         map(sin(frameCount * .100 + i),-1.0,1.0, 1, 30));//small radius 
    } 
} 
/* 
    draws a large circle with each vertex drawn as a smaller circle 
    sides = circle detail, the more sides, the more detaild the circle will be 
    largeRadius = large circle radius 
    smallRadius = radius of each small circle 
*/ 
void circleOfCircles(int sides,float largeRadius, float smallRadius){ 
    float angleIncrement = TWO_PI/sides; 
    for(int i = 0 ; i < sides; i++){ 
    pushMatrix(); 
     rotate(angleIncrement * i); 
     translate(largeRadius,0); 
     ellipse(0,0,smallRadius,smallRadius); 
    popMatrix(); 
    } 
} 

circles animation preview

お楽しみに!

+0

大変ありがとうございました。 –

+0

助けてくれてありがとうと嬉しいです。自由に投票することも自由です;)それは楽しい探索でした。 [この色のバージョン](http://lifesine.eu/so/CirclesOfCirclesFilled/)を調べてみました(パラメータを変更するにはmouseXとmouseYをドラッグします)。私はあなたが思いつくクレイジーパターンを見たいと思っています:) –