My goal is to have a line animate from point A to point B using the Tween function.
The drawing library I am using is EaselJS and for Tweening I am using TweenJS.
Is this possible using the moveTo function to animate a straight line from point A to point B?
My current setup is as follows:
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
My goal is to animate this path from x100 y100 to x0 y0.
Animation Example:
I have tried this using the following and nothing happens:
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
createjs.Tween.get(line).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);
Nothing happens.
Draw Example:
However if I use this I get the line as expected but it is not animated:
var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
line.lineTo(0, 0);
This draws a line as expected.
Is there some way to use the lineTo method with the tweening method I am missing? I have checked the documentation of both Easel and TweenJS and can't find an example or any clear instructions on how to do this or if this is not possible.
Any help is appreciated.
The easiest approach is to use a Graphics command. The .command property returns the last created graphics command, which you can then manipulate with a tween:
var cmd = line.graphics.lineTo(100,100).command;
createjs.Tween.get(cmd).to({x:0}, 1000);
Here's a working example: https://jsfiddle.net/gskinner/17Lk8a9s/1/
Demo: http://jsfiddle.net/thpbr1vt/3/
Attention! Performance.
var stage = new createjs.Stage("canvas");
var vpoint = new createjs.Point( 100, 100);
var line = new createjs.Graphics();
line.beginStroke( 'cyan' );
line.moveTo( vpoint.x, vpoint.y );
var s = new createjs.Shape(line);
stage.addChild(s);
createjs.Tween.get(vpoint).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);
createjs.Ticker.addEventListener("tick", tick);
function tick() {
line.lineTo( vpoint.x, vpoint.y );
stage.update();
}
Related
I am quite new with createJS - I want to achieve like a countdown timer animation:
I stumbled upon this issue which have this fiddle - I want to achive something like this but I want to create an arc shape:
I tried adjusting the code and changed the point values but it only gave me a diamond one instead of a perfect curve.
Do I need to point every values to achieve a perfect circle like:
points = [{x: 50, y: 0}, {x: 51, y: 1}, {x:52, y: 2}, ...etc]
Or is there other way (maybe a function or plugin) that does this stuff? I wasn't able to find anything on their documentation
You might be interested in using an arc() graphic, along with the EaselJS "Command" approach to graphics:
1) Create a full arc
var s = new createjs.Shape().set({x:100,y:100});
s.strokeCmd = s.graphics.s("red")
.ss(10,"round")
.arc(0,0,80,0,Math.PI*2)
2) Store off the last "command"
var cmd = s.command; // This will be the arc command
3) Set the command endAngle to 0. You can do this in the arc() method too
cmd.endAngle = 0;
4) In your animation, increment the endAngle over time. In this example I normalize 100 to mean 100% of the radius (Math.PI*2)
var index = 0;
function tick(event) {
index += 1; // Fake Percent
cmd.endAngle = index/100 * Math.PI*2;
stage.update(event);
}
Here is a quick fiddle: https://jsfiddle.net/lannymcnie/pgeut9cr/
If instead you just want to animate the circle over a fixed period, you can tween the endAngle value. Here is an example using TweenJS: https://jsfiddle.net/lannymcnie/pgeut9cr/2/
createjs.Tween.get(cmd)
.to({endAngle:Math.PI*2}, 2000, createjs.Ease.quadInOut);
Cheers,
There are plenty of examples on how to draw lines on canvas, in js.
But for only educational purposes i want to draw line using algorithm. basically method gets two Vector2 points, from them it finds middle point, then it continues like that recursively until minimum distance of 2 pixels is reached.
I have DrawPoint method to basically draw 1 point on canvas, and DrawLine method that does all the job.
For now I have 2 problems:
1: points are not colored red, as they should be.
2:
It doesnt look like a line.
For Vector2 i used "Victor.js" plugin, and it seems to be working well.
this is code i have:
JS:
var point2 = new Victor(100, 100);
var point3 = new Victor(150, 150);
DrawLine(point2, point3);
function DrawLine(vec0, vec1)
{
var point0 = new Victor(vec0.x, vec0.y);
var point1 = new Victor(vec1.x, vec1.y);
var dist = point1.distance(point0);
if (dist < 2)
return;
//this is how it should look like in c# var middlePoint = point0 + (point1 - point0)/2; But looks like i cant just divide by 2 using victor js because i can only divide vector by vector.
var middlePoint = point0.add(point1.subtract(point0).divide(new Victor(2,2)));
DrawPoint(middlePoint);
DrawLine(point0, middlePoint);
DrawLine(middlePoint, point1);
}
function DrawPoint(point){
var c = document.getElementById("screen");
var ctx = c.getContext("2d");
ctx.fillStyle = "FF0000";
ctx.fillRect(point.x, point.y, 3,1);
}
I really appreciate any help you can provide.
The victor.js documentation shows that most functions of Victors do not return new Victors, but operate on the current instance. In a way, v1.add(v2) is semantically more like v1 += v2 and not v1 + v2.
The problem is with calculating the midpoint. You could use the mix() method, which blends two vectors with a weight. You must clone() the Victor first, otherwise point0will be midofied:
var middlePoint = point0.clone().mix(point1, 0.5);
If you don't change the original Vectors, you don't need to create new instances of Victors from the arguments, you can use the arguments directly:
function DrawLine(point0, point1)
{
var dist = point1.distance(point0);
if (dist < 2) return;
var middlePoint = point0.clone().mix(point1, 0.5);
DrawPoint(middlePoint);
DrawLine(point0, middlePoint);
DrawLine(middlePoint, point1);
}
Finally, as Sven the Surfer has already said in a comment, "FF0000" isn't a valid colour. Use "#FF0000", note the hash mark, or one of the named web colours such as "crimson".
I can draw a line in the canvas using:
var myLine = new fabric.Polyline([{x:200,y:200},{x:200,y:200}])
var canvas = new fabric.Canvas('c');
canvas.add(myLine);
However, I want to animate the drawing. I tried:
myLine.animate("points","[{x:200,y:200},{x:10,y:10}]",{onChange: canvas.renderAll.bind(canvas)})
But it's not working, and I couldn't see any way to animate the drawing of the line using fabric.js - I know I can use canvas methods directly but I am curious is fabric.js offers something more concise.
I made a jsFiddle based on http://fabricjs.com/polygon-animation/ and I change it into a fabricjs Polyline. You can set the start and end values from here:
var startPoints = [
{x: 1, y: 1},
{x: 2, y: 2}
];
var endPoints = [
{x: 1, y: 1},
{x: 200, y: 200}
];
No solution suited me so far so here a js-fiddle with what i came up with. Its based on the prev solution by Nistor Christian:
I Made a simple function which accepts the Canvas (in case you want to use this on more than one canvas), color, the original Line-Koordinates (StartXY, EndXY) and the new Line-Koordinates (NewStartX,NewStartY).
function animateLine(canvasInstance,color,
startX,startY,endX,endY,
newStartX, newStartY,newEndX,newEndY)
I want to tween a 3D line using THREE.JS and TweenLite. But the approach that works well with e.g. the position of a sphere does not work out here. I do not know why.
// add a line to the scene using THREE.js
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(500, 500, 500));
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial());
scene.add( line );
// using TweenLite to animate
var tl = new TimelineLite();
var target = { x: 0, y: 0, z:0 };
line.geometry.verticesNeedUpdate = true;
tl.add(TweenLite.to(line.geometry.vertices[1] , 1, target));
tl.play();
Result: Nothing happens. Why?
PS. The reason might be explained in this post, but I do not understand it.
Found the solution myself: Above the vertex is flagged as needing an update, which happens once in the line line.geometry.verticesNeedUpdate = true;. But this flag needs to be set after each change in the vertex. This can be achieved by putting the update line in the onUpdate function. Now, the line will be called after each update of the vertex.
target.onUpdate = function () {
line.geometry.verticesNeedUpdate = true;
};
I'm exploring the Paper.js library. The first code example in the tutorial works fine. But when I move the inline javascript to an external file, as in the second code snippet, it stops displaying anything on the screen. In myScript.js, I tried
paper.install(window);
window.onload = function() {
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
path.lineTo(start + [ 100, -50 ]);
}
And using jQuery
$(document).ready(function(){
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
path.lineTo(start + [ 100, -50 ]);
});
with no success. What did I forget? Thank you for you help
You either need to refer to a paperscript file or jump through the hoops needed to use javascript directly, as documented at
http://paperjs.org/tutorials/getting-started/using-javascript-directly
Here's a fiddle using jquery, paper, coffeescript that may give you a few ideas:
http://jsfiddle.net/tATps/
$('#foo').text(paper);
canvas = $("#myCanvas")[0];
paper.setup(canvas);
path = new paper.Path.Rectangle(10, 10, 20, 10);
path.strokeColor = "black";
paper.view.draw();
path = new paper.Path.Circle(40, 40, 20);
path.strokeColor = "black";
paper.view.draw();
tool = new paper.Tool()
#view = paper.view
size = view.size
#normalCenter = view.size.divide 2
tool.onMouseMove = (event) =>
view.zoom = 2 # yes, I set the zoom every time instead of once. lazy.
p = event.point.clone()
p.x = Math.max p.x, 0
p.y = Math.max p.y, 0
movement = #normalCenter.subtract(view.center )
movement = movement.add p.subtract(#normalCenter).divide(2)
view.scrollBy(movement)
$('#foo').text([p, view.center])
If this is related to https://en.wikipedia.org/wiki/Same-origin_policy you need to load the page from a local HTTP server, or disable that check in your browser. Any of the following are a quick way to setup a local web server.
# Python <3
python -m SimpleHTTPServer
# Python 3
python -m http.server
# NodeJS
npm install http-server -g # install
http-server # run