changing luminosity by rgb values.(my tetris game project)

The Partridge Family were neither partridges nor a family. Discuss.
User avatar
viruskiller
Posts: 399
Joined: June 14th, 2012, 5:07 pm

changing luminosity by rgb values.(my tetris game project)

Post by viruskiller » June 17th, 2012, 8:33 pm

hi every1,first off i must say i'm really glad i found chilli's video's ,they really well made and tought me a lot of c++ and direct x so far.

so at lesson 13,14 i've decided to make a tetris game using square draw function and line drawing.
the problem was that i wanted the edges of the square to have like a shadow on the right and bottom side and an brighter area in the top and left side .

so i banged my head around to make a function to give any rgb combination to it and return me a brighter or darker shade of that color.
first i tried to just increase/decrease rgb values each by 10 and that wasn't the solution,got me diferent collor's all time.
then i studied in paint and tought that to keep the same collor shade the rgb value must keep they'r ratio with eachother so i've spend like a day trying to find a solution.
in the end i just realised the rgb value changes must be in relation with the max value for increasing and the min value for decreasing.
so after more fine tuning i got with a code that works:D
i 'm curios if this can be simplified anymore,basicaly all it does is changing the rgb values in a way that if u add they will all end up at 255 at same time or at 0 at same time if u substract.

anyway i tought it would be a good idea to share this code since it took me that long to figure it out:D

Code: Select all

int D3DGraphics::ChangeBrightness(int r,int g,int b,int factor,int retval)// the rgb values,ammount to change and the return value can't return all 3 vallues at once sadly:( 
{
	float r1=r;
	float g1=g;
	float b1=b;
	float r2=r;
	float g2=g;
	float b2=b;
	float ratio;
	if(factor>0)
	{
		//adding to get a brighter shade of the collor
		 ratio=255-r1;
		r1=r1+((factor*ratio)/255);
		ratio=255-g1;
		g1=g1+((factor*ratio)/255);
		ratio=255-b1;
		b1=b1+((factor*ratio)/255);
		//returning whateevr vallue was requested
	                	 if (retval==1)
						{
							return r1;
						}
						if (retval==2)
						{
							return g1;
						}
						if (retval==3)
						{
							return b1;
						}
	}
	else
	{
       //substracting to get a darker shade of the collor
		//as u notice the factor for substracting is the actual collor value,that's because the value till 0 is needed for substracting,while for adding u need the value from collor number to 255
		r2=r2-((-factor*r2)/255);
		
		g2=g2-((-factor*g1)/255);
		
		b2=b2-((-factor*b2)/255);
		//returning whateevr vallue was requested
		               if (retval==1)
						{
							return r2;
						}
						if (retval==2)
						{
							return g2;
						}
						if (retval==3)
						{
							return b2;
						}
	}
}
Last edited by viruskiller on June 22nd, 2012, 5:03 pm, edited 2 times in total.

User avatar
LuX
Posts: 1492
Joined: April 22nd, 2012, 12:33 pm
Location: Finland

Re: changing brightness of a pixel by rgb values.

Post by LuX » June 17th, 2012, 10:26 pm

Seems a bit complicated how you did it...

So what you want is to make a pixel darker or brighter? Well, instead of what you just did, you could make a function that calculates the new pixel like this:

Code: Select all

void Game::ScalePixel( int r, int g, int b, int percent )
{
	int nr, ng, nb;
	nr = r * ((100 + percent) / 100);
	ng = g * ((100 + percent) / 100);
	nb = b * ((100 + percent) / 100);

	if (nr > 255) {nr = 255;} if (nr < 0) {nr = 0;}
	if (ng > 255) {ng = 255;} if (ng < 0) {ng = 0;}
	if (nb > 255) {nb = 255;} if (nb < 0) {nb = 0;}
}
Here you give "percent" as the percent increase you want the pixel to be.
If you want a pixel 20% lightere, input "20". Then it will calculate the new color like this:
Let's say you have red as 100. The calculation will look like this: New red = red * ((100 + 20) / 100) or simply: nr = 100 * 1.2; // Result is 120

