Skip to main content
Search IntMath
Close

450+ Math Lessons written by Math Professors and Teachers

5 Million+ Students Helped Each Year

1200+ Articles Written by Math Educators and Enthusiasts

Simplifying and Teaching Math for Over 23 Years

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.

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.

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

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

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.