Find where a bisectrix interesects a specific area of an Image - javascript

First of all I am using javascript and KineticJS.
I have a picture of an xray(so you can picture what kind of colors its using) and the picture is a profile picture of the scull like these. I have some lines that are formed after users clicks at some specific points, which some of them intersect. In a pair of them I need to know when the bisectrix of the angle formed by the two intersecting lines, intersect with a specific part of the scull that is when the bone starts (which is greyer i think) My question is there a good way of checking this? I mean Suppoze i take each point on my bisectrix line and check the color of the pixels? How can I be sure since xrays might differ(film brightness etc). Could you give me a suggestion or lead me to somewhere?

Your question is a bit confusing.
If 2 lines intersect then 4 angles are created and therefore 4 bisecting lines are created.
Anyway here's how to get started...
Once you determine which points are interesting, you can use context.getImageData to fetch the rgba values of the pixels at those points.
Then convert each rgba pixel color to hsl format. Hsl format separates the Hue, Saturation & Lightness of a color.
Bones & teeth appear lighter so you can compare lightness values to discover bone/teeth.
[ Addition: Calculating points along the bisecting line ]
If you know the intersection point of 2 lines [x,y] and you know the angle you're interested in (radianAngle), then you can compute a point at distance (d) along the line that bisects that angle like this:
var lineX = x + d * Math.cos(radianAngle);
var lineY = y + d * Math.sin(radianAngle);
Then you can use the data from getImageData to fetch the rgba color at point [lineX,lineY]. Then convert to the hsl format and use the Light value to determine if [lineX,lineY] is over the lighter bone.

Related

How do I color a hexagonal grid such that it doesn't have neighbors of the same color?

I have a javascript app that generates a hex grid. Each hex is pointy topped with three variables for each of the cube coordinates (x, y & z). I also have an array with three hex sprites.
I've tried sprite = sprites[hex.x&3], which produces neat rows of hexes. I have also tried to offset the rows depending on the column via sprite = sprites[(hex.x + hex.y&3)&3] but that didn't work. I'm currently fiddling with the formula with little success.
I know for a fact that I need no less than three sprites to do this, but I can't find a way to combine the three cube coordinates to show the correct sprite on the array :(
In a hex grid you'll need three colors to color each hex so that it doesn't have the same color as a neighbor:
You were on the right track with your solution. Instead of adding x+y you'll want to subtract x-y. The other change is that &3 is for bit manipulation; you'll want %3 instead. However, in some languages, including Javascript, %3 can return a negative number, so you'll need to use ((___%3)+3)%3 to make it positive.
The color/sprite id you want is ((x-y)%3 + 3) % 3. I made an interactive demo to test this.

Warp an SVG in JavaScript into an arc

I saw a d3 helper function which can create an svg arc: making an arc in d3.js
Is there a way to bend an existing svg into an arc in d3.js? If not, how can it be done in JavaScript? The initial image could be a square with negative space inside that makes a silhouette of something like a cat.
I included a drawing of what I want. I eventually want to make more and create a ring, and then concentric rings of smaller transformations.
I think conformal mapping is the way to go. As an example, I have started with the original square source and the circularly arranged (and appropriately warped) squares using conformal mapping. See the Circular Image and the Corresponding Square Image. Note, however, that I first converted the SVG source into a png image, and then applied conformal mapping transformation to each pixel in the png image. If anyone has a method of mapping entirely in the SVG domain [where the source uses only straight lines and bezier curves], pl. let us know!
I am not able to provide the code -- it is too complex and uses proprietary libraries). Here is a way to do it.
In order to compute the conformal mapping, I used a complex algebra library. JEP is one example. For each pixel in the OUTPUT image, you set Z = (x, y) where (x, y) are the coordinates of the pixel and Z is a complex variable with real part x and imaginary part y. Then you compute NEWZ = f(Z) where f is any function you want. for circle, I used an expression such as "(ln(Z*1)/pi)*6-9" where the log (ln) provides circularity, the 6 implies 6 bent squares in a circle and the -9 is a scaling factor to center and place the image. From the (X, Y) values of the NEWZ, you look up the old image to find the pixel to place in the new image. When the (X, Y) values are outside the size of the old image, I just use tiling of the old image to determine the pixel. When X and Y are fractional (non-integer) you average the neighbors in a weighted way.

Shortest path between 2 co-ordinates, through set of co-ordinates - Javascript

I need to write a JavaScript algorithm to find the shortest path between 2 co-ordinates. I have looked at using a few route finding algorithms, such as the A* algorithm.
The difference in my application however is that I know all of the co-ordinates that the path can take.
For example, in the image below, the green square would be the starting place co-ord, with the red square being the end place co-ord. The co-ord represented by every black square would be stored in an an array (or other data structure).
So I need the shortest path from the green square, to the red square, but it can only pass through a black square to get there. Would I still use the A* algorithm to implement this?
Yes you can use A*. You would calculate the distance (number of moves) from every black coordinate to the red square. Then you got a graph structure from which square to which square you can move and every node in that graph has the distance stored to the red square. Then you apply the A* to that graph and get the shortest path.
EDIT
For A* you need a heuristic, that tells you which node is closer to the endpoint. Calculating the "air distance" between a black field and the red field gives you this heuristic for each field. Then you do A*, which is basically the Dijkstra-Algorithm with a heuristic. In your example the air distance between the green and the red field if the top left corner is (x = 0, y = 0), red is (14, 7) and green is (0, 1) then the air distance would be ABS(14 - 0) + ABS(7 - 1) = 20. So it is very easy to calculate from the coordinates.

