In Photoshop you can set a layer's blending mode to be "Hue". If that layer is, for example, filled with blue then it seems to take the layer below and makes it all blue wherever a non-whiteish color exists.
I'm wondering what it's actually doing though. If I have a background layer with a pixel aarrggbb and the layer on top of that is set to blend mode "Hue" and there's a pixel aarrggbb on that layer, how are those two values combined to give the result that we see?
It doesn't just drop the rrggbb from the layer below. If it did that it'd color white and black as well. It also wouldn't allow color variations through.
If a background pixel is 0xff00ff00 and the corresponding hue layer pixel is 0xff0000ff then I'm assuming the end result will just be 0xff0000ff because the ff blue replaces the ff green. But, if the background pixel is 0x55112233 and the hue layer pixel is 0xff0000ff, how does it come up with the shade of blue that it comes up with?
The reason I ask is that I'd like to take various images and change the hue of the image programmatically in my app. Rather than storing 8 different versions of the same image with different colors, I'd like to store one image and color it as needed.
I've been researching a way to replicate that blending mode in javascript/canvas but I've only come up with the "colorize" filter/blend mode. (Examples below)
Colorize algorithm:
convert the colors from RGB to HSL;
change the Hue value to the wanted one (in my case 172⁰ or 0.477);
revert the update HSL to RGB
Note: this is ok on the desktop but it's noticeably slow on a smartphone, I found.
You can see the difference by comparing these three images. Original:
colorize:
Fireworks' "blend hue" algorithm (which I think is the same as Photoshop's):
The colorize filter might be a good substitute.
RGB/HSL conversion question
Hue/Chroma and HSL on Wikipedia
I found an algorithm to convert RGB to HSV here:
http://www.cs.rit.edu/~ncs/color/t_convert.html
Of course, at the bottom of that page it mentions that the Java Color object already has methods for converting between RGB and HSV, so I just used that.
Related
I'm using createJS to build some easy game.
I have an image (white fill and black stroke) and I would change the black color to another.
Is it possible?
Thanks
The three ways to do color adjustments in EaselJS are:
Composite Operations: You can draw an image using a composite operation (such as "destination-in") to determine how pixels are laid down. This is probably not going to give you the result you want. Here is an example of a black PNG being changed to different colors using compositeOperation.
Color Filters. EaselJS has both a ColorFilter and a ColorMatrixFilter, which assist with modifying colors. The first uses parameters to multiply and add to the color and alpha channels, but is a little harder to use. The second uses a ColorMatrix to adjust hue, saturation, contrast, and brightness. This may not work for you, since changing the black pixels is kind of the opposite of color filters do.
A Custom Filter. EaselJS supports custom filters (such as the Threshold Filter in the extras folder. This is probably your best option, and might take massaging to get what you need.
Hope that sheds some light.
Is it possible to invert the colors within a box (4 sets of coordinates) on a page from within the page's content object code?
My pages consist of simple B&W JBIG2 images and I wish to make the white black and the black white within a small box to highlight something.
As mkl suggests, you may extract the images and change their bits - this might prove to be a little bit of work however. There might be another useful approach here, specifically useful because it would work regardless of what the underlying objects are.
It is possible in PDF to add a transparent object (for example a rectangle) over all underlying objects. In your case you would create a rectangle that you put on top of the images you already have in the page stream.
If you paint this rectangle in white, set it to transparent and choose "Difference" as the transparency blending mode, the net effect should be that the colors underneath your rectangle are inverted.
From the PDF specification: "Painting with white inverts the backdrop colour; painting with black produces no change."
This may be the quickest and most painless way to accomplish what you are looking for...
I am using OpenGL ES 1.1 to draw lines in my iPad app. I want to make sure that the drawn lines are always visible on the screen regardless of the background colors, and without allowing the user to choose a color. Is there a blend function that will create this effect? So the color of the line drawn will change based on the colors already drawn beneath it and therefore always be visible.
Sadly the final blending of fragments into the framebuffer is still fixed function. Furthermore glLogicOp isn't implemented in ES so you can't do something cheap like XOR drawing.
I think the net effect is that:
you want the output colour to be a custom function of the colour already in the frame buffer;
but the frame buffer can't be read in a shader (it'd break the pipeline and lead towards concurrency issues).
You're therefore going to have to implement a ping pong pipeline.
You have two off-screen buffers. One represents what you output last frame, the other represents what you output the frame before that.
To generate a new frame you render using the one that represents the frame before as an input. Because it's an input you can sample it wherever you want and make whatever calculations you like on it. You render to the other buffer that you have (ie, the even older one) because you no longer care about its contents.
Then you copy all that to the screen and swap the two over, meaning that what you just drew is still in a texture to refer to as what you drew last frame. What you just referred to becomes your next drawing target because it's something you conveniently already have lying around.
So you'll be immediately interested in rendering to a texture. You'll also need to decide what function you want to use to pick a suitable 'different' colour to the existing background. Maybe just inverting it will do?
I think this could work:
glBlendFunc(GL_ONE_MINUS_DST_COLOR, GL_ZERO);
Draw your lines with a white color, and then the result will be rendered as
[1,1,1,1] * ( 1 - [DstR, DstG, DstB, DstA]) + ([DstR, DstG, DstB, DstA] * 0)
This should render a black pixel where the background is white, a white pixel where the background is black, a yellow pixel where the background is blue, etc.
What would be the most efficient way to remap the colors of an image to a gradient for iOS? This is defined as "apply a color lookup table to the image" in the Image Magic docs, and generally I think. Is there something built in core image for instance to do this? I know it can be done with ImageMagick code using convert -clut, but not certain that is the most efficient way to do it.
the result of remapping the image to a gradient is as pictured here:
http://owolf.net/uploads/ny.jpg
The basic formula, copied from fraxel's comment is:
1.Open your image as grayscale, and RGB
2.Convert the RGB image to HSV (Hue, Saturation, Value/Brightness) color space. This is a cylindrical space, with hue represented by a single value on the polar axis.
3.Set the hue channel to the grayscale image we already opened, this is the crucial step.
4.Set value, and saturation channels both to maximal values.
5.Convert back to RGB space (otherwise display will be incorrect).
With modern hardware, what is the fastest way to draw an image with a "bitmask", i.e., a mask that specifies whether a given pixel will be drawn or not (this could be extracted from "magic pink" pixels, for example) using OpenGL?
Should I just use alpha blending and set invisible pixels to a=0?
Should I use the old "AND black/white mask then OR image on black bg" technique?
Should I use the alpha pass test?
Should I use a shader?
This matters because I'm planning on drawing massive quantities of such images - as much as I can afford to.
If the mask and the texture are always the same (e.g. for splatting), you probably should use blending with a pre-multiplied color values. This usually is just saturated adding the texture with the background (no need to multiply per-pixel).
You should definitely use the alpha pass test - by default it's set to something like >0.08, so you'll automatically get this if you set your pixels to 0.0 alpha.