Ive been working on a "mario like" game engine in p5.js, im having some serious trouble with collision avoidance - p5.js

By collision avoidance, i mean stopping the player from walking through something. Like in mario, he can't just walk through the blocks. I technically succeeded in making this, but it's very very bad. The player often gets stuck on the block once the player hits it, and i cant figure out how to fix it. I put all the code together on an online p5.js editor, Here
In the code i linked, I'm trying to get the player to not go through any of the terrain constructions i make, the one i have currently set up is a red square named 'block1'

Stack Overflow isn't really designed for general "how do I do this" type questions. It's for specific "I tried X, expected Y, but got Z instead" type questions. But I'll try to help in a general sense.
You need to take a step back and break your problem down into smaller steps and then take those steps on one at a time. Can you get a simple program working that just shows two hard-coded rectangles that change color if they're colliding? Get that working perfectly before moving on.
Shameless self-promotion: I wrote a tutorial on collision detection available here. That's for regular Processing, but everything should be basically the same for P5.js. Generally you probably want to use grid-based collision detection to figure out which cell your player is in, and then use rectangle-rectangle collision detection to actually check whether the player has hit a block.
If you're having trouble, please debug your code and try to narrow your problem down to a MCVE and ask a specific technical question. Good luck.

Related

Removing skew/distortion based on known dimensions of a shape

I have an idea for an app that takes a printed page with four squares in each corner and allows you to measure objects on the paper given at least two squares are visible. I want to be able to have a user take a picture from less than perfect angles and still have the objects be measured accurately.
I'm unable to figure out exactly how to find information on this subject due to my lack of knowledge in the area. I've been able to find examples of opencv code that does some interesting transforms and the like but I've yet to figure out what I'm asking in simpler terms.
Does anyone know of papers or mathematical concepts I can lookup to get further into this project?
I'm not quite sure how or who to ask other than people on this forum, sorry for the somewhat vague question.
What you describe is very reminiscent of augmented reality marker tracking. Maybe you can start by searching these words on a search engine of your choice.
A single marker, if done correctly, can be used to identify it without confusing it with other markers AND to determine how the surface is placed in 3D space in front of the camera.
But that's all very difficult and advanced stuff, I'd greatly advise to NOT try and implement something like this, it would take years of research... The only way you have is to use a ready-made open source library that outputs the data you need for your app.
It may even not exist. In that case you'll have to buy one. Given the niché of your problem that would be perfectly plausible.
Here I give you only the programming aspect and if you want you can find out about the mathematical aspect from those examples. Most of the functions you need can be done using OpenCV. Here are some examples in python:
To detect the printed paper, you can use cv2.findContours function. The most outer contour is possibly the paper, but you need to test on actual images. https://docs.opencv.org/3.1.0/d4/d73/tutorial_py_contours_begin.html
In case of sloping (not in perfect angle), you can find the angle by cv2.minAreaRect which return the angle of the contour you found above. https://docs.opencv.org/3.1.0/dd/d49/tutorial_py_contour_features.html (part 7b).
If you want to rotate the paper, use cv2.warpAffine. https://docs.opencv.org/3.0-beta/doc/py_tutorials/py_imgproc/py_geometric_transformations/py_geometric_transformations.html
To detect the object in the paper, there are some methods. The easiest way is using the contours above. If the objects are in certain colors, you can detect it by using color filter. https://opencv-python-tutroals.readthedocs.io/en/latest/py_tutorials/py_imgproc/py_colorspaces/py_colorspaces.html

Detecting connections between objects in an image using evidence

I am trying trace lines in the following image. So my input image is like this:
So far, using deep learning, I am able to distinguish different shapes and I get following output and I have now type of shape and their position:
which seems to be pretty good to me. Also I am successful in finding lines between shapes like following, I want to use this as an evidence:
which detects more or less all the lines between each shape.
Question:
My aim is detect which shape/object is connected to which shape, and in which direction. For a while I am ignoring the directions (but any ideas to detect are welcome). But I am really stuck at how should I approach this problem of "tracing" lines.
At first I thought of an algorithm which "connects" two objects if we find enough "evidence", but in most images I have a tree like structure, there are three or more than three connections from one object (as between 4th and 5th level of input image), which makes it hard to go for that simple approach.
Did someone ever solve such a problem? I am just looking for an algorithm, programming language is not a problem but I am currently working in python. Any help would be really appreciated.

Hand gesture recognition in processing

