Skip to main content
D
du33044471t41k
Participant
October 19, 2023
Question

hitTest globalToLocal or other

  • October 19, 2023
  • 3 replies
  • 662 views

Hello!
I'm trying to count how many turns the yellow dot (this.area_mc.yellowDot_mc) makes before reaching the center or edge.
The yellow dot goes from the edge to the center and then back. I placed a vertical rectangle (rect_mc) and tried to identify the number of turns made with hitTest, but I don't think I was able to make the coordinate transformation work. The rectangle can be either inside area_mc or outside, but the yellow dot must be inside the area. I tried all localToGlobal, localToLocal, globalToLocal methods but I was unsuccessful. link to the .fla file: https://drive.google.com/file/d/1UPHJDcEc6sps58bExh6dNnwDuAXLwLJ8/view?usp=sharing


I thank you for your help.

 

This topic has been closed for replies.

3 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
October 20, 2023

Hi.

 

If you want to stick to the collision detection approach, you just need to change this line:

var pt = yellowDot_mc.localToLocal(0, 0, rect_mc); // instead of ...(yellowDot_mc.x, yellowDot_mc.y, rect_mc);

 

This method expects internal coordinates.

 

Regards,

JC

 

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    October 20, 2023

    in general, a hittest isn't going to work for this unless you add constraints and are careful to ensure exactly one + hittest per 2 pi revolution of the dot.

    Vladin M. Mitov
    Vladin M. Mitov
    Inspiring
    October 20, 2023
    A suggestion: Why don't you convert the coordinates of the yellow point to polar coordinates and compare θ to some predefined value? In this way, it will be clear when the point crosses a given "meridian", despite of the distance to the pole.

     

     

     

    function cartesianToPolar( centerX, centerY, x, y ){
	var dx = x - centerX;
	var dy = y - centerY;
	var r = Math.sqrt( dx * dx + dy * dy );
	var theta = Math.atan2( dy, dx );
	return { r:r, theta:theta };
}​

     

     

     



    - Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation
    D
    du33044471t41kAuthor
    Participant
    October 20, 2023

    Your solution is very elegant. Congratulations and thank you!

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    October 19, 2023

    what's this supposed to do

     

    createjs.Ticker.setInterval( tempoDeMovimento ); /*tempo de atualização*/

    D
    du33044471t41kAuthor
    Participant
    October 20, 2023

    This is the 200 ms time interval listener that calls the fn_Spin( ) function that increments and decrements the values for sine and cosine variations, causing the yellow dot to move in both directions.

    /*update time do dot move */

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    October 20, 2023

    not much is saved by converting to polar.  you can just check the angle (and, if you find it easier, you can change the angle and angle_inc variable names to the ones you used):

     

     
    var rect_mc = this.area_mc.rect_mc;
    var area_mc = this.area_mc;
    var yellowDot_mc = this.area_mc.yellowDot_mc;
     
    var tempoDeMovimento = 20; // milissegundos para o listener 
    var angle = 0;   
    var angle_inc = .1;  //para incemento ser igual ao índice
    var seno;
    var cos;
    var circRadius = 300; /*raio máximo*/
    var flagSentido = 'reduzindo'; /*direção sentido centro ou borda*/
    var contarChamadasDeMovimentos = 0;
    var contarVoltas = 0;
    var count = 0;
     
    createjs.Ticker.addEventListener("tick", fn_Spin);
    createjs.Ticker.setInterval( tempoDeMovimento ); /*tempo de atualização*/
     
    function fn_Spin(event) {
    seno = Math.sin ( -angle ) * circRadius;
    cos  = Math.cos ( -angle ) * circRadius;
     
    // new code
    angle = (angle+.1);
    if(angle>=Math.PI*2){
    angle=0;
    count++;
    console.log(count);
    }
     
    if ( circRadius < 0 ) {
    flagSentido = 'crescendo';
    contarVoltas = 0;
    console.log(count);
    count = 0;
    console.log('< 0 ')
    } else if ( circRadius > 300 ) {
    flagSentido = 'reduzindo';
    contarVoltas = 0;
    console.log(count);
    count = 0;
    console.log('> 300 ')
    }
     
    if ( flagSentido == 'crescendo' ) {
    circRadius = circRadius + .1;
    } else if ( flagSentido == 'reduzindo' ) {
    circRadius = circRadius - .1;
    }
     
    yellowDot_mc.x = seno;
    yellowDot_mc.y = cos;
    };
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices