forループを使用して同心円の楕円を繰り返す

Question

これは私の最初の投稿です。以下のコードでは、2つの重なり合う/同心円の楕円を400x400キャンバスのランダムな場所の周りにランダムな回数（この場合は1から20を選んだ）繰り返すようにしようとしています。私はいろいろなことを試みましたが、何が起こっているのかは、同心円の楕円が散在し、色と認識できない形の混乱になります。 塗りつぶしは外側のループ内に、描画はネストされたループ内にとどまる必要があります。

noStroke(); 
 

 
var flower = function(){ 
 

 
for(var total = 5; total > 0; total--){ 
 

 
    fill(random(0,255),random(0,255), random(0,255)); 
 

 
    
 
    
 
    for(var i = 0; i < random(1,20); i++) { 
 
    
 
     
 
    ellipse(200, 200, total * 10, total * 20); 
 

 
    ellipse(200, 200, total * 20, total * 10); 
 
} 
 
} 
 
}; 
 
flower();

下記の参考のために

は、私は、whileループと使用の円でそれをやった以外同様の何かをしました。同じことが私の同心円の楕円に起こる必要があります。 whileループの割り当てと同じ手順を実行しようとしています。

var i = 0; 

var circle = function(x,y) { 
    while (i< random (1, 20)){ 
     stroke(random(0,255),random(0,255), random(0,255)); 
     strokeWeight(random(0,50)); 
     point(random(x,y), random(x,y)); 
     i++; 
} 


}; 
draw = function() { 
     circle(0,400); 
    }; 

私はこのとの緊密の種類を取得していますように感じる。..

noStroke(); 
 

 
var flower = function(x,y){ 
 

 
for(var total = 5; total > 0; total--){ 
 

 
    fill(random(0,255),random(0,255), random(0,255)); 
 

 
    
 
    
 
    for(var i = 200; i < random(205, 300); i++) { 
 
    
 
     
 
    ellipse(i + random(x,y), i + random(x,y), total * 10, total * 20); 
 

 
    ellipse(i + random(x,y), i + random(x,y), total * 20, total * 10); 
 
} 
 
} 
 
}; 
 
flower(5, 150);

この1つはもう少し近くに感じる。..ただ、一緒に同心楕円を維持する必要があります。

noStroke(); 
 

 
var flower = function(x,y){ 
 

 
for(var total = 4; total > 0; total--){ 
 

 
    fill(random(0,255),random(0,255), random(0,255)); 
 

 
    
 
    
 
    for(var i = 0; i < random(1,20); i++) { 
 
    
 
     
 
    ellipse(i + random(x,y), i + random(x,y), total * 10, total * 20); 
 

 
    ellipse(i + random(x,y), i + random(x,y), total * 20, total * 10); 
 
} 
 
} 
 
}; 
 
flower(0, 400);

Answer 1

私はあなたが求めているものを完全にはよく分かりません。毎回同じ場所に両方のサークルを描く方法を尋ねていますか？

もしそうなら、あなたは円を描くしている方法を見て：あなたは、各サークルためのランダム座標を思い付くrandom(x, y)4回の合計を呼んでいる

ellipse(i + random(x, y), i + random(x, y), total * 10, total * 20); 
    ellipse(i + random(x, y), i + random(x, y), total * 20, total * 10); 

。これにより、別の場所に描画されます。それらを同じ場所に描画したい場合は、の合計を（X位置に1回、Y位置に1回）の合計でrandom(x,y)と呼び出し、両方の円にこれらの値を使用してください。このようなもの：

var circleX = random(x, y); 
    var circleY = random(x, y); 

    ellipse(circleX, circleY, total * 10, total * 20); 
    ellipse(circleX, circleY, total * 20, total * 10); 

これがあなたの質問に答えることができない場合は、より具体的にお試しください。たぶん、最終結果を見せたいモックアップを投稿し、問題の特定の行に問題の範囲を絞って、期待通りの動作をさせないようにしてください。

Answer 2

単純な単一ループで、同心円を描画するだけで十分です。

あなたは、ランダムな楕円ではなく、同心円状になってしまう物事のカップルを行い、あなたのコードで

：

1. 円として楕円を描画するために同じ直径を使用：ellipse(i + random(x,y), i + random(x,y), total * 10, total * 20);は常に楕円途中になります。
2. 例えばコン中心（同センター）

