I have a problem which in my eyes is on the rather simple side of image recognition. I am trying to check if in a video a certain picture is shown. I only want to provide some kind of simple Picture, e.g a logo of a company or a simple shape. If this Picture is found in the video feed an action should be started.
I have no experience in image recognition but I find many libraries detecting whole objects and faces. Finding a given image should be done way more easily, or should it? I am trying to solve this problem in JS but any starting point would be helpful.
Regards
This problem requires specific object detection whose feature may vary a lot in natural scenes because of different view point, intensity, So you can try using SIFT, SURF for key point matching and object recognition. If the image features do not vary a lot you can achieve this feat with simple temple matching using opencv.js(JavaScript port of OpenCV library).
Also if the object of interest contains certain fixed color, you can filter the object using a predefined color range in HSV color model image as explained here
More robust solution: If you have good data-set of your object of interest, you can build a deep learning model for object detection using tensorflow and use it in JavaScript using Tensorflow.js, though i have not tried this approach.
Related
Im trying to experiment with product design using javascript, in which the user can select a shirt, mug, box, book for example, and insert a text and/or an image and move it or rotate it or scale it, then they can apply the changes, and a 3D mockup will be generated.
Is this possible using a Javascript library such as Three.js and/or jQuery, or will i need to actually use another technology other than JS, for example WebGL directly ?
I have not dabbled with javascript before as im usually a backend PHP developer, but this idea has caught my attention and i couldnt find enough resources online about it.
Yes this should definitely be doable with three.js
Worst case you can just manipulate a plane with a texture around the product, however I suspect a better way would be manipulating a texture. This would be quite easy if you don't want to manipulate the image in real-time on the 3d mockup, but likely also simple enough to do in real-time.
I'm using Leaflet library in my ReactJS app and I wonder if there is a simple way to recognize if object clicked by user is a building.
Idea that came up to my mind is to check map colour under clicked position.
Does it make sense?
I appreciate your help.
Colleagues in comments advised to give some use-case:
App I'm working on is meant to mark antique buildings with elevation in bad shape so city architecture management had simpler job of searching for them.
Every user of this App can mark such building. To prevent hooligans from corrupting data with senseless points on map I wanted to validate as a first step if clicked point is a building.
I hope it will clarify problem a little bit.
I wonder if there is a simple way to recognize if object clicked by user is a building.
No.
You basically want to run arbitrary point-in-polygon queries against OSM's building dataset, and I will presume that you don't want to host that dataset yourself.
The simplest way to do this is to perform queries to an Overpass API server, passing a is_in query and filtering by the building tag key. The OSM website's query feature functionality uses such a technique.
With this technique you won't have to worry about hosting the data, just about creating the right Overpass API query. Please bear in mind that the Overpass API servers are run by volunteers and their resources are limited.
The second simplest way would be to download a OSM extract of you area of interest, and run the point-in-polygon queries yourself, by whatever means you like (PostGIS' ST_Intersect, turf.js, etc etc).
If you will be using Leaflet, another approach would be to use vector tiles, and set it up in such a way that the buildings thematic layer is interactive. This will require you to be aware of the limitations of the vector tile servers.
Idea that came up to my mind is to check map colour under clicked position.
That is unreliable. Think about labels on top of buildings, or the colour of the edge of the building area, or buildings that don't render with the standard colour (e.g. places of worship, monuments).
I'm very new to three.js, so please forgive me if my question has already been answered some place else or is obvious.
What I'm trying to do is the following: I have data from a motion capture system. This data consists of frames where each frame has the Cartesian coordinates of multiple markers. I'd like to visualise this data using three.js in a web browser.
So far so good. My initial thought was to simply use geometric primitives for each marker and connect some markers to create a sort of 3D "stickman". However, I found out that three.js has a concept called Skeleton, which consists of a set of Bones. That seems precisely like what I want. However, I do not have any sort of "skin" that I would like to use (e.g. a SkinnedMesh).
My question therefore is two-fold: 1) Should I even use Skeleton for my intentions or is the primitive approach described earlier the way to go and 2) if I'm to use the Skeleton stuff, how do I present it in a scene without using any skin?
Any help here is greatly appreciated!
To answer my own question: The easiest solution that I found was simply using spheres for the markers and connecting them with lines. This has some shortcomings (e.g. lines do not scale with the zoom level), but overall it works quite well.
If you are interested in doing the same, I've put together a simple demo, which is also available on Github.
I'd like to be able to write an application in HTML5 that is similar to the following.
HTML5 Canvas Animals on the Beach Game with KineticJS
The problem with that demo though is the mouse over event is only accurate to the rectangle surrounding the animal. Is there any way to do this with more accuracy, be it in KinectJS or otherwise?
There are generally two ways:
Using custom paths with each image as hitboxes (that you manually define) then using an is-point-in-path algorithm
Using a ghost-canvas (or whatever you like to call it) as I detailed in this old tutorial. Ignore the link to the new tutorial, the old one uses what you'd want.
The first method here is much faster but requires a lot more code and manual work. The second method is pixel-perfect but much slower. Still, if you don't have an enormous amount of objects it may suit your needs.
I am trying to develop a system that will render a preview of a what a product might look like with embossing.
In order to do this, I am essentially going to composite two images together. In order to do this correctly, I am building a system using mainly JavaScript that allows a background image to be chosen. Someone will then draw a quadrilateral on this image that represents the correct proportions of the composite image.
This image, which is rectangular, will be distorted to match the four coordinates that comprise this quadrilateral using Imagick.
The piece I'm a little hazy on is the JavaScript. It doesn't need to support multiple browsers, Webkit or FF is fine.
At a minimum, it should put a rectangular shape comprised of four points. These points can then be manipulated at will and a line would be drawn between the points to help the user visualize the effect.
This is a crude description, but the best I have. In a perfect world, I'd love to do something similar to this , but with more flexibility. http://jqueryui.com/demos/resizable/#aspect-ratio is also a good example of something similar to what I'm envisioning, but with less constrained transformations.
I've investigated Raphael.js, which looks promising too but I'm weary of reinventing the wheel.
Any thoughts? Am I missing any obvious JavaScript libraries/implementations that might be useful here?
EDIT: I ended up using Flash and this AS3 class: http://www.rubenswieringa.com/blog/distortimage
It was a pain, but I got it working. I'm leaving this up in case someone wants to opine on a javascript technique.