使用for循环重复同心椭圆

Question

这是我第一次在这里发帖，请耐心等待，因为我可能会搞乱格式化。使用下面的代码，我试图让2个重叠/同心椭圆在400x400画布上的随机位置周围重复一次随机次数（在本例中我选择了1到20）。我尝试了很多不同的东西，但是一直发生的事情是同心椭圆变得分散，它变成了混乱的颜色和无法辨认的形状。 填充必须保持在外部循环和嵌套循环内的绘图中。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

下面的参考，我做了类似的事情，除了我用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);
    };

我觉得我对此很感兴趣。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 这个感觉更接近..只需要将同心椭圆保持在一起。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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. 使用相同的中心绘制椭圆以保持 con 为中心（同一中心）

例如：

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>

如果你想改变位置以保持圆圈仍以某种方式分组，你可以使用数组来记住过去的位置然后将每个圆圈的位置移动一个。这样可以获得类似效果的路径，但是圆圈将保持其顺序，因此只要位置变为静态，它就会变得同心：

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>