Change colors on different objects blinking

Hello,
I need help to change the colors!
i am trynig to make a differents objects like a rect, circle, triangle, blink/flash with diferent colors, I am till now, can do it with black and white. As the code below i show this happenig… Also i added a “mousePressed drawing” but the drawins only stay under of all… Thats wy i leaved a blanck space, so you will se how it works.
Sorrry if do not been clear about what i need. … But, lets do it… Thanks
I did try this, as some one told me on other topic.

int m = millis();
fill(m % 125);
println(m%444); // This is your color! ** but no changes**
circle(100, 100, 100);

//String[] sentences={"VrtX_@rT"};

float xRed = 62, xGreen = 20, xBlue = 173;
float yRed = 207, yGreen = 1, yBlue = 106;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

int angle = 0;

PShader blur;
void setup() {
  size(800, 800);
  background(102);
  noStroke();
  fill(0, 102);

  timeTrack=millis()+timeLapse;

  blur = loadShader("blur.glsl");
}

void draw() {


  int m = millis();    // start flash rec
  fill(m % 150);
  rect(25, 25, 555, 355);  // end ret flash
  
   int m1 = millis();
  fill(m1 % 200);
  circle(520,184, 220);
  
 
  
  int m2 = millis();
  fill(m2 % 250);
  triangle(120, 750, 232, 450, 344, 750);
  


                           //Next inverts diretion o ellipse colors
  if (millis()>timeTrack) {
    timeTrack=millis()+timeLapse;
    backwards=!backwards;
  }

  float per = (timeTrack-millis())/float(timeLapse);
  if (backwards==true) {
    per = 1-per;
  }

  surface.setTitle(nf(per*100, 3, 2)+"% Flag="+backwards);
  fill(lerpColor(color(xRed, xGreen, xBlue), color(yRed, yGreen, yBlue), per));
  ellipse(width/2, height/2, 300, 300);
                                          //End ellipse code
                                    
   int m4 = millis();
  fill(m4 % 200);
  circle(520,520, 120);
 
  
  
  // Start Drawing on canva with the mouse pressed
  
  if (mousePressed == true) {
    angle += 5;
    float val = cos(radians(angle)) * 12.0;
    for (int a = 0; a < 360; a += 75) {
      float xoff = cos(radians(a)) * val;
      float yoff = sin(radians(a)) * val;
      fill(0);
      ellipse(mouseX + xoff, mouseY + yoff, val, val);
    }
    fill(255);
    ellipse(mouseX, mouseY, 2, 2);
    // Drwaing on canva code
  }
}

This is a simple one, clear one


int angle = 0;
void setup() 
  {
  size(600, 200);
   background(102);
  noStroke();
  fill(0, 102);
  }

void draw() 
  {
 // background(100);
  
  int m = millis();
  fill(m % 125);
  println(m%444);  // This is your color!
  circle(100, 100, 100);
  
 
  int m1 = millis();
  fill(m1 % 425);        // This will not be applied because a fill() follows it!
  fill(211, 61, 242);    // purple This is the fill() applied to the circle.
  circle(300, 100, 100);

  int m2 = millis();
  fill(m2 % 225);
  //fill(61, 123, 242);    // blue - this is off, its wy flash.I i take // off just stay blue
  circle(500, 100, 100);

  
  
   if (mousePressed == true) {
    angle += 5;
    float val = cos(radians(angle)) * 12.0;
    for (int a = 0; a < 360; a += 75) {
      float xoff = cos(radians(a)) * val;
      float yoff = sin(radians(a)) * val;
      fill(0);
      ellipse(mouseX + xoff, mouseY + yoff, val, val);
    }
    fill(255);
    ellipse(mouseX, mouseY, 2, 2);
  }
  //println(millis());
 
  }
1 Like

Hi @vrtx,

I guess i didn’t exactly understand what you want and what your issue is.
Do you want s.th. like this ? If not please try to explain in more details what you want and at which step you get stucked…

ezgif.com-gif-maker

Cheers
— mnse

3 Likes

@mnse thanks, i like to see the rainbows style(teatch me it!) but is not that. Will try to explain.
See the first code? that is what i made for study and it is a scrach. I add 3 codes in the same sketch. I add some shapes blinking in diferent Hz/ velocity and shapes, its ok.
What i want are 2 things:

1 - How to make them blink with another color? (you see?! the purple one doesn’t blink). They only flash/blink black and white. I wnat other color flashing/blinkig.

2 - See the draw we do with the mouse? So, why the draw does not stay on top of the blinkig/flashing forms. Triangle, Retangle, Circle?

