Create shapes from Canny Edge Detection in Canvas - javascript

Does anybody have an idea on how I can create shapes from Canny Edge Detection in Canvas?

I assume here you already have the Canny edge detection implemented based on the way the question is formulated -
You can use an approach such as this (written in Java but should be easy enough to translate into JavaScript) and/or perhaps some limited use of line-fitting approaches (statistical).
The essence is that you will have to find out which pixels are connected and create polygon objects/arrays yourselves based on the result of the edge detection.
Once you have the connected pixels you can use point reduction algorithms such as the Ramer–Douglas–Peucker algorithm (JavaScript implementation here) to avoid the polygons to contain every single point of similar sloped lines and so forth.
You will run into a variety of challenges though such as short segmented lines due to too much noise in the original image or "weak lines", clusters of "lines" which makes it hard to find out how to connect them as polygons.

I don't know of any libraries for this, however you could:
Use getImageData() to access a byte[] of pixel data
Implement your own convolution filter on top of that data (examples for this may exist online)
In this way you can find areas of high contrast (edges.)
EDIT I agree with Ken -- I may have misread the question.
In addition to Ken's answer, if you know what kinds of shapes you're looking for then you might like to look at the Hough Transform which is well suited to detecting lines, ellipses and other shapes that can be geometrically defined using only a few parameters.

Related

How much slower is drawing to a transparent canvas and checking if point is transparent than checking if point is in a complex polygon?

This is more of a generic question to be honest, just wondering if anyone has done any sort of research on the subject.
Basically I am adding event support to a small game engine I am creating for my own personal use. I would like pixel perfect hover over 2d object event support and am just thinking of the best way of doing it. Realistically it would be faster for me personally just to invoke a draw of my objects onto a transparent canvas and checking if the mouse x y is over a transparent pixel or not since I dont have to make a set of points defining the outside of an object. This would also allow me to have holes in my object and it would still correctly know if I hovered over or not.
What I am wondering is using methods shown here: How can I determine whether a 2D Point is within a Polygon?
How much slower would my method be to the methods shown there?
Im currently still learning so its not easy for me to implement all of this and just test it myself since it would probably take me ages to get to work correctly and test the speeds.
Side note: I would still have a basic bounding box to save it from redrawing and testing every single time.
Checking if a point is in a polygon will 99.999999% of the time be vastly, vastly faster.
To be slower the polygon would need to be extremely complex.
To do the other method you need to use getImageData, and getting image data on the canvas is very slow.
Point in polygon algorithms do properly account for holes. Make sure you have one that obeys the non-zero winding number rule, because that is what canvas uses (as opposed to the even odd rule) and you may want compatibility with paths constructed in the canvas (either now or later).

Drawing lots of hexagons and distorting them

I'm starting a web game, and I would like to know the best way to do it.
The game is a field of hexagons seen from the above, that can be rotated/inclined.
What's the best way to do it? What I was going to do was use a canvas and use 2d transforms to simulate 3d rotations, the problem is that:
The game must work on smartphones
For every rotation i must redraw all the canvas, and there could be 200 hexagons on the screen to redraw many times, so i think canvas are too expensive in terms of resources...
There's two ways I can think of:
Using canvas only. This means quite wide browser support, will have few quirks and generally "just work". Potential problems: Performance on low-end machines like you mentioned. But is rotating the game critical to gameplay? If not, you could consider turning that off on slow smartphones. Users will most likely not miss that feature if it's not important to gameplay.
A combination of canvas and CSS3 transforms (rotating cube example). Could give you better performance than pure canvas solution. Potential problems: requires "mixing" of techniques, which always means a risc of running into unexpected problems or quirks.
You should look at www.kineticjs.com
Canvas is the way to go for drawing 100's of shapes because it doesn't write to the DOM for every path like SVG does.
It has several examples where shapes are programmatically drawn in the 1000s. I recently used it for a similar animation here:
http://movable.pagodabox.com

Javascript library for resampling an array?

