[Problema] Dibujo, Triangulos, Rectangulos, Circulos y Drag

Que tal, hola.. soy nuevo..

Tenía a Cristalab en los RSS y ahora que en mi trabajo requiero desarrollar en AS2 pues..
en un ataque de pánico corro hacia aquí.

Tengo que hacer un simulador como este: http://concurso.cnice.mec.es/cnice2006/material098/geometria/geoweb/trian8.htm
(Pueden con el mouse arrastrar el punto C y ver el funcionamiento.)

El primero del lado derecho. (El del Círculo)

La idea de todo, es hacer la simulación para mostrar que no importa en donde esté el "Punto C" sobre la línea
del Círculo.. el ángulo que formará en el tríangulo siempre será de 90 Grados.

Tengo que hacer algo exactamente igual. El punto que me detiene, es "El pequeño cuadro" que es la marca
que indica los 90° del ángulo.

En el Escenario tengo 3 objetos. Un círculo "theCircle" (instancia de MovieClip) y 3 Puntos,
PuntoB, PuntoA y slider, (instancia de MovieClip)

Grabé un Video de lo que estoy haciendo:





Este es el Código que tengo actualmente:

Código ActionScript :

//Big circle's x y cordinates, center registration
centerX = theCircle._x;
centerY = theCircle._y;
//radio del circulo
radius = theCircle._width/2;


//Dibujar 3 Líneas
this.createEmptyMovieClip("Diametro", 5);
this.Diametro.lineStyle(1, 0x0000FF, 100);
this.Diametro.moveTo(PuntoB._x + 5, PuntoB._y + 5);
this.Diametro.lineTo(PuntoA._x + 5, PuntoB._y + 5);

this.createEmptyMovieClip("LineaBC", 10);
this.Diametro.lineStyle(1, 0x0000FF, 100);
this.Diametro.moveTo(PuntoB._x + 5, PuntoB._y + 5);
this.Diametro.lineTo(slider._x, slider._y);

this.createEmptyMovieClip("LineaCA", 15);
this.Diametro.lineStyle(1, 0x0000FF, 100);
this.Diametro.moveTo(slider._x, slider._y);
this.Diametro.lineTo(PuntoA._x + 5, PuntoB._y + 5);


//drag the slider
slider.onPress = function() {
   slider.onMouseMove = dragTime;
};
//stop dragging
slider.onRelease = function() {
   slider.onMouseMove = null;
};
//stop.dragging
slider.onReleaseOutside = function() {
   slider.onMouseMove = null;
};



//function to drag the slider
function dragTime() {
   ////Find out the angle between the eyeball's center and the point where mouse is at
   var radians = Math.atan2(_root._ymouse-theCircle._y, _root._xmouse-theCircle._x);
   //radius for the circle
   radius = theCircle._width/2;
   //find out the x y coordinates of this object, from the calculated angle
   //multiplying the cos and sin of the angle,by the radius ensures---->
   //that the object will be placed on the circumference of the big circle
   this._y = theCircle._y+Math.sin(radians)*radius;
   this._x = theCircle._x+Math.cos(radians)*radius;

   updateAfterEvent();
   ReDibujarTriangulo(); // Actualizar
}

function ReDibujarTriangulo(){
   this.createEmptyMovieClip("Diametro", 5);
   this.Diametro.lineStyle(1, 0x0000FF, 100);
   this.Diametro.moveTo(PuntoB._x + 5, PuntoB._y + 5);
   this.Diametro.lineTo(PuntoA._x + 5, PuntoB._y + 5);
   
   this.createEmptyMovieClip("LineaBC", 10);
   this.Diametro.lineStyle(1, 0x0000FF, 100);
   this.Diametro.moveTo(PuntoB._x + 5, PuntoB._y + 5);
   this.Diametro.lineTo(slider._x, slider._y);
   
   this.createEmptyMovieClip("LineaCA", 15);
   this.Diametro.lineStyle(1, 0x0000FF, 100);
   this.Diametro.moveTo(slider._x, slider._y);
   this.Diametro.lineTo(PuntoA._x + 5, PuntoB._y + 5);   
}

Muchas gracias por tomarse el tiempo de leer mi duda..
y de antemano gracias a todos...

Alguna idea?

Hola,
una idea podría ser usar la clase Point para crear las coordenadas de los puntos, usar Point.interpolate para calcular un punto intermedio que esté por ejemplo a un 10% de esa recta, y con Point.polar podrías hallar el punto que te falta para hallar la perpendicular a la recta que pase por el punto interpolado.

Creeme que no sabía que existía esa clase!

Gracias!!!
Voy a probarlo, me gusta la idea!!


Gracias de verdad!!..

Que estaré haciendo mal..


Los puntos que creo.. creo que no se crean..

Código ActionScript :

   var CIzq:Point = Point.interpolate(new Point(PuntoB._x + 5, PuntoB._y + 5), new Point(slider._x, slider._y), 0.2);
   var CDer:Point = Point.interpolate(new Point(PuntoA._x + 5, PuntoA._y + 5), new Point(slider._x, slider._y), 0.2);
   
   this.createEmptyMovieClip("Cuadrito", 20);
   this.Cuadrito.lineStyle(1, 0xFF0000, 100);
   this.Cuadrito.moveTo(15, 20);
   this.Cuadrito.lineTo(30, [b]CDer._y[/b] + 20);

Trato de hacer 2 puntos.. CIzq y CDer.. y no pasa nada.. le sumo 20 para ver si traen valor y no..
no existen.. . que estaré haciendo mal..

Las propiedades "x" e "y" del objeto Point no llevan guión bajo. Tienes que poner: CDer.x ó CDer.y.

Este es todo mi código ahora..
Este probando la clase point y evidentemente algo anda.. mal..

Para probarlo, dibujo una linea (movie clip) usando los punto, y no hay nada.. (todos son: 0)
el resultado es.. esto:

Código ActionScript :

//Big circle's x y cordinates, center registration
centerX = theCircle._x;
centerY = theCircle._y;
//radius for the circle
radius = theCircle._width/2;

//Dibujar 3 Líneas
ReDibujarTriangulo();

//Puntos para la marca de 90 Grados

var pbx:Number = PuntoB.x + 5;
var pby:Number = PuntoB.y + 5;
var pax:Number = PuntoA.x + 5;
var pay:Number = PuntoA.y + 5;
var psx:Number = slider.x;
var psy:Number = slider.y;

var Ptb:Point = new Point(pbx, pby);
var Pts:Point = new Point(psx, psy);
var Ppa:Point = new Point(pax, pay);

var Ppb:Point = Point.interpolate(Ptb, Pts, 0.2);
var Ppa:Point = Point.interpolate(Ppa, Pts, 0.2);

this.createEmptyMovieClip("raya", 20);
this.Diametro.lineStyle(3, 0x0000FF, 100);
this.Diametro.moveTo(Ppb.x, Ppb.y);
this.Diametro.lineTo(Ppa.x, Ppa.y + 50);


//drag the slider
slider.onPress = function() {
   slider.onMouseMove = dragTime;
};
//stop dragging
slider.onRelease = function() {
   slider.onMouseMove = null;
};
//stop.dragging
slider.onReleaseOutside = function() {
   slider.onMouseMove = null;
};


//function to drag the slider
function dragTime() {
   //Find out the angle between the eyeball's center and the point where mouse is at
   var radians = Math.atan2(_root._ymouse-theCircle._y, _root._xmouse-theCircle._x);
   //radius for the circle
   radius = theCircle._width/2;
   //find out the x y coordinates of this object, from the calculated angle
   //multiplying the cos and sin of the angle,by the radius ensures---->
   //that the object will be placed on the circumference of the big circle
   this._y = theCircle._y+Math.sin(radians)*radius;
   this._x = theCircle._x+Math.cos(radians)*radius;
   
   updateAfterEvent();
   ReDibujarTriangulo(); //Robertool
}

function ReDibujarTriangulo(){
   DibujarTriangulo();
   
   this.Noventa._x = slider._x - 15;
   this.Noventa._y = slider._y + 20;
}

function DibujarTriangulo(){
   this.createEmptyMovieClip("Diametro", 5);
   this.Diametro.lineStyle(1, 0x0000FF, 100);
   this.Diametro.moveTo(PuntoB._x + 5, PuntoB._y + 5);
   this.Diametro.lineTo(PuntoA._x + 5, PuntoA._y + 5);
   
   this.createEmptyMovieClip("LineaBC", 10);
   this.Diametro.lineStyle(1, 0x0000FF, 100);
   this.Diametro.moveTo(PuntoB._x + 5, PuntoB._y + 5);
   this.Diametro.lineTo(slider._x, slider._y);
   
   this.createEmptyMovieClip("LineaCA", 15);
   this.Diametro.lineStyle(1, 0x0000FF, 100);
   this.Diametro.moveTo(slider._x, slider._y);
   this.Diametro.lineTo(PuntoA._x + 5, PuntoB._y + 5);   
}

