0

How would I increase the size of a row of ellipses as they move dow the window? I wanna make it look like as they reach the bottom of the window, they become larger.

size(300, 500);
background(255);
noStroke();
smooth();
translate(width/8, height/2);


for (int a = 0; a < 7; a++) {
  for (int b = 0; b < 7; b++) {
    fill(random(0, 50));
    ellipse(a * 76, b * 65, 100, 100);
  }
}
rdans
  • 2,179
  • 22
  • 32
D Corrigan
  • 21
  • 1
  • 10
  • you need to say what technologies you are using otherwise nobody will be able to help you – rdans Sep 03 '15 at 07:50
  • do you mean the program? because it says in the title Processing. – D Corrigan Sep 03 '15 at 08:12
  • I have edited your question to add the "processing" tag. tags are the easiest way for people to find questions relevant to a particular technology. Especially something like this because "processing" is quite a common word on this website for lots of different programming languages so it wont be obvious to everybody. – rdans Sep 03 '15 at 08:17
  • yeah i know, it didn't allow me to add that tag. thanks though – D Corrigan Sep 03 '15 at 08:20

1 Answers1

1

The last two parameters of the ellipse() function allow you to control the width and height:

size(300, 500);
background(255);
noStroke();
smooth();
translate(width/8, height/2);


for (int a = 0; a < 7; a++) {
  for (int b = 0; b < 7; b++) {
//    int ellipseSize = (a+b)*10;//depending both x and y
    int ellipseSize = b * 10;//depdning just on y
    fill(random(0, 50));
    ellipse(a * 76, b * 65, ellipseSize, ellipseSize);
  }
}

Here's a quick demo you can run here: (it uses a javascript port, but the syntax is pretty close)

function setup() {
  createCanvas(600, 500);
  background(255);
  noStroke();
  smooth();
  translate(width/16, height/16);
  
  
  for (var a = 0; a < 7; a++) {
    for (var b = 0; b < 7; b++) {
      var ellipseSize = (b+a+1) * 7.5;
      fill(color((a+b)*18));
      ellipse(a * 76, b * 65, ellipseSize, ellipseSize);
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.9/p5.min.js"></script>
George Profenza
  • 50,687
  • 19
  • 144
  • 218
  • thank you thank you thank you, I've been getting frustrated haha. I knew what the last two parameters meant thanks, just not how to make them change each row :) – D Corrigan Sep 03 '15 at 10:47
  • do you think there is a way to make the first few rows closer? I need them closer just like the bottom rows - thanks – D Corrigan Sep 03 '15 at 10:52
  • of course! you can totally do it: have play with the second parameter (y) of the ```translate()``` call you're making before the for loops (e.g. ```translate(width/8/height/8);```) Have fun and feel to vote/mark the answer if it was helpful ;) – George Profenza Sep 03 '15 at 14:07