CODEWITHSUNDEEP
processingsizing
D Corrigan
D Corrigan

Reputation: 21

How to increase ellipse size in Processing

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

Upvotes: 0

Views: 1262

Answers (1)

George Profenza
George Profenza

Reputation: 51837

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>

Upvotes: 1

Related Questions