for 루프를 사용하여 동심 타원 반복

Question

서식을 엉망으로 만들 수 있으므로 여기에 처음으로 게시됩니다. 아래 코드를 사용하여 400x400 캔버스의 임의의 위치에서 2 개의 겹침/동심 타원을 임의의 횟수 (이 경우에는 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);

이 하나가 좀 더 가까이 느끼고 .. 그냥 함께 동심 타원을 유지해야합니다.

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)네 번 총을 호출하고

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 위치에 한 번, Y 위치에 한 번)의 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); 항상 타원 엉하게 될 코드에서

   당신은있는 임의 타원이 아닌 동심원을 결국 몇 가지를 않습니다.

   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>

   무지개 효과를 얻으려면 : 타원을 그릴 수 있도록

2. 그들에게 사기 중심 (동일한 중심) 예를 들어

을 유지하기 위해 같은 센터를 이용 colorMode()을 사용하여 HSB (색조 - 채도 - 밝기) 색상 공간으로 바꿀 수 있습니다. 이렇게하면 단순히 증가하는 색상 값을 사용해야합니다. 당신은 심지어 색조의 수를 제한 할 수 있습니다.

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>

: 여기

데모의

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>

당신은 예를 들어, 동심원의 여러 그룹을 그릴 수 있습니다 (mouseX는 원의 수/색상 변경)

서클을 여전히 어떻게 든 그룹화하기 위해 위치를 변경하려면 배열을 사용하여 과거 위치를 기억한 다음 각 원의 위치를 ​​하나씩 이동하십시오. 이렇게하면 효과처럼 산책로를 얻을 것입니다,하지만 동심이 될 것이다, 그래서 위치가 고정 될 때마다 원이 순서를 유지합니다 :

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>