# How to draw a line with animation of drawing? **URL:** \ **Category:** CesiumJS\ **Created:** [May 27, 2015, 4:08pm UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560 "2015-05-27T16:08:18Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![a.haruk](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@a.haruk](https://community.cesium.com/u/a.haruk)\ **Post date:** [May 27, 2015, 4:08pm UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/1 "2015-05-27T16:08:18Z")
Hello! I need to draw a line with two dots. For example: var viewer = new Cesium.Viewer('cesiumContainer'); var startPos = Cesium.Cartesian3.fromDegrees(-75.0, 40.0); var finPos = Cesium.Cartesian3.fromDegrees(-175.0, 40.0); var line = new Cesium.Entity({                     name: 'Redline',                     polyline: {                         positions: [startPos, finPos],                         width: 5,                         material: Cesium.Color.RED, //show : false                     }                 }); viewer.entities.add(line); What should I do to draw that line with realtime animation of drawing? ---
**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\ **Post date:** [May 29, 2015, 6:24pm UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/2 "2015-05-29T18:24:23Z")
If you’re dealing with a smaller set of points something like this would work: [https://gist.github.com/maikuru/841a821bdb347955dca0](https://gist.github.com/maikuru/841a821bdb347955dca0) or [http://codepen.io/maikuru/pen/EjZXYb](http://codepen.io/maikuru/pen/EjZXYb) ---
**Author:** ![a.haruk](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@a.haruk](https://community.cesium.com/u/a.haruk)\ **Post date:** [June 1, 2015, 8:00am UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/3 "2015-06-01T08:00:24Z")
Thank you, Mike. But I can't understand how to implement the animation, which will operate during the pause. ---
**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\ **Post date:** [June 1, 2015, 8:35pm UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/4 "2015-06-01T20:35:33Z")
lets forget code for a second. Can you explain your situation and desired results. Feel free to be as generic as you want/need to, but I need to know: **Properties** : What data you have? (example lat/lon/time) **Scope** : How many entities/objects are going to be plotted at any given time? **Presentation** : Are the paths going to always drawn startingPoint to only currentPoint or a multi-segmented line starting from startingPoint through each position you received? ---
**Author:** ![Berwyn\_McKilligan](https://avatars.discourse-cdn.com/v4/letter/b/977dab/32.png) [@Berwyn\_McKilligan](https://community.cesium.com/u/Berwyn_McKilligan)\ **Post date:** [June 1, 2015, 9:58pm UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/5 "2015-06-01T21:58:29Z")
If you need to implement some basic drawing, have a looks at: [https://github.com/leforthomas/cesium-drawhelper](https://github.com/leforthomas/cesium-drawhelper) I have leverage this with cesium 1.9, it works off of primitives rather than entities, I’ve been using it with some minor changes to deal with callbacks to implement a basic clamp to ground on polylines and polygons. ---
**Author:** ![a.haruk](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@a.haruk](https://community.cesium.com/u/a.haruk)\ **Post date:** [June 3, 2015, 8:30am UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/6 "2015-06-03T08:30:06Z")
Look. I have two points, two pins to be exact. If I click on one pin а line should be drawn to another pin. By default line appears instantly. I need to implement progressive rendering, which is not dependent on the speed of the playing or pause. ---
**Author:** ![Michael\_Lodge-Paoli1](https://avatars.discourse-cdn.com/v4/letter/m/e47774/32.png) [@Michael\_Lodge-Paoli1](https://community.cesium.com/u/Michael_Lodge-Paoli1)\ **Post date:** [June 4, 2015, 9:58pm UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/7 "2015-06-04T21:58:48Z")
There really is only 2 options to accomplish this: 1. SamplePointProperty, which I demonstrated before 2. Write a custom shader, which is a much more advanced task. If you want to go that route I recommend looking at the existing shaders in the Source for examples. ---
**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\ **Post date:** [June 5, 2015, 12:35am UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/8 "2015-06-05T00:35:30Z")
This is straightforward to do. You need to create a dynamic positions property that is dependent on wall time and not the simulation time. Whether the pins are moving themselves or not doesn’t matter because our positions property will keep a reference to them. You can use Cartesian3’s lerp function to perform the interpolation. Here’s a simple complete example that you can copy and paste into Sandcastle. It creates 2 entities and when you press the go button, it creates a 3rd entity that is a line that grows from the start to the end over a user specified time (in milliseconds). Let me know if any part of the below code is unclear. createLineAnimation is the important part. var viewer = new Cesium.Viewer(‘cesiumContainer’, {timeline : false, animation : false}); var pinBuilder = new Cesium.PinBuilder(); var bluePin = viewer.entities.add({ name : ‘Blank blue pin’, position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667), billboard : { image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(), verticalOrigin : Cesium.VerticalOrigin.BOTTOM } }); var questionPin = viewer.entities.add({ name : ‘Question mark’, position : Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071), billboard : { image : pinBuilder.fromText(’?’, Cesium.Color.BLACK, 48).toDataURL(), verticalOrigin : Cesium.VerticalOrigin.BOTTOM } }); viewer.zoomTo(viewer.entities); function createLineAnimation(startEntity, endEntity, duration){ var startTime = performance.now(); return new Cesium.CallbackProperty(function(time, result){ if(!Cesium.defined(result)){ result = ; } var now = performance.now(); var start = startEntity.position.getValue(time, result[0]); var end = endEntity.position.getValue(time, result[1]); var t = Math.min(1.0, (now - startTime) / duration); Cesium.Cartesian3.lerp(start, end, t, end); result[0] = start; result[1] = end; result.length = 2; return result; }, false); } Sandcastle.addToolbarButton(‘Go’, function(){ viewer.entities.add({ polyline: { positions : createLineAnimation(bluePin, questionPin, 2000) } }); }); ---
**Author:** ![a.haruk](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@a.haruk](https://community.cesium.com/u/a.haruk)\ **Post date:** [June 8, 2015, 7:12am UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/9 "2015-06-08T07:12:03Z")
Thank you! This is what I need! ---
**Author:** ![ralabate2](https://avatars.discourse-cdn.com/v4/letter/r/58956e/32.png) [@ralabate2](https://community.cesium.com/u/ralabate2)\ **Post date:** [May 6, 2016, 6:01am UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/10 "2016-05-06T06:01:21Z")
I just tried this out, it looks great. Thanks for the code! One thing I noticed is that the lines seem to "swim" or "wander" if I use regular lerp so I used the following spherical linear interpolation: function Slerp(from,to, t, result) {     var result1 = new Cesium.Cartesian3();     var result2 = new Cesium.Cartesian3();     var result3 = new Cesium.Cartesian3();     var theta = Cesium.Cartesian3.angleBetween(from, to);     Cesium.Cartesian3.multiplyByScalar(from, Math.sin((1-t)\*theta), result1);     Cesium.Cartesian3.multiplyByScalar(to, Math.sin(t\*theta), result2);     Cesium.Cartesian3.add(result1, result2, result3);     Cesium.Cartesian3.divideByScalar(result3, Math.sin(theta), result);     return result; } ---
**Author:** ![abdullah.shaiknaina](https://avatars.discourse-cdn.com/v4/letter/a/a9adbd/32.png) [@abdullah.shaiknaina](https://community.cesium.com/u/abdullah.shaiknaina)\ **Post date:** [August 1, 2017, 1:15am UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/11 "2017-08-01T01:15:07Z")
Hi Everyone, I designed a arrow using velocity orientation property and it travels from point to point. i want to improve the app by making the arrow go lower from point to point. is there any way to do that??? my code is found below… var target = viewer.entities.add({ name: (sourceCountry + " - " + destCountry), position: positions, orientation: new Cesium.VelocityOrientationProperty(positions), path: { resolution: 1, /\*material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.1, color: Cesium.Color.YELLOW }),\*/ //material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED), // by tschia attackArrowColour material: attackArrowColour(devicetype,alert), width: 20, //trailTime: 1_24_60\*60, trailTime: duration, // original is duration leadTime: 0 }, ---
**Author:** ![abdullah.shaiknaina](https://avatars.discourse-cdn.com/v4/letter/a/a9adbd/32.png) [@abdullah.shaiknaina](https://community.cesium.com/u/abdullah.shaiknaina)\ **Post date:** [August 1, 2017, 1:16am UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/12 "2017-08-01T01:16:37Z")
> Hi Everyone, > I designed a arrow using velocity orientation property and it travels from point to point. i want to improve the app by making the arrow go lower from point to point. is there any way to do that??? > my code is found below… > var target = viewer.entities.add({ > name: (sourceCountry + " - " + destCountry), > position: positions, > orientation: new Cesium.VelocityOrientationProperty(positions), > path: { > resolution: 1, > /\*material: new Cesium.PolylineGlowMaterialProperty({ > glowPower: 0.1, > color: Cesium.Color.YELLOW > }),\*/ > //material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED), // by tschia attackArrowColour > material: attackArrowColour(devicetype,alert), > width: 20, > //trailTime: 1_24_60\*60, > trailTime: duration, // original is duration > leadTime: 0 > }, > * * * > I have attached the image to this discussion to show what i want… i would rather want the red than the yellow… > Cheers, > Abdul > > I just tried this out, it looks great. Thanks for the code! One thing I noticed is that the lines seem to “swim” or “wander” if I use regular lerp so I used the following spherical linear interpolation: > > function Slerp(from,to, t, result) { > > var result1 = new Cesium.Cartesian3(); > > var result2 = new Cesium.Cartesian3(); > > var result3 = new Cesium.Cartesian3(); > > var theta = Cesium.Cartesian3.angleBetween(from, to); > > Cesium.Cartesian3.multiplyByScalar(from, Math.sin((1-t)_theta), result1); > > Cesium.Cartesian3.multiplyByScalar(to, Math.sin(t_theta), result2); > > Cesium.Cartesian3.add(result1, result2, result3); > > Cesium.Cartesian3.divideByScalar(result3, Math.sin(theta), result); > > return result; > > } > > > Hello! > > > I need to draw a line with two dots. > > > > > > For example: > > > var viewer = new Cesium.Viewer(‘cesiumContainer’); > > > > > > var startPos = Cesium.Cartesian3.fromDegrees(-75.0, 40.0); > > > var finPos = Cesium.Cartesian3.fromDegrees(-175.0, 40.0); > > > > > > var line = new Cesium.Entity({ > > > name: ‘Redline’, > > > polyline: { > > > positions: [startPos, finPos], > > > width: 5, > > > material: Cesium.Color.RED, //show : false > > > } > > > > > > ``` > > > }); > > > > > > ``` > > > > > > viewer.entities.add(line); > > > > > > What should I do to draw that line with realtime animation of drawing? ![arrow.png](https://global.discourse-cdn.com/cesium/original/2X/4/4840be34922693888cd64c7873ec05f5db46e389.png) ---
**Author:** ![Rachel\_Hwang](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@Rachel\_Hwang](https://community.cesium.com/u/Rachel_Hwang)\ **Post date:** [August 8, 2017, 4:28pm UTC](https://community.cesium.com/t/how-to-draw-a-line-with-animation-of-drawing/2560/13 "2017-08-08T16:28:45Z")
Hi there, Check out this code example: [http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Callback%20Property.html&label=Beginner](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Callback%20Property.html&label=Beginner) Hope that helps, - Rachel