Inspiring

Question

Scrolling graphic

Forum|Forum|4 years ago
March 11, 2021
3 replies
2431 views

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)

This topic has been closed for replies.

JoãoCésar17023019

Community Expert

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

M

mp63178988Author

Inspiring

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();

JoãoCésar17023019

Community Expert

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

M

mp63178988Author

Inspiring

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 !!!

M

mp63178988Author

Inspiring

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.

kglad

Community Expert

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

M

mp63178988Author

Inspiring

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.

kglad

Community Expert

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?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded