isocuStack

by Javier Puértolas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.8.0/jsxgraphcore.js"></script>
<div id="divid" class="jxgbox" style="width:300px; height:300px">



</div>

JavaScript

brd = JXG.JSXGraph.initBoard('divid', {boundingbox: [-15, 20, 15, -10],showCopyright: false,  keepaspectratio:false, axis: true});

p1 = brd.create('point',[-12,-5],{name:'Move on curve and star'});

a1 = brd.create('point',[-10,5]);
a2 = brd.create('point',[-5,15]);
c1 = brd.create('point',[-10,10]);
c2 = brd.create('point',[-4,8]);
curve = brd.create('curve',JXG.Math.Numerics.bezier([a1,c1,c2,a2]));
line1 = brd.create('line',[[0,5],[5,15]],{straightFirst:false,straightLast:false});
line1 = brd.create('line',[[5,15],[10,5]],{straightFirst:false,straightLast:false});
line1 = brd.create('line',[[10,5],[0,12]],{straightFirst:false,straightLast:false});
line1 = brd.create('line',[[0,12],[10,12]],{straightFirst:false,straightLast:false});
line1 = brd.create('line',[[10,12],[0,5]],{straightFirst:false,straightLast:false});

// How to move p1 on curve and on star path
// we are given 3 ways to do this animation
// 1. p1.moveAlong()
// 2. p1.moveTo()
// 3. p1.visit()

var i, 
    path1 = [], 
    path2 = [[0,5],[5,15],[10,5],[0,12],[10,12],[0,5]];

// Fill the bezier path. Caution: it contains many points
for (i = 0; i < curve.points.length; i+=10) {
    path1.push(curve.points[i].usrCoords.slice(1));
}

// This is an alternative for the path1-part in nextStep
//p1.moveAlong(path1, 2000); 

nextStep = function() {
    var pos;

    // First walk through path1
    if (path1.length > 0) {
        pos = path1.shift();
        p1.moveTo(pos, 1, {effect:'--', callback: nextStep});

     // If path1 is empty, walk through path2
    } else if (path2.length > 0) {
        pos = path2.shift();
        p1.moveTo(pos, 500, {effect:'<>', callback: nextStep});
    }
};

nextStep();