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)
Copy link to clipboard
Copied
the graphics class has several curve methods, EaselJS v1.0.0 API Documentation : Graphics (createjs.com)
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.
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?
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)
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.
Copy link to clipboard
Copied
i'm not sure what you're asking, if anything.
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.
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);
}
}
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 ?
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).
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.
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)?
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.
Copy link to clipboard
Copied
what's the difference between what you want and scrolling_test?
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.
Copy link to clipboard
Copied
how do you get multiple graphs all based on the circle's x value?
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).
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.
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.
Copy link to clipboard
Copied
yes, that's why i showed how to use one shape to draw 1000 lines.
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 ?
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.
Copy link to clipboard
Copied
And so, would you have the kindness and the time to make an equivalent to scrolling_test ?
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.