Поместите изображение вокруг круга

Question

Я разрабатываю для Reactivision с использованием Openframeworks, и мне нужно поместить ofImage (который можно разместить в любом месте экрана) вокруг круга, а также повернуть его на определенный угол.Я включаю изображение, чтобы помочь с этим.

http://i.stack.imgur.com/WCyPu.png

Как вы видите, оси X и Y идут от 0,0 до 1,1, и у меня есть круг всередина экрана (центр расположен на 0,5,0,5) с радиусом 0,42 (поэтому он не заполняет экран).

В конечном итоге пользователь помещает изображение ofImage (в данном случае, красныйсмайлик) на экране, в позиции 0.2,0.2.Его ширина и высота равны 0,08, а центр вращения находится в верхнем левом углу (как обычно).

Что мне нужно сделать, это взять этот смайлик, расположить его только по кругу в ближайшемположение (он может следовать за радиусом, если он поворачивается легче) он мог бы быть и вращать его, чтобы он был обращен к центру круга.

Мне также нужно найти смайлики "нос",в 0,04 0,04 от осей ofImage, переместите и поверните его, чтобы оставаться носом смайликов, а не точкой в ​​пустоте.Лучшим для красного смайлика должен быть зеленый смайлик.

Моя тригонометрия немного ржавая, и мой лучший подход не работает.Я определяю его окончательное положение внутри конструктора и поворачиваю спрайт в шаге draw ().

Smiley::Smiley(int _id, float x, float y)
{
    smileyImg.loadImage("smiley.png");

    float tangent = (0.5-x)/(0.5-y);
    //angle is a private float variable; 
    angle = atanf(tangent);
    //those 0.06 just lets me move the smiley a little over the circle itself
    x = 0.5+cos(angle)*(RADIUS+0.06);
    y = 0.5+sin(angle)*(RADIUS+0.06);
    float xNose = 0.5+cos(angle)*(RADIUS+0.06);
    float yNose = 0.5+sin(angle)*(RADIUS+0.06);
    angle = ofRadToDeg(angle);
    //pos and nose are Vector3 classes which hold three floats. Nothing too much important here
    pos.set(x, y, 0.0);
    nose.set(xNose, yNose, 0.0);
}

void Smiley::draw()
{
    ofPushMatrix();
    ofTranslate(pos.x,pos.y);
    ofRotateZ(angle);
    ofTranslate(-pos.x,-pos.y);
    ofSetColor(255,255,255);
    ofEnableAlphaBlending();
    smileyImg.draw(pos.x,pos.y,0.08,0.08);
    ofDisableAlphaBlending();
    ofPopMatrix();
}

Может кто-нибудь помочь мне с этим, пожалуйста?Заранее спасибо.

Редактировать: После адаптации решения @datenwolf, позиции, которые я получаю, идеальны, но когда я помещаю вращение и перевод (или просто перевод) в матрицу преобразования, это делаетсмайлики исчезают.Я уверен, что с матрицей все в порядке:

Smiley::Smiley(int _id, float x, float y)
{
    smileyImg.loadImage("smiley.png");

    float distance = sqrt( pow((x - 0.46),2) + pow((y - 0.42),2));
    Vector3 director((x - 0.46)/ distance, (y - 0.42)/ distance, 0.0);
    pos.x = 0.46 + RADIUS * director.x;
    pos.y = 0.42 + RADIUS * director.y;

    float distanceNose = sqrt( pow((x - 0.46),2) + pow((y - 0.42),2));
    Vector3 noseDirector((x - 0.46)/ distanceNose, (y - 0.42)/ distanceNose, 0.0);
    nose.x = 0.46 + RADIUS * noseDirector.x;
    nose.y = 0.42 + RADIUS * noseDirector.y;

    /* matrix is a float matrix[16]. I think the indexing is ok, but even going from
    0 4 8 12... to 0 1 2 3..., it still doesn't work*/
    matrix[0] = -director.y; matrix[4] = director.x; matrix[8] = 0.0; matrix[12] = pos.x;
    matrix[1] = director.x; matrix[5] = director.y; matrix[9] = 0.0; matrix[13] = pos.y;
    matrix[2] = 0.0; matrix[6] = 0.0; matrix[10] = 1.0; matrix[14] = 0.0;
    matrix[3] = 0.0; matrix[7] = 0.0; matrix[11] = 0.0; matrix[15] = 1.0;
}

void Smiley::draw()
{
    ofPushMatrix();
    glLoadMatrixf(matrix);
    ofSetColor(255,255,255);
    ofEnableAlphaBlending();
    // Now that I have a transformation matrix that also transposes, I don't need to define the coordinates here, so I put 0.0,0.0
    noseImg.draw(0.0,0.0,0.08,0.08);
    ofDisableAlphaBlending();
    ofPopMatrix();
}

Более того, мне нужно поворачивать положение носа в соответствии с каждым смайликом.Как вы думаете, это лучший способ?Большое вам спасибо

Answer 1

Как часто, вам не нужна тригонометрия для этого.Пусть C будет центром круга, r радиус и P точка, по которой пользователь щелкает.Тогда позиция U щелчка, спроецированного на круг, равна

U = C + r * (P - C)/|P - C|

, где

| A | = sqrt(A_x² + A_y² + …);

Так что в случае двух измерений вы получите

U.x = C.x + r * (P.x - C.x)/sqrt( (P.x - C.x)² + (P.y - C.y)² )
U.y = C.y + r * (P.y - C.y)/sqrt( (P.x - C.x)² + (P.y - C.y)² )

Вращениеможет быть описана матрицей вращения R, которая состоит из направления от круга C к P и перпендикуляра T к нему.Итак, Большой жирный РЕДАКТИРОВАТЬ: нормализация направления:

D = P - C = (P.x - C.x , P.y - C.y)/sqrt( (P.x - C.x)² + (P.y - C.y)² )
T = Z × D 

также обратите внимание, что вы можете написать U в терминах D

U = C + r*D

используйте это дляпостроить матрицу вращения

    | T.x D.x |
R = |         |
    | T.y D.y |

R, являющуюся матрицей вращения, следует Ty == Dx и оценки Tx

T.x = -P.y + C.y = -D.y

, поэтому

    | -D.y D.x |
R = |          |
    |  D.x D.y |

Большой жирный РЕДАКТИРОВАТЬ: я использовал неправильные компоненты для последнего столбца матрицы. Это U. {x, y} , не D. {xy}.Мне очень жаль!

Мы можем поместить это в полную матрицу преобразования M:

    | -D.y D.x   0 U.x |   | -D.y D.x   0 (C + r*D.x) |
M = |  D.x D.y   0 U.y | = |  D.x D.y   0 (C + r*D.y) |
    |    0   0   1   0 |   |    0   0   1      0      |
    |    0   0   0   1 |   |    0   0   0      1      |

Вы можете загрузить эту матрицу, используя glLoadMatrix для размещения спрайта.