• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

904

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
Community Expert ,
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)

Votes

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.

Votes

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
Community Expert ,
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?

Votes

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)

Votes

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.

Votes

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
Community Expert ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

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

Votes

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.

Votes

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
Community Expert ,
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);

}


}

Votes

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 ?

Votes

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
Community Expert ,
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).

Votes

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 

Votes

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
Community Expert ,
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)?

Votes

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.

Votes

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
Community Expert ,
Mar 14, 2021 Mar 14, 2021

Copy link to clipboard

Copied

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

Votes

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.

Votes

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
Community Expert ,
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?


Votes

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).

Votes

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
Community Expert ,
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.

Votes

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.

Votes

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
Community Expert ,
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.

Votes

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 ?

Votes

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
Community Expert ,
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.

Votes

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 ?

Votes

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
Community Expert ,
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.

Votes

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