Search IntMath
Close

Home | Math Display Experiments | ASCIIsvg-IM Draggables using Event.js

Page by Murray Bourne, IntMath.com. Last updated: 16 Jan 2018

# ASCIIsvg-IM Draggables using Event.js

This page demonstrates some examples of draggable points using asciiSVG-IM.js, an SVG-based math graphing facility. It makes use of the Event.js library for drag events.

## Board asvg0: simple draggable points

These 2 points can be dragged around the board. That's it, really.

### Syntax

Here's the syntax for the above graph:


// Create board
removeEle("asvg0SVG");
initBoard("asvg0", xMin, xMax, yMin, yMax);

axes(2,5,"labels",2,10);

strokewidth = 25;
stroke = fill = "#165a71";
strokeopacity = 0;

ASdot([-4, -10], 6, stroke, fill, "pt0a");
ASdot([7, 2], 6, stroke, fill, "pt0b");
makeDraggable(pt0a);
makeDraggable(pt0b);

removeEle("spinnerWrapWrap");


These are the various parameters that change as you drag points around. It's mostly internal coding information, and here for testing.

## Board asvg1: Gliders

The points can be dragged along the curves.

### Syntax

Here's the syntax for the above graph:


// Create board
removeEle("asvg1SVG");
xMin = -11; xMax = 0;
yMin = -1; yMax = 10;

initBoard("asvg1", xMin, xMax, yMin, yMax);
axes(1,1,"labels",1,1);

strokeopacity = 1;
plotBeyondYVis = false;

//////////////////////////////////////
var func_a = "6x+36";
stroke = "#165a71";
plot(func_a,xMin,xMax,120,"line1");

////////////////////////////////////
var func_b = "0.1x^2";
plot(func_b,xMin,xMax,120,"crv");

/////////////////////////////
var func_c = "7+2sin(x)";
plot(func_c,xMin,xMax,120,"sin");

// Do dots after curves
strokewidth = 25;
stroke = fill = "#165a71";
strokeopacity = 0.01;

var p = [-5,6];
ASdot(p, 6, stroke, fill, "pt1a");
var p = [-4,1.6];
ASdot(p, 6, stroke, fill, "pt1b");
var p = [-3,7+2*Math.sin(-3)];
ASdot(p, 6, stroke, fill, "pt1c");

strokewidth = strokeopacity = 1;
p = [-8,1]; q = [-8,6];
line(p,q,"vertLineGliderOne");

strokewidth = 25;
ASdot(p, 6, stroke, fill, "dotOnVert");

//////////////////////////////////////////////////////
//
// This makes a glider on the function curve.
// (the point ID, the function, the curve ID)
//
// KNOWN ISSUE: Continuous curves with some small slope and some
// large slope sections foul up. (TODO)
//
///////////////////////////////////////////////////////
makeDraggable(pt1a, func_a, "line1");
makeDraggable(pt1b, func_b, "crv");
makeDraggable(pt1c, func_c, "sin");

///////////////////////////////////////////
//
// Syntax for vertical line case:
// * dot ID to make draggable
// * "vert" indicates it's on a vertical line
// * line ID we can glide on
//
////////////////////////////////////////////

makeDraggable(dotOnVert, "vert", "vertLineGliderOne");

removeEle("spinnerWrapWrap");


## Board asvg2: Segments defined by draggable points

The points define the extremities of the segment, and can be dragged.

### Syntax

Here's the syntax for the above graph:


removeEle("asvg2SVG");
initBoard("asvg2", 0, 50, -4, yMax);
axes(10,2,"labels",10,2);

var p = [40, 1], q = [7, 3];
stroke = "#165a71";
strokeopacity = 1;
stroke = fill = "#165a71";
dotstrokewidth = 25;
segstrokewidth = 2;
draggablePtsSegLineJoiner("join0", "segment", [p,q], ["pt2a", "pt2b"]);

var p = [5,-4], q = [40,10];
strokeopacity = 1;
strokewidth = 25;
stroke = fill = "#165a71";
draggablePtsSegLineJoiner("join66", "segment", [p,q], ["pt2a66", "pt2b66"]);

removeEle("spinnerWrapWrap");


## Board asvg3: Line through draggable points

You can drag the filled points. The vertical and horizontal lines are for testing.

### Syntax

Here's the syntax for the above graph:


removeEle("asvg3SVG");
initBoard("asvg3", 0, 50, -4, yMax);
axes(10,2,"labels",10,2);

strokewidth = strokeopacity = 1;
stroke = "#165a71";
fill = "#fff";
p = [20,-2]; q = [20,6];
line(p,q,"vertLine");
ASdot(p, 3, stroke, fill, "pta");
ASdot(q, 3, stroke, fill, "ptb");

strokewidth = strokeopacity = 1;
fill = "#fff";
p = [10,5]; q = [50,5];
line(p,q,"horiLine");
ASdot(p, 3, stroke, fill, "pte");
ASdot(q, 3, stroke, fill, "ptf");

goToExtremities = true;
p = [10,-2]; q = [35,7];

dotstrokewidth = 25;
segstrokewidth = 2;
fill = "#165a71";
draggablePtsSegLineJoiner("randLine", "line", [p,q], ["ptc", "ptd"]);

removeEle("spinnerWrapWrap");


## Board asvg4: More lines through draggable points

You can drag the points. This includes a vertical line determined by draggable points.

### Syntax

Here's the syntax for the above graph:


removeEle("asvg4SVG");
xMin = -11; xMax = 2;
yMin = -1; yMax = 10;

initBoard("asvg4", xMin, xMax, yMin, yMax);
axes(1,1,"labels",1,1);

goToExtremities = false;
stroke = fill = "#165a71";
strokewidth = strokeopacity = 1;
p = [-6,-1]; q = [-6,6];
draggablePtsSegLineJoiner("vertLine2", "line", [p,q], ["ptg", "pth"]);

p = [-9,7]; q = [-5,2];
draggablePtsSegLineJoiner("randLine2", "line", [p,q], ["pti", "ptj"]);

removeEle("spinnerWrapWrap");