apply different colours to rectangle - swing

I Have one rectangle. I wanted to do some animated stuff with colour on that.
That mean it should start filling with different colours in the rectangle.
It should start coming from left to right.
For example i have four colurs. Red green blue,orange.
so first 25% should be filled upwith red, next 25% with green, next 25% with blue, and remaining with
orange. First I tried to achieve the same result by using the rectangles on top of another rectangle.
so I could change the rectangles colour one by one. But the problem is, I could not remove the border for
those subrectanlge's. That is the reason itwas visible as some kind of parts in the rectangle. It was showing
as if we divided the rectangle into four with colours. I dont want to show in that. I wanted to start applying
with different colours. Any Idea how do I do that. I am lacking logical things. We can say something progressbar with different colours.

To take out the borders of the rectangles with Graphics, you just don't call the graphics function to draw. Example:
public void paint(Graphics g) {
Graphics2D g2 = (Graphics2D)g;
//Rectangle with Color_1
g2.setColor(color1); //This would be red
g2.fill(rect1);
//Rectangle with Color_2
g2.setColor(color2); //This would be green
g2.fill(rect2);
... //Repeat for other rectangles
g2.dispose()
}
Now the programmatic part would be trickier. You'd have to increase each rectangle separably.
Another way to do this would be to have a look at Color Blending. I don't really know if that's what you need but anyways:
http://www.java2s.com/Code/Java/2D-Graphics-GUI/Commoncolorutilities.htm
http://www.dbuggr.com/leothenerd/blend-rgb-color-function-java/
You'd obviously have to keep changing the colors with g2.setColor(Color) and also keep changing the color itself to suit your need.

Related

I am trying to make 2 circles around a point and fill between these points and listen for a click between the circles

i'm trying to make something for a game i'm making. When someone clicks on the movieclip i want it to draw an inner circle and an outer circle. I'd like to fill between the circles with a opaque colour (purple in the image) so people can see basically a large thick circle around the movieclip but not touching the movieclip. I then need to check if the mouseclick happens between the two circles only.
The image below shows what i mean. The thing is the thickness of the purple bit has to be adjustable (not in game as such), if you click on 1 movieclip the thickness of the purple bit may be 10pixels, a different clip may be 50. Obviously checking for a click greater than inner circle x and less than outer circle only works on a straight line across from the clip, once you move up or down this doesn't work so well. Any help is much appreciated as i can't seem to work this out. I've tried drawing 2 circles and also tried using 2 movieclip circles but can't get it to work.
Seems i cant upload pictures on here. Easiest way is to think of a no entry sign without the / line going through the middle. The centre is the movieclip, the inside part of the red circle the inner circle and the outer is the outer circle but at no point does the red touch the movieclip
I would measure the distance from the center of the circles to the mouse click point. Then you just need to check is that distance greater than the inner circle radius and less than the outer circle radius.
Something along these lines:
var clickPoint:Point = new Point(mouseX, mouseY);
var centerPoint:Point = new Point(circleMC.x circleMC.y);
var dist:Number = Point.distance(clickPoint, centerPoint);
if(dist > innerRadius && dist < outerRadius){
trace("the click happened between circles
}

Masking in ActionScript3

I am trying to understand masks in actionscript..Everything seems to make sense to me but one part of the code
function mouseM(event:MouseEvent):void {
if (mouseclick == 1) {
mask_mc.graphics.beginFill(0x000000);
mask_mc.graphics.drawEllipse(mouseX, mouseY, 70, 60);
mask_mc.graphics.endFill();
}
}
I am not sure how to exactly ask this question but here it goes. why does the mask have "begin fill" with a black color? wouldn't that paint the the image in black (I know it doesn't, it just reveals it)? what is the exact function of beginfill (besides revealing the image lool)? like how does it exactly work? sorry if it sounds ridiculously off.. but that part of the code was really screwing me up in understanding masks
What you are doing is drawing a shape to be used as a mask. In this case, a circle.
It doesn't matter what colour it is as Flash is only interested in the shape of the mask, not the colour.
Once the circle is drawn, Flash checks what part of the circle overlap the object you're masking so that every pixel the circle is not covering will be invisible. I guess it should really be called an anti-mask as the circle dictates which parts of your image wont be masked but it's just become the general convention to call the circle (or whatever shape you use) the mask.
Again, you're just creating a shape to be used as a mask. Setting the colour is just so the object can essentially exist.. because you can't exactly have a transparent circle.
Feel free to change the colour to anything and you'll see it makes no difference, the shape is all that matters.

