How to change the color of a score meter?

Hiroki1313

Hello,

I have a project to do for college which consist in developping a kind of Candy Crush. So I have to develop a score meter, which has one color. Whenever I destroy a candy, I want a part of the rectangle to change color, like in the original game. I tought about using function loadPixels, but I can't use this since I drew my rectangle with function rect(). So I don't know what to do. I tried to create a rectangle with function PImage, but the game became really slow, so I prefered using function rect(). Here is a part of the code, I don't post everything because it's about 1000 lines.

 imageMode(CENTER);                                   //This is the color of the rectangle surronding score meter
 noStroke();
 color c = 0;
 for(int j = 0; j<6*leftMargin+30; j++){
   for(int i = 0; i<85; i++){
    c = color(255-i, 255-j, 255-(i+j), 255); 
   }
 }
 fill(c);
 rect(5, leftMargin-10, 90, 6*leftMargin+50, 20); //Rectangle surronding score meter
 fill(150, 0, 150, 255);
 stroke(0);
 rect(20, leftMargin, 60, 6*leftMargin+30, 20); //Score meter
 line(20, leftMargin+threshold1*(6*leftMargin+30)/threshold3, 80, leftMargin+threshold1*(6*leftMargin+30)/threshold3);   
 line(20, leftMargin+threshold2*(6*leftMargin+30)/threshold3, 80, leftMargin+threshold2*(6*leftMargin+30)/threshold3);

//Function line() are used to draw thresholds

If you need the full code, I can show it.

Thanks for helping me.

kfrajer

Format your code. Edit post, select code and hit ctrl+o. Ensure there is an empty line above and below the code.

Kf

Hiroki1313

Sorry, I am new here so I didn't know about formating. Thanks for the advice.

kfrajer

I dont play candycrush so I'm not sure what effect you are looking for. However after you draw the rectangles then you can call loadPixels() and then search for the region in your sketch that you want to alter the color. Then don't forget to call updatePixels().

You could probly use a filter and a mask as an alternative.

Kf

TfGuy44

Here, I'm sure you can work with this.

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

void draw(){
  background(0);
  rainbowRect(100,mouseY,100,height-mouseY);
}

void rainbowRect(float px, float py, float w, float h){
  pushStyle();
  colorMode(HSB, 500);
  for(int i=0; i<h;i++){
    stroke(i,500,500);
    line(px,py+h-i,px+w,py+h-i);
  }
  popStyle();
}

Lord_of_the_Galaxy

So now the only remaining problem is figuring out how to make the corners curved.

Hiroki1313

Hello,

Thanks TfGuy44, your code worked perfectly. I changed with my variables, by replacing mouse Y by score.

@Lord_of_the_Galaxy: I tried to make the corners curved by using trigonometry but it failed. It drew something weird that didn't look to be a rectangle. I also think about using function rect(), but my program was laging so I used the easy solution which is removing the value of angle in my function rect().

Thanks all for your answers.

Lord_of_the_Galaxy

Should I find a solution, I shall share it here.

jeremydouglass

@Hiroki1313 --

If you are constructing a filled-in image and want to cut out a particular outline, can make your corners curved (or whatever) by using mask() and applying a mask with whatever outline shape you want -- e.g. you could use the rounded corners mode of rect, if that is appropriate.

• https://processing.org/reference/PImage_mask_.html

An example of image masking:

• https://forum.processing.org/two/discussion/18819/how-to-copy-a-triangle-out-of-an-image

The corners mode of rect:

• https://processing.org/reference/rect_.html

Lord_of_the_Galaxy

@jeremydouglass beat me to it.