Sphero Locator: how to improve precision - javascript

I'm developing a spheroApp quiz. Practically it's a quiz game where it's possible to answer question driving sphero to one of 3 hole that define the answer.
Well, i use locator to define position of sphero. In the wizard section it's possible to define the 3 hole position driving from a single start position (0,0).
I save the 3 hole position and when the sphero go in (i have defined a gap between 10/20 from position of the hole) the app discover that it's a right/wrong answer.
but, every time i try to go in the same position i receive from sphero different coordinates.
there is some method used to improve the precision of locator?
If someone know something about let me know!
thanks ;)
ps:
i have followed this guide!
https://github.com/orbotix/Sphero-iOS-SDK/tree/master/samples/Locator#the-default-setup
tnx

There's a few different things here that I think might be the issue. Unfortunately, the locator is not crazy accurate to begin with, as the data is pulled from the motors taking the ball places. I was discussing with a couple guys here, and we surmise that if you were to put the ball in the center, and then drive it towards what the vertex points of an equilateral triangle that that would probably work best. The other issue that might be getting you is calibration. When you calibrate the ball, the heading is reset and therefore the locator thinks that it is moving in a different direction than it actually is. Perhaps in you app you will need to have some calibration for your gap detection when the ball calibrates to keep everything in sync.
Let me know if there is anything else.

Related

Moving in a linear direction based on touch input in Unity 2D

I am having trouble in unity 2D. I am trying to make a ball move in a linear direction across the screen after detecting a single touch, however this is proving quite difficult. I have researched and researched but I cant seem to find the answer to both parts of the problem, hence I come here. I apologise if this was not the right thing to do. Anyways, on to the question. How would I detect a single touch and how would I move a game object on the X axis for a certain number of coords. I don't want a touch direction specified, it just needs to be a touch. Another thing could be a touch on the object itself. Sorry again if I wasn't meant to do this. P.S. my code is terrible and barely even there, so I wont share it.
To detect touch you use Input.GetTouch. The number in the parameter is the number of the touch, like the first, or the second or the third touch, etc... If you just want one touch, just use Input.GetTouch(0) all the time.
To move the object in the X axis you need to user Transfrom.Translate. The parameters are the amount you want to move in a specific axis.

Get Second Point By First And Distance

I'm building an online game, and using node and whatnot, anyway i'm not too keen on constant streams and streams of data just for animations, i've set up a way for it to animate client side and so on... but i found a problem, all i was doing was setting the new coordinates and telling all the clients to animate their character to that point, but if you refreshed the page, the player would be there instantly.
I have got a distance,speed of movement,time of movement,start and destination... i know where they started moving, i know where their destination is, i know when they started moving and at what speed, and in a linear fashion.
What i need to work out, is where the player is (whilst animating) at that specific time when other players join the game.
Try http://en.wikipedia.org/wiki/Kinematics
Or http://en.wikipedia.org/wiki/Speed
the distance travelled can be calculated by rearranging the definition to d=v*t
The simplest approach would be to tween the position. That involves creating a series of intermediate steps along the path between the current position and the updated one. This works best if you know the frequency of updates. You can choose these points linearly or use an easing function to smooth it out.
If you really are doing a physical simulation though, it'll probably look more natural if you take the physical model into consideration. I'd try the simple case first before seeing whether you need to go into more mathematically complex territory.

Javascript & Canvas: Endless random animation of slightly morphing circle?

