Scrolling graphic

Report · Mar 11, 2021

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)

Report · Mar 17, 2021

Mr JoãoCésar's skills have already been of great help to me. Mr JoãoCésar, can you help me?

Report · Mar 17, 2021

Hi.

I'm not sure if this is what you're looking for, but I would like to leave my contribution.

Preview:

Try it:

http://bit.ly/3lzgzSY

JavaScript / JS code:

var root = this;
var width = lib.properties.width;
var height = lib.properties.height;
var totalShapes = 5;
var graphScaleX = 5;
var graphScaleY = 30;
var shapes = [];
var dX; // the offset in the x axis will be the same for all graphs

function main()
{
	var i, shape;
	
	for (i = 0; i < totalShapes; i++)
	{
		shape = new createjs.Shape();
		shape.color = '#' + (Math.random().toString(16) + "000000").substring(2,8);
		shape.startPos = { x: width, y: height * 0.5 };
		shape.minY = 0;
		shape.maxY = height;
		root.addChild(shape);
		shapes[i] = shape;
	}
	
	root.tick = root.on("tick", tickHandler);
};

function tickHandler()
{
	var shape;
	
	dX = (Math.random() * 1) * graphScaleX;
	
	for (i = shapes.length - 1; i >= 0; i--)
	{
		shape = shapes[i];
		plotGraph(shape, pointsX, pointsY);
		moveGraph(shape, width, height);
	}
	
	if (shapes.length === 0)
		root.off("tick", root.tick);
}

function plotGraph(shape, funcX, funcY)
{
	shape.graphics.beginStroke(shape.color);
	shape.graphics.moveTo(shape.startPos.x, shape.startPos.y);
	shape.startPos.x = funcX(shape);
	shape.startPos.y = funcY(shape);
	shape.graphics.lineTo(shape.startPos.x, shape.startPos.y);
	shape.graphics.endStroke();
}

// your function to handle the logic on the x axis
function pointsX(shape)
{
	return shape.startPos.x - dX;
}

// your function to handle the logic on the y axis
function pointsY(shape)
{
	return clamp(shape.startPos.y - (-1 + Math.random() * 2) * graphScaleY, shape.minY, shape.maxY);
}

function moveGraph(shape, rangeX, rangeY)
{
	if (shape.startPos.x >= -rangeX * 0.5 && shape.startPos.x <= rangeX * 0.5)
		shape.x += dX;
	
	if (shape.startPos.x < -rangeX)
	{
		shape.cache(-rangeX, 0, rangeX, rangeY, Math.max(shape.scaleX * stage.scaleX, shape.scaleY * stage.scaleY));
		shape.graphics.clear();
		shapes.splice(shapes.indexOf(shape), 1);
	}
}

function clamp(value, min, max)
{
	if (value < min)
		return min;
	
	if (value > max)
		return max;
	
	return value;
}

main();

Source / FLA / files / download:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/scrolling_graph

I hope it helps.

Regards,

JC

Report · Mar 18, 2021

A big one to you. I am a beginner and I will try to adapt it to get it right in the first instance:

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

And this in a second time :

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

But I have doubts about my ability to do this !!!

Report · Mar 19, 2021

Hello M , I can't seem to adapt your code to get scrolling_test:

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

This is beyond my capabilities and I am sorry.

Report · Mar 19, 2021

Hi again.

Don't worry. We will help you.

Do you want to plot the graph based on the x position of a Movie Clip instance?

Report · Mar 19, 2021

In fact I want to plot the graph according to the y-coordinates of a point (myPoint) which varies according to a tween :

var myPoint = {x:300, y:200};
createjs.Tween.get(myPoint, {loop: -1})
.to({x: myPoint.x, y: myPoint.y + 100},1200 )
.to({x: myPoint.x, y: myPoint.y},1500 )

In addition, it is the graph that must advance as it is created, as you did in the middle of your previous code and as proposed below when clicking on "RESULTAT:

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

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

Report · Mar 19, 2021

Hi.

So here is another sample.

The big catch is to add a change event listener to a tween instance.

Please notice it that I'm getting the points dynamically from the Movie Clip instances but you can write the points manually as well.

Preview:

Try it:

http://bit.ly/3cMTKas

JS code:

var root = this;
var targets = [ root.graph0, root.graph1, root.graph2, root.graph3 ];

function main()
{
	anim();
	
	root.restart.on("click", function()
	{
		clear();	
		anim();
	});
};

function anim()
{
	var target;
	
	for (target of targets)
	{
		var point;
		
		target.points = target.dots.children.map(function(dot){ return { x: dot.x, y: dot.y }; });
		target.tween = createjs.Tween.get(target.points[0]);
		
		for (point of target.points)
			target.tween.to(point, 500);
		
		target.shape = new createjs.Shape();
		target.shape.color = '#' + (Math.random().toString(16) + "000000").substring(2,8);
		target.shape.pos = { x: target.points[0].x, y: target.points[0].y };
		target.shape.lastX = target.shape.pos.x;
		target.shapeContainer.addChild(target.shape);
		target.tween.on("change", changeHandler, null, false, { target: target, width: target.nominalBounds.width });
	}
}

