[Beginner question] - How to change color of the ellipse everytime the mouse is pressed?

kevo1414

This is what I want.

mousePressed gives me red ellipse

mousePressed gives me blue ellipse

mousePressed gives me white ellipse

mousePressed gives me red ellipse

mousePressed gives me blue ellipse

mousePressed gibes me white ellipse

and so on and so on

I probably need to use for loop but don't know how.

This is what I have now

void setup() {
  size(500, 500);
  background(0, 255, 0);
}

void draw() {
  
}

void mousePressed() {
  background(0, 255, 0);
  fill(255, 0, 0);
  ellipse(width/2, height/2, 20, 20);
}

Chrisir

Hello!

do the display of the ellipse in draw

use a variable of type color (defined before setup)

in mousePressed just change the color via random first

later have a array of the exact colors and use an index for this

Best, Chrisir ;-)

kevo1414

I made first two steps, don't know what do you mean with the third step

" in mousePressed just change the color via random first "

color red = color(255, 0, 0);
color blue = color(0, 0, 255);
color white = color(255);

void setup() {
  size(500, 500);
}

void draw() {
  background(0, 255, 0);
  fill(red);
  ellipse(width/2, height/2, 20, 20);
}

void mousePressed() {
  fill(random(????)); // ?????
}

koogs

you need to put those colours in an array ideally...

// before setup()
color[] colours = new color[3];

// in setup()
colours[0] = red;
colours[1] = blue;
colours[2] = white;

now you can define an index into this array

// before setup()
int c = 0;

can select the current colour using this index

// in draw()
fill(colours[c]);

and in mousePressed() just increment the index, looping around from 2 to 0

// in mousePressed()
c = (c + 1) % 3;

koogs

i would recommend not using red or blue as a variable name though - they are method names in processing and whilst this is fine in java version of processing it'll break the javascript version.

kevo1414

Thanks both of you. This is really nice community.

color[] colours = new color[3];
int c = 0;

void setup() {
  size(500, 500);
  colours[0] = color(255, 0, 0);
  colours[1] = color(0, 0, 255);
  colours[2] = color(255);
}

void draw() {
  background(0, 255, 0);
  fill(colours[c]);
  ellipse(width/2, height/2, 20, 20);
}

void mousePressed() {
  c = (c + 1) % 3;
}

Chrisir

going back far before what koogs said, just the color in a variable and a random color would look like this:

color currentColor = color(0); 

void setup() {
  size(500, 500);
}

void draw() {
  background(0, 255, 0);

  fill(currentColor);  // use color 
  ellipse(width/2, height/2, 20, 20);
}

void mousePressed() {
  // change color 
  currentColor = color(random(256), random(256), random(256));
}

koogs

but the requirement is three defined colours, cycling between them. the "random" in the title was misleading

(that said, my first answer (since deleted) was for purely random colour changing - i think the description may've been changed)

kevo1414

Is it possible to short this code

void setup() {
  size(500, 500);
  colours[0] = color(255, 0, 0);
  colours[1] = color(0, 0, 255);
  colours[2] = color(255);
} 

in one line code?

Chrisir

@koogs: correct, but from a didactic point of view the step I took is not a bad one.

The sketch teaches several things:

• It introduces a variable for color, storing a color and using it in draw, not having ellipse in mousePressed but in draw...

also, I didn't want to write the code for him so I just presented an early step of getting there.

koogs

Is it possible to short this code

there are 4 things that need doing, there are 4 lines of code...

you might be able to define the array and the values within it but the difference would be measured in characters rather than lines.

koogs

actually defining the array thus

color[] colours = {red, blue, white};

means you don't need the three colour[] lines in setup()

Chrisir

Is it possible to short this code

 void setup() {
   size(500, 500);
   colours[0] = color(255, 0, 0);
   colours[1] = color(0, 0, 255);
   colours[2] = color(255);
 }

in one line code?

Well, kind of:

            color[] colours = {
              color(255, 0, 0), 
              color(0, 0, 255), 
              color(255)
            };

        void setup() {
          size(500, 500);
        }

OR

        color[] colours = {color(255, 0, 0), color(0, 0, 255), color(255)    };

        void setup() {
          size(500, 500);
        }