それらを保つために楕円を描画するための同じ中心を使用：レインボー効果を得るには

function setup(){ 
 
    createCanvas(400,400); 
 
    noStroke(); 
 
    background(255); 
 

 
    
 
    var x = 200; 
 
    var y = 200; 
 
    //number of circles 
 
    var circles = 9; 
 
    //for each circle 
 
    for (var total = 0; total < circles; total++) { 
 
    //compute circle diameter based on reverse index (circles-total) (or max-current) 
 
    var diameter = (circles-total) * 30; 
 
    fill(total * 30); 
 
    //render the circle 
 
    ellipse(x,y, diameter, diameter); 
 
    
 
    } 
 
    
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>

をcolorMode()を使用してHSB（色相 - 彩度 - 明るさ）色空間に切り替えることができます。この方法では、単に色相値を上げる必要があります。あなたは、色相の数を制限することさえできます。

ここでは例えば、同心円の複数のグループを描くことができますデモ（するmouseXは、円/色相の数を変更する）

function setup(){ 
 
    createCanvas(400,400); 
 
    noStroke(); 
 
} 
 
function draw(){ 
 
    background(255); 
 
    
 
    var x = 200; 
 
    var y = 200; 
 
    //number of circles 
 
    var circles = map(mouseX,0,width,7,21); 
 
    //change the color mode to HSB (hue,saturation,brightness) - makes it easy to color rainbows, just change the hue 
 
    //reduce the hues available to how many circles we use 
 
    colorMode(HSB,circles,100,100); 
 
    //for each circle 
 
    for (var total = 0; total < circles; total++) { 
 
    //compute circle diameter based on reverse index (circles-total) (or max-current) 
 
    var diameter = (circles-total) * 30; 
 
    //change hue for each circle 
 
    fill(total,100,100); 
 
    //render the circle 
 
    ellipse(x,y, diameter, diameter); 
 
    
 
    } 
 
    
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>

です：

var circles = 10; 
 

 
function setup(){ 
 
    createCanvas(400,400); 
 
    noStroke(); 
 
    colorMode(HSB,circles,100,100); 
 
} 
 
function draw(){ 
 
    background(255); 
 
    flower(mouseX, mouseY); 
 
    flower(mouseX,height-mouseY); 
 
} 
 

 

 
var flower = function(x, y) { 
 
    for (var total = circles-1; total >= 0; total--) { 
 
    
 
    var diameter = ((20 + (total * 10)) + frameCount) % 200; 
 
    
 
    fill(total,100,100); 
 
    ellipse(x,y, diameter, diameter); 
 
    } 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>

位置を変更して円を何らかの形でグループ化したい場合は、配列を使用して過去の位置を記憶し、各円の位置を1つずつ移動することができます。これは、あなたのような効果トレイルを得るだろうが、同心円状になりますので、位置が静的になるたび円が彼らの順序を維持します：

var circles = 48; 
 
var diameterMin = 20; 
 
var diameterMax = 80; 
 
//store each circle's diameter in this array 
 
var diameter = []; 
 
//store each circle's position in this array 
 
var positions = []; 
 

 
function setup(){ 
 
    createCanvas(400,400); 
 
    noStroke(); 
 
    colorMode(HSB,circles-1,100,100); 
 
    for(var i = 0; i < circles; i++){ 
 
    diameter[i] = map(i,0,circles-1,diameterMax,diameterMin); 
 
    positions[i] = createVector(200,200); 
 
    } 
 
    
 
} 
 
function updateCircles(){ 
 
    //copy positions backwards from last to 2nd 
 
    for(var i = circles-1; i > 0; i--){ 
 
    positions[i].x = positions[i-1].x; 
 
    positions[i].y = positions[i-1].y; 
 
    } 
 
    //set the position of the first based on mouse 
 
    positions[i].x = mouseX; 
 
    positions[i].y = mouseY; 
 
} 
 
function drawCircles(){ 
 
for(var i = 0; i < circles; i++){ 
 
    fill(i,100,100); 
 
    ellipse(positions[i].x,positions[i].y,diameter[i], diameter[i]); 
 
    } 
 
} 
 
function draw(){ 
 
    background(255); 
 
    updateCircles(); 
 
    drawCircles(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>