i need to mix two images one photo and a placeholder. The idea is that we see the placeholder except where the palceholder has a particular color, in that case the user sees the photo. Something like chroma key.
For this purpose i wrote a Pixel Bender shader that acts as a BlendMode. If the background is in the right color output the pixel image otherwhise output the pixel from the placeholder.
<languageVersion : 1.0;>
kernel Crossfade
< namespace : "mynamesp";
vendor : "Artbits snc";
version : 1;
description : "description ... "; >
{
input image4 placeHolder;
input image4 myImage;
output pixel4 dst;
const float3 SPECIAL_COLOR = float3(159.0, 160.0, 161.0);
void evaluatePixel()
{
float4 imgPixel = sample(myImagee, outCoord());
float4 placeHolderPixel = sample(placeHolder, outCoord());
dst = placeHolderPixel;
if(placeHolderPixel.r == (SPECIAL_COLOR.r / 255.0) && placeHolderPixel.g == (SPECIAL_COLOR.g / 255.0) && placeHolderPixel.b == (SPECIAL_COLOR.b / 255.0)){
dst = imgPixel;
}
}
}
Everything works fine except for the fact that i had multiple placeholder, one over the other and my shader don't check the color of its own placeholder but the color of everything under the photo.
Is there a way to force BlendMode to consider only a layer or a specific background color ?
Is there a smarter way to obtain the same result ?
Thanks for your help! i know that this is quite a long and complex question, especially for my english :-)
I assume that you are using this BlendMode on generic DisplayObjects and not directly on BitmapData. In this case PixelBender can only work with the data that gets passed in from the drawing API, so you have to make sure that only those layers are used. They way to do it is to add only the placeholder object and the image object to one holder Sprite.
Related
I am creating a Windows Phone 8 app and I'm working with camera. When I don't use any shader, my C# code works perfectly:
void photoDevice_PreviewFrameAvailable(ICameraCaptureDevice sender, object args)
{
sender.GetPreviewBufferArgb(captureData);
previewTexture.SetData<int>(captureData);
}
...
spriteBatch.Begin();
spriteBatch.Draw(previewTexture, new Vector2(backBufferXCenter, backBufferYCenter), null, Color.White, (float)Math.PI / 2.0f,
new Vector2(textureXCenter, textureYCenter), new Vector2(xScale, yScale), SpriteEffects.None, 0.0f);
spriteBatch.End();
I am getting camera input in realtime. However, I'm (just trying to passthrough the input) trying to use a pixel shader:
Texture2D MyTexture : register(t0);
sampler textureSampler = sampler_state{
Texture = (MyTexture);
Filter = MIN_MAG_MIP_LINEAR;
};
...
float4 pixelShader(float4 color : COLOR0,
float2 texCoord : TEXCOORD0) : SV_Target0
{
float4 textureColor = tex2D(textureSampler, texCoord);
return textureColor;
}
The shader runs fine (assigning it at the beginning of the sprite batch) with no exceptions etc but all I'm getting is red color. The whole output is pure red. What could be the reason? I am new to shaders and I'm trying to understand how they work, especially with samplers. Thank you.
If I'm not wrong, you need to get the pixel data in BGRA format, not RGBA. Could you check if it works for you?
You can check this article.
Creating a Lens application that uses HLSL effects for filters
Regards,
Pieter Voloshyn
Apparently, in Adobe's wisdom, both the object being mask, and the masking object contain a "mask" property. This leads to a cyclical reference that prevents determining which is the actual mask and which is the masked.
For example...
var clip:MovieClip = new MovieClip();
clip.name = "clip";
addChild(clip);
var boundary:Shape = new Shape();
boundary.name = "boundary";
clip.addChild(boundary);
clip.mask = boundary;
trace(clip.mask.name); // outputs "boundary"
trace(clip.mask.mask.name); // outputs "clip"
I've iterated through the properties of both clip and boundary, and there doesn't seem to be anything unique that sets them apart. My first thought was to force a removal of the superfluous "mask" reference in boundary, however, that also sets the mask property in clip to null, thereby removing the mask.
My second thought was to check the parent relationship of a mask. If the parent is the same as the object's mask, then the object in question is itself the mask.
var a:Array = [clip, boundary];
for each (var item in a) {
if (item.mask == item.parent) {
trace(item.name + " is a mask");
}
}
// outputs "boundary is a mask"
Seems to work, and after checking the API reference on masks, it's clear that when caching, a mask will need to be a child of the masked, however... it's also valid to have a mask at the same depth as the masked (I do this from time to time when a mask needs to not travel with the masked content).
For example...
MainTimeline ¬
0: clip ¬
0: boundary
... can also be laid out as ...
MainTimeline ¬
0: clip ¬
1: boundary
So, there's the conundrum. Any ideas on how to resolve this?
The "best" hack I've found so far is to run hitTestPoint on the objects (after making sure they have something to hit under the target). Masks do not appear to ever return true for a full pixel hit test. This seems to work in most basic situations that I've tested:
public function isMask(displayObject:DisplayObject):Boolean {
// Make sure the display object is a Class which has Graphics available,
// and is part of a mask / maskee pair.
if ((displayObject is Shape || displayObject is Sprite) && displayObject.mask) {
// Add a circle at the target object's origin.
displayObject['graphics'].beginFill(0);
displayObject['graphics'].drawCircle(0, 0, 10);
var origin:Point = displayObject.localToGlobal(new Point());
var maskLocal:Point = displayObject.mask.globalToLocal(origin);
// Add a circle at the same relative position on the "mask".
displayObject.mask['graphics'].beginFill(0);
displayObject.mask['graphics'].drawCircle(maskLocal.x, maskLocal.y, 10);
// No matter which is the actual mask, one circle will reveal the other,
// so hit testing the origin point should return true.
// However, it seems to return false if the object is actually a mask.
var hit:Boolean = displayObject.hitTestPoint(origin.x, origin.y, true);
displayObject['graphics'].clear();
displayObject.mask['graphics'].clear();
// Return true if the hit test failed.
return !hit;
} else {
return false;
}
}
Obviously you'd want to cache the graphics in case the objects already have some, and it could do with something more elegant than casting as Sprite so that it can handle Shapes, but it's a start.
Edit: Accessing ['graphics'] lets this accept Shapes, but obviously isn't super efficient. I'm not sure what the best method would be, short of adding an interface.
Great question, haven't run into this before. I wasn't aware of the cyclical reference.
If your masks are exclusively masks, I would suggest just incorporating that into your naming convention. For example calling it clipMask as opposed to boundary.
As noted in the comments, in the situation where the mask is on the same display list, you could use getChildIndex() to compare their position on the display list of the parent.
Typically in that situation I'll have the mask layered over the other display object. This is not enforced obviously, and I don't believe that it has any effect on the result of the mask visually. But it's easier to maintain for a large group than a naming convention.
Still not ideal obviously.
I´m making a game that simulates an industry of pan, and one of the process is Painting.
What I want to do is to let the player paint the pan, but i don´t want it to be easy using FILL, i want that the player paint the pan with an brush and then the game detects if all the area was painted and let the player advance.
For the painting i intend to use that library: http://www.nocircleno.com/graffiti/
But i have no idea how to detect if all the area was painted. Can someone show me some way of doing that?
One of the ways would be - you make a shielding BitmapData that has transparency and is opaque in place which you need your player to paint. (Color it as needed, but make sure the color is fully opaque). Then gather histogram() then query alpha vector for 255th value, this will be the initial value for zero percent filled. These range from 0-255, so you can't use 100 or any other fixed value. Then, while the player is painting, you draw the brush over that BitmapData with blendMode parameter set to BlendMode.ERASE, this will net your BitmapData to gain transparency where the brush was drawn. After your player finishes drawing by any means (say, the paint is used up), you run another histogram() over the BitmapData, and query the 255th value of alpha channel vector. 0 means the bitmap is fully transparent (or at least, only a small amount of pixels is left opaque), thus you can count a zero as 100% fill, for anything greater use the proportion.
var bd:BitmapData=new BitmapData(w,h,true,0x0); // fully transparent initial bitmap
bd.draw(yourPaintBase); // a shape that designates area to be painted. Must be fully opaque
var bm:Bitmap=new Bitmap(bd);
// position it as needed, so the area which should be painted is aligned to wherever you need
addChild(bm);
addEventListener(Event.ENTER_FRAME,doPaint);
var baseValue:int=bd.histogram()[3][255]; // Vector #3 contains alpha, #255 contains
// percentage of those pixels that have alpha of 255 = fully opaque
function doPaint(e:Event):void {
if (!areWePainting) return;
var sh:Shape=getBrush(); // shuold return an existing Shape object reference for performance
sh.x=e.localX;
sh.y=e.localY; // we are drawing where the mouse is
bd.draw(sh,null,null,BlendMode.ERASE);
decreasePaint(); // we have used some paint
if (noMorePaint()) {
e.target.removeEventListener(Event.ENTER_FRAME,doPaint);
var endValue:int=Math.floor(100*(1-bd.histogram()[3][255]/baseValue));
// aligning to percentage. This is the value you seek
reportFilledPercentage(endValue);
}
}
You can iterate over the pixels on your BitmapData and use getPixel() to check if the color of all those pixels is not white. If a white one is found, the image is not fully painted.
Something like this:
function containsWhite(bitmapData:BitmapData):Boolean
{
for(var c:int = 0; c < bitmapData.width; c++)
{
for(var r:int = 0; r < bitmapData.height; r++)
{
// Check if pixel is white.
if(bitmapData.getPixel(c, r) >= 0xFFFFFF)
{
return true;
}
}
}
return false;
}
Your essentially dealing with a collision detection problem. From looking at their API you could try something like a for loop with getColorAtPoint and try to determine they have drawn at each pixel.
If all else fails look into collision between the objects the library generates using the .hitTestObject method of an object.
See this: http://sierakowski.eu/list-of-tips/39-collision-detection-methods-hittest-and-hittestobject-alternatives.html
And this to see how someone handles collision with pixels: http://www.emanueleferonato.com/2010/08/05/worms-like-destructible-terrain-in-flash-part-2/
is there any way to choose an area on the canvas by color and clip it?
I want to be able to clip an undefined aread that the only thing in common between all the pixels is that they all have the same color.
thanks
Live Demo
Below is a way to select a color.. and do whatever you want with it. I pass a color I want to find iterate over every pixel and remove the color that matches, since Im not sure what you meant by clipping I assumed you mean remove. However please note on large images this method will be slow.
// Takes an array with 3 color components, rgb
function removeColor(color){
var canvasData = ctx.getImageData(0, 0, 256, 256),
pix = canvasData.data;
for (var i = 0, n = pix.length; i <n; i += 4) {
if(pix[i] === color[0] && pix[i+1] === color[1] && pix[i+2] === color[2]){
pix[i+3] = 0;
}
}
ctx.putImageData(canvasData, 0, 0);
}
removeColor([0,0,255]); // Removes blue.
And like Simon pointed out the code above will get the exact color. Below will grab the approximate color, which is good if you have colors overlapping or very close to each other.
Demo 2 with approximation
I'm trying to replace a color and colors near it in a bitmap.
threshold() seems to work but it seems to be that you have to specify the exact color "==" or all colors before or after the exact color "<" & ">" plus "<=" and ">=". I am hoping that the mask parameter will help me find a way to find a color and a dynamic range of colors before and after it to be replaced. What is its intended usage?
Per the comment below Example 1 and 2:
bit.threshold(bit, bit.rect, point, ">", 0xff000000, 0xffff0000, 0x00FF0000);
bit.threshold(bit, bit.rect, point, ">", 0xff000000, 0xffff0000, 0x00EE0000);
If you're trying to do a flood fill, I don't think the mask parameter will help you. The mask parameter lets you ignore parts of the color in the test. In your case, you want to take into account all the channels of the color, you just want the matching to be fuzzy.
e.g. If you want to replace all pixels where the red component is 0, you can set mask to 0x00FF0000, so it will ignore the other channels.
The implementation pseudo-code probably looks something like this:
input = readPixel()
value = input & mask
if(value operation threshold)
{
writePixel(color)
}
Neither of your samples will produce anything because the mask limits the values to be between 0x00000000 and 0x00FF0000, then tests if they're greater than 0xFF000000.
I have also done this and eventually, I have found it best to create my own threshold-method. You can find it below. Everything is explained in comment.
//_snapshot is a bitmapData-object
for(var i:int = 0; i <= _snapshot.width; i++)
{
for(var j:int = 0; j <= _snapshot.height; j++)
{
//We get the color of the current pixel.
var _color:uint = _snapshot.getPixel(i, j);
//If the color of the selected pixel is between certain values set by the user,
//set the filtered pixel data to green.
//Threshold is a number (can be quite high, up to 50000) to look for adjacent colors in the colorspace.
//_colorToCompare is the color you want to look for.
if((_colorToCompare - (100 * _threshold)) <= _color && _color <= (_colorToCompare + (100 * _threshold)))
{
//This sets the pixel value.
_snapshot.setPixel(i, j, 0x00ff00);
}
else
{
//If the pixel color is not within the desired range, set it's value to black.
_snapshot.setPixel(i, j, 0x000000);
}
}
}