<div class="bg-gradient-to-r from-cyan-500 to-blue-500 ">
.
.
.
.
I have tried the above code. But it's a linear gradient, I want a vertical gradient.
But it's a linear gradient, I want a vertical gradient.
linear is a type of gradient, vertical is a direction. You probably meant that you have horizontal gradient and you want vertical. They would both be linear though.
All default available directions that you can use for linear gradient:
bg-gradient-to-t
bg-gradient-to-tr
bg-gradient-to-r
bg-gradient-to-br
bg-gradient-to-b
bg-gradient-to-bl
bg-gradient-to-l
bg-gradient-to-tl
So for vertical direction just use bg-gradient-to-t (from bottom to top) or bg-gradient-to-b (from top to bottom)
More info in the docs
Related
Does opencv have a function that can visually depict the gradient directions of an image?
Ie, a function that draws arrows over the top to visually show which direction the gradient slope runs? Or maybe colourise the image where red = angle 0 and so on?
Below is an example of what I mean when I say "visually depict the gradient directions of an image":
I know other people have done this but I don't want to reinvent the wheel if there is an OpenCV function or publically available function out there.
No, you need to implement it by yourself.
I'm quite a beginner with c++, especially graphically related.
I would like to make an animated background for my graphicsview which looks kind of like this:
Gradient Field Airflow
The picture represents the turbulence of an airflow over an object.
The colors must be based on a matrix of values.
I can only find how to do single-direction gradients with QT.
How do I set this up? How do I get two-directional gradients?
/*edit
It has been pointed out well that technically speaking this is not a gradient, but an color interpolation on a 2d array of nodes.
*/
Well you have not provided the input data so no one knows what you really want to achieve !
if you have the flow trajectories and mass
Then you can use some particle system + heavy blurring/smoothing filtering to achieve this. For any known point along the trajectory plot a dithered circle with color depend on the mass/temp/velocity... and color scale. It should be solid in the middle and transparent on the edges. After rendering just blur/smooth the image few times and that should be it. The less points used the bigger the circles must be to cover the area nicely also can do it in multi pass and change the points coordinates randomly to improve randomness in the image...
if you have field strength/speed/temp or what ever grid values
Then it is similar to #1 also you can instead of particle system do the rendering via QUADs/Squares. The 2D linear gradient is called Bilinear Filtering
c00 -- x --> c01
|
|
y c(x,y)
|
|
V
c10 c11
where:
c00,c01,c10,c11 are corner colors
c(x,y) is color on x,y position inside square
x,y are in range <0,1> for simplicity (but you can use any with appropriate equations scaling)
Bilinear interpolation is 3x linear interpolation:
c0=c(x,0)=c00+((c01-c00)*x)
c1=c(x,1)=c10+((c11-c10)*x)
c(x,y) =c0 +((c1 -c0 )*y)
so render all pixels of the square with above computed colors and that is what you seek. This kind of filtering usually produce artifacts on the edges between squares or on diagonals to avoid that use non linear filtering or blur/smooth the final image
There is a tutorial on gradients in Qt: http://qt-project.org/doc/qt-4.8/demos-gradients.html and a class: http://harmattan-dev.nokia.com/docs/library/html/qt4/qgradient.html I have never used other than linear gradients and according to the docs, it seems there are only three basic types of gradients available in Qt: linear, radial and conical. If you cannot compose your desired gradient using these three types, then I am afraid you will need to program your image pixels by yourself. Not to forget, it might be worthy to explore if OpenGL somehow could help. Qt has some classes using OpenGL but I am not familiar with them to provide more advice.
I've created an openCV application for human detection on images.
I run my algorithm on the same image over different scales, and when detections are made, at the end I have information about the bounding box position and at which scale it was taken from. Then I want to transform that rectangle to the original scale, given that position and size will vary.
I've wrapped my head around this and I've gotten nowhere. This should be rather simple, but at the moment I am clueless.
Help anyone?
Ok, got the answer elsewhere
"What you should do is store the scale where you are at for each detection. Then transforming should be rather easy right. Imagine you have the following.
X and Y coordinates (center of bounding box) at scale 1/2 of the original. This means that you should multiply with the inverse of the scale to get the location in the original, which would be 2X, 2Y (again for the bounxing box center).
So first transform the center of the bounding box, than calculate the width and height of your bounding box in the original, again by multiplying with the inverse. Then from the center, your box will be +-width_double/2 and +-height_double/2."
Good Morning everybody,
Today I wanna concern about the topic "Image Manipulation in C++".
So far I am able to filter all the noisy stuff out of the picture and change the color to black and white.
But now I have two questions.
First Question:
Below you see a screenshot of the image. What is the best way to find out how to rotate the text. In the end it would be nice if the text is horizontal. Does anybody have a good link or an example.
Second Question:
How to go on? Do you think I should send the image to an "Optical Character Recognizer" (a) or should I filter out each letter (b)?
If the answer is (a) what is the smallest ocr lib? All libs I found so far seem to be overpowered and difficult to implement in an existing project. (like gocr or tesseract)
If the answer is (b) what is the best way to save each letter as an own image? Shoul i search for an white pixel an than go from pixel to pixel an save the coordinates in an 2D Array? What is with the letter "i" ;)
Thanks to everybody who will help me to find my way!Sorry for the strange english above. I'm still a language noob :-)
The usual name for the problem in your first question is "Skew Correction"
You may Google for it (lot of references). A nice paper here, showing for example how to get this:
An easy way to start (but not as good as the previously mentioned), is to perform a Principal Component Analysis:
For your first question:
First, Remove any "specs" of noisy white pixels that aren't part of the letter sequence. A gentle low-pass filter (pixel color = average of surrounding pixels) followed by a clamping of the pixel values to pure black or pure white. This should get rid of the little "dot" underneath the "a" character in your image and any other specs.
Now search for the following pixels:
xMin = white pixel with the lowest x value (white pixel closest to the left edge)
xMax = white pixel with the largest x value (white pixel closest to the right edge)
yMin = white pixel with the lowest y value (white pixel closest to the top edge)
yMax = white pixel with the largest y value (white pixel closest to the bottom edge)
with these four pixel values, form a bounding box: Rect(xMin, yMin, xMax, yMax);
compute the area of the bounding box and find the center.
using the center of the bounding box, rotate the box by N degrees. (You can pick N: 1 degree would be an ok value).
Repeat the process of finding xMin,xMax,yMin,yMax and recompute the area
Continue rotating by N degrees until you've rotated K degrees. Also rotate by -N degrees until you've rotated by -K degrees. (Where K is the max rotation... say 30 degrees). At each step recompute the area of the bounding box.
The rotation that produces the bounding box with the smallest area is likely the rotation that aligns the letters parallel to the bottom edge (horizontal alignment).
You could measure the height to each white pixel from the bottom and find how much the text is leaning. It's a very simple approach but it worked fine for me when I tried it.
In Photoshop there is a tool that allows the selection to be "Distorted". This allows easy shadow creation among other things. How could this sort of distortion be applied for a polygon (a bunch of points)?
Thanks
If your aim is to accomplish something like this (black original, red after distortion)
then you can:
fix a base for applying distortion (generally normal to the direction in which you want to distort, for example - here the direction of distortion is towards the right and the base is the bottom edge of the rectangle)
displace each point on the figure by a distance proportional to its distance from the base, for example - point A (assuming it to be at 70% height) would be displaced by a distance of 0.7 * (displacement of top left corner point)
Using such a sequence of such distortion cycles, you can get the transformation that you want.
This all links into matrices unless I'm mistaken - you'll want to look it up on the net, I'll not be onto it for a couple of weeks but thought I might as well give you a pointer.
This particular distortion (pictured) is called the "shear" effect and is just a matter
of applying an horizontal offset to each scanline of the polygon.
Many graphic effects can be done with simple primitives like this (there is even a shear
rotation).
Have a look at "Graphic GEMS" with Google.