Same works if you want it darker, just input -20 as percent.

The "if" statements at the bottom just make sure you don't go over the top, since the color value 300 for example will result as if it was 0.

With this, if you have a pixel: 150, 90, 30 will after the calculation with -25% look something like this:
112, 67, 22.

There's no need for "float" colors, since they will be ints at the end of the day, so you'll be just wasting like a couple of bytes.

Also, it's color/colour. I have no idea what collor is :lol: collar, maybe?
ʕ •ᴥ•ʔ

User avatar
chili
Site Admin
Posts: 3948
Joined: December 31st, 2011, 4:53 pm
Location: Japan
Contact:

Re: changing brightness of a pixel by rgb values.

Post by chili » June 18th, 2012, 3:50 am

LuX's code looks like it will do what you want. I have one warning though. If you are using this to precalculate some color value that you will use, the above function will work fine for you (as long as you don't mind you color saturating to white at the high end). However, if you are going to calculate the value for every pixel every single frame, it will slow your program down to a crawl.

I've been trying to figure out a faster way (i.e. a way that doesn't use branches), but I can't think of anything. Perhaps a linear interpolation between the channel and its max or min value would do the trick (basically alpha blending with either white or black).
Chili

User avatar
LuX
Posts: 1492
Joined: April 22nd, 2012, 12:33 pm
Location: Finland

Re: changing brightness of a pixel by rgb values.

Post by LuX » June 18th, 2012, 3:33 pm

I made in my game a LightBuffer that holds the brighness and then in the put pixel I just check if it's other that 0, and if it is it will recalculate the pixel before displaying it. Works perfectly and barely changes the frame rate.
ʕ •ᴥ•ʔ

User avatar
viruskiller
Posts: 399
Joined: June 14th, 2012, 5:07 pm

Re: changing brightness of a pixel by rgb values.

Post by viruskiller » June 18th, 2012, 4:06 pm

either i'm mistaking the meaning of brightness or it seems lux had fallen in same trap as i did ,and where i spent like a day trying to figure it out:D
if u look into a picture editing program and choose a random collor,then edit it,if u slide the brightness bar u notice that all vallues will reach the value of 255 almost at same time,or if u slide it towards black they will all reach 0 at same time,depending on the ratio of rgb values some may already be at 255 or at 0 and the other two will get to 0 or 255 at same time.basically they all get to 0 or 255 by same number of increases/decreases or amount to increase/decrease:)

now if u look at your code if u increase by percentage u will hit the max value with the color that is highest ,then after more percentage modifying the lower value color will get to it's max.

now looking back at my code,just realised i don't even need to have all 3 values there(r,g,b)
since i call it for every value because it can return just one at a time:)
also can call this in the initializer list and store the values in ints so i don't have to do it for every square i draw:D

Code: Select all

nt D3DGraphics::ChangeBrightness(int c,int factor)// the rgb value and amount to change 

{
   
   float c1=c;
   float c2=c;
   float ratio;
   if(factor>0)
   {
      //adding to get a brighter shade of the color
      ratio=255-c1;
     c1=c1+((factor*ratio)/255);
      //returning the requested value
     
                     return c1;
                
   }
   else
   {
       //substracting to get a darker shade of the collor
      //as u notice the factor for substracting is the actual collor value,that's because the value till 0 is needed for substracting,while for adding u need the value from collor number to 255
    
 c2=c2-((-factor*c2)/255);
     
      //returning the  requested value
                
                     return c2;
              
   }
}

here's two screenshot's with my progress so far and comparison between the codes:)
Image
Image

PS;please bare with my English skills:D,"collor" is some word that i learned wrong first time and is hard to learn it again the right way,anyway thanks for pointing it out,that's the only way i can improve my spelling:)

User avatar
LuX
Posts: 1492
Joined: April 22nd, 2012, 12:33 pm
Location: Finland

Re: changing brightness of a pixel by rgb values.

Post by LuX » June 18th, 2012, 5:04 pm

I see... That would be "Lightness" you are talking about, not "Brightness".
Anyways... A simple modification to my code should do the trick:

