Scrolling graphic

Explorer ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

Hello,
I have the following code from an old conversation (Animate HTML5)

var startPoint = {x:500, y:250};
var endPoint = {x:500, y:250};

var shapePt = new createjs.Shape();
this.addChild(shapePt);

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

function tick() {
endPoint.x -= 1.8;
shapePt.graphics.clear().
setStrokeStyle(2).
beginStroke("green").
moveTo(startPoint.x, startPoint.y).
lineTo(endPoint.x, endPoint.y);

I want the line to be a curve that depends on the coordinates of a point in order to draw a scrolling graph. I tried adding :

createjs.Tween.get(startPoint), {loop: -1})
.to({x:500, y: startPoint.y + 100},1200)
.to({x:500, y: startPoint.y})

But I can't get it to work. Could someone please help me ?

Translated with www.DeepL.com/Translator (free version)

Views

607

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

the graphics class has several curve methods, EaselJS v1.0.0 API Documentation : Graphics (createjs.com)

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

Thank you for your answer but I don't want to draw a predefined graph. The coordinates of the different points of the curve will depend on other actions. That's why I want to control the plot of the graph according to the values of a point whose coordinates will change constantly, like for example the graph of an earthquake recording.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

you can determine the points in the curve and draw it or draw the curve and use a mask to make it appear to be drawn in real time.

 

but if you want a piecewise linear graph that's something else.  is that what you want and if so, what determines the various end points?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

I made the animation linked below for some students. It works for 4 curves but it needs a lot of resources from the computer. So this code is not efficient. The next one will have many more curves and the code used blocks the reading.

https://svtanim.pagesperso-orange.fr/regulation_testiculaire.htm

You will find below a piece of code used in the animation mentioned:

 

app = this;
var myVariable = 500;
var myPoint = {x:400, y:myVariable}

createjs.Tween.get(myPoint,{loop: -1})
.to({x:400, y: myVariable}, 1000)
.wait(200)
.to({x:400, y: myVariable}, 50)
.to ({x:400, y: myVariable + 10}, 100)
.to({x:400, y: myVariable - 25}, 350)
.to({x:400, y: myVariable + 25}, 10)
.to ({x:400, y: myVariable - 11}, 80)

var A;
var B;
var C;
var D;

var shape = new createjs.Shape();
shape.graphics.beginStroke("#000000");
shape.graphics.moveTo( 400, myVariable );

createjs.Ticker.addEventListener("tick", tick.bind(this));
function tick()
{
A = myPoint.x;
B = myPoint.y;
C = shape.x;
D = A - C;
shape.x+= -1.51;	
shape.graphics.lineTo( D, B );
app.addChild(shape);
};

var shac=new createjs.Shape();
sha.graphics.beginFill("rgb(244,244,244)").drawRect(400, 10, 200, 200);
app.addChild(sha);
shape.mask = shac;

 

So it is according to different actions that the Y coordinates of myVariable are defined.

Translated with www.DeepL.com/Translator (free version)

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

Sorry, there is an error in a previous code. The end of the code (var shac=new createjs.Shape(); ...) is wrong: there is no mask.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

i'm not sure what you're asking, if anything.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 13, 2021 Mar 13, 2021

Copy link to clipboard

Copied

In the previous code, I move the shape instead of moving the coordinates of the curve. So I add hundreds of instances of shapes which is very inefficient and requires a lot of computer resources. I would like to have a much simpler code because I have a project requiring many curves on the same page, which blocks the reading.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 13, 2021 Mar 13, 2021

Copy link to clipboard

Copied

just use one shape for all your graphics. 

 

and terminate your tick loop (by using removeEventListener) when the drawing is completed.

 

for example,

 

var i,s,startptA,endptA;
var linenum = 1000;
initF.bind(this)();
createjs.Ticker.addEventListener("tick", tick);


