I have two path elements. For the sake of description lets just say one is a heart and the other is a square with rounded corners.
I'm trying to get one to interpolate into the other like this:
http://raphaeljs.com/animation.html
This is easy enough to do but I need to do it based off the elements X position and not time.
So as I drag the path element between an Xval of 100 and 200 it will slowly morph into the second path until it finally completes the transformation at an X value of 200.
Does anyone have any idea how I might do this?
I'd use the drag handler (or you could bind to the mousemove event and feed the coordinates in as well) and use that to move between a starting position and a target animation based on the x or y coordinate and using Element.status. Check out the fiddle (based on yours):
And I'm sorry -- I gave you a copy of your own fiddle back originally. Terribly poor form =( Try this one instead:
http://jsfiddle.net/kevindivdbyzero/MqFkP/2/
So far this is what I have come up with:
http://jsfiddle.net/jocose/CkL5F/139/
This works but relies on a delay which I am afraid is going to break on slower machines, and plus it seams really hacky. If anyone knows of a better solution please let me know.
Related
I'm aware my question is maybe somewhat lazy. But I hope someone could maybe give me head start with my idea, or can provide me with an existing code example that points me in the right direction.
I want to create an organic shape/blob that more or less fills up existing space, but wraps around typographical elements. Whenever these elements move around, the shape should adjust itself accordingly. I was looking at Paper.js where examples like http://paperjs.org/examples/candy-crash/ and http://paperjs.org/examples/voronoi/ make it seem like this should be possible.
You can use the path.subtract() boolean operation, along with the path.smooth() function to smooth your shape with the type of smoothing of your choice.
Here is a demo sketch. You can also try to smooth the rectangles ; and maybe randomly add points on your curves or randomly displace all segment handles.
I'd like to transition between curve types using D3.js.
Take a look at this block. The data stay the same but the curve type changes. I was expecting the paths to maintain their approximate positions on the plane -- the data stay the same, after all -- but they don't. The paths appear to be redrawn, although I don't understand why with basis to linear the paths seem to be redrawn from left to right whilst with linear to basis the paths seem to be redrawn from right to left.
I've read Mike Bostock's post on Path Transitions, but I think this is a slightly different problem. There, the data change but the curve type remains the same. Here, the data stay the same but the curve type changes.
Thanks in advance for any help!
To understand why you have such a strange transition, let's compare the d attribute of the paths using a curveBasis and a curveLinear.
First, a curveBasis:
d="M0,101.2061594964L45.48756294826797,89.52282837400001C90.97512589653594,77.83949725160001,181.95025179307189,54.47283500680002,271.46268884480395,84.08731623460001C360.975125896536,113.70179746240001,449.0248741034641,196.2974221628,538.5373111551961,222.09899531679994C628.0497482069281,247.90056847079998,719.0248741034642,216.90809007840002,764.512437051732,201.4118508822L810,185.915611686"
Now a curveLinear (same data):
d="M0,101.2061594964L272.92537768960784,31.10617276200003L537.0746223103922,278.89304686319997L810,185.915611686"
As you can see, the path is way simpler with curveLinear. So, the strange transition is the expected behaviour.
A possible solution is using a path interpolation, as proposed in this code from Mike Bostock.
Here is your bl.ocks with a path interpolation: http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772
PS: If you want to avoid that strange transition when you load the page (all paths coming from the top left corner), draw them the first time using a regular attr method.
I'd look this up in Rickshaw's documentation if it had any. Does it?
I want my time axis to include the current date, even if there isn't a point there. I already worked around this by duplicating the last data point, but I'd prefer if that point didn't show up as a point in the hover-highlighter. Perhaps that's something I can override differently?
Speaking of points, can I get it to draw the points even if I'm using the area renderer?
My need is to draw a basic x-axis, y-axis plot of several lines, with the lines becoming known in sequence as the user enters data. jqPlot appears to have the ability (unlike flot, at least as I understand it) to add to an existing plot. My experimentation thus far is:
$.jqplot('dpCum',[ld.fCumPairFwd[0]],{axes:{xaxis:{min:0,max:2500},yaxis:{min:0,max:200000}}});
$.jqplot('dpCum',[ld.fCumPairAft[0]],{axes:{xaxis:{min:0,max:2500},yaxis:{min:0,max:200000}}});
which produces two lines as I want them, except the background of the 2nd obscures the the 1st line. In practice, the data for the 2nd line won't be known until the user responds to the 1st line, and then they're going to want to see both at once.
I've made a couple of passes at the jqplot documentation (it's capabilities are obviously impressive) but how to keep existing lines visible as new lines are added escapes me. I'm thinking there may be some kind of z-axis opacity, but haven't been able to understand it yet.
The answer to your problem, I believe, is to use the replot() method and paint a new plot with the modified data set.
This approach is presented in the following sample. Please notice I made only the series with index 0 responsive to clicks. On click on the series' data points another is painted.
EDIT: The reason I went for replot() was that I couldn't figure out how to draw just a single series. I tried the approach presented by #Mark here with no success. He might know better though. I am rather fresh to jqPlot myself. Also taking into account that when we add a new series some points might reach outside the current scale, therefore, since redraw() doesn't rescale as mentioned here by the jqPlot author - though in my case it will work since we reinitialize the graph. Thus, I think if you also will not manage to apply single series draw you might try using the redraw() method instead, taking from the doc I think it is less expensive to call.
Maybe actually in this case you will not use replot() or redraw(), as in the sample I am making a new plot each time. Therefore, it seems to me to be more appropriate to call destroy() on the previous graph before we paint the new one. This is what currently is in the code sample.
I am still shiny new to XNA, so please forgive any stupid question and statements in this post (The added issue is that I am using Visual Studio 2010 with .Net 4.0 which also means very few examples exist out on the web - well, none that I could find easily):
I have two 2D objects in a "game" that I am using to learn more about XNA. I need to figure out when these two objects intersect.
I noticed that the Texture2D objects has a property named "Bounds" which in turn has a method named "Intersects" which takes a Rectangle (the other Texture2D.Bounds) as an argument.
However when you run the code, the objects always intersect even if they are on separate sides of the screen. When I step into the code, I noticed that for the Texture2D Bounds I get 4 parameters back when you mouse over the Bounds and the X, and Y coordinates always read "X = 0, Y = 0" for both objects (hence they always intersect).
The thing that confuses me is the fact that the Bounds property is on the Texture rather than on the Position (or Vector2) of the objects. I eventually created a little helper method that takes in the objects and there positions and then calculate whether they intersect, but I'm sure there must be a better way.
any suggestions, pointers would be much appreciated.
Gineer
The Bounds property was added to the Texture2D class to simplify working with Viewports. More here.
You shouldn't think of the texture as being the object itself, it's merely what holds the data that gets drawn to the screen, whether it's used for a Sprite or RenderTarget. The position of objects or sprites and how position/moving is handled is entirely up to you, so you have to track and handle this yourself. That includes the position of any bounds.
The 2D Rectangle Collision tutorial is a good start, as you've already found :)
I found the XNA Creator Club tutorials based on another post to stackoverflow by Ben S. The Collision Series 1: 2D Rectangle Collision tutorial explains it all.
It seems you have to create new rectangles, based on the original rectangles moving around in the game every time you try to run the intersection method, which then will contain the updated X and Y coordinates.
I am still not quite sure why the original object rectangles position can not just be kept up to date, but if this is the way it should work, that's good enough for me... for now. ;-)