Me temo que no es tan sencillo como pretendes hacerlo.
Los puntos interpolados tienen que recalcularse también cuando mueves el punto slider, y además de eso tienes que ir calculando la pendiente de cada una de las 2 líneas, la pendiente de las rectas perpendiculares a ellas, y después usar coordenadas polares para dibujar esa perpendicular.

Sí, lo entiendo.. tengo que hacer los recalculos al mover el slider..
Solo que con ese código esperaba ver que.. los puntos existieran.. es decir..

Código ActionScript :

this.createEmptyMovieClip("raya", 20); 
this.Diametro.lineStyle(3, 0x0000FF, 100); 
this.Diametro.moveTo(Ppb.x, Ppb.y); 
this.Diametro.lineTo(Ppa.x, Ppa.y + 50); 

Con esta parte del código, esperaba que "Ppb" y "Ppa" tuvieran valores, y no los tienen.
Es como si los puntos no existieran. lo único que se ve en el resultado es el "50" que sumo al final:

Código ActionScript :

this.Diametro.lineTo(Ppa.x, Ppa.y + 50); 

Me temo que no se crean los puntos.. Quizá los estoy haciendo mal..

Eso es porque en las asignaciones estas poniendo "x" e "y" en lugar de "_x" e "_y". Tienes que poner:

Código ActionScript :

var pbx:Number = PuntoB._x + 5;
var pby:Number = PuntoB._y + 5;
var pax:Number = PuntoA._x + 5;
var pay:Number = PuntoA._y + 5;
var psx:Number = slider._x;
var psy:Number = slider._y;

Cuando no tienes que poner el guión bajo es cuando te refieras a un Point, pero un MovieClip sí que lo lleva.

Ya lo corregí.. y nada..

Estoy Usando flash CS4 en un proyecto AS2

El código lo estoy agregando en el primer frame.

Siguen los puntos sin ser... nada.. me estoy volviendo loco.. je!

Aquí te dejo un ejemplo en el que podrás ver por dónde van los tiros. Tienes que tener 2 clips con los puntos llamados pm0 y pm1. Al arrastrar cualquiera de ellos se recalcula automáticamente la perpendicular:

Código ActionScript :

import flash.geom.Point;

var p0:Point = new Point();
var p1:Point = new Point();

pm0.onPress = pm1.onPress = startDragHandler;
pm0.onRelease = pm1.onRelease = stopDragHandler;
_root.onEnterFrame = enterFrameHandler;

function startDragHandler():Void
{
   this.startDrag();
}

function stopDragHandler():Void
{
   this.stopDrag();
}

function enterFrameHandler():Void
{
   p0.x = pm0._x; p0.y = pm0._y;
   p1.x = pm1._x; p1.y = pm1._y;
   
   var slopeR0:Number = (p1.y - p0.y) / (p1.x - p0.x);
   var slopeR1:Number = -1 / slopeR0;
   var angle:Number = Math.atan(slopeR1);
   
   var pPerp0:Point = Point.interpolate(p0, p1, 0.8);
   var pPerp1:Point = Point.polar(100, angle);
   pPerp1 = pPerp1.add(pPerp0);
   
   _root.clear();
   
   _root.lineStyle(1, 0x000000);
   _root.moveTo(p0.x, p0.y);
   _root.lineTo(p1.x, p1.y);
   
   _root.moveTo(pPerp0.x, pPerp0.y);
   _root.lineTo(pPerp1.x, pPerp1.y);
}

Cuando agrego: import flash.geom.Point;
Me marca error..

El parámetro "100" en el método "Point.polar(100, angle)" que significa?

Voy a ver como aplicarlo a mi código.. .

Gracias!

Mira lo que intenté..

Hola,
el primer parámetro de Point.polar (100) es la longitud del vector, y será lo que tengas que ajustar en función de la distancia de las rectas perpendiculares al vértice. Lo del error al importar la clase Point, me imagino que será porque estés publicando en ActionScript 1.0. Prueba a cambiarlo por 2.0 en la configuración de publicación.