Fill all ellipse up above the diagonal.

Programming Questions

vuudd00

Fill all ellipse up above the diagonal.

in Programming Questions • 7 months ago

Hi everybody, i'm pretty new with processing and i really love it but i've some problems S:.

I've to do an excercise that my university teacher gave to me but i cna't pass trought this thing. Essentially, if you look at the screen, i've to fill all the ellipse above the diagonal with a green color and all ellipse below, with a red color.

Now this is what i did:

void setup()
{
size(350, 450);
background(253, 212, 145);
line(30, 400, 30, 50);
line(30, 400, 300, 400);
line(30, 400, 300, 30);
}

void draw() {
int[] posX = {220, 150, 120, 110, 60, 80, 200, 240, 170, 220, 120, 140, 130, 160, 210, 210};
int[] posY = {350, 180, 220, 320, 280, 200, 310, 290, 130, 240, 280, 260, 340, 320, 200, 270};
int[] dimensione = {43, 42, 49, 18, 24, 32, 310, 36, 52, 55, 36, 48, 48, 26, 26, 58, 22};

int count= posX.length;

for(int i=0; i<=15;i++){

    ellipse(posX[i],posY[i],dimensione[i]/2,dimensione[i]/2);

    if(posY[i] > HERE I PUT A VALUE){
      fill(255,155,123);
    }
    else{
     fill(111,144,113);
    }

}

}

Now i tried to put inside the posY[] a value that goes around 100 and 300 but it works bad... i know is not the correct way to do this thing but i tried.

p.s= i know just arrays, variable and for/while/if etc.. so i've to do this with those features. Anyone have an advice??? thanks so much.

Replies(3)

baud.r

Re: Fill all ellipse up above the diagonal.

7 months ago

The gradient of the line = (400 - 30) / (30 - 300) = 370 / -270 = -(37 / 27)

To find the equation of the line:

y - 400 = -(37 / 27)(x - 30)

27y - 10800 = 1110 - 37x

27y + 37x = 11910

So you can work out from there the inequality that defines the region above the line, and then check whether the x and y values satisfy that inequality for each ellipse.

The code might look like this:

               
                void setup() {
                  size(350, 450);
                }
                

                void draw() {
                  background(255);
                  
                  line(30, 400, 30, 30);
                  line(30, 400, 300, 400);
                  line(30, 400, 300, 30);
                  
                  int[] posX = {220, 150, 120, 110, 60, 80, 200, 240, 170, 220, 120, 140, 130, 160, 210, 210};
                  int[] posY = {350, 180, 220, 320, 280, 200, 310, 290, 130, 240, 280, 260, 340, 320, 200, 270};
                  int[] dimensione = {43, 42, 49, 18, 24, 32, 310, 36, 52, 55, 36, 48, 48, 26, 26, 58, 22};
                  
                  int count = posX.length;
                  
                  for(int i = 0; i != count; ++i){ 
                    if ((27 * posY[i]) + (37 * posX[i]) > 11910) fill(255, 0, 0);
                    else fill(0, 255, 0);
                    
                    ellipse(posX[i], posY[i], dimensione[i] / 2, dimensione[i] / 2);
                  }
                }

GoToLoop

Re: Fill all ellipse up above the diagonal.

7 months ago

Just a tidbit: For performance reasons, it's more appropriate to put those arrays on top of sketch.
draw() is called 60 times per second. And reconstructing those arrays on a spree is too much!

Another one: Colors can be represented as web hex values.

fill(255, 0, 0); -> fill(#FF0000)
fill(0, 255, 0); -> fill(#00FF00)

And one more: since it's just a static drawing, draw() can be turned off by using noLoop().
It spares our CPUs!

final static short[] posX = {
  220, 150, 120, 110, 60, 80, 200, 240, 170, 220, 120, 140, 130, 160, 210, 210
};
final static short[] posY = {
  350, 180, 220, 320, 280, 200, 310, 290, 130, 240, 280, 260, 340, 320, 200, 270
};
final static short[] dimension = {
  43, 42, 49, 18, 24, 32, 310, 36, 52, 55, 36, 48, 48, 26, 26, 58
};

final static int  COUNT  = posX.length;
final static byte MARGIN_1 = 30, MARGIN_2 = 50;

void setup() {
  size(350, 450);
  smooth();
  noLoop();
  ellipseMode(CENTER);
}

void draw() {
  background(-1);

  line(MARGIN_1, height-MARGIN_2, MARGIN_1, MARGIN_1);
  line(MARGIN_1, height-MARGIN_2, width-MARGIN_2, height-MARGIN_2);
  line(MARGIN_1, height-MARGIN_2, width-MARGIN_2, MARGIN_1);

  for (int i = 0; i != COUNT; ++i) {  
    fill(27*posY[i] + 37*posX[i] > 11910 ? #FF0000 : #00FF00);
    ellipse(posX[i], posY[i], dimension[i] >> 1, dimension[i] >> 1);
  }
}

baud.r

Re: Fill all ellipse up above the diagonal.

7 months ago

This solution is a bit broken - the line relies on the margins set, so if the margins are changed the inequality breaks.

Here's a more general solution that works for any line defined by two points (and that doesn't rely on the margins).

final static short[] posX = {
  220, 150, 120, 110, 60, 80, 200, 240, 170, 220, 120, 140, 130, 160, 210, 210
};
final static short[] posY = {
  350, 180, 220, 320, 280, 200, 310, 290, 130, 240, 280, 260, 340, 320, 200, 270
};
final static short[] dimension = {
  43, 42, 49, 18, 24, 32, 310, 36, 52, 55, 36, 48, 48, 26, 26, 58
};

final static long COUNT = posX.length;
final static byte MARGIN_1 = 30, MARGIN_2 = 50;

//  define two points on the line
final PVector p0 = new PVector(40, 30);
final PVector p1 = new PVector(200, 400);

void setup() {
  size(350, 450);
  smooth();
  noLoop();
  ellipseMode(CENTER);
}

void draw() {
  background(-1);

  line(MARGIN_1, height-MARGIN_2, MARGIN_1, MARGIN_1);
  line(MARGIN_1, height-MARGIN_2, width-MARGIN_2, height-MARGIN_2);
  
  line(p0.x, p0.y, p1.x, p1.y);
  
  final float M = (p1.y - p0.y) / (p1.x - p0.x);
  final float C = p0.y - (M * p0.x);

  for (int i = 0; i != COUNT; ++i) {  
    fill(posY[i] - M * posX[i] > C ? #FF0000 : #00FF00);
    ellipse(posX[i], posY[i], dimension[i] >> 1, dimension[i] >> 1);
  }
}

Top Reply