Code: Select all

void Game::ScalePixel( int r, int g, int b, int percent )
{
   int nr, ng, nb;
   nr = r + (((255 - r) / 100) * percent);
   ng = g + (((255 - g) / 100) * percent);
   nb = b + (((255 - b) / 100) * percent);
}
For darker color just check if percent is negative and make a separate calculation for it where you calculate one percent from the current color to 0 and multiply it by the absolute value of percent and subtract it from the current value. Basically the opposite as for lightning.

And about the comparison picture you sent, it seems you used slightly extreme conversion values. It shouldn't really look that bulky...
ʕ •ᴥ•ʔ

User avatar
chili
Site Admin
Posts: 3948
Joined: December 31st, 2011, 4:53 pm
Location: Japan
Contact:

Re: changing brightness of a pixel by rgb values.

Post by chili » June 18th, 2012, 11:54 pm

The tetris blocks look sweet bro. Post your solution when you're finished. 8-)
Chili

User avatar
viruskiller
Posts: 399
Joined: June 14th, 2012, 5:07 pm

Re: changing brightness of a pixel by rgb values.

Post by viruskiller » June 19th, 2012, 8:16 pm

don't worry about that:D,i will post the solution .
and now since i'm watching lesson 15 i got a way around returning more than 1 value using structure's so my "pixel shader function"*** would be a lot simpler and easier to get the values in the initializer list than the old one:).

although it may take some time till i finish the tetris game,busy with work for now and have just 1-2 h a day to spend at pc for a while,anyway right now i have the square drawing function, square table ,shape type,shape facing type,rand shape function,rand color function,rand facing function,clear last shape function,and shape facing change function done.

not sure if the concept i'm going by is right tough,what i wanna do is to get a shape going ,check if it meets any other cube, and if it does i stop updating it and generate new shape by rand.shape,rand.facing. rand.color
and also check for any complete line on the board.
the trick is to stop updating it before it meets the end since i have to clear last shape to let it move first(made a built in check for empty squares before drawing that returns false if ther's any squares non empty in the drawing area ,and that will trigger my check blocks function since it will be clear i have hit another block. )


***(not sure if this the real meaning of what it does ,but if i think of it i use it to put shades on the edges of squares to make them look like3d objects,and i also could use it to put shades on the faces of a 2d cube shown in perspective to make it look 3d and just feeding it the base color and the value's to change it's shade)

User avatar
viruskiller
Posts: 399
Joined: June 14th, 2012, 5:07 pm

Re: changing luminosity by rgb values.(my tetris game proje

Post by viruskiller » June 22nd, 2012, 6:08 pm

the game concept has changed a bit,now i have a second table of squares to hold the solid squares and one to hold the shapes which i clear after each frame,that way i can check for collision with solid blocks without colliding with the current shape drawn on the table.

got it working pretty well so far,although i'm not sure how the original tetris game worked,i thought that in the original one when u have a vertical line(the I shape) on the right edge of the table and u try to change it to be horizontal it will just do it horizontal to the left if the line was on the right column and same principle for other shapes with different length than height.
so i spent like 2-3 h coding checks for shape facing change function to check that if after doing a facing change the shape won't be off screen,and also check few squares to the left so if possible shifting the base x to get the shape on screen,and also made the code work for when u'r too close to other solid blocks to change a shape facing without collision.
then i searched on internet and a few tetris game i've found were missing this feature lol,now either was missing from the beginning,or those programmers were just lazy:D
i hope to finish it by tomorrow and post the solution:D

User avatar
LuX
Posts: 1492
Joined: April 22nd, 2012, 12:33 pm
Location: Finland

Re: changing luminosity by rgb values.(my tetris game proje

Post by LuX » June 22nd, 2012, 7:33 pm

http://en.wikipedia.org/wiki/KISS_principle

If something needs to be hardcoded, chances are there is an algorithm for it.
Search google for "Tetris collision algorithm" or something similar. Helps a bunch.
ʕ •ᴥ•ʔ

Post Reply