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

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");
	padding = 20;
	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;

	padding = 15;
	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");
	padding = 20;	
	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";
	dotradius = 6;
	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");
	padding = 20;	
	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];

	dotradius = 6;
	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;

	padding = 15;
	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");