function initF(){
s = new createjs.Shape();
this.addChild(s);
with(s.graphics){
setStrokeStyle(2);
beginStroke("#00ff00");
}

startptA = [];
endptA = [];

for(i=0;i<linenum;i++){
startptA.push({x:i,y:0});
endptA.push({x:i,y:0});
}
}


function tick() {
for(i=0;i<linenum;i++){
startptA[i].x = endptA[i].x;
startptA[i].y = endptA[i].y;

endptA[i].x += 2;
endptA[i].y += 4

with(s.graphics){
moveTo(startptA[i].x, startptA[i].y);
lineTo(endptA[i].x, endptA[i].y);
}


}


if (endptA[0].y > 300) {
createjs.Ticker.removeEventListener("tick", tick);

}


}

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 13, 2021 Mar 13, 2021

Copy link to clipboard

Copied

I thank you very much for your answer. Being a beginner and self-taught, I discover many things in your code. It seems to me that you create a succession of points that you scroll to build the curve but I get a succession of lines that are drawn and that represent a full shape. How can I correct this ?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 13, 2021 Mar 13, 2021

Copy link to clipboard

Copied

that code was intended to show you could use one shape to draw many (1000) lines very efficiently, not to do whatever you're trying to do (which i don't understand).

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 14, 2021 Mar 14, 2021

Copy link to clipboard

Copied

Below is an example of what I am trying to do by adapting the code you sent me. The graph scrolls and depends on the Y ordinate of a point which varies according to the abscissa of the mouse.

 

https://svtanim.pagesperso-orange.fr/scrolling_test.htm 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 14, 2021 Mar 14, 2021

Copy link to clipboard

Copied

the example you posted showed a graph that varied with the x coodinate of a circle.

 

you want a graph that varies exactly the same way but depending on the x coordinate of the mouse (instead of a dragged circle)?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 14, 2021 Mar 14, 2021

Copy link to clipboard

Copied

No, not according to the mouse but according to the coordinates of the circle. The X coordinate of the circle (this.circle.x) determines the values of the graph.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 14, 2021 Mar 14, 2021

Copy link to clipboard

Copied

what's the difference between what you want and scrolling_test?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 14, 2021 Mar 14, 2021

Copy link to clipboard

Copied

Scrolling_test works for one or two graphics on the page. On scrolling_test, I move the shape instead of moving the coordinates of the curve. So I add hundreds of instances of shapes which is very inefficient and the playback gets stuck. I would like to have a much simpler code because I have a project that requires many curves on the same page. The code you sent me seems much less greedy.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 14, 2021 Mar 14, 2021

Copy link to clipboard

Copied

how do you get multiple graphs all based on the circle's x value?


Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

Using the circle is an example of how I can control a graph from the coordinates of an occurrence. Otherwise, I can vary X and Y of another curve from the circle by applying a mathematical formula (example: y = 2*x + 45).

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

you're going to have different graphs using different functions of the circle's x value?  eg, y=x, y=2*x+45, y=x*x etc?

 

if so, i can't see you having more than 20 graphs or so without ending up with a incomprehensible mess.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

The circle is just an example. I just want to know if you have a solution to draw a graph that is more efficient than the one I used in scrolling_test? Please.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

yes, that's why i showed how to use one shape to draw 1000 lines.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

1000 lines that finally represent a shape. I want several graphs on different coordinate axes, exactly like the following link where 5 lines are present on 4 axis markers:

https://svtanim.pagesperso-orange.fr/regulation_testiculaire.htm 
Do you have a code to create a graph ?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

no i don't have that from a previous project.  i would need to create that code just like the 1000 line code was created.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 17, 2021 Mar 17, 2021

Copy link to clipboard

Copied

And so, would you have the kindness and the time to make an equivalent to scrolling_test ?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 17, 2021 Mar 17, 2021

Copy link to clipboard

Copied

that would be more time-consuming (for me) than i do on the adobe forums for free.

 

perhaps someone else here will do that for you for free or, if you want to hire me, send me a private message.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines