I'm using a game physics library (Box2D) which only supports convex polygon shapes. However, I'd like the level builder to be able to just specify concave polygons without having to worry about that.
So, how can I automatically break apart a concave polygon into convex ones (or even all triangles).
Speed would be cool, but ease of implementation is more important. The breaking apart will only be done on game initialization.
(My language is Flash/ActionScript 3, but that shouldn't matter)
Bernard Chazelle and David P. Dobkin presented an algorithm for that in 1985: Optimal Convex Decompositions.
Other approaches can be found on Wikipedia.
you probabaly need triangulation
This page explains how to convert polygons into non-complex shapes using ActionScript 3. The code is large so I wont copy paste here.
http://www.emanueleferonato.com/2011/09/12/create-non-convex-complex-shapes-with-box2d/
Related
This visualization is created using Away3D (Flash):
www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
Would it be possible to create something of the same quality (re. interaction, animation, performance, pixel-perfection etc.) using WebGL?
Bonus: How would one set up the basic scene? (without interaction and animation)
Yes, it would be. The scene is not complex at all, so it would have good performance. Interaction, yes, depends how you implement it, but if you are doing project with, for example, Three.js it wouldn't be a problem. Pixel perfection, obviously, yes.
In the scene, you could have curved plane, with texture that is changing UVs of vertices when you use 'navigate'. Pins could be done with particle, or better, simple quads with transparent textures. To have pixel-precise pin picking, you could depth-test pins on ray trace, or use pin-shaped geometry with shader, which probably the best solution.
So, basic scene - curved plane with per-vertex-changing-UV, pin-shaped and texture pins.
Alternatively, you could do exactly the same thing with 2D canvas. All elements are just drawn and scaled, text would be much simpler, and picking would be with 2d calculations.
Hope this helps.
Or do I have to get down and dirty with the math and do the spline intersection math myself? I know the basic math for Quadratic b-splines.
I'm trying to make procedural randomly generated Celtic knot-work that animates itself. I'm inspired by the book of Kells original book -and the animation of the same name. This means at best it will be seriously complicated - lots of curves animating fast. I'm going for generative -responsive to the user- Celtic knots of the highest possible complexity.... that may mean only 12 points animating randomly and in response to mouse movements but... I'd love hundreds or tens of thousands... some day.
Developing a moving random curvy double lined loop scribble was easy. I like the look of the curves made from 12 to 14 random points. Now I want to weave it over under over under. To do that -- I need to find the intersections of lots of random curves quickly for each frame. When I draw curves in Flash in the -not object- drawing mode... Flash does intersections and generates points automatically for me.
Questions:
-Is there an equivalent intersection class/method/function in Actionscript 3.0 to the intersections so easily done in the flash drawing interface?
-How much of what you do in Flash as an artist has cool classes like curveTo in Actionscript 3.0?
-Can I see the source code for curveTo?
-Can I extend the curveTo to do what I want?
-I have been reading and re-reading the reference and how to extend classes... that I made. But how to I learn how to extend curveTo ... or Path classes... can I?
Would this be something that you are looking for:
http://actionsnippet.com/?p=965
See a demo here: http://www.actionsnippet.com/swfs/bezier_intersect.html
Let's say I use the Graphics class at runtime to draw some vector shapes dynamically. For example a square and a circle.
Is there a way to create a new shape at runtime where those 2 vectors shapes overlap?
Those kind of operations are very common in all vector design programs such as Illustrator, Corel, etc... but I haven't found anything in Adobe's documentation, nor anywhere else, to do it by code.
Although drawing operations on the Graphics class are described in terms of lines, points etc this is - as far as you're concerned - just telling it what to draw onto a bitmap. There's no way to remove a shape once drawn, short of clear(), which just wipes the whole thing clean.
I don't fully understand why, as the vector data must be retained - there's no loss of quality on scaling after drawing, for example.
If you don't want to get into some hardcore maths (for anything beyond straight lines, you'll need to) there's an answer here which might help if you've ever used PixelBender:
How to calculate intersection between shapes in flash / action script ? (access to shape's segments and nodes?)
Failing that, if it's just cosmetic you could play around with masking shapes (will probably end up quite hacky though) - however, if you actually want to use the intersection to draw or describe a shape you will need to dig out your maths book or look for a good graphics library.
Hope this helps
Does anyone know a decent algorithm for drawing a anti-aliased (smooth) quadratic bezier curves in a raster?
I could simply draw them as vectors and then copy the image to a raster..
Is there any clever yet freely available algorithm to draw the curve directly to the pixels?
I am currently using the algorithm implemented here:
http://www.bytearray.org/?p=67
quadBezier()
I am wondering if there is a way to change it to render anti-aliased bezier?
Thanks in advance.
I am doing this for learning purposes and because I am hoping it would be faster than using the copy pixels from a Shape option.
Here is an example showing the none-smooth bezier is faster than the regular bezier:
http://lab.generalrelativity.org/raster/
Implementing your own algorithm will almost certainly be slower than using bitmapData.draw(shape).
When you use graphics.lineTo, graphics.curveTo etc, you are constructing a model, but not actually drawing anything yet. It's only after the shape gets added to the stage, and during the subsequent [render] phase that the model is traversed and pixels drawn by a fast algorithm written in C. When you use bitmapData.draw to draw a vector into a bitmap, it will use the same native code. So it isn't as if you are drawing anything twice, as you might imagine, and it will be hard (or impossible) to beat for speed by implementing anything from scratch in AS3 alone.
Are there any libraries out there that provide some limited functionality for primitive shapes. I tried getting my feet wet with EaselJS and although it has some amazing properties, basic shapes is not one of them. Tests for inside a shape are carried out by pixel testing which is incredibly slow compared to for example ray testing.
I imagine the rectangle and the circle gets used the most, and I can create collision detection for the two of them, but things get more complicated with polygons. Are there any libraries out there for this? I know JQuery has one, but it seems like it is for HTML elements and not the canvas
You might want to take a look at CAKE
or processingjs. I'm not sure if these are particuarly suited to your needs, but they seem the most developed library's for canvas at the moment.