I'm trying to change an int variable using a hand gesture. I'm trying to turn on the webcam in processing and if you swing your hand to the left the value changes and when you swing your hand to the right the value changes again. Any ideas on how to go about this?
This question is pretty vague for StackOverflow. It's hard to answer general "how do I do this" type questions. It's much easier to answer specific "I tried X, expected Y, but got Z instead" type questions. That being said, I'll try to answer in a general sense.
Break your problem down into smaller steps.
Step 1: Can you write a simple sketch that simply displays the stream from a camera? The video library might be able to help you with that.
Step 2: Once you have that working, can you write code that tracks your hand? Try just drawing a dot on top of your hand. You might use OpenCV for this step.
Step 3: If you have code that can track your hand, then you can keep track of its position. You'll know when the position moves to the left or right, and you can take whatever action you want.
You might have to break these steps down into even smaller sub-steps. If you get stuck, then you can post an MCVE and a specific technical question, and we can go from there. Good luck.

How to convert an image to animation?

I would like to apply some recursive mathematical operation on an arbitrary photo or image, which yield an interesting animation. I mean the first frame is the original picture and then the pixels are transformed in a way which leads to an interesting animation. For example a fractal animation or diffusion as particles or something similar. What approaches should I follow, what softwares to apply?
This is a very broad question, and it's hard to answer general "how do I do this" type questions. Stack Overflow is designed more for specific "I tried X, expected Y, but got Z instead" type questions. That being said, I'll try to answer in a general sense:
Step 1: Download Processing. You've tagged this with the processing tag, which is for questions about the Processing language. I can't tell whether that was on purpose, but it doesn't matter since Processing happens to be perfect for this task.
Step 2: Create a simple sketch that displays a single image, without any effects or animation. You need to break your problem down into smaller steps.
Step 3: Create a function that takes a PImage or a PGraphics and does the image manipulation for a single iteration of your algorithm. There are plenty of useful functions in the reference for manipulating the pixels in an image.
Step 4: Start with your initial image, and display that for X frames. Then pass that image into the function you created in step 3, and display the result of that for X frames. Then pass the update image back into your function, and repeat that process as many times as you want.
You could also generate every single frame ahead of time. Completely up to you.
There are a bunch of ways to do this, but those steps are the general outline. Please try something out, and break your problem down into smaller steps. Don't try to tackle your whole goal at one time. Instead, ask yourself: what's the smallest, simplest, easiest thing I know I have to do next?
If you get stuck, post an MCVE (note: not your whole sketch, just a small example that shows the problem you're stuck on) and a specific question, and we'll go from there. Good luck.

Dilemma about image cropping algorithm - is it possible?

I am building a web application using .NET 3.5 (ASP.NET, SQL Server, C#, WCF, WF, etc) and I have run into a major design dilemma. This is a uni project btw, but it is 100% up to me what I develop.
I need to design a system whereby I can take an image and automatically crop a certain object within it, without user input. So for example, cut out the car in a picture of a road. I've given this a lot of thought, and I can't see any feasible method. I guess this thread is to discuss the issues and feasibility of achieving this goal. Eventually, I would get the dimensions of a car (or whatever it may be), and then pass this into a 3d modelling app (custom) as parameters, to render a 3d model. This last step is a lot more feasible. It's the cropping issue which is an issue. I have thought of all sorts of ideas, like getting the colour of the car and then the outline around that colour. So if the car (example) is yellow, when there is a yellow pixel in the image, trace around it. But this would fail if there are two yellow cars in a photo.
Ideally, I would like the system to be completely automated. But I guess I can't have everything my way. Also, my skills are in what I mentioned above (.NET 3.5, SQL Server, AJAX, web design) as opposed to C++ but I would be open to any solution just to see the feasibility.
I also found this patent: US Patent 7034848 - System and method for automatically cropping graphical images
Thanks
This is one of the problems that needed to be solved to finish the DARPA Grand Challenge. Google video has a great presentation by the project lead from the winning team, where he talks about how they went about their solution, and how some of the other teams approached it. The relevant portion starts around 19:30 of the video, but it's a great talk, and the whole thing is worth a watch. Hopefully it gives you a good starting point for solving your problem.
What you are talking about is an open research problem, or even several research problems. One way to tackle this, is by image segmentation. If you can safely assume that there is one object of interest in the image, you can try a figure-ground segmentation algorithm. There are many such algorithms, and none of them are perfect. They usually output a segmentation mask: a binary image where the figure is white and the background is black. You would then find the bounding box of the figure, and use it to crop. The thing to remember is that none of the existing segmentation algorithm will give you what you want 100% of the time.
Alternatively, if you know ahead of time what specific type of object you need to crop (car, person, motorcycle), then you can try an object detection algorithm. Once again, there are many, and none of them are perfect either. On the other hand, some of them may work better than segmentation if your object of interest is on very cluttered background.
To summarize, if you wish to pursue this, you would have to read a fair number of computer vision papers, and try a fair number of different algorithms. You will also increase your chances of success if you constrain your problem domain as much as possible: for example restrict yourself to a small number of object categories, assume there is only one object of interest in an image, or restrict yourself to a certain type of scenes (nature, sea, etc.). Also keep in mind, that even the accuracy of state-of-the-art approaches to solving this type of problems has a lot of room for improvement.
And by the way, the choice of language or platform for this project is by far the least difficult part.
A method often used for face detection in images is through the use of a Haar classifier cascade. A classifier cascade can be trained to detect any objects, not just faces, but the ability of the classifier is highly dependent on the quality of the training data.
This paper by Viola and Jones explains how it works and how it can be optimised.
Although it is C++ you might want to take a look at the image processing libraries provided by the OpenCV project which include code to both train and use Haar cascades. You will need a set of car and non-car images to train a system!
Some of the best attempts I've see of this is using a large database of images to help understand the image you have. These days you have flickr, which is not only a giant corpus of images, but it's also tagged with meta-information about what the image is.
Some projects that do this are documented here:
http://blogs.zdnet.com/emergingtech/?p=629
Start with analyzing the images yourself. That way you can formulate the criteria on which to match the car. And you get to define what you cannot match.
If all cars have the same background, for example, it need not be that complex. But your example states a car on a street. There may be parked cars. Should they be recognized?
If you have access to MatLab, you could test your pattern recognition filters with specialized software like PRTools.
Wwhen I was studying (a long time ago:) I used Khoros Cantata and found that an edge filter can simplify the image greatly.
But again, first define the conditions on the input. If you don't do that you will not succeed because pattern recognition is really hard (think about how long it took to crack captcha's)
I did say photo, so this could be a black car with a black background. I did think of specifying the colour of the object, and then when that colour is found, trace around it (high level explanation). But, with a black object in a black background (no constrast in other words), it would be a very difficult task.
Better still, I've come across several sites with 3d models of cars. I could always use this, stick it into a 3d model, and render it.
A 3D model would be easier to work with, a real world photo much harder. It does suck :(
If I'm reading this right... This is where AI shines.
I think the "simplest" solution would be to use a neural-network based image recognition algorithm. Unless you know that the car will look the exact same in each picture, then that's pretty much the only way.
If it IS the exact same, then you can just search for the pixel pattern, and get the bounding rectangle, and just set the image border to the inner boundary of the rectangle.
I think that you will never get good results without a real user telling the program what to do. Think of it this way: how should your program decide when there is more than 1 interesting object present (for example: 2 cars)? what if the object you want is actually the mountain in the background? what if nothing of interest is inside the picture, thus nothing to select as the object to crop out? etc, etc...
With that said, if you can make assumptions like: only 1 object will be present, then you can have a go with using image recognition algorithms.
Now that I think of it. I recently got a lecture about artificial intelligence in robots and in robotic research techniques. Their research went on about language interaction, evolution, and language recognition. But in order to do that they also needed some simple image recognition algorithms to process the perceived environment. One of the tricks they used was to make a 3D plot of the image where x and y where the normal x and y axis and the z axis was the brightness of that particular point, then they used the same technique for red-green values, and blue-yellow. And lo and behold they had something (relatively) easy they could use to pick out the objects from the perceived environment.
(I'm terribly sorry, but I can't find a link to the nice charts they had that showed how it all worked).
Anyway, the point is that they were not interested (that much) in image recognition so they created something that worked good enough and used something less advanced and thus less time consuming, so it is possible to create something simple for this complex task.
Also any good image editing program has some kind of magic wand that will select, with the right amount of tweaking, the object of interest you point it on, maybe it's worth your time to look into that as well.
So, it basically will mean that you:
have to make some assumptions, otherwise it will fail terribly
will probably best be served with techniques from AI, and more specifically image recognition
can take a look at paint.NET and their algorithm for their magic wand
try to use the fact that a good photo will have the object of interest somewhere in the middle of the image
.. but i'm not saying that this is the solution for your problem, maybe something simpler can be used.
Oh, and I will continue to look for those links, they hold some really valuable information about this topic, but I can't promise anything.

Resources