Drawing a dynamic curve between two points in javascript

[TheOriginalGC]

I have an animation of a dog walker and I want to have a dynamic curved line as the leash. So no matter how far the dog moves from the walker, the curved leash is being drawn and updated between them. 

In AS3, I did it like this:

leash.graphics.clear();

//define curve
leashcurve = 214 + Math.abs(200 - Math.abs(dog.x - walker.x));
leash.graphics.lineStyle(3, 0xAF2525);

//set start point
leash.graphics.moveTo(leashhandx,leashhandy);

//draw curve
leash.graphics.curveTo(leashhandx,leashcurve,leashdogx,leashdogy)

Can I do something similar in javascript? I'm having trouble figuring out the syntax.

[JoãoCésar]

Hi.

It won't be much different. CreateJS' display objects also have this graphics property in which you can call drawing methods that in general are similar to the AS3 API.

https://createjs.com/docs/easeljs/classes/Graphics.html

Regards,

JC

[TheOriginalGC]

I seem to be missing something. Using this code from the easeljs page should draw a circle on the screen, but I get nothing. What is missing?

var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke("#000000");
g.beginFill("red");
g.drawCircle(0,0,30);

[JoãoCésar]

You need to attach this Graphics object to a Shape or other display object.

For example:

var shape = new createjs.Shape(g);

// or assuming that you already have a instance created
otherShape.graphics = g;

And also make sure the shape or other display object is added to the display list.

[TheOriginalGC]

Yes! That was the part I was missing. Now I just need to figure out why the global variable is getting lost between frames.

[TheOriginalGC]

So drawing a curve seems to be working well. As I mentioned before, I'm having trouble when posting the user's score. I've set the score as a global variable and it updates perfectly. When the game ends, it goes to the frame with the game end screen and displays the final score and asks if the player wants to play again. Up to this point, everything works fine.

When the player starts over, the proper score is displayed BUT when the game ends, now the final score is 0. Any ideas why the program is behaving this way?

[JoãoCésar]

Hi.

Is the score stored as a variable (eg.: var score = 0) or as a property (this.score = 0)?

You need to have it as property for persistence between frames and also you have to make sure it won't be overwritten when you revisit the frame where it's created.

[TheOriginalGC]

I think I understand. Currently the global variable is set at var score=0; and on the specific frame I set it at this.score=0; Is that correct?

[JoãoCésar]

For global variables, you need to use:

window.score = 0;

Or just:

score = 0;

Variables are limited to a frame only.

If you use this.score, it becomes a property of the current parent MovieClip and thus it can be accessible in any frame of this same parent container.

The reason for this is that each frame script is published as separated function. So the scope of variables declared inside of them will be the function it belongs to.

[JoãoCésar]

Made a correction above. Hope you had to the time to see it.