Drag after snap rotates/stretches a group

[Tomasz Dindorf]

Hi!

My aim is to move (but not rotate or stretch) two vectors (vA and vB), to later find e.g. the sum or difference.  

To make it easier for students I'm letting either end of vB snap to either end of vA.

Problem: after vB snaps to an end of vA (by dragging an end of vB), the other end of vB can be dragged, changing (rotating & stretching) vB altogether (which is not desired)

Thanks for any help you can provide.

Tom

+++++++++++++++

var brd = JXG.JSXGraph.initBoard("box", {boundingbox: [-1, 5, 5, -1]});

 var a1 = [1,1],

     a2 = [1,3],

     

     b1 = [2,2],

     b2 = [4,2],

     

     pa1 = brd.create("point", a1, {name:'A1'}),

     pa2 = brd.create("point", a2, {name:'A2'}),

     

     pb1 = brd.create("point", b1, {name:'B1', attractors: [pa1,pa2] , attractorDistance: 0.2}),

     pb2 = brd.create("point", b2, {name:'B2', attractors: [pa1,pa2] , attractorDistance: 0.2}),

     

     vA = brd.create("segment", [pa1, pa2] ),

     vB = brd.create("segment", [pb1, pb2] ),

     

     gA = brd.create("group", [vA, pa1, pa2]),

     gB = brd.create("group", [vB, pb1, pb2]);

[Murray]

Hello Tomasz

Alfred will have a better solution, but this could get you started.

https://jsfiddle.net/mbourne/damcju6h/

The approach is to detect when "attraction" has occurred (the points have identical coordinates) and then group the elements so they move together when any element is moved.

Notes:

1. I only set it up for B1 attracted by A1 - it would be straightforward to extend it for all points.

2. You can drag all points and vector vA but unfortunately not vector vB (not sure why, as vB is included in the group. Sometimes I could drag it, mostly not).

3. I did the grouping once as I thought the sky may fall in if it was done on every drag move.

4. I ungrouped gA and gB so the user can move the vectors around however they like before doing the attraction.

Hope it helps.

Regards

Murray

[Tom Dindorf]

Hi Murray!

Thanks, but ... I realize I might be asking for something impossible ;)

Here's the scenario I am working on:

https://jsfiddle.net/tdindorf/wcm79ybk/35/  

The candidate is given vectors A & B, which (s)he may drag about at will, but not change otherwise (so step 4 of your solution is problematic).  

Snapping helps nicely with constructing C.

[the 'answer' div in the fiddle, btw, will actually be two answer fields in a Moodle formula question]

I was hoping to use snapping of A to B (either end) to help with the construction - not essential, but helpful.

[Candidates will also need to be able to un-snap A from B at will, but that can be provided by a 'Reset' button]

I guess the core of the issue is: can snapping of a point in a group not lead to the establishment of a Rotation_ & ScaleCenter for that group?

Thx

Tom

[Alfred Wassermann]

Hi Tom and Murray,

my proposal is to not use groups but transformations and events, which additionally has a flavor of analytical geometry.

First we start start with vectors vA0 and vB0 through the origin. These vectors are fixed, vA and vB will be translates of vA0 and vB0,

defined through the points pa1 (resp. pb1) and the translation [0, pa1] (resp. [0, pb1]).

The points pa2 and pb2 are free points having drag event listener which again move pa1 resp. pb1. 

The only drawback is that only points can be dragged, not the arrows. Here is the code:

var a1 = [2,2],

    a2 = [2,4],

     

    b1 = [1,3],

    b2 = [3,3],

    

    c1 = [2,1],

    c2 = [4,1],

     

    vA0 = brd.create("arrow", [[0,0], [0,2]], {fixed: true, strokeColor:'gray'}), 

    vB0 = brd.create("arrow", [[0,0], [2,0]], {fixed: true, strokeColor:'gray'}), 

    pa1 = brd.create("point", a1, {name:'A1'}),

    pa2 = brd.create("point", a2, {name: 'A2'}),

    tA = brd.create('transform', [()=>pa1.X(),()=>pa1.Y()], {type:'translate'}),

    vA = brd.create("arrow", [vA0, tA]),

    pb1 = brd.create("point", b1, {name:'B1', attractors: [pa1, pa2], label: {offset: [0, 10]}}),     

    tB = brd.create('transform', [()=>pb1.X(),()=>pb1.Y()], {type:'translate'}),

    vB = brd.create("arrow", [vB0, tB]),

    pb2 = brd.create("point", b2, {name: 'B2', attractors: [pa1, pa2], label: {offset: [0, 10]}}),

    

    pc1 = brd.create("point", c1, {name:'C1', attractors: [pa1, pa2, pb1, pb2], label: {offset: [0, -10]}}),

    pc2 = brd.create("point", c2, {name:'C2', attractors: [pa1, pa2, pb1, pb2], label: {offset: [0, -10]}}),

    vC = brd.create("arrow", [pc1, pc2], {color: 'red'});

pa1.setAttribute({attractors: [pb1, pb2]});

pa2.setAttribute({attractors: [pb1, pb2]});

pa1.on('drag', function() {

pa2.moveTo([pa1.X(), pa1.Y() + 2]);

});

pa2.on('drag', function() {

pa1.moveTo([pa2.X(), pa2.Y() - 2]);

});

pb1.on('drag', function() {

pb2.moveTo([pb1.X() + 2, pb1.Y()]);

});

pb2.on('drag', function() {

pb1.moveTo([pb2.X() - 2, pb2.Y()]);

});

See it live at https://jsfiddle.net/hkz8w9n7/3/

Best wishes,

Alfred

[Tomasz Dindorf]

Dear Alfred and Murray,

I found the solution: doing away with specific attractors while setting snapToPoints (for al points) to 'true' does everything I need :)

https://jsfiddle.net/tdindorf/puj9ehqz/11/  

Thanks for your help, and for the library: a super useful tool!

Regards

TD

--
You received this message because you are subscribed to the Google Groups "JSXGraph" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsxgraph+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/9ee10776-9df6-476d-9e74-25ca7d902ae8n%40googlegroups.com.