I have two shapes where I drag and drop one shape to the another shape.
I need code for collision to check if two shapes are congruent or not.
Related
Theres 2 parts to my problem and they are related. I have a weird shape on my interface illustrated below, I am trying to randomly spawn MovieClips within its' boundaries but I am having some trouble finding a good way to do it.
Question 1: I can run an If condition to check with bitMapData.hitTest to see if the MovieClip has randomly spawn within this shape, if it doesn't simply retry with a new set of random coordinates. However, is there a better way? Like a way to only take into account coordinates within the shape? There will be plenty of MC spawned at one go so I am hoping to lessen the load, or at least find an efficient way to do this calculation.
Question 2: The MovieClips spawned within this shape will eventually have collision detection mechanics that will repel itself when interacted with. Is there a way to contain them within this shape via some kind of boundary detection?
If it was a square, we could easily have contained them with a quick check on all 4 edges, but not with this shape. Currently I am thinking of using bitMapData.hitTest again to detect for out-of-bounds after being repelled, but how do I know which Point() is the nearest 'edge' of this shape to return the MC to?
For question 1: I'm going to go on an assumption that you have some geometry data about the shape.
One method you can use to check if a point is within a shape is to take that point, then draw a line from that point to infinity (the edge of the screen) in one direction. Then count how many times that line intersects an edge of the shape. If it's odd, the point is within the shape (or on the edge) and if it's even, than that point is outside of the shape.
First link in google: https://www.geeksforgeeks.org/how-to-check-if-a-given-point-lies-inside-a-polygon/
Or can also try a more simple method (at the cost of doing more work): if the above shape is generated with all squares and rectangles and you know the point and size of all of those: can just do a check for the point vs all the squares and rectangles that make up the shape.
For question 2: As Organis mentioned, I'd go with a library like Box2D to do this. You'll most likely spend tons of time (that you may not want to) if you try to implement this alone.
The big issue is how much cpu or gpu the code uses. You're trying to avoid using any collision detection. Collision detection is having code do calculations to determine the edges of an object. It should be the last option.
Most of the time you know there's no need for collision detection. You know where everything is and how big it is. Everything has a centerpoint and comparing simple number coordinates is the lightweight way to check if there's a need to check further.
When things get near each other, you only need to do a collision detection on the immediate area around an object. See how your shape fits in a box that is easy to check for collisions? That box should get a collision check before the actual jagged shape inside it.
Yes that collision detection box has to be drawn or mapped but it's done when the object is defined, not when the game is playing. If you are using sprite sheets, keep an xml of the boxes or circles around the shapes.
I have made a webpage on which there's a canvas on which we can draw freehandly. Now I wanted to know that is there's a way to find that the user has now drawn a "square", "circle" or "rectangle"? I mean that if I draw a square on the canvas, how can I write the code to check that I have drawn a square?
Not many details to work with from you.
Also, “freehand” means very imprecise shapes.
So here’s a generic answer to determine your shape:
Determine the bounding box of a freehand shape (minX,maxX,minY,maxY).
Test#1: if (maxX-minX) is largely different from (maxY-minY), then you have a rectangle.
Test#2: Walk one of corners towards the center. If you quickly cross part of the drawing, you have a square.
By process of elimination, if Test#1 and Test#2 fail, then you have a circle.
I'm new to html5. And I'm trying to create a basic painting tool.
What I want to do in this tool is to have one or more shapes(maybe overlapping) and to paint the shapes without getting the colors overlapped. If a circle is drawn inside a rectangle and if I start coloring the circle, the rectangle should not be painted even if the mouse is dragged over it unless the dragging starts inside it.
To achieve this should I use multiple canvases or shapes?
Thanks in advance.
Well, first you need to program in the idea of keeping track of separate shapes. If you haven't already done that see here for a tutorial.
I imagine your shapes will all be kept as images or in-memory canvases themselves. I'm not sure how else you can do it.
There are a million ways you could do this, here's one:
When you start your drawing operation you need to detect which shape you're on. Then you draw that shape to an in-memory canvas and switch that temporary canvas' globalcompositeoperation to source-atop. This will make sure the paint can only paint in the already opaque regions of that shape (if that's your intent here, which it seems to be).
All while you are painting you will want to update the temporary canvas and redraw the main canvas constantly. While you are redrawing the main canvas, instead of painting that shape's image file you'll want to paint the temporary canvas (if you use canvases to keep the shapes you can just update those in real time).
If you are not using temporary canvases for each shape, when you stop the drawing operation you are gonna have to update the image associated with the shape to complete the operation.
Using an in-memory canvas (not added to the DOM) for every shape (that is the size of the shape and no larger) will make coding things slightly easier and might not be that bad on performance. I'd give it a try with 100 and 1000 (or more) in-memory canvases on your targeted platforms to see though.
The alternative is to use one in-memory canvas and have an HTMLImageElement (png) that represents every shape, but using the canvas.toImageURL function can be a bit of a performance hit in itself. I'd try both methods to see which works best in your case. If the shape count is small enough, it probably doesn't matter which.
I want to make a jigsaw puzzle in flash. I know how to create square kind of shapes. But I want to create this kind of irregular shapes. See the live demo of puzzles in the links shown
http://www.flashcomponents.net/component/jigsawpuzzle/preview/4952.html
http://www.gamedesign.jp/flash/whitejigsaw/whitejigsaw.html
I just want to how to create the irregular shapes.
Does anyone know or can anybody give useful links as to how this can be done.
My ideas:
Shapes can be just Bitmaps, masked by irregular filled Shape. Each piece of puzzle has shared BitmapData. Shapes can be created by series of drawRect/drawEllipse/curveTo calls in fill mode.
Watch their relative positions to catch the moment when they should 'snap' together. Also cull combinations not close to each other.
If you're creating your shapes dynamically with code, try using the graphics.curveTo() method. This can be used in combination with graphics.lineTo() to make the outline for your pieces.
You could also make your pieces using the pen tool within the Flash IDE to create movie clips that can my used for creating object instances to be used as masks for your puzzle. This works if you plan on having the same puzzle layouts more than once.
That's done using masking: http://www.flash-here.com/tutorials/flash_masking.html
Have a look to the following:
http://www.sephiroth.it/file_detail.php?id=111#
A little bit old.
I can't post images yet:
http://i.imgur.com/7Kci5.jpg
Using Actionscript 3 I'm drawing multiple Shapes onto a MovieClip [top drawing]. The end result I need is the bottom drawing. I originally thought it would be simple to just merge the shapes and then find a way to draw a border around the end result but I can't seem to find any way of doing this.
Is this possible or is there a better way of trying to do this?
there are 3 ways to go:
hard math. don't draw them directly, but draw through an additional abstraction layer where calculate the resulting curves and draw them.
simple abstraction layer. instead of drawing directly, draw them twice in 2 colors, an inner and an outer one, the outer being one pixel bigger (obvious in the case of circles at least). Only works if you draw into the same Graphics object.
use a GlowFilter with no blur (try what using 1 does) and knockout set to true.
greetz
back2dos