I hope i am more clear, now…

Thank you

Hello @vrtx :slightly_smiling_face:

I changed colorMode to HSB.

And then changed:

int m1 = millis();
int p = m1 % 200; // I tried many other int amounts starting at 0 up thru 360 to try to get a purple flash, 
fill (p, 200, 200);    // flashing green
circle(300, 100, 100);

I don’t know how to target for purple using this particular modulo construct. But this might spark some ideas?

:nerd_face:

1 Like

@debxyz Thank you!
here it is, Purple and Blue…
I don´t understand yet how comes that colors… lol
I did also change de frequency, blink/flashs. Slow to Fast.
And i have to learn what is that “p” is about… rsrs
Also in “fill (p, 70, 200);” i add a Alpha its get tranparent


   int m1 = millis();
   int p = m1 % 200;   // velocity
   fill(p, 70, 200);  // here it is, purple and blue : )
  circle(520,184, 220);

Look how beatifull is this rectangle color!


  int m = millis();    // start flash rec
  int p1 = m % 200;    // velocity
  fill(606, 0, p1, 100); // color 
  rect(25, 25, 555, 355);  // end ret flash

2 - Working on how to drow and the draw stay on top of those images…
Thank you for your time and knowledge :slight_smile:

Awesome!! :grin:

“p” is for purple(!) in the RED channel.
And it looks like you have the colorMode as RGB.
So the amount of red is changing with each draw loop via the modulo math and then mixing with the constant green (70) and blue (200).
I hope that makes sense!
:nerd_face:

You can use PGraphics and createGraphics() to draw your flowers on top of the blinking lights.

Above setup, declare:

PGraphics flowers;

in setup(), initialize:

flowers = createGraphics(800, 800); // note that 800, 800 is same size as your window in setup so you can draw anywhere inside your sketch window and the flowers will show up

In if (mousePressed == true)
draw (mouse click your flower shapes.

The structure looks like this:

if (mousePressed == true) {
 flowers.beginDraw();
 flowers.fill(0);
 flowers.ellipse(mouseX, mouseY, 50, 50);
 flowers.endDraw(); 
  }
 image(flowers, 0, 0);
}

You can read more about createGraphics() here:

Basically with PGraphics you are creating another layer that sits above your sketch. I have heard others describe it as a sketch within a sketch.

:nerd_face:

2 Likes

@debxyz Thank you …
I did try place this code in many places along… each one one diferent result. what is nice… Learning!!

What is see is that the draw on top of the objects doesn’t stay the same as on the canvas… (am i clear?! sorry)

this is what i place wich draw the flower on top of every thing… Check out how the flower draw is on top and a side…
And in this way the flower draw stay permanent as a “line” on top objets and a flowting** draw a side of them… and if you look on top of the objects when is only one clic estay a DOT, not a flower as out side. ( you will see) [ i m working on it! :slight_smile: )

In the next code, the draw only appears when mouse is pressed. we draw, desappear then clic and the draw show up. What is nice too…

//String[] sentences={"VrtX_@rT"};


float xRed = 62, xGreen = 20, xBlue = 173;
float yRed = 207, yGreen = 1, yBlue = 106;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

int angle = 0;

PShader blur;

PGraphics flowers;
void setup() {
  size(800, 800);
  background(102);
  noStroke();
  fill(0, 102);
  
  flowers = createGraphics(800, 800);

  timeTrack=millis()+timeLapse;

  blur = loadShader("blur.glsl");
}

void draw() {


  int m = millis();    // start flash rec
  int p1 = m % 200;    // velocity
  fill(606, 0, p1); // color 
  rect(0, 0, 555, 355);  // end ret flash
  
  
   int m1 = millis();
   int p = m1 % 200;   // velocity
   fill(p, 70, 200);  // here it is, purple and blue : )
  circle(80,75, 220);
  
   
  int m2 = millis();
  int p2 = m2 % 200;
   fill(p2, 100, 255, 200);                  //fill(m2 % 250);
  triangle(120, 750, 232, 450, 344, 750);
  

                           //Next inverts diretion o ellipse colors
  if (millis()>timeTrack) {
    timeTrack=millis()+timeLapse;
    backwards=!backwards;
  }


  float per = (timeTrack-millis())/float(timeLapse);
  if (backwards==true) {
    per = 1-per;
  }

  surface.setTitle(nf(per*100, 3, 2)+"% Flag="+backwards);
  fill(lerpColor(color(xRed, xGreen, xBlue), color(yRed, yGreen, yBlue), per));
  ellipse(width/2, height/2, 300, 300);
                                          //End ellipse code
                                         
                                    
   int m4 = millis();
  fill(m4 % 200);
  circle(520,520, 120);
 
 
    if (mousePressed == true) {
 flowers.beginDraw();
 flowers.fill(0);
 flowers.ellipse(mouseX, mouseY, 5, 5);
 flowers.endDraw(); 
  }
   image(flowers, 2, 2);
  
  
  // Start Drawing on canva with the mouse pressed
  
  if (mousePressed == true) {
    angle += 5;
    float val = cos(radians(angle)) * 12.0;
    for (int a = 0; a < 360; a += 75) {
      float xoff = cos(radians(a)) * val;
      float yoff = sin(radians(a)) * val;
      fill(0);
      ellipse(mouseX + xoff, mouseY + yoff, val, val);
    }
    

   
   
    fill(255);
    ellipse(mouseX, mouseY, 2, 2);
    // Drwaing on canva code
  }
}