2d perspective skew in JS

I want to transform an image in 2 points perspective.
I guess I need to transfer to JS a formula from: http://web.iitd.ac.in/~hegde/cad/lecture/L9_persproj.pdf
But I'm humanities-minded person and I faint when I see matrices.
Here's what I need exactly:
I have a two vanishing points: X(X.x, X.y) and Z(Z.x, Z.y). And rectangle ABCD (A.x, A.y and so on)
(source: take.ms)
And I want to find new nA, nB, nC and nD points with which I can transform my rectangle like that (the points order doesn't really matter):
(source: take.ms)
Right now I'm doing weird approximate calculations: I'm looking for most distant point from X (1), then lay over an interval towards Z (2), than another interval towards X (3) and then again from Z (4):
(source: take.ms)
The result is a bit off but is alright for the precision I need, but this algorithm sometimes gives very weird results if I change vanishing points, so if there's a proper solution I'll gladly use it. Thanks!

How to subdivide a shape into sections of a given size

I'm currently trying to build a kind of pie chart / voronoi diagram hybrid (in canvas/javascript) .I don't know if it's even possible. I'm very new to this, and I haven't tried any approaches yet.
Assume I have a circle, and a set of numbers 2, 3, 5, 7, 11.
I want to subdivide the circle into sections equivalent to the numbers (much like a pie chart) but forming a lattice / honeycomb like shape.
Is this even possible? Is it ridiculously difficult, especially for someone who's only done some basic pie chart rendering?
This is my view on this after a quick look.
A general solution, assuming there are to be n polygons with k vertices/edges, will depend on the solution to n equations, where each equation has no more than 2nk, (but exactly 2k non-zero) variables. The variables in each polygon's equation are the same x_1, x_2, x_3... x_nk and y_1, y_2, y_3... y_nk variables. Exactly four of x_1, x_2, x_3... x_nk have non-zero coefficients and exactly four of y_1, y_2, y_3... y_nk have non-zero coefficients for each polygon's equation. x_i and y_i are bounded differently depending on the parent shape.. For the sake of simplicity, we'll assume the shape is a circle. The boundary condition is: (x_i)^2 + (y_i)^2 <= r^2
Note: I say no more than 2nk, because I am unsure of the lowerbound, but know that it can not be more than 2nk. This is a result of polygons, as a requirement, sharing vertices.
The equations are the collection of definite, but variable-bounded, integrals representing the area of each polygon, with the area equal for the ith polygon:
A_i = pi*r^2/S_i
where r is the radius of the parent circle and S_i is the number assigned to the polygon, as in your diagram.
The four separate pairs of (x_j,y_j), both with non-zero coefficients in a polygon's equation will yield the vertices for the polygon.
This may prove to be considerably difficult.
Is the boundary fixed from the beginning, or can you deform it a bit?
If I had to solve this, I would sort the areas from large to small. Then, starting with the largest area, I would first generate a random convex polygon (vertices along a circle) with the required size. The next area would share an edge with the first area, but would be otherwise also random and convex. Each polygon after that would choose an existing edge from already-present polygons, and would also share any 'convex' edges that start from there (where 'convex edge' is one that, if used for the new polygon, would result in the new polygon still being convex).
By evaluating different prospective polygon positions for 'total boundary approaches desired boundary', you can probably generate a cheap approximation to your initial goal. This is quite similar to what word-clouds do: place things incrementally from largest to smallest while trying to fill in a more-or-less enclosed space.
Given a set of voronio centres (i.e. a list of the coordinates of the centre for each one), we can calculate the area closest to each centre:
area[i] = areaClosestTo(i,positions)
Assume these are a bit wrong, because we haven't got the centres in the right place. So we can calculate the error in our current set by comparing the areas to the ideal areas:
var areaIndexSq = 0;
var desiredAreasMagSq = 0;
for(var i = 0; i < areas.length; ++i) {
var contrib = (areas[i] - desiredAreas[i]);
areaIndexSq += contrib*contrib;
desiredAreasMagSq += desiredAreas[i]*desiredAreas[i];
}
var areaIndex = Math.sqrt(areaIndexSq/desiredAreasMagSq);
This is the vector norm of the difference vector between the areas and the desiredAreas. Think of it like a measure of how good a least squares fit line is.
We also want some kind of honeycomb pattern, so we can call that honeycombness(positions), and get an overall measure of the quality of the thing (this is just a starter, the weighting or form of this can be whatever floats your boat):
var overallMeasure = areaIndex + honeycombnessIndex;
Then we have a mechanism to know how bad a guess is, and we can combine this with a mechanism for modifying the positions; the simplest is just to add a random amount to the x and y coords of each centre. Alternatively you can try moving each point towards neighbour areas which have an area too high, and away from those with an area too low.
This is not a straight solve, but it requires minimal maths apart from calculating the area closest to each point, and it's approachable. The difficult part may be recognising local minima and dealing with them.
Incidentally, it should be fairly easy to get the start points for the process; the centroids of the pie slices shouldn't be too far from the truth.
A definite plus is that you could use the intermediate calculations to animate a transition from pie to voronoi.

Categories