Skip to main content

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

top

Search IntMath, blog and Forum

Search IntMath

Online Algebra Solver

This algebra solver can solve a wide range of math problems.

Math Lessons on DVD

Math videos by MathTutorDVD.com

Easy to understand math lessons on DVD. See samples before you commit.

More info: Math videos

The IntMath Newsletter

Sign up for the free IntMath Newsletter. Get math study tips, information, news and updates each fortnight. Join thousands of satisfied students, teachers and parents!


See the Interactive Mathematics spam guarantee.