How to draw the line (blue) from 2D vertices (automatically adding edges)?
How to add mechanical dimensions (black)?
I could use PHP to draw the 1. Anyone knows any library or hint for doing the 2. (for instance in JS)?
Some insights:
The mechanical dimensions can only be horizontal or vertical. They should however be able to snap first onto the vertices, and secondly onto the cross-sections of the edge and itself (red circles). I am also thinking about possibility of doing this in some CAD software, but how to make edges automatically from the imported points?
Related
I have randomly generated some points on a JavaScript canvas I was wondering what the most efficient method would be to draw triangles connecting the points in a uniform fashion. The goal is to have the triangles fill the entire canvas without overlapping.
For a visual representation, here is an image of the points I have randomly generated across a canvas. As you can see I may have to modify the way I randomly place the points on the canvas.
And this is how I wish to draw the triangles.
Thanks to #Phorgz & #GabeRogan for pointing me in the right direction. Delaunay Triangulation was definitely the way to go and it ended up being very fast, even when updating the canvas as an animation.
I did end up using the npm package faster-delaunay which uses the divide and conquer algorithm to triangulate the randomly generated points.
Here is a result of what I have drawn on the canvas that updates as the points move around the plane:
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 ...
I'm trying to place a series of overlays onto a Google Map. I'm following along with the sample code for ground overlays, but that only allows me to dictate image placement using north/south/east/west boundaries. The works as long as my image is a rectangle and oriented along longitude and latitude lines. I'd really like to be able to accurately place an image, including custom scale and angular orientation. That doesn't seem possible with a ground overlay.
So here's a possible use case. I'm building a website to help city planners test parking availability.
The city planner uses a Google map on the analysis website to select an area of the street with a polygon select tool.
The website script tests the selected polygon area for parking availability.
When we're done with the evaluation, I'd like the site to paste random images of cars into the page so the user can better visualize what's available.
I can create a rectangular plan view of a car, but I'm unable to figure out how to rotate the image by X degrees as required. Perpendicular to North/South/East/West (NSEW) is no problem, but I'm unable to angle it.
This should work no matter how the original map is oriented. The goal is the user sees a proposed solution, complete in the current map view, and to scale.
Obviously the image would have to be perfectly scaled to the visible map, and that's fairly easy to do (a minor latitude length adjustment may be required.)
(In this image, the city planner has just selected the area of interest via polygon selection tool. The next step is to evaluate the area, and paste in some parked cars, aligned and in scale!)
All the Google mapping native overlay tools I'm looking at rely on LatLngBounds class, hence the NSEW perpendicular alignment problem. I know I can calculate the desired angle, go to a php server, rotate a .png image with transparent background, per php imagerotate, but that seems like such a hack for a geo-mapping exercise. I could also pre-rotate the cars in a .png file and save them as red_car_15degrees.png, blue_car_30degrees.png, white_pickup_45degrees.png, (three different cars x 5 degree increments from 0 to 45 degrees) but that too, just feels like a hack.
Is there anyway to create a custom map overlay at a given desired orientation angle, so I can layer in the cars to show the city planner what's available? Many thanks.
I would draw and rotate in a <canvas> and then out that on.
EDIT:
place on canvas, ctx.rotate, c.toDataUrl(), and overlay that on your map.
Please provide the code that will create an overlay of the red outlined area in the image. Then, the code should return each and every single x and y coordinate contained within said area.
I would then link to cast each point into a comma separated array or list that can be easily checked against.
Using the canvas HTML5 element would be ideal here so that I can reproduce this for 3 additional images.
Similar question proof of Concept
Here's a starting plan for you
For each bin:
Pick a unique color,
Physically put 3 pieces of tape at the bottom-front, top-front & top-back of the bin. This example image has green tape in the appropriate places.
Take a picture of the group of bins,
Draw the picture onto the canvas,
Use context.getImageData to fetch all the pixels on the canvas,
Test the pixels in vertical strips until you find the 4 corners of all 3 pieces of tape,
You have the coordinates that define this bin,
Create a canvas path connecting the coordinates,
Once again go through the pixels you fetched in the image and use context.isPointInPath to determine which pixels are inside the bin path.
Repeat with different unique colors for each bin in the group.
I use three canvas' over each other to draw a map for a robot application. The map gets constantly updated (on pixel level) based on the robots sensor results.
I now want a part of this map to be displayed in a zoomed way at a diffent place on the page.
Aim is to have a zoomed view of the robots actual position drawn above the complete map.
What is the best/easiest approach for this?
Thanks
Robert