使用 for 循环重复同心椭圆 [英] Using a for loop to repeat concentric ellipses
问题描述
这是我第一次在这里发帖，请耐心等待，因为我可能会弄乱格式.使用下面的代码，我试图让 2 个重叠/同心椭圆在 400x400 画布上的随机位置周围重复随机次数(在这种情况下我选择 1 到 20).我尝试了很多不同的方法，但不断发生的是同心椭圆变得分散，变成一团乱七八糟的颜色和无法识别的形状.填充必须留在外循环内，而绘图必须留在嵌套循环内.
noStroke();var 花 = 函数(){for(var total = 5; total > 0; total--){填充(随机(0,255)，随机(0,255)，随机(0,255))；for(var i = 0; i < random(1,20); i++) {椭圆(200、200、总*10、总*20)；椭圆(200、200、总*20、总*10)；}}};花();作为参考，我做了类似的事情，只是我用了一个 while 循环并使用了圆圈.同样的事情也需要发生在我的同心椭圆上.我一直在尝试遵循与 while 循环分配相同的过程.
var i = 0;var circle = function(x,y) {而 (i< 随机 (1, 20)){中风(随机(0,255)，随机(0,255)，随机(0,255))；中风重量(随机(0,50))；点(随机(x，y)，随机(x，y))；我++;}};绘制 = 函数(){圆(0,400)；};我觉得我有点接近这个..
noStroke();var 花 = 函数(x，y){for(var total = 5; total > 0; total--){填充(随机(0,255)，随机(0,255)，随机(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);}}};花(5, 150);这个感觉有点接近..只需要将同心椭圆保持在一起即可.
noStroke();var 花 = 函数(x，y){for(var total = 4; total > 0; total--){填充(随机(0,255)，随机(0,255)，随机(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);}}};花(0, 400);一个简单的 for 循环应该足以绘制同心圆.
在您的代码中，您做了一些最终变成随机椭圆而不是同心圆的事情:
- 使用相同的直径将椭圆渲染为圆形:
ellipse(i + random(x,y), i + random(x,y), total * 10, total * 20);永远是椭圆. - 使用相同的中心为绘制椭圆以保持它们con中心(相同中心)
例如:
function setup(){创建画布(400,400)；noStroke();背景(255)；无功 x = 200;变量 y = 200;//圈数无功圆= 9;//对于每个圆for (var total = 0; total < circles; total++) {//根据反向索引(circles-total)(或max-current)计算圆直径var 直径 =(总圈数)* 30；填充(总计 * 30)；//渲染圆椭圆(x，y，直径，直径)；}}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>要获得彩虹效果，您可以使用
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 number of times (in this case I chose 1 through 20) around random places on the 400x400 canvas. I've tried many different things but what keeps happening is the concentric ellipses become scattered and it becomes a mess of color and unrecognizable shapes. The fill must stay within the outside loop and the drawing inside the nested loop.
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();
For reference below, I did something similar except I did it with a while loop and used circles. The same thing needs to happen to my concentric ellipses. I've been trying to follow the same procedures I did with the while loop assignment.
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);
};
I feel like I am getting kind of close with this..
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);
This one feels a little closer.. Just need to keep the concentric ellipses together.
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);
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:
- 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. - use the same centre for to draw ellipses to keep them concentric(same-centre)
For example:
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>
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)
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>
You can draw multiple groups of concentric circles, for example:
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>
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 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>
这篇关于使用 for 循环重复同心椭圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
