Using A For Loop To Repeat Concentric Ellipses

This is my first time posting here, bear with me as I might mess up the formatting. With the code below, I am trying to get the 2 overlapping/concentric ellipses to repeat a random

Solution 1:

I'm not completely sure what you're asking. Are you asking how to draw both of the circles in the same place each time?

If so, then look at how you're drawing your circles:

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

You're calling random(x, y) a total of four times to come up with random coordinates for each circle. This will cause them to be drawn in different places. If you want to draw them in the same place, then you should only call random(x,y) a total of two times (once for the X position and once for the Y position) and then use those values for both circles. Something like this:

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

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

If this doesn't answer your question then please try to be more specific. Maybe post a mockup of what you want the end result to look like, and try to narrow down the problem to a specific line of code that isn't acting how you expected it to.

Solution 2:

A simple single for loop should suffice to draw concentric circles.

In your code you do a couple of things that end up being random ellipses rather than concentric circles:

1. use the same diameter to render an ellipse as a circle: ellipse(i + random(x,y), i + random(x,y), total * 10, total * 20); will always be en ellipse.
2. use the same centre for to draw ellipses to keep them concentric(same-centre)

For example:

functionsetup(){
  createCanvas(400,400);
  noStroke();
  background(255);

  
  var x = 200;
  var y = 200;
  //number of circlesvar circles = 9;
  //for each circlefor (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 circleellipse(x,y, diameter, diameter);
    
  }
  
}

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

To get a rainbow effect, you can use colorMode() to swith to the HSB (hue-saturation-brightness) colour space. This way you simply need to use an increasing hue value. You can even constrain the number of hues.

Here's a demo (mouseX changes the number of circles/hues)

functionsetup(){
  createCanvas(400,400);
  noStroke();
}
functiondraw(){
  background(255);
  
  var x = 200;
  var y = 200;
  //number of circlesvar 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 usecolorMode(HSB,circles,100,100);
  //for each circlefor (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 circlefill(total,100,100);
    //render the circleellipse(x,y, diameter, diameter);
    
  }
  
}

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

You can draw multiple groups of concentric circles, for example:

var circles = 10;

functionsetup(){
  createCanvas(400,400);
  noStroke();
  colorMode(HSB,circles,100,100);
}
functiondraw(){
  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);
  }
};

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

If you want to change positions to keep the circles still somehow grouped, you could use an array to remember past positions then shift the position of each circle by one. This would get you a trails like effect, but the circles will maintain their order so will become concentric whenever the position becomes static:

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

functionsetup(){
  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);
  }
  
}
functionupdateCircles(){
  //copy positions backwards from last to 2ndfor(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;
}
functiondrawCircles(){
 for(var i = 0; i < circles; i++){
    fill(i,100,100);
    ellipse(positions[i].x,positions[i].y,diameter[i], diameter[i]);
  }
}
functiondraw(){
  background(255);
  updateCircles();
  drawCircles();
}

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