Layout dynamic number of sprites in a circle - iphone

I'd like to create a fixed size circle that will have a varying number (between 6 - 12) of rectangle sprites positioned on it. I've read about a cocos2d function called drawCircle which is great for displaying a circle. I'd like to display a circle, but I'd also like to include the rectangle sprites on top of it, spaced evenly depending on the number of sprites.
Is there a function that would layout the rectangle sprites in a circle?

I see a little bit of trigonometry in your future! Perhaps draw the circle using a drawing function, and then compute points for the center of each box?
You'll need to know the radius of your circle, obviously, but from there it should be pretty simple. It looks like you want to place them at 45 degree angles. So the first box would be placed at point (radius, 0), the second at (radius*cos(45), radius*sin(45)), third at (0, radius), etc.
The above math is assuming standard counter-clockwise rotation from 0-360 degrees. You can also use radians - you would then compute all these points with theta = 0, pi/4, pi/2, 3pi/4, pi, 5pi/4, 3pi/2, and 7pi/4
Basically is the circle center is x0, y0, your calculated points will be (x0 + radius*cos(theta), y0 + radius*sin(theta))
Should be fairly simple math at play there :)

Related

Rotate an image around x or y axis in Matlab

If a camera is looking at say 6 evenly spaced dots in the real world it would look like the image below if the camera is looking at the image straight on with no rotation in the x, y or z axis
The z-axis is perpendicular to the image sensor so rotation around the z-axis is simple, it's just a tilt of the image. If I were to rotate the camera (or objects being looked at) around the x axis (if the x-axis is up down) the rows and columns will no longer be parallel and would project off to a vanishing point, like this.
What I would like to do is take a 2 dimensional image of say, dots, and be able to apply different rotations around the x,y and z axes independently. I've experimented with reading my image in Matlab and multiplying by a rotation matrix, or even a full camera matrix but I can't figure out how to take a 2D image, simulate rotating it around the x axis and then saving that back to an image. So that my original grid of dots would look like the bottom image with lines going off to a vanishing point. I've seen some examples using imwarp but I didn't see how I can set the angle of rotation. I'm working on camera calibration so I really want to be able to specify an angle of rotation around each axis.
Thanks for any help.

Calculate image rotation based on old and new positions of two points

I have images of faces in different positions. I want to rotate them, to make the line connecting the eyes always be horizontal. But I don't know how to do this in MATLAB.
And how can I calculate the angle of rotation?
Descriptive drawing of problem:
If you already have the locations of the eyes, then it's easy :) Here's an outline:
%// left eye - right eye
pos = [ 30 90 %// X
80 40]; %// Y
%// The angle equals the arctangent of dy/dx
angle = atan2(diff(pos(2,:)), diff(pos(1,:)));
%// Rotate in the opposite direction
img = imrotate(img, -angle);
Since you seem to have the Image Processing Toolbox, you can also look into the built-in landmark-based registration functions (especially if your transform is not limited to pure rotation), in particular cpselect with a syntax like:
cpselect(moving,fixed)
And then use fitgeotrans to construct the geometrical transform and imwarp to warp the moving image.

Find a point on a circle circumference based on degrees