I'm completely new to canvas and animating objects with it. I did a little bit of research (e.g. I found RaphaelJS) however I couldn't find any general answer or tutorial on how to create a "morphing" circle.
The image I posted here is what I would like to do:
I'd like to create one circle that is endlessly animated via a randomizer and is slightly morphing its contours.
I know this might be not a "real" question for this forum, however I just wonder if anyone could provide a few tipps or tricks on how to do something like that.
By "how to do something like that" I'm speaking actually about the technique on how to morph a circle. Do I have to "mathematically" create a circle with dozens of anchor-points along the edge that are influenced by a randomized function?
I would really appreciate some starting help with this.
Thank you in advance.
A circle can be reasonably well approximated by 4 cubic curves (one for each quarter and the control points on the tangents - google for the correct length of the control segments or calculate them yourself - see here. You could then randomly animate the control points within a small radius to get a wobbling effect.
Do I have to "mathematically" create a circle with dozens of anchor-points along the edge that are influenced by a randomized function?
Yes, you do, although it should not be necessary to create "dozens".
You may find the .bezierCurveTo() and .quadraticCurveTo() functions useful to provide smooth interpolated curves between control points.
When you can use a raster image then for every point you can displace it along the x-axis with a sin function. You can run the same function along the y-axis but instead to simply displace the pixel you can double it. This should give you a morphing circle but it also works with other shapes.

expressing point position within a circle as a percentage of arbitrary segments

Ok, so... here's what I'm trying to do. In HTML/JS. With a math knowledge that would embarrass a twelve-year old.
With, say, 20 checkboxes on a page, the user picks.. five of them. A circle then appears on the page (I'd anticipate using one of the canvas libraries like Raphael) with their five answers arranged around it. So that's the first thing I don't know how to do; split a circle into x equal segments. Strange, foreign terms like "cos" and "sin" are looming on the horizon.
But then it gets even more fun: the user can click a point on the circle. And that point is translated into some sort of percentage value for each of the segments. So if the user checks Happy, Grumpy, Sneezy, Dopey and Bashful, and clicks the circle, I can tell them that they're 37% Happy, 42% Dopey and 21% Sneezy.
The best analogy is probably a colour-picker wheel, but I can't find any JS ones that I could repurpose. A pie chart is close - and there's a nice Raphael demo - but I've got a feeling that the fixed boundaries of a pie chart segment is going to take me down the wrong route for estimating percentage positions within the circle as a whole.
So, given my vague and poorly thought out request, and the noticeable absence of any "here's what I've tried so far" code - because I don't have the foggiest where to even start, apart from high school trigonometry books, can anyone suggest any code libraries or snippets that might get me at least pointing in the right direction?
Thanks :)
========================
Edit :
Wow, thanks for all the answers. I'll try to refine the question/s a bit:
I'm going to need to draw a circle with x number of points arranged equally around its circumference. The number of points will correlate to the number of checkboxes that the user checked.
That's the first bit I'm stuck on: I reckon that I can draw a circle, with dimensions and at a position on the page of my own choosing, (using Raphael or similar canvas library) but how can I calculate what the x/y pixel coordinates of those points should be on the circle circumference?
The second bit: the user then clicks anywhere in the circle. I guess what I'd do is calculate how far each of the circumference points are from that user click point - I'm not sure how to do that, apart from a vague suspicion it involves imaginary triangles - and then how much of a total distance each of those distances are. That last bit, at least, I can manage.
Actually, this is starting to make sense. I'm still not sure how the trig stuff works but it's amazing what typing your problem out so that strangers will understand it can do to help your own understanding...
You need to revise your question to explain more clearly what you are trying to do. In the meantime, I can give you the following information that may help you get started.
First of all, you'll need to know the locations of the five checkboxes that the user selects. In order to do this, the jQuery library offers some convenient functions such as $.position and $.offset.
Your question does not make clear exactly how the circle you want to draw is positioned in relation to the five checkboxes that the user clicks. As for actually drawing the circle, you may want to use something like the HTML5 canvas element. I've not yet used it myself, so I can't tell you much about it.
You might want to try asking another question on StackOverflow about how to draw a circle on your web page once you've computed the center and radius of the circle.
As for doing the math about the circle, you need to know that a circle can be parameterized on an x-y plane by the following equations:
x = x0 + r cos(theta)
y = y0 + r sin(theta)
where (x0,y0) is the center of the circle, r is the radius of the circle, and theta ranges over 0 to 2*Pi radians (0 to 360 degrees)
Let us know more about what you're doing and we can give you some more specific information.

generate b2Body for a letter

I want to code a little Game, dealing with fonts and letters. I want to make them move arround in 2d space and i am using box2dweb as physics engine, what is actually doing a very great job. At the moment all I am struggling with, is the problem of building the b2Body for a Letter. Box2d can only handle primitive, convex shapes and to build an more complex hitbox I have to combine some of them. In the image I tried to figure out what i would like to reach, an algorithm, that takes an svg-path of a letter and generates a series of b2shapes which represent the hitbox.
All in all i have no Idea where i could find some Information about this, if there is a library that is capable of doing this. Even if this Library is not available in Javascript, i could do the job on Server.
I know that there is paper.js and raphalel, some clever vector libraries, but i have not found any hint how to solve this yet.
I would be happy for any kind of help, links to ressources, or the correct name of the problem in mathematical sense.
Greetings and thanks in advance...
Philipp
I just want to leave the result of investigation here, maybe someone will help it. The initial idea is based on »ear cutting«, »ear culling«, or »ear cropping«. A demo here will describe this. But the algorithm, which produces less, but box2d suitable polygons is shown in a demo here. The idea is to merge as much triangles as possible, as long as they are convex and this case, do not have more than eight edges. A triangle is suitable to be added to a polygon, if one can find two points in the triangle and two adjective points in the polygon, with the same x and y coordinates.

Categories

Resources