Animating a line

Rory Creedon's Avatar

Rory Creedon

04 Aug, 2016 04:14 PM

I have a quad line that I want to animate. Specifically the arc represents a flight path, and I want to animate that path, much like you would expect from a flight path, i.e. the curve is revealed as the hypothetical plane 'flies'.

I have tried a number of things in including resampling the line into 100 points and using frame to slice the list of points and passing that list to the line node. That did not work as expected.

Does anyone have any ideas?

  1. Support Staff 1 Posted by john on 05 Aug, 2016 05:33 AM

    john's Avatar

    Hi Rory,

    I figured out how to do this on a previous project.

    The trick is to first Resample (I resample by length for consistent results), convert to a list of points, sort those points, then slice and reconnect. Sorting by x coordinate fixes the random resampling weirdness that occurs with some shapes and works well for west-to-east arcs; reverse the sort to fly the other direction.

    I am attaching a demo network that draws the entire arc in gray, reveals a percentage of that arc in black, and also shows a marker moving along the arc. The Reveal subnetwork reveals a percentage of the arc using the above method. The Trace subnetwork provides the marker position; it uses a similar technique except that it returns a "point on path". You can either combine all three, or use the Reveal or Trace subnetworks independently.

    You control the animation by changing the value of the number node from 0 to 100 - just feed in a frame node to create an MP4. Both subnetworks take a path as input; I used a random quadratic curve.

    Also attaching screenshots of the overall network plus the Reveal subnetwork.

    Hope that helps!

    John

    NOTE: For some reason I am unable to attach the NodeBox network file. I've tried everything I can think of without success. So here, in desperation, is the actual text of the NodeBox file. Please copy paste it into a text editor and save the resulting file with a .ndbx extension. NodeBox should be able to open it. Please reply and tell me if this worked:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <ndbx formatVersion="21" type="file" uuid="5514cbdd-5998-408e-acc8-c492d9d4461f">
        <property name="canvasHeight" value="1000"/>
        <property name="canvasWidth" value="1000"/>
        <property name="canvasX" value="0"/>
        <property name="canvasY" value="0"/>
        <node name="root" prototype="core.network" renderedChild="combine1">
            <node name="colorize1" position="4.00,13.00" prototype="corevector.colorize">
                <port name="fill" type="color" value="#00000000"/>
                <port name="stroke" type="color" value="#bebebeff"/>
                <port name="strokeWidth" type="float" value="3.0"/>
            </node>
            <node name="colorize2" position="10.00,13.00" prototype="corevector.colorize">
                <port name="fill" type="color" value="#df0000ff"/>
            </node>
            <node name="colorize3" position="7.00,13.00" prototype="corevector.colorize">
                <port name="fill" type="color" value="#00000000"/>
                <port name="strokeWidth" type="float" value="3.0"/>
            </node>
            <node name="combine1" position="4.00,15.00" prototype="list.combine"/>
            <node name="ellipse2" position="10.00,12.00" prototype="corevector.ellipse">
                <port name="width" type="float" value="16.0"/>
                <port name="height" type="float" value="16.0"/>
            </node>
            <node name="number1" position="8.00,7.00" prototype="math.number">
                <port name="value" type="float" value="50.0"/>
            </node>
            <node name="quad_curve1" position="4.00,7.00" prototype="corevector.quad_curve">
                <port name="point1" type="point" value="-177.00,42.00"/>
                <port name="point2" type="point" value="236.00,-179.00"/>
                <port name="distance" type="float" value="-124.0"/>
            </node>
            <node name="reveal" position="7.00,11.00" prototype="core.network" renderedChild="connect1">
                <node name="connect1" position="76.00,19.00" prototype="corevector.connect">
                    <port name="closed" type="boolean" value="false"/>
                </node>
                <node position="81.00,10.00" prototype="math.convert_range">
                    <port name="target_end" type="float" value="0.99"/>
                </node>
                <node name="count1" position="77.00,14.00" prototype="list.count"/>
                <node name="multiply1" position="80.00,16.00" prototype="math.multiply"/>
                <node name="point1" position="76.00,11.00" prototype="corevector.point"/>
                <node name="resample2" position="76.00,10.00" prototype="corevector.resample"/>
                <node name="slice1" position="76.00,18.00" prototype="list.slice"/>
                <node name="sort1" position="76.00,12.00" prototype="corevector.sort">
                    <port name="order_by" type="string" value="x"/>
                </node>
                <port childReference="resample2.shape" description="The input shape." label="" name="shape" range="value" type="geometry" widget="none"/>
                <port childReference="convert_range.value" description="" label="" name="offset" range="value" type="float" value="50.0" widget="float"/>
                <conn input="point1.value" output="resample2"/>
                <conn input="sort1.shapes" output="point1"/>
                <conn input="count1.list" output="sort1"/>
                <conn input="slice1.size" output="multiply1"/>
                <conn input="slice1.list" output="sort1"/>
                <conn input="connect1.points" output="slice1"/>
                <conn input="multiply1.value1" output="count1"/>
                <conn input="multiply1.value2" output="convert_range"/>
            </node>
            <node name="trace" position="10.00,11.00" prototype="core.network" renderedChild="point_on_path">
                <node name="connect1" position="53.00,-1.00" prototype="corevector.connect">
                    <port name="closed" type="boolean" value="false"/>
                </node>
                <node position="57.00,-4.00" prototype="math.convert_range">
                    <port name="target_end" type="float" value="99.9"/>
                </node>
                <node name="point1" position="53.00,-3.00" prototype="corevector.point"/>
                <node position="56.00,1.00" prototype="corevector.point_on_path">
                    <port name="t" type="float" value="58.0"/>
                </node>
                <node name="resample2" position="53.00,-4.00" prototype="corevector.resample"/>
                <node name="sort1" position="53.00,-2.00" prototype="corevector.sort">
                    <port name="order_by" type="string" value="x"/>
                </node>
                <port childReference="resample2.shape" description="The input shape." label="" name="shape" range="value" type="geometry" widget="none"/>
                <port childReference="convert_range.value" description="" label="" name="offset" range="value" type="float" value="50.0" widget="float"/>
                <conn input="point1.value" output="resample2"/>
                <conn input="sort1.shapes" output="point1"/>
                <conn input="connect1.points" output="sort1"/>
                <conn input="point_on_path.shape" output="connect1"/>
                <conn input="point_on_path.t" output="convert_range"/>
            </node>
            <conn input="colorize1.shape" output="quad_curve1"/>
            <conn input="combine1.list1" output="colorize1"/>
            <conn input="colorize2.shape" output="ellipse2"/>
            <conn input="combine1.list7" output="colorize2"/>
            <conn input="ellipse2.position" output="trace"/>
            <conn input="trace.shape" output="quad_curve1"/>
            <conn input="trace.offset" output="number1"/>
            <conn input="reveal.shape" output="quad_curve1"/>
            <conn input="reveal.offset" output="number1"/>
            <conn input="colorize3.shape" output="reveal"/>
            <conn input="combine1.list3" output="colorize3"/>
        </node>
    </ndbx>

  2. Support Staff 2 Posted by john on 08 Aug, 2016 03:27 AM

    john's Avatar

    Frederik suggested attaching a zip of the ndbx file. Let's see it that works...

  3. 3 Posted by Rory Creedon on 10 Aug, 2016 02:54 PM

    Rory Creedon's Avatar

    HAHAH, this is totally brilliant!

    I am going to enjoy playing with this, I may revert with some questions as I reverse engineer this. thank yoU!

  4. 4 Posted by andy.treichler on 17 Aug, 2017 03:49 AM

    andy.treichler's Avatar

    Nice feature! I like it :-)

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

25 May, 2024 11:52 AM
24 May, 2024 07:39 AM
16 May, 2024 02:11 AM
16 May, 2024 01:58 AM
14 May, 2024 01:29 AM

 

13 May, 2024 12:36 AM
12 May, 2024 07:46 PM
05 May, 2024 04:38 PM
03 May, 2024 06:50 AM
03 May, 2024 12:30 AM
03 May, 2024 12:09 AM