Develop Reference

How can picture of page be straightened out to look as if it was scanned?

I have seen apps, and wondered how can I programmatically take a picture of image. Define how it needs to be transformed so that it looks parallel to camera and not skewed perspective wise.
Then combine multiple photos to create a pdf file. For example this app does it: https://play.google.com/store/apps/details?id=com.appxy.tinyscan&hl=en

I do not use books for such trivial things so sorry I can not recommend any (especially in English). What you need to do is this:
input image
find main contours
ideally whole grid but even outer contour will suffice (in case no grid is present). You need to divide the contour into horizontal (Red) and vertical (Green) curves (or set of points).
sample contour curves by 4 "equidistant" points
as the image is distorted (not just rotated) then we need to use at least bi-cubic interpolation. For that we need 16 points (Aqua) per patch.
add mirror points to cover whole grid
on the image are mirrored (Yellow) points only for horizontal contours you should do this also for vertical contours (did not fit me in the image and did not want to enlarge resolution just for that) and also for the corner points so you got 6x6 control points. The mirror can be done linearly (like I did).
Now the transformation is done like this:
Process all pixels dst(x0,y0) of target image
Handle x,y as parameter for cubic interpolation
if xs,ys is target image resolution then:
u=(3.0*x)/xs
v=(3.0*y)/ys
Now cubic interpolation is usually done on parameter t=<0.0,1.0) so
if u=<0.0,1.0> use t=u and control points 0,1,2,3.
if u=<1.0,2.0) use t=u-1.0 and control points 1,2,3,4
if u=<2.0,3.0> use t=u-2.0 and control points 2,3,4,5
The same goes for vertical contours and v. Compute xi,yi as bi cubic interpolation of (u,v). And copy pixel:
dst(x,y)=src(xi,yi);
This is just nearest neighbor but you can also use bilinear for this ... As cubic curve I would use this polynomial.
The idea behind bi-cubic interpolation is easy. compute point corresponding to parameter u on 4 horizontal contours. That will give you 4 control points for the final cubic interpolation in vertical direction and v as parameter. Resulting coordinate is your source pixel position.
For more info see:
How can i produce multi point linear interpolation?
Bicubic interpolation
OpenCV Birdseye view without loss of data
In case you do not have a grid use any info that can be used as one. For example lines of text can be considered a contour for this ...

How to remove wireframe diagonals?

I wrote a custom exporter for CAD software to export geometry data to ThreeJS editor. Now, of course in ThreeJS I wrote a correct loader which is loading all the geometry correctly.
There is just one problem; In wireframe view in ThreeJS I have triangles from each vertex. With what technique can I remove the triangulation and diagonals ? How can I show wireframe without diagonals ?
Source 3D:
ThreeJS 3D: (see the triangles and diagonales)

it looks like you are drawing all points/polygons as single polyline
that is not correct you should process each polygon as line loop
if your mesh is triangulated or quaded then you need to extract the perimeter line
extracting perimeter line
if your mesh is not defined by polygons then you need to group all connected primitives as single polygon
take all lines from single polygon in a list
find duplicate lines and remove them all
so all lines that uses the same points (in any order) are duplicate
joined primitives share the same edge
so this is enough for properly triangulated polygons
some triangulations can be joined by line only not by points
for these you need to compare all remaining lines
take all parallel lines (the same or opposite angle)
and test if they lies on the same line
if yes and are connected (overlapping)
then cut the lines so the overlapped part will be deleted
Bad triangulation
if primitives are overlapping instead of joined
then draw single polygon to cleared buffer
then process all lines
compute midle point for each
and test if the coordinate is filled in the buffer or not
if it is remove the line
this is not 100% bullet proof
you should test more points along each line
and if some are in and some out then find the intersections and cut the inside part only
you can also use vector approach for the inside test but you have to handle multiple overlaps

Programatically creating a triangle grid from centerpoint on graph

Im going to try to explain this as best as I can.
I have a centerpoint defined on a canvas element where I am using Kinetic JS to draw triangles.
What I want to do, is create an array of coordinates based on the center point of the excircle radius of a triangle (Kinetic draws regular polygons by using the excircle radius) to see how many of the triangle center points will fit on the canvas in a grid structure. Think this but bigger:
Now Ive already done this with squares because they fall in the same interval from the centerpoint on both the X axis and the Y axis. However with triangles this ends up being different due to where the radius center point of the excircle on a triangle is. Here is a semi clear picture illustrating the interval difference:
Now these coordinates HAVE to be pushed into an array in a very specific way, or else the way I have planned for them to interact will not work correctly.
Ultimately I want to find the bottom most triangle coordinate possible. Find out if that triangle is flipped at 180 degrees or 0 degrees respectively while making sure the centerpoint of the entire canvas is touching the vertex of a triangle.
Sounds complicated? It is. Ive been trying several different methods and racking my brain for two weeks now, and I cant figure out an algorithm that will allow me to do this from any canvas size possible.

Can I make a THREE.js shape from a series of contours?

