Basically, I want to randomly add a movie clip to any point along a bezier curve. Is there a way to find all points along a path? Or maybe there's a way to find the equation (it's a quadratic curve)? If all else fails, is there a way to find the points along a straight line (that isn't perfectly horizontal or vertical)?
If you are using the pen tool, this is creating a Shape. You can access the path of this shape by reading the result from Shape.graphics.readGraphicsData()
See the reference for readGraphicsData.
Related
Problem
I struggle to split a CanvasRenderingContext2D.quadraticCurveTo() path lengthwise into two colors.
Question (framings)
How can I split the color of a quadratic curve lengthwise?
How can a draw two parallel quadratic curves?
Background
The user must draw a line in an annotation tool and indicate polarity based on the line's color (this convention is predefined and can not be changed). Example:
Current best solution
The user specifies N points through which to draw a smooth line (based on this StackOverflow answer). To split the path, I calculate a perpendicular vector for each subpath, merge them to find the average perpendicular vector for the entire path, and redraw the line twice, once shifted up and once shifted down along the perpendicular.
This approach works fine for most curves:
However, it fails, e.g., for back curving curves:
Next, I would try using a perpendicular gradient as described in this blog. However, the computation seems to be highly inefficient and I would appreciate any hints on how else I could solve this problem.
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 a little problem. I have 2D image of roulette wheel on the stage and used 3D rotation tool to get a little 3D effect (Image 1). Now I want to rotate it on it's Z axis so that I can get spining effect of wheel. I tried to use rotationZ += ... but it doesn't rotate it the way I want. I saw one tool in flash toolbar called "Global transform" (Image 2). When I click it I see transformation lines for image (Image 3), that I need for rotation, the blue line is one I need (Z axis). But I don't know how to use that kind of transformation via code. I don't even know if that is local or global rotation. I hope you understand me, maybe pictures will help you! Thanks!
HERE IS DROPBOX LINK FOR IMAGES --> Dropbox Images
What you are trying to do is simply an issue of nesting elements and applying effects on them in certain ways.
To accomplish the rotation as you want, you'll want to create your roulette wheel image in 2D as if you were looking at from a birds eye view. I highly recommend creating this graphic in vector format. Import this graphic into Flash and turn it into a movieclip. For arguments sake, I'm going to give this movieclip an instance name of wheel so it is easy for us to follow along with these instructions. Now, within the wheel instance, you'll want to apply a rotation to the roulette wheel. You can accomplish this either by using a Motion tween on the timeline, but the best way would probably be to use a programmatic approach so you can randomize the rotation in some way.
Now, place the 'wheel' instance on the stage and use the 3D Rotation Tool and rotate the wheel on it's X axis, this will make the wheel look like one in your image.
Now if you have performed the rotation within the wheel instance properly, you will have your spinning wheel.
I've created a sample of what you want with the following files using Flash CC 2014 that you can download here:
FLA File
Sample compiled SWF FILE
There is actually some math involved in understanding 3D transformations - including rotations - and how they combine with each other.
If your are interested in further explanations, and have a bit of math background, have a look at the theory
otherwise, the first thing you should remember is that rotation/scaling/translations may be composed (combined) but that the order is very important. rotationX, rotationY, rotationZ are sort of "coordinates" that enable to describe any orientation in the vector space, like x,y,z describe any position. But they are not sufficient to allow to do any rotation around any axis from any current orientation.
In your case, what you want is to combine a rotation around it's own local z (blue) axis, which means before the initial rotation you have already applied. ex:
roulette.transform.matrix3D.prependRotation(10, new Vector3D(0,0,1));
where 10 would be the angle you chose for the rotation, and the pivot of your object would be the pivot of the rotation (ohterwise, specify your own pivot by passing an additional Vector3D
To complete the picture, if you use appendRotation() instead of prependRotation(), you will rotate your object in the z axis of the world (global) coordinates (after it's current trnasformation).
You may also as already suggested create a Symbol to use as a container, and rotate you object inside it's container, but messing with Matrix3D will give you more control in the end, often with just one line of code like in this case.
I am looking for a simple AS3 script to move/follow a movieclip (arrrow) along a manually drawn path in flash. Like.. it moves for the start point if the line to the end point of the line, also should rotate at curves automatically.
Also is it possible to duplicate this movieclip (arrrow) tho specific distance, like a ground of arrows moving along a path continuously with specific distance from eachother?
I am working on few infoGraphs and need this arrows animation to show the workflow.
I desperately needs this, pls help!
Cheers,
bp
There could be libraries that help with this, as George Profenza mentions in his comment, and it is certainly possible to calculate points along a bezier.
However, a much simpler solution is to do what people have done since Flash 4. Draw the curve in Flash, then create a motion tween along the curve using an empty MovieClip. At runtime, you can use addChild() to insert your MovieClip as a child of the empty one. You will have a lot more manual control this way, compared to the bezier library.
Let's say I have curved path made using a serie of bezierCurveTo() calls. I'd like to make it appear progressively in an animation, by increasing the percentage of it that is drawn frame-after-frame. The problem is that I cannot find a standard way to draw only a part of a canvas path - would someon know of a good way (or even a tricky way) to achieve this?
Sure...and Simon Porritt did all the hard math for us!
jsBezier is a small lib with a function: pointAlongCurveFrom(curve, location, distance) that will let you incrementally plot each point along your Bezier curve.
jsBezier is available on GitHub: https://github.com/sporritt/jsBezier
Just found a small library that does exactly that: https://github.com/camoconnell/lazy-line-painter
It relies on the Raphael lib (http://raphaeljs.com/), and the two put together do not make too big a payload.