the second, when clic and appear…

//String[] sentences={"VrtX_@rT"};


float xRed = 62, xGreen = 20, xBlue = 173;
float yRed = 207, yGreen = 1, yBlue = 106;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

int angle = 0;

PShader blur;

PGraphics flowers;
void setup() {
  size(800, 800);
  background(102);
  noStroke();
  fill(0, 102);
  
  flowers = createGraphics(800, 800);

  timeTrack=millis()+timeLapse;

  blur = loadShader("blur.glsl");
}

void draw() {


  int m = millis();    // start flash rec
  int p1 = m % 200;    // velocity
  fill(606, 0, p1); // color 
  rect(0, 0, 555, 355);  // end ret flash
  
  
   int m1 = millis();
   int p = m1 % 200;   // velocity
   fill(p, 70, 200);  // here it is, purple and blue : )
  circle(80,75, 220);
  
   
  int m2 = millis();
  int p2 = m2 % 200;
   fill(p2, 100, 255, 200);                  //fill(m2 % 250);
  triangle(120, 750, 232, 450, 344, 750);
  

                           //Next inverts diretion o ellipse colors
  if (millis()>timeTrack) {
    timeTrack=millis()+timeLapse;
    backwards=!backwards;
  }


  float per = (timeTrack-millis())/float(timeLapse);
  if (backwards==true) {
    per = 1-per;
  }

  surface.setTitle(nf(per*100, 3, 2)+"% Flag="+backwards);
  fill(lerpColor(color(xRed, xGreen, xBlue), color(yRed, yGreen, yBlue), per));
  ellipse(width/2, height/2, 300, 300);
                                          //End ellipse code
                                         
                                    
   int m4 = millis();
  fill(m4 % 200);
  circle(520,520, 120);
 
 
  
  // Start Drawing on canva with the mouse pressed
  
  if (mousePressed == true) {
    angle += 5;
    float val = cos(radians(angle)) * 12.0;
    for (int a = 0; a < 360; a += 75) {
      float xoff = cos(radians(a)) * val;
      float yoff = sin(radians(a)) * val;
      fill(0);
      ellipse(mouseX + xoff, mouseY + yoff, val, val);
    }
      
    fill(255);
    ellipse(mouseX, mouseY, 2, 2);
    // Drwaing on canva code
    
           if (mousePressed == true) {
 flowers.beginDraw();
 flowers.fill(0);
 flowers.ellipse(mouseX, mouseY, 5, 5);
 flowers.endDraw(); 
  }
   image(flowers, 2, 2);
  }
}

The flower draw in some cases stay visible, because i let the objets in Alpha, transluced…

Thank you for your time !!

Hi @vrtx :slightly_smiling_face:

The code above is just an example of how to use the createGraphics function.
Use that example as a reference to make adjustments to your flower code in the mousePressed section.
Your code should look like this now:

if (mousePressed == true) {
    
    flowers.beginDraw(); //***new line
    
    angle += 5;
    float val = cos(radians(angle)) * 12.0;
    for (int a = 0; a < 360; a += 75) {
      float xoff = cos(radians(a)) * val;
      float yoff = sin(radians(a)) * val;
      
      flowers.fill(0); //*** new line
      flowers.ellipse(mouseX + xoff, mouseY + yoff, val, val); //*** new line
    }
      
    flowers.fill(255); //*** new line
    flowers.ellipse(mouseX, mouseY, 2, 2); //*** new line
    flowers.endDraw(); //*** new line
  }
  image(flowers, 0, 0); //*** new line
}

I hope this helps!
:nerd_face:

2 Likes