Skip to content

Moving objects by scripts

Aaron Amran edited this page Aug 4, 2023 · 63 revisions

The objective is to add scripts to Meclib widgets, which allow the control of the sketch by interactively dragging control points. Here is a jsfiddle example

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)); });
    

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

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

Restrictions:

  • "beam": works only for single part beams. Multipart beams would be controlled by a list of points p[0], p[1], ...

Work in progress:

  • dashpot (p1,p2) (done)
  • dim (p1,p2)
  • dir (p1,p2) (done)
  • disp (p1,p2) (done)
  • fixXX (refactoring) (done)
  • line (x, y vectors)?
  • polygon (p.vertex[i])?
  • 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)

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
"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
"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 Bildschirmfoto 2023-06-27 um 16 26 09
"grid" 0 image
"label" 0 image p1
"line" 0 image
"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 p1 (polygon midpoint)
"q" Switch "show" or list of load indices if hidden image
"rope" Switch "show" or list of load indices if hidden image
"rot" label string image
"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

Tryout Space

In order to try code snippets in jsfiddle,

  1. copy the code from the wiki page to the clipboard
  2. follow the link for the JSXGraph version you want to try
  3. Replace the code in the HTML section (contents of <p hidden id="init">) with the content of the clipboard
Clone this wiki locally