line to movieclip collision

[Peter2659561313g1]

Dear All Thank you for your time

I have aproblem that cant seem to work out looked on line and read some books but cant find

a solution. I have one movie clip that is tweened on a straight path that is movable with the mouuse

as wel as rotatable with buttons, the imbedde tweened object cabn also be moved with buttons . The collision object is a line that rotates 360deg with a button . That all works, what I cant figure out to do is display the distance to the line as the tweened object approaches the like a countdown to a colision.

added a photo to help explain.

Thank you all

[kglad]

you can get an exact answer for a disc/circle and an approximation for a square using:

first, calculate the line segment's point of collision.

then, calculate distance between your object's center of that point of collision

if you need a more exact answer, you would need both collision points, the segment and the object.

[Peter2659561313g1]

Dear Kglad

Thank you for your reply

I am not sure how acomplish to that, as both the object and the ray are on different time lines how and are both capable of moving to diffent places on the screen. I can work it out if static but not each a time a new ray position and a new path is chosen.

Thank you peter

[kglad]

their layers are irrelevant.  you'll use high school math to calculate (using code) collision points.

[Peter2659561313g1]

Dear Kglad

Thanks for your help

When I look at the position of the imbedded movie clip on stage even though the main movie clip registration has  the same transform point  as the imbedded movie clip, the imbedded movie shows - 1444.45 for x and the main moveie shows x at 233.6 .

Also when I put points on the two lines to work out the intersection the points the two points show different x values for the the imbeded movie clip compared to the main movie clip .

How do I reconsile so both the main and the imbedded movie show the same x and y values ?

Best Regards Peter

[kglad]

i don't think i can answer that without checking your fla and this problem is non-trivial. ie, it would take me more than 1 hour (i think) to solve for you.

[Peter2659561313g1]

Dear Kglad 

I have done some researching and have come up with a solution by adapting  a JS code online to animate for most of my problems ,the only sticking point now is cant get the movie clip on stage and the create guided path does not seem to work for the created circle. The movie clip in the library wil alsol not allow me to give it a linkage name (Adobe animate 2023) .The motion guide can work if put static numbers but not it seems with variables.Would like to post FLA but seems to be no way to do that.

Red point, is point of intercection

purple is object to place on path.

Best Regards

Peter

createjs.Ticker.addEventListener("tick", tick);
createjs.MotionGuidePlugin.install();
var p = this.yellowmc.dot1.localToGlobal(0,0);//dot and other end of the line
var q = this.greenmc.dot1.localToGlobal(0,0);// dot at other end of the line

var x2 = p.x
var y2 = p.y
var x4 = q.x
var y4 = q.y

var Ax = this.yellowmc.x //yellow line on the stage
var Ay = this.yellowmc.y //green line on the stage
var Bx = p.x
var By = p.y

var Cx = this.greenmc.x
var Cy = this.greenmc.y
var Dx = q.x
var Dy = q.y

 var top = (Dx-Cx)*(Ay-Cy)- (Dy-Cy)*(Ax-Cx)
 var bottom =(Dy-Cy)*(Bx-Ax)- (Dx-Cx)*(By-Ay)
 console.log (top+("Top"))

 var t = top/bottom
 console.log(t,"T")
 var w =Ax + (Bx-Ax)*t
	 console.log (w)

	 var s =Ay + (By-Ay)*t
	 console.log (s) 
function newdot(A,B){
	
var dot = new createjs.Shape();
	stage.addChild(dot);
dot.graphics.beginFill("red").drawCircle(A,B, 20);

}
newdot(w,s)
newdot(Ax,Ay)
newdot(Bx,By)
var text = new createjs.Text("A", "20px Arial", "black");
 text.x = Bx
 text.y = By
 this.addChild(text);
 function createline(a,b,c,d){
var line = new createjs.Shape(line);

            
            stage.addChild(line);
            line.graphics.setStrokeStyle(1).beginStroke("#000000");
            line.graphics.moveTo(a,b);
            line.graphics.lineTo(c,d);
            line.graphics.endStroke();
            stage.update();

 }
createline(Ax,Ay,Bx,By)
createline(Cx,Cy,Dx,Dy)


var shape = new createjs.Shape();
shape.graphics.beginFill("#ff00ff").drawCircle(Ax,Ay,50);
stage.addChild(shape);

//createjs.Tween.get(shape).to({guide:{ path:[0,0,w,s,Bx,By] }},7000);

//Cant get tween to work
function tick(event) {
    stage.update();
}
this.addChild(new lib.mybox())// does not work

[kglad]

post a link to your fla by uploading to server (eg, dropbox).

[Peter25066516vwuz]

DKglad

I have fixed most things with animation, however two things have sumped I have tried various work arounds but nothing sdeems to work. Animation shows different on my laptop compared to my main computer see below.