function changeHandler(e, data)
{
	plotGraph(data.target.shape, e.target.target.x, e.target.target.y);
	moveGraph(data.target, data.width);
};

function plotGraph(shape, x, y)
{
	shape.graphics.beginStroke(shape.color);
	shape.graphics.moveTo(shape.pos.x, shape.pos.y);
	shape.pos.x = x;
	shape.pos.y = y;
	shape.graphics.lineTo(shape.pos.x, shape.pos.y);
	shape.graphics.endStroke();
}

function moveGraph(target, rangeX)
{		
	if (target.shape.pos.x >= target.points[target.points.length - 1].x + rangeX * 0.5 && target.shape.pos.x <= rangeX * 0.5)
	{
		target.shape.x += target.shape.lastX - target.shape.pos.x;
		target.dots.x = target.shape.x;
	}
	
	target.shape.lastX = target.shape.pos.x;
}

function clear()
{
	var target;
	
	for (target of targets)
	{
		target.tween.removeAllEventListeners();
		createjs.Tween.removeTweens(target);
		target.shapeContainer.removeChildAt(0);
		target.dots.x = 0;
	}
}

main();

Source / FLA / files / download:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/scrolling_graphs

I hope it helps.

Regards,

JC

Report · Mar 26, 2021

Thank you very much, Mr JoãoCésar. I have tried to adapt your first code and I get what I want but what I have done does not seem to be very effective. It works but can it be improved ?

var root = this;
var totalShapes = 1;
var shapes = [];
var dX; 

var startPtA = {x:300, y:200};
var startPtB = {x:300, y:100};
function main()
{
	var i, shape;
	
	for (i = 0; i < totalShapes; i++)
	{
		shape = new createjs.Shape();
		shape.color = 'red';
		shape.startPosA = { x: 300, y: 200 };
		shape.startPosB = { x: 300, y: 100 };
		root.addChild(shape);
		shapes[i] = shape;
	}
};

var g22 = tick22.bind(this);
	
	createjs.Ticker.addEventListener("tick", g22);	
	function tick22()
	{
	var shape;
	dX = 2.3
		
	for (i = shapes.length - 1; i >= 0; i--)
	{
		shape = shapes[i];
		plotGraph(shape, pointsX, pointsY);	
		plotGraphB(shape, pointsXB, pointsYB);
	}
}
function plotGraph(shape, funcX, funcY)
{
	
	shape.graphics.beginStroke(shape.color);
	shape.graphics.moveTo(shape.startPosA.x, shape.startPosA.y);
	shape.startPosA.x = funcX(shape);
	shape.startPosA.y = funcY(shape);
	shape.graphics.lineTo(shape.startPosA.x, shape.startPosA.y);
	shape.graphics.endStroke();
}
function plotGraphB(shape, funcXB, funcYB)
{
	shape.graphics.beginStroke(shape.color);
	shape.graphics.moveTo(shape.startPosB.x, shape.startPosB.y);
	shape.startPosB.x = funcXB(shape);
	shape.startPosB.y = funcYB(shape);
	shape.graphics.lineTo(shape.startPosB.x, shape.startPosB.y);
	shape.graphics.endStroke();
}	
function pointsX(shape)
{
	return shape.startPosA.x+ dX;
}


function pointsXB(shape)
{
	return shape.startPosB.x+ dX;
}
function pointsY(shape)
{
createjs.Tween.get(startPtA, {loop: -1})
		
.to({x:startPtA.x, y: startPtA.y + 20},1200,createjs.Ease.sineInOut )
.to({x:startPtA.x, y: startPtA.y -20},1200,createjs.Ease.sineInOut )
.to({x:startPtA.x, y: startPtA.y + 20},1200,createjs.Ease.sineInOut )
.to({x:startPtA.x, y: startPtA.y - 20},1200,createjs.Ease.sineInOut )
	
shape.startPosA.y = startPtA.y;
shape.x -= dX;
return clamp(shape.startPosA.y);
}

function pointsYB(shape)
{
createjs.Tween.get(startPtB, {loop: -1})
		
.to({x:startPtB.x, y: startPtB.y + 20},1200,createjs.Ease.sineInOut )
.to({x:startPtB.x, y: startPtB.y},1200,createjs.Ease.sineInOut )
.to({x:startPtB.x, y: startPtB.y + 30},1100,createjs.Ease.sineInOut )
.to({x:startPtB.x, y: startPtB.y},1000,createjs.Ease.sineInOut )
	
shape.startPosB.y = startPtB.y;
return clamp(shape.startPosB.y);

}

function clamp(value, min, max)
{
	if (value < min)
		return min;
	
	if (value > max)
		return max;
	
	return value;
}

main();

Adobe Community

Scrolling graphic