Использование цикла for для повторения концентрических эллипсов

Question

Это моя первая публикация здесь, нести меня, поскольку я могу испортить форматирование. С помощью приведенного ниже кода я пытаюсь повторить случайное число 2 перекрывающихся/концентрических эллипсов (в этом случае я выбрал от 1 до 20) вокруг случайных мест на холсте 400x400. Я пробовал много разных вещей, но то, что продолжает происходить, концентрические эллипсы становятся разбросанными, и это становится беспорядком цветных и неузнаваемых форм. Заполнение должно оставаться внутри внешнего цикла и чертежа внутри вложенной петли.

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.

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

Я не совсем уверен, что вы просите. Вы спрашиваете, как рисовать оба круга в одном и том же месте каждый раз?

Если да, то посмотрите на то, как вы рисуете ваши круги:

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); 

Вы звоните random(x, y) в общей сложности четыре раза придумать со случайными координатами для каждого круга. Это заставит их рисоваться в разных местах. Если вы хотите нарисовать их в одном и том же месте, вы должны только позвонить random(x,y) в общей сложности два раза (один раз для позиции 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. использовать один и тот же центр для рисовать эллипсы, чтобы держать их против Centric (тот же центр)

Например:

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() для swith до цветового пространства 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>

Если вы хотите поменять позиции, чтобы круги все еще были сгруппированы, вы можете использовать массив для запоминания прошлых позиций, а затем сдвинуть положение каждого круга на единицу. Это получит вам следы, как эффект, но круги будут поддерживать порядок их так будут концентрическими, когда позиция становится статичной:

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>