Moving objects by scripts - mkraska/meclib GitHub Wiki

An enhanced version of Meclib has been created where most objects are movable by JS. They can be dragged around with the mouse or animated using scripts. Here is a jsfiddle example

Demo of movable objects

Scripting of interactivity and animations

The general procedure is as follows

  • Create Meclib objects 
    [
  [ "grid", "", "", 0, 6, 0, 5, 40],
  [ "fix12", "A", [1, 1], 0],
  [ "fix12", "B", [5, 1], 0],
  [ "bar", "", [1,1], [3,3]],
  [ "bar", "", [5,1], [3,3]],
  [ "force", "F", [3,3], [3,4 ]]
]
  • Create shortcuts for objects you want to control 
    var B = objects[2]; 
var A = objects[1];
var AC = objects[3];
var CB = objects[4];
var F = objects[5];
  • Create interactive control points. Here we copy the positions from the meclib objects, XY() is an internal meclib function 
    var pA = board.create("point", XY(A.p1), {fixed:false});
var pB = board.create("point", XY(B.p1), {fixed:false});
var pC = board.create("point", XY(AC.p2), {fixed:false});
var pF = board.create("point", XY(F.p2), {fixed:false});
  • Create callbacks for the control points 
    pA.on('drag', function(e) { A.p1.moveTo(XY(pA)); AC.p1.moveTo(XY(pA)); });
pB.on('drag', function(e) { B.p1.moveTo(XY(pB)); CB.p1.moveTo(XY(pB)); });
pC.on('drag', function(e) { AC.p2.moveTo(XY(pC)); CB.p2.moveTo(XY(pC)); F.p1.moveTo(XY(pC));});
pF.on('drag', function(e) { F.p2.moveTo(XY(pF)); });

Button-started animation

Create a button and issue moveTo() commands with duration. Make a sequence of moves by delaying the start of sets of moves using setTimeout().

var c1 = objects[1], c2 = objects[2], c3 = objects[3];
var p1 = objects[5], p2 = objects[6], p3 = objects[7];

var b1 = board.create('button', [0, -1, 'Start', function() {
  // initial position
  c1.c.center.moveTo([0,0]);
  p1.p1.moveTo([0,0],0);
  c2.c.center.moveTo([2,0]); 
  p2.p1.moveTo([2,0],0);
  c3.c.center.moveTo([3,0]); 
  p3.p1.moveTo([3,0],0);
  // mass 1
  c1.c.center.moveTo([1.2,0],1200);
  p1.p1.moveTo([1.2,0],1200);
  // mass 2
  setTimeout(function() {
    c2.c.center.moveTo([2.2,0],200);
    p2.p1.moveTo([2.2,0],200);
  }, 1200);
  // mass 3
  setTimeout(function() {
    c3.c.center.moveTo([4.5,0],1500);
    p3.p1.moveTo([4.5,0],1500);
  }, 1400);

Not all objects are meant to be animated, as it depends on the purpose of their functionalities.

(Link to interactive test)

Work in progress:

  • beam (p1, p2, ...) (requires feedback from JSXGraph team)

Completed work in progress: (https://jsfiddle.net/aaronamran/9usko38c/59/)

  • dashpot (p1,p2)
  • dir (p1,p2)
  • dim (p1,p2)
  • disp (p1,p2)
  • fixXX (refactoring)
  • line (x, y vectors)
    • solution on how to redefine x- and y- vectors at end of the script:
    var L = objects[2]  // refers to line object in HTML
    L.p.dataX = [ insert new x-vectors here ];  // this.p is the curve object used to create line
    L.p.dataY = [ insert new y-vectors here ];
    board.update();  // MUST HAVE otherwise line object will not change
  • polygon (pX, pArr[X])
  • rope (p1,p2) center points
  • springc (p1, p2)
  • springt (p1, p2)

Objects with generic control

  • bar (p1, p2)
  • circle (pc)
  • force (p1, p2)
  • label (p1)
  • mass (p1)
  • moment (p1, p2, p3)
  • node (p1)
  • point (p1)
  • rot (p1, p2, p3)

Interactivity legend:

  • "Switch": object can be activated or deactivated by double-click.
  • "Move": object or it's control points can be dragged around with the mouse.
  • "Delete": object can be deleted by double-click (if active)
  • "Generate": object can generate "force" or "moment" objects by dragging sample objects with the mouse.

Return value: only relevant for interactive input

The input for the images in the table are found here

Object Interactivity Return value in names Example moveTo( ) points
"angle", "angle1", "angle2" label string image p1 (center), p2, p3
"axes"
"bar" Switch "show" or list of load indices if hidden image p1, p2
"beam" Switch state image p1, p2, ...
"circle" Switch state image p1 (circle midpoint)
"circle2p" Move [x1,y1],[x2,y2] image
"crosshair" Move [x,y] (scaled) image
"dashpot" Switch "show" or list of load indices if hidden image p1, p2
"dim" label string image p1, p2
"dir" label string image p1, p2
"disp" label string image p1, p2
"fix1", "fix12", "fix123", "fix13" Switch "show" or list of load indices if hidden image p1
"force" Move, delete expression image p1, p2
"forceGen" Generate 0 image
"frame" 0
"grid" 0 image
"label" 0 image p1
"line" 0 image p.dataX, p.dataY
"line2p" Move [x1,y1],[x2,y2] image
"mass" 0 image p1
"moment" Move, delete expression image
"momentGen" Generate 0 image
"node" label string image p1
"point" label string image p1
"polygon" Switch state image pX
"q" Switch "show" or list of load indices if hidden image
"rope" Switch "show" or list of load indices if hidden image p1, p2 (center points)
"rot" label string image p1, p2, p3
"spline" Move expression f(x) image
"springc" Switch "show" or list of load indices if hidden image p1, p2
"springt" Switch "show" or list of load indices if hidden image p1, p2
"wall" Switch "show" or list of load indices if hidden image