Let's say I have three flat shapes. For simplicity we'll make them circles:
Is there any way in THREE.js to 'stack' these vertically and create a shape that fills in the space between them? If you imagine those circles stacked vertically, the eventual shape I'd want would be a sort of flat-topped cone.

Process is called extrusion and is showed here - http://stemkoski.github.io/Three.js/Extrusion.html
I've never tried it myself, so I can't help with actual use.

How can I (somewhat) evenly distribute dynamically-sized SVG shapes within a canvas?

I'm looking for some high-level recommendations for how to implement a project I'm starting for a client.
This is a web page that will include an SVG canvas (sized 920px W x 450px H) containing 20-40 "circular" images (i.e., they may just be square images cropped with a circle). The size of the images will probably range from about 50px to about 200px diameter, each one set dynamically within that range based on data from an API. It's basically a dynamic data visualization, so pretty much every aspect of this needs to be configurable/dynamic.
I think the hardest problem to solve is how to distribute these images within the given canvas area, considering that they will vary in size, and should appear to be evenly/randomly distributed (i.e., they shouldn't line up to a grid, be clumped together, or be in groups of similar sizes). It's OK if they overlap slightly. Here's a quick sketch of how this should look, ideally (each gray circle represents an image):
https://skitch.com/troywarr/gwj14/adobe-fireworks-cs5
FWIW, I was planning to use Raphaël as an SVG library; I'll also have jQuery available and can probably use any other libraries as needed. This needs to be cross-browser compatible back to IE7.
Can anyone suggest a general approach to this problem, any specific libraries or algorithms to look into, or provide any other guidance or suggestions? Please let me know if this description isn't clear, or if you need any additional details.
Thanks in advance!

Here is how I would tackle it:
First decide on the percentage of the screen that will be filled in with circles and the number of circles that will be displayed. You can use that to determine the average radius of each circle using the area of a circle formula - e.g. given x circles what would the average radius of all the circles have to be to cover y% of my container. You can then decide how much you want the radius to vary, that is +/- 50%. Unless the number of circles is very small you should get a good result - statistically that is.
Then I would divide the screen in to a rectangular grid - I know that is not what you want just be patient :) The dimensions of the grid are calculable from the number of circles, e.g. 16 circles would fit nicely into a 4 X 4 grid. The number of circles can be less than the number of cells but not a lot less.
I would then select a random x,y co-ordinate inside each grid cell as my circle's center. I would also leave a padding of about 25% around the edges so that my circle is not centered too close to an edge.
You could then check for overlap - the ratio of (r1 + r2) / distance between the circle center points will equal 1 if the circles touch, be less than 1 if they don't and greater than 1 if they overlap. A ratio of 1.1 is a small overlap; careful of the limit here - exact same centers result in a distance of 0 and a division by 0 error.
One thing to worry about but should not happen unless you pick a very high initial coverage percentage or the number if circles is much smaller than the number of cells. If all the cells adjacent to a given cell have circles close to that cells edges, especially if they overlap the edge, there may not be enough room (even with circle overlap) for the current cell's circle. This can be checked for and handled by shrinking the radius or moving a circle away...
NOTE if the number of desired circle's does not exactly match your square (or rectangular) grid, just randomly leave some cells empty...

Here's a rough description of the approach I took after all. Sorry, pressed for time so this may be inexact.
I initially approached the problem similarly to #BigMac66's answer. I laid out a grid corresponding to the quantity of circles I had, drew a circle in each and then randomly shifted the circles from the center point of each grid cell.
I built in a variety of "fudge factors" - circle radius bounds, offset from center, maximum overlap with adjacent cells, etc. - but, no matter how I tweaked my settings, you could still always tell that a grid was behind the layout; the circles aligned just enough to look like a wonky polka dot pattern rather than a truly random collection of circles.
So, I changed to a more brute-force approach.
First, I set up configurable bounds for the radius of a circle, tweaking the upper bound until I found a maximum size that didn't make the canvas look crowded based on the total number of circles I had.
Then, I applied my math to size the circles as needed (in short, the largest circles represented a 100% value, and the smallest represented a 0% value; the rest were sized accordingly based on where they fell in the spectrum).
Then, I sorted the circles descending by size. I laid them out randomly on the canvas, using an algorithm roughly like so:
Place a circle at random coordinates.
Place the next circle at random coordinates.
If the latter circle overlaps the former by more than X pixels (configurable param), place it at a new set of random coordinates.
Continue step #3 for up to Y times (another configurable param) until you successfully place another circle.
If you can't place the circle in Y times, clear the canvas, drop the maximum circle radius by Z pixels (another configurable param) and start over.
This worked surprisingly well, and I tweaked the params until I could draw the entire canvas very quickly while requiring few maximum circle radius reductions.
You can actually see the finished product here:
http://www.eonline.com/news/2012_sag_awards/heatgauge
It's out of season, so click the "Overall View" tab at the top of the main box to see cumulative stats (and hence a full canvas of circles).