Main Computer correct

Lap top computer incorect placement of  red dots and lines

Have also not worked out how to make plane follow line with a create js tween.

Thanks your help 

Link to FLA here

[Peter25066516vwuz]

Dear Kglad

Drop box did not work at first with fla here is link to zip file

Brg Peter

[kglad]

your dropbox link worked for me.  is anything different in your zip link?

if not, i opened your fla and saw a plane drag problem that i fixed:

https://www.kglad.com/Files/forums/line/vor_movie.html

what's the next thing that should be fixed?

[Peter2659561313g1]

Thanks Kglad

The main thing at moment is a problem with I think the localTo Global call as it shows different on different monitors, I have searched online but cant find anywhere why it happens see pics above.Sorry how do I see what changes you made to the createjs file as the file in the browser is a straight javascript file and the referencing is hard to understand for me.

Best Regards

Peter

[kglad]

use stage.scaleX, stage.scaleY to adjust everything.

eg, instead of

whatever.x = something;

use

whatever.x = something/stage.scaleX;

[Peter2659561313g1]

Thank you Kglad

I am not sure where I put that code, tried it in the local to global statement but it just sent the dot1 to the top left hand corner . I also did some research online and could not find what this isupposed to do, I a confused sorry.

Best Regards

Peter

[kglad]

copy and paste a code snippet or relink an updated fla

[Peter25066516vwuz]

Dear Kglad

Thank you for your help.

Here is the code the result is the line starts at top lh corner and only one dot is in the correct position .

Best Regards

Peter

Result with stage code included

Normal way it shows

var root = this

var line1;

var line2

//let myset = new Set();

var dot1;

var dot2;

var dot3;

var shape;

var container = new createjs.Container();

var s;

var w;

var z;

var zx;

var zy;

var By;

var x2;

//let myArray = ["line","dot","shape"]

function redraw() {

createjs.Ticker.addEventListener("tick", tick);

//createjs.MotionGuidePlugin.install();

root.yellowmc.dot1.x = x2/stage.scaleX

//var p = root.yellowmc.dot1.localToGlobal(0, 0); //dot and other end of the line

var q = root.greenmc.dot1.localToGlobal(0, 0); // dot at other end of the line

var z = root.yellowmc.myplane.myplane2. localToGlobal(0,0)

x2 =  p.x

var y2 = p.y

var x4 = q.x

var y4 = q.y

var Ax = root.yellowmc.x //yellow line on the stage

var Ay = root.yellowmc.y //green line on the stage

var Bx = p.x

By = p.y

var Cx = root.greenmc.x

var Cy = root.greenmc.y

var Dx = q.x

var Dy = q.y

var top = (Dx - Cx) * (Ay - Cy) - (Dy - Cy) * (Ax - Cx)

var bottom = (Dy - Cy) * (Bx - Ax) - (Dx - Cx) * (By - Ay)

//console.log(top + ("Top"))

var t = top / bottom

//console.log(t, "T")

w = Ax + (Bx - Ax) * t

//console.log(w +"myw")

s = Ay + (By - Ay) * t

//console.log (s + ("mys"))

//console.log(s)

function newdot1(A, B) {

dot1 = new createjs.Shape();

stage.addChild(dot1);

dot1.graphics.beginFill("blue").drawCircle(A, B, 20);

//myset.add("dot")

//myArray

//dot1.alpha =1

}

function newdot2(A, B) {

dot2 = new createjs.Shape();

stage.addChild(dot2);

dot2.graphics.beginFill("gren").drawCircle(A, B, 20);

//myset.add("dot")

//myArray

}

function newdot3(A, B) {

dot3 = new createjs.Shape();

stage.addChild(dot3);

dot3.graphics.beginFill("red").drawCircle(A, B, 20);

//myset.add("dot")

//myArray

}

newdot1(w, s)

newdot2(Ax, Ay)

newdot3(Bx, By)

var text = new createjs.Text("A", "20px Arial", "black");

text.x = Bx

text.y = By

root.addChild(text);

function createline1(a, b, c, d) {

line1 = new createjs.Shape();

stage.addChild(line1);

line1.graphics.setStrokeStyle(1).beginStroke("#000000");

line1.graphics.moveTo(a, b);

line1.graphics.lineTo(c, d);

line1.graphics.endStroke();

stage.update();

}

function createline2(a, b, c, d) {

line2 = new createjs.Shape();

stage.addChild(line1);

line1.graphics.setStrokeStyle(1).beginStroke("#000000");

line1.graphics.moveTo(a, b);

line1.graphics.lineTo(c, d);

line1.graphics.endStroke();

stage.update();

//console.log(s + "barleft", w)

}

createline1(Ax, Ay, Bx, By)

createline2(Cx, Cy, Dx, Dy)

//s/*hape = new createjs.Shape();

//shape.graphics.beginFill("#ff00ff").drawCircle(Ax,Ay,50);

// stage.addChild(shape);*/

////myset.add("shape")

// //window.shape = shape1

////createjs.Tween.get(shape).to({guide:{ path:[0,0,w,s,Bx,By] }},7000);

////Cant get tween to work

function tick(event) {

stage.update();

}

//console.log (myArray)

var bar = dot1.x - 30

c = dot1.localToGlobal(0,0)

console.log(x2)

//console.log(root.yellowmc.myplane.myplane2.x+("planestate"))

}

function test() {

c = dot1.localToGlobal(0,0)

z = root.yellowmc.myplane.myplane2.localToGlobal(0, 0);

zx = z.x

zy = z.y

//console.log(zx+("planex"))

     console.log(zy+("planey"))

console.log (s +("mys"))

console.log(By+(" myby"))

//console.log (w +("myw"))

if (zy<= s){

if(zy>=s){

console .log ("cross")

root.yellowmc.myplane.stop()

}

}

}

function startmc (){

root.ind1.gotoAndPlay(1)

//console.log("is playing")

//console.log(z.x+"mp")

}

//nsole.log(w)

//redraw()

this.downbtn.addEventListener("click", planedown.bind(this));

this.updatebtn.on("mousedown", planestart)

function planedown() {

root.yellowmc.gotoAndStop(0)

root.yellowmc.y += 10

//redraw()

stage.removeChild(dot1)

stage.removeChild(dot2)

stage.removeChild(dot3)

stage.removeChild(line1)

stage.removeChild(line2)

stage.update();

}

function planestart() {

//root.yellowmc.myplane.play()

redraw()

}

root.yellowmc.on("pressmove", moveplane)

this.start_btn.addEventListener("mousedown",begin.bind(this))

this.stop_btn.addEventListener("mousedown",mystop.bind(this))

function begin(){

root.yellowmc.myplane.play()

myInterval = setInterval(test, 200)

}

function mystop(){

root.yellowmc.myplane.stop()

clearInterval(myInterval)

}

function moveplane(e) {

stage.removeChild(dot1)

stage.removeChild(dot2)

stage.removeChild(dot3)

stage.removeChild(line1)

stage.removeChild(line2)

e.currentTarget.x = e.stageX;

e.currentTarget.y = e.stageY;

root.yellowmc.gotoAndStop(0)

}

function calculate(){

}

/*

this.yellowmc.on("pressup",stopplane)

function stopplane(){

redraw ()

}*/

[kglad]

link the fla.

[Peter25066516vwuz]

Dear Kglad 

Thanks for your time here is the link to Vor5a

Best Regards

Peter

[kglad]

i downloaded your updated fla.  i tested it.

the first problem i saw was the same problem that i corrected previously. you failed to account for stage scaling when clicking and dragging the plane (yellowmc).  so, i went back to your fla and started to look for yellowmc pressmove listener and listener function and noticed:

the first problem:  you have nested anonymous functions:

a();

b();  // <- will generate a b() not defined error

function a(){

    function b(){

    }

}

so i unnested everything formatted your code so it's legible (this is important when encountering a problem).  i've done so much coding and i'm prone to make so many errors, i've become pedantic about proper formatting and convenient line spacing etc.  it's so much easier to debug code that's legible.

here's your fla simply with the unnesting and legibility changes. (and the stage scaling for yellowmc)

https://www.kglad.com/Files/forums/move5A_v001.fla

is it easier for you to read your code in that fla?

and what is the next thing that needs to be fixed?

[Peter25066516vwuz]

Thank you for help Kglad

Unfoutunatley when I click on you link I get this erro and cant see the files

Error 404 - Not Found

The document you are looking for may have been removed or re-named. Please contact the web site owner for further assistance

Best Regards

peter

[kglad]

try it now

[Peter25066516vwuz]

Works now thanks, appreciate your help will look and learn from your suggestions and recomendations 

Best Regards

Peter

[kglad]

keep this updated.

[Peter25066516vwuz]

Dear Kglad 

Sorry, but I still have same problem when I hit reset button  the red dot  sits at to left corner and no crossover point is shown, when the "//var p = root.yellowmc.dot1.localToGlobal(0, 0); //dot and other end of the line"  is uncommented and the "root.yellowmc.dot1.x = x2/stage.scaleX" is commented out the animation is working properly however the position of all the dots shows different on other screens.

The animation concept is to pressmove move plane then hit reset  buttons

the three dots then  show the blue dot being the center of the intersection. The I click the start button allowing the plane to  move along the track ,the other button stops  the plane.

I agree with the formatting mine was a bit erractic .

Best Regards

Peter

[kglad]

where's the red dot supposed to be?