How can I create a control which is a square and it contains 4 squares inside?

I have a need to create a control which is a square and it contains 4 squares inside. If user clicks on a child square, its background-color will be changed (its background-color has 2 states - WHITE and BLUE) and this state will be updated into Database immediately.
This control will be used in GridView.
I don't know how to create this control so I need your help for doing this.
You have to do something like a cube but if you have only blue and white as chpoice you can not make the fourth side visible.. Either you have to go different color for the sides or play with the transparency of the sides or make the cube rotation possibe.
If uou are using different colors you can place adj shapes lije this
http://www.anopticalillusion.com/2012/03/necker-cube/
http://en.wikipedia.org/wiki/File:Face_colored_cube.png for solid appearance where user will be able to turn it.
Create a user control.
Hope this helps.

Finding close colors of a given color

I´d like to know, how, through actionscript 3, to get an array of ARGB (hexadecimal) colors, that is close to a given color.
Example:
0xFF00FF00
A green.
How to get variations of green?
I´m trying to get some green colors of a bitmapdata.
I´ve tried to get it by making a loop getting the colors using getPixels32.
The problem is, I think the bits colors of each position are different from the bits of the bitmap rendered.
It´s for a pathfinder.
Each green bit sets a node in a map, as walkable.
So I need to know what are these colors to set it as walkable for the pathfinder.
Any suggestions?
RGB space is terrible for interpreting whether colors are similar to one another. A different color space that matches closer to human perception of color is HSV (hue saturation and value). Here are the steps you should follow:
Convert your value from RGB space to HSV (http://www.cs.rit.edu/~ncs/color/t_convert.html)
Modify the saturation and value to obtain different shades of the same green hue.
You can even modify the hue a little with a defined tolerance level you specify
Reconvert back to HSV to RGB
I believe technically..one color space is smaller than the other, meaning it is not always a 1:1 conversion - but it should serve your purpose.

Actionscript 3.0 drawRect works weird

I have a BitmapData object named myBitmapData. It was loaded of PNG of size 104x104. This PNG represents a red circle on the transparent background.
There is also a Sprite object named myBackground. I want render that red circle into myBackground.
myBackground.graphics.beginBitmapFill(myBitmapData);
myBackground.graphics.drawRect(0, 0, myBitmapData.width, myBitmapData.height);
myBackground.graphics.endFill();
addChild(myBackground);
Everything is fine. I see a red circle in the left top of myBackground.
But when I change the third line to
myBackground.graphics.drawRect(0, 52, myBitmapData.width, myBitmapData.height);
and expect my circle to be translated 52 pixels down, I actually obtain something strange (for me :)): there are two red half-circles (they form like hourglass).
So, the question is: how do I render myBitmapData into the random position of myBackground?
P.S.
In the case of
myBackground.graphics.drawRect(0, 104, myBitmapData.width, myBitmapData.height);
it is circle again :)
This is caused by beginBitmapFill's default repeat = true parameter. There's an example in the docs. Disabling the repetition won't work though, you'd just get a half circle then.
There are several ways to fix this:
Use a Matrix with a translation (displacement) as argument in beginBitmapFill.
Draw the rectangle at 0,0 on another Sprite, and move that sprite to where you want it on the background.
Don't draw directly to the background, but to another bitmap using copyPixels. Then fill the background with that bitmap.