I'm trying to visualize some data on an HTML canvas and I'm facing an issue similar to this one. That is, the size of my data doesn't exactly match the size of my canvas.
In one instance I'd like to plot a 1024 point signal on a canvas that's 100px wide. (E.g., an audio waveform.)
In another instance I'd like to show a 1024 by 5000 point matrix on a canvas that's 100 px high by by 500 px wide. (E.g., an audio spectrogram.)
In both cases, I'll need to resample my data so that it fits on the canvas. Does anyone know of a library/toolkit/function in Javascript that can do this?
** EDIT **
I'm aware that there are many techniques I could use here. One possibility is to simply discard or duplicate data points. This would do in a pinch, but discarding/duplication is known to produce results that tend to look "jagged" or "blocky" (see here and here). I'd prefer to use a slightly more sophisticated algorithm that outputs smoother images such as Lanczos, bilinear or bicubic resampling. Any of these would meet my needs.
My question isn't about which algorithm to use, though, it's about whether any of them have been implemented in open-source javascript libraries. Surprisingly, I haven't been able to find much in JS. Coding my own resampling function is obviously an option, but I wanted to check with the SO community first to make sure I wasn't re-inventing the wheel.
(This answer gives a code listing that's very close to what I want, except that it operates directly on the canvas objects rather than the data arrays, and it forces the aspect ratios of the input and output to be the same. If nothing else is available, I can definitely work with this, but I was hoping for a solution that's a bit more general and flexible, along the lines of Matlab's resample.)
use canvas scale
ctx.scale(xscale,yscale);
you can determine the scaling by calculating the rate between your canvas and the data
ctx.scale(canvas_x/data_x,canvas_y/data_y)

3D perspective text on a webpage

How can I achieve 3D text transformations in perspective using Javascript/CSS.
Solutions using external libraries of Javascript/CSS are also possible
CSS transformations with perspective are only possible with Safari at this point. Alas Chrome, while based on Webkit, and seemingly supporting the proper CSS attributes, will not apply perspective transformations. They will be supported at some point on Firefox, no clue about IE.
Your only other option really is <canvas>. However, just like with CSS transforms, the canvas API only provides functions for "2D" affine transformations (scaling, rotation, skewing). With this the best you can get is an isometric perspective, as that can be achieved with just skewing.
However, since canvas gives you pixel level control over the image, you can fake perspective, though doing so is complex. The obvious way is to use the putImageData function and calculate each pixel using a 3D perspective transform matrix. Obviously you'd need to know some things about linear algebra and trigonometry. Regardless of your math skills, doing 3d transforms at such a low level is extremely costly performance wise, and highly variable between different browsers (Chrome is the fastest by far, Firefox will chug along at fairly low framerates, and Safari is somewhere in the middle).
A better solution performance wise, but similarly complex and math intensive, is to use drawImage to paint an image/text/whatever to canvas one line at a time, and in between each change the canvas's scaling transform values. This is exactly the method that was used to get perspective on the SNES with mode 7 that natively only supported 2D transformations.
Another method is detailed here.
As you can imagine none of this is trivial, and performance is spotty at best. So if you are not willing to delve into a mass of linear algebra, trigonometry and canvas API documentation, I would say you are pretty much out of luck. Any JS library that does as you ask is subject to all these limitations. I know of a handful of demos out there, but none that could really be called a library (though if someone knows of something I'd be happy to be corrected).
If anyone is interested in the nutty details of any of the approaches I mentioned, I'd be happy to try to lay them out more comprehensively. In the mean time, you can play around with my own demo that uses a combination of the first two techniques I specified.
http://bigmooworld.com/pwings/pilotwings/pilotwings.html
Some of you might recognize it...
Use WASD to pan, up/down to zoom, right/left to rotate, and Q/E to change perspective. Feel free to peruse the code, but be forewarned that it is not well organized or commented, and most of it is discarded junk code.
So anyway my answer is...Yes it is possible, easily in Safari, or with a great deal of effort and shoddy performance in other browsers (and there is probably a way in IE but I have no clue about how).

Using JavaScript to model 3D polyhedra

Is there a JavaScript library that models 3D polyhedra using the canvas tag or SVG? Say I wanted to produce renderings of the Platonic solids, how would I best achieve this? FWIW, I'm only concerned with WebKit-based web browsers such as Safari and Chrome.
I've seen this cool demo of how to render 3D triangles, but how might I extend it to polyhedra with an arbitrary number of sides?
Take a look at this library: SVG-VML-3D
It uses SVG and falls back to VML on MSIE.
They do have a demo with platonic solids. I don't have a Webkit-browser handy, but presume it should work there as well.
Not a direct answer to your question, but seeing as you mentioned WebKit-only I thought I'd point out the new 3D CSS Transform support which was added to webkit pretty recently. This allows you to do what you want without using any Javascript. I've not seen an example of 3D polyhedra, but there are examples of cubes etc out there - for example here.
There's a slightly more complex demo here which has a ring of rectangles. For a real taste of what you could do (although this does use Javascript for animation) - see the Snow Stack demo.
Most 3D libraries generalize triangles. If you want a polygon with more than 3 sides, you subdivide it into triangles and draw those triangles. If you're interested in just the platonic solids, then you're going to have a pretty easy time, because you can easily get a triangluation of each face by first averaging the vertices of each face, and then using that center and two adjacent vertices of the face to give you a triangularization.

Categories