Let's say that you have a stick figure. Let's say the stick figure has an elbow and a hand. What if the stick figure wants to spin his hand in a windmill without moving his elbow? If the elbow serves as the center of a circle, and the hand must always be on the circle's circumference, and I know the exact location of the elbow and hand, how do I move the hand around the circle's circumference, while preserving the radius (the length of the arm between the elbow and hand because it really shouldn't shrink or grow)?
I need to move the coordinate of the hand along the circumference of a circle, where the center of the circle is the elbow. This is in 2D.
I have the coordinates of both points. I can calculate the radius which is the length of the line between the points. Knowing the circle's center and radius, how do I rotate the hand along the circle circumference? I want it to maintain the radius, but change positions on the circumference. Basically, it must act like it's hinged.
P.S: I had a picture, but Stack Overflow said I was too new... Blame Stack Overflow.
Basic trigonometry says:
x = r * cos(a);
y = r * sin(a);
This does not take into account the rotation of the hand, just shows the point on the circle where the wrist will be. Is that what you are after?
EDIT: Sorry, that assumes the elbow is at (0, 0) and x +ve is right and y +ve is up.
Given the elbow is at (ex, ey) then wrist is at:
wx = ex + r * cos(a);
wy = ey + r * sin(a);
If, as happens in browsers, y is +ve down, then subtract instead of add.

draw a circle and with animation transform it to a rectangle

so I have created a circle with draw method :
glLineWidth(16);
glColor4ub(0, 255, 0, 255);
drawCircle( ccp(s.width/2, s.height/2), 100, 0, 10, NO);
I would like to know if it is possible to transform this shape to a rectangle shape with animation . Thank you . sorry for my english I'm french :/
For simplicity, I'd use 4 cubic bezier curves - one curve per quadrant of the circle. (This isn't a perfect circle but neither is a 100 segment circle!) Then, using the schedule: functionality provided by cocos2d, I would gradually move each curve's control points over time until they line-up vertically or horizontally with the curve's origin and destination. This turns the curves into 4 straight lines: a rectangle!
Well, a square to be exact. You'll also have to move the origins and destinations of all 4 curves to form a rectangle that is not a square, but you get the idea I hope?
See these links for additional info:
Bezier Circle math - http://www.cgafaq.info/wiki/Bezier_Circle
cocos2d - ccDrawCubicBezier - http://www.cocos2d-iphone.org/api-ref/2.0.0/_c_c_drawing_primitives_8h.html#a5a391711c0aa611a06167bdd7637571f
cocos2d - schedule: example code - http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:lesson_2._your_first_game#making_things_move
EDIT: added image
d = d value calculated from equation at: http://www.cgafaq.info/wiki/Bezier_Circle
start, control 1, control 2, and end are the 4 points needed to make a cubic bezier curve in cocos2d.
You will have to write the code for this.
You could, for example, create a number of control points that are around the circle. Each of these control points could consist of 3 points. Two points that represent two points on the circle and one point that controls the curve of the line drawn between the two points. Now you animate the motion between the control points on the curve such that they move to become the control points on a rectangle and at the same time animate the motion of the third control point so the edge changes from a curve to a straight line.

cocos2d help find points on a circle

I am trying to solve a tricky math problem, in a cocos2d for iphone context.
Basically I have a roullette wheel which is rotating over time.
I want to have a Sprite latch onto the wheel at certain points (like compass ordinal points N, S, E, W) and bounce off at all other points.
I have the image of the wheel rotating, and just need to solve the part where I can test for whether a sprite has intersected with the circle at the right point on the circle as it is rotating.
I think this question is going in the right direction, but I can't get my head around it. Can anyone help explain?
Best way to find a point on a circle closest to a given point
If I understand correctly:
First check the distance between the sprite and the centre of the roulette wheel. This will tell you if the sprite is at the edge of the wheel. (If not, nothing happens, right?)
Then, find the angle that the sprite makes from the "x-axis" of the roulette wheel.
spriteAngle = atan2(sprite.x - rouletteCentre.x, sprite.y - rouletteCentre.y)
You'll need to find the equivalent of the atan2() function. It usually returns an answer in radians; you may want to convert it to degrees or quarter-turns or something if you prefer.
Then, subtract the angle that the roulette wheel itself is rotated by (if the wheel itself is rotating, if not then you're already done). Make sure your angle measurement is consistent.
actualAngle = spriteAngle - rouletteRotationAngle
Note that actualAngle may be outside the range 0-360 degrees, and you will need to make it "wrap around".
Lastly, you will want to allow a small range of values as acceptable (e.g. 98 degrees to 102 might count as "North").
So you have a circle of radius r, with center (x0,y0).
A point lies outside of the circle, at coordinates (x,y). Your question is to find the closest point on the circle itself to the point (x,y).
The solution is simple. The closest projection of a point onto a circle is accomplished by a simple scaling. Thus,
d = sqrt((x-x0)^2 + (y-y0)^2)
xp = x0 + (x - x0)*r/d
yp = y0 + (y - y0)*r/d
The new point (xp,yp) will lie on the circle itself. To be honest, you would be better off to work in polar coordinates, with the origin at the center of the circle. Then everything gets much easier.
Your next question will be where did it hit on the circle? Don't forget the points of the compass on the circle are rotating with time. An atan2 function will give you the angle that the point (xp-x0,yp-y0) lies at. Most toolsets will have that functionality. See that I've subtracted off the origin here.