When applying in webkit a 2D transform using a percentage, in this case translateY(-50%) it seems that if the object size isn't even, the result will be blurry edges.
Does anybody know how to prevent this effect?
Check this example, the red background box has top and bottom blurry edges.
Related
I've seen many versions of multicolored gradient like images, that are both non linear and heavily stylized. Usually in the form of layered blob like shapes.
My guess as to how they achieve this effect is
drawing intersecting blob like shapes
masking gradients on the shapes
interpolating the colors on the image.
However as you'll notice by the distinct lines in the image the interpolated effect only appears in certain regions of the image. This effect is what I would like to achieve in metal.
One approach is to draw your solid colors and then apply a zoom or motion blur CoreImage filter to achieve the effect of a gradient, leaving some detail by where you place the center (for zoom) or the angle you set (for motion).
Here's an example of a before and a couple afters. The original image in this case is drawn with 2D function plotting but you could easily use a static input image/video-frame, draw an image with filled bezier paths, etc.
The second image uses a CIZoomBlur, input center pt just off image center at (240, 220), with amount set to 134.9.
The CIMotionBlur filter also produces some interesting gradient effects. Here's the same input image, with CIMotionBlur inputRadius 57.6 and inputAngle -0.415.
I think this could achieve what you're after providing you set up the original solid-color image as you like and are able to figure out optimal settings for the filters (angle, center pt etc.).
Unwrapped object was filled out with gradient color. As illustrated in below image, some pixels in UV/Texture view on Seamed edges boundaries are not filled with expected color. It looks like edge has to cross more than a half of the pixel to be colorized.
Is there a way to force all pixels crossed by Seam edge to be colorized properly?
Found a solution. Navigate to Texture Paint for given object and open Options, modify Bleed property, which defines how many pixels will be colorized in UV texture outside Seamed edges. Default is 2px.
I start with a seamless grass texture h133 w133 px, I then rotate it by 45 degrees and divide the height by 2 so i'm left with an isometric diamond shape. The background is #FF00FF that i key out when rendering my tiles.
As you can see, the diamond edges are transparent like after this process see the pic:
closeup pic of the transparent diamond edge
How to stop the transparent pixels and make them solid, thanks.
It sounds like Photoshop is automatically changing the edges when you do any transformation on any object.
Try going to Menu > Edit > Preferences > General
and select 'Image Interpolation' and under that choose "Nearest Neighbor (Preserve Hard Edges)". This will make sure that the pixels stay sharp like those 8-bit artworks.
I have a problem with detection of chessboard-like pattern. The image is very noisy because it is registered with the use of laser scanner.
The only thing I have managed to achieve is detection of big rectangle:
Now I have no idea how to detect those small squares. I tried all sorts of different algorithms, but the contrast in the squares seems too low. Does anybody have any ideas?
Other pattern images: https://dl.dropboxusercontent.com/u/3681534/kalibrator/6.png https://dl.dropboxusercontent.com/u/3681534/kalibrator/8.png
A way to progress would be to determine the grayvalue level at the inner border of the rectangle, then:
Adjust the average brightness inside the rectangle border.
With that knowledge it is possible to adjust the average brightness inside the rectangle to one value (the small square will still be a bit lighter than the rest)
Increase the contrast a lot
Find the lines that run along the edges of the squares
Either access the line crossings directly or paint white and black
Calculate your calibration data
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.