how to add non-linear gradient to svg shape - svg

I would like to add a gradient to SVG shapes that is related to the square root, rather than linear. I have only come across linear, and radial gradients in documentation. Is there a way to define the function that applies the gradient to the shapes?

Related

How to approximate low-res 3D density map to smooth models?

3D Density maps of course can be plotted as heatmap, but when data itself is homogeneous (near 0) except for a small part (2D cross section for example):
This should give a letter 'E' shape as 2D "model". The original data is not saved as point-cloud however.
A naive approach would be to use the pixels that are more than a certain value, and then smooth the border. However this does not take into account of the border pixels being small.
Another would be to use some point-cloud based algorithms that come with modeling softwares, but then the point-cloud's probability function would still be discontinuous on pixel border, and not taking into account that only one side have signal.
Is there any tested solution to this (the example is 2D, the actual case is many 2D slices that compose a low-res 3D density map)? I was thinking of making border pixels have area proportional to signal data, and border should be defined from gradient? Any suggestions?
I was thinking of model visualization results similar to this (seems to be based on established point-cloud algorithm):

Transformation of pan vector using SVG API

I have an SVG <path> with points in "model" coordinate system. For simplicity let my path consist of x, sin(x) pairs - note the lack of any scaling and offsets.
To render it on screen I calculated a SVGMatrix and put it into SVGTransformList of my path element. Also I use CSS vector-effect: non-scaling-stroke.
Now I want to pan my sine chart using a mouse, so I got the shift vector in SVG screen coordinates.
My idea is to put one more matrix in my SVGTransformList and calculate it from the screen shift vector.
Should I put this new matrix before or after my original matrix? What is considered a good style? (I know that the coefficients of the second matrix will be different in the two cases)
Also to transform my shift vector to model coordinates I transform back two SVGPoints: zero and with coordinates of my delta vector, and manually subtract the images coordinate-wise. Is it the way to transform vectors, e.g. there are
no better math or API approach?

What's the purpose of a unit normal vector when creating a 3D shape?

I understand that to create a shape (let's say a 3D sphere for an example) that I have to first find the vertex locations of the shape and second, use the parametric equation in order to create the x, y, z points of the triangle meshes. I am currently looking at a sample code to create shapes and it appears that after using the parametric equation in order to find the vectors of the triangle meshes, unit normals to the sphere at the vertices are found.
I understand why regular vectors in the first step are used to create the 3D shape and that a normal vector is perpendicular to the shape object, but I don't understand why the unit normal vectors at the vertices are used to create the shapes? What's the purpose of finding the normal of the vectors?
I am not sure I totally understand your question, but one very important use for normals in computer graphics is calculating reflections. For instance, if you're writing a simple raytracer, Lambertian reflectance is quite easy to compute if you know the normal vector where your camera ray intersects a surface. Normals are similarly required for (off the top of my head) the majority of calculations involved in more complex rendering techniques.

Affine warp of rectangle

I need to warp imaginary rectangle lying on the image.
So I think I need:
Detect which pixels of images belong to rectangle (something like rasterization?).
Do warp of pixels and somehow do interpolation in rectangle (I don't know how) between pixels.
How to deal with border pixels of belonging to different rectangles?
Generally I trying to do something like this
For warping the images, the following procedure can be applied.
Assuming that you have the displacements of each of the points on the lattice, you need to do a B-Spline interpolation(based on the displacements of the neighboring lattice points) to deform the source image.
For obtaining the optimal displacement of each lattice point, you can use a label set corresponding to the displacement of the lattice point in x-y direction and compute SSD between patches in the source and the target image for different labels. For a smooth solution, a regularization prior needs to be added, so that neighboring points on the lattice have a similar displacement. This joint optimization problem can be solved using MRFs.

Stroking an SVG polyline with a gradient

Is it possible to stroke an SVG polyline with an horizontal linear gradient where the gradient's angle changes at every polyline vertex? it would look something like this:
Have a look at tubefy by Israel Eisenberg. There's not currently anything in svg that will give you exactly what you're asking for declaratively. However, tubefy makes use of svg for rendering, and can produce advanced gradients such as the one you're looking for.

Resources