├── LICENSE.txt
├── README.md
├── examples
    ├── UWMetro.js
    └── ttc.js
├── initialization_example.js
└── subway.js


/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright 2012 Cameron Davidson-Pilon
 2 | http://www.camdp.com
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining
 5 | a copy of this software and associated documentation files (the
 6 | "Software"), to deal in the Software without restriction, including
 7 | without limitation the rights to use, copy, modify, merge, publish,
 8 | distribute, sublicense, and/or sell copies of the Software, and to
 9 | permit persons to whom the Software is furnished to do so, subject to
10 | the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Subwayjs is a javascript module for creating an interactive subway system for you website. See www.camdp.com/UWSubway and www.camdp.com/ttc for examples.
 2 | The module relies on Paper.js (http://paperjs.org/download/). 
 3 | 
 4 | To run, you'll need something that looks like this in your header:
 5 | 
 6 |         <meta .... >
 7 |         <script type="text/javascript" src="/scripts/paperjs/lib/paper.js"></script>
 8 |         <script type="text/paperscript" src="/scripts/subway.js" canvas="subway"></script>
 9 |         <style ...>
10 |         
11 | Note that there must be only one script that will contain the main subways.js library and the initialization of the stations (see initialization_example.js for an example of initalization). The seperation above was purely for aesthetics. The reason for this is that paper.js works only a very local scope, and not across js scripts. 
12 | 
13 | See ttc.js for a full, working example. 
14 | 
15 | Please email me at cam.davidson.pilon@gmail.com if you have any comments, questions or suggestions.
16 | 


--------------------------------------------------------------------------------
/examples/UWMetro.js:
--------------------------------------------------------------------------------
  1 | 
  2 | //subway.js
  3 | // Author: Cameron Davidson-Pilon
  4 | // Date: Sept, 2012
  5 | // License: MIT
  6 | // Code available at https://github.com/Valloway/Subwayjs
  7 | 
  8 | // Dependencies: 
  9 | //  Paper.js (http://paperjs.org/)
 10 | 
 11 | 
 12 | 
 13 | 
 14 | // These change the subway node design. Try manipulating them to see what they do.
 15 | // Note: all measurments are in pixels.
 16 | 
 17 | var NODE_SIZE = 16; //radius of the nodes
 18 | var INNER_NODE_SIZE = 7; //radius of the inner circle in the stations
 19 | var CUR_NODE_SIZE = 9; // radious of the inner cicle, if is is currently selected.
 20 | var LINE_WIDTH = 18; //width of the inter-station lines.
 21 | 
 22 | // fonts
 23 | var FONT_SIZE = 18;
 24 | var TEXT_FONT = 'Carme';
 25 | var FONT_COLOR = 'black';
 26 | var LINE_EMPH = 5;
 27 | 
 28 | var CHARACTER_STYLE = {
 29 | 		fillColor: FONT_COLOR,
 30 | 		fontSize: FONT_SIZE,
 31 |         font: TEXT_FONT,
 32 | 		};
 33 |         
 34 | var nodes = []; // after initilization, this variable will contain all stations. Needed for clicking stations with mouse. 
 35 | var shiftDown = 0; //This is used in controlling the location with the keys. It is a boolean representing whether the 
 36 |                    // shift key is currently pressed down. 
 37 | 
 38 | function Line( color, name ){
 39 |     // the Line object creates a subway line. 
 40 |     //   color: must be a paper.js RgbColor or a keyword color, eg: 'black', 'green'.
 41 |     //   name: the unique name of the line. 
 42 | 
 43 |     this['color'] = color;
 44 |     this['path'] = new Path();
 45 |     this['path'].strokeWidth = LINE_WIDTH;
 46 |     this['path'].strokeColor = this['color'];
 47 |     this['name'] = name;
 48 | 	
 49 | }
 50 | 	
 51 | 	
 52 | 		
 53 | function SingleNode( line, position, neighbours, name, url, name_offset, name_angle){
 54 |     // the Node object is a non transitionay subway stop
 55 |     //      line: the line the node lies on.
 56 |     //      position: the coordinates on the canvas as Point class object.
 57 |     //      neighbours: the neighbours of the node.  It 
 58 |     //          must be the syntax {'E':Neighbour1, 'W':Neighbour2, etc.}. Note: this way we can also do things like:
 59 |     //          {'W': Neighbour1, 'S': Neighbour1, 'E': Neighbour2}. Note all the directions need to be defined.
 60 |     //      name: the station name to be displayed.
 61 |     //      url: the url to go to if the SpaceBar is pressed. Leave as '' if not wanted.
 62 |     //      name_offset: the amount to move the display named away from the center of the station. It must be a paper.js Point
 63 |     //                   object. ie. new Point( 10, 10) will position the top left corner of the text 10 pixels right and 
 64 |     //                  10 pixels below the center of the station.
 65 |     //      name_angle: the angle the name to be at. Enter it in counterclockwise radians.
 66 |     
 67 |     this['line'] = line;
 68 |     this['position'] = position;
 69 | 	this['name'] = name;
 70 | 	this['url'] = url;
 71 |     this['name_angle'] = name_angle;
 72 |     this['neighbours'] = neighbours;
 73 | 	nodes.push(this)
 74 |     
 75 |     //Methods
 76 |     this.onkeydownNode = onkeydownNode; //this controls the movement if keys are pressed.
 77 |     this.fillNode = function(){
 78 |             //this method fires when the user enters the node.
 79 |             move_infobox(this)
 80 |             this.ic.fillColor = 'black';
 81 |             this['line']['path'].strokeWidth = LINE_WIDTH + LINE_EMPH;
 82 | //            this['line']['path'].strokeColor.alpha= .9;
 83 | 
 84 |     }; 
 85 |     this.emptyNode = function(){
 86 |             //this method fires when the user enters the node.
 87 |             this.ic.fillColor = 'white';
 88 |             this['line']['path'].strokeWidth = LINE_WIDTH;
 89 |             //this['line']['path'].strokeColor.alpha= .4;
 90 | 
 91 |     };
 92 | 
 93 |     
 94 |     // generate the visual shapes.
 95 |     var c = new Path.Circle( this['position'], NODE_SIZE);
 96 |     c.fillColor = this['line']['color'];
 97 |     var ic = new Path.Circle( this['position'], INNER_NODE_SIZE+2);
 98 |     ic.fillColor = 'black';
 99 |     
100 |     this.ic = new Path.Circle( this['position'], INNER_NODE_SIZE);
101 |     this.ic.fillColor = 'white';
102 | 	
103 | 	this['text'] = new PointText( this['position'] + name_offset );
104 | 	this['text'].content = this['name'];
105 |     this['text'].characterStyle = CHARACTER_STYLE;
106 |     this['text'].rotate( -this['name_angle'], this['position'] );
107 | 
108 | 	
109 |     // add it to the line.
110 |     this['line']['path'].add( this['position'] );
111 |     
112 |     }
113 |     
114 | function TransitionNode( line, line2, angle, position, neighbours, name, url,name_offset, name_angle){
115 |     // the Node object is a non transitionay subway stop
116 |     //      line: the primary line the node lies on.
117 |     //      line2: the secondary line the node lies on.
118 |     //      angle: the angle of the above and underneath node. Equal to the angle of the two lines.
119 |     //      position: the coordinates on the canvas as Point class object.
120 |     //      neighbours: the neighbours of the node.  It 
121 |     //          must be the syntax {'E':Neighbour1, 'W':Neighbour2, etc.}. Note: this way we can also do things like:
122 |     //          {'W': Neighbour1, 'S': Neighbour1, 'E': Neighbour2}. Note all the directions need to be defined.
123 |     //      name: the station name to be displayed.
124 |     //      url: the url to go to if the SpaceBar is pressed. Leave as '' if not wanted.
125 |     //      name_offset: the amount to move the display named away from the center of the station. It must be a paper.js Point
126 |     //                   object. ie. new Point( 10, 10) will position the top left corner of the text 10 pixels right and 
127 |     //                  10 pixels below the center of the station.
128 |     //      name_angle: the angle the name to be at. Enter it in counterclockwise radians.
129 | 
130 |     
131 | 	var STROKE_WIDTH = 2; //this two control the offset and appearance of the 'underneath node'
132 | 	var CIRCLE_DIST = 16;
133 | 	
134 | 	
135 | 	//This Node is the class for line transition stations.
136 | 	this['line'] = line;
137 | 	this['line2'] = line2;
138 | 	this['position'] = position; //This is the position of either of the circles. The angle determines the position of the other one.
139 | 	this['neighbours'] = neighbours;
140 | 	this['angle'] = angle; //This is the angle between the two circles.
141 | 	this['positionAlt'] = this['position'] + new Point( CIRCLE_DIST*Math.cos( angle), CIRCLE_DIST*Math.sin( angle)  );
142 | 	this['name'] = name;
143 | 	this['url'] = url;
144 | 	nodes.push(this);
145 | 	
146 | 	//Methods;
147 | 	this.onkeydownNode = onkeydownNode;
148 | 	this.emptyNode = function(){
149 | 			this.innerc.fillColor = this['line']['color'];
150 |             this['line']['path'].strokeWidth = LINE_WIDTH;
151 |             this['line2']['path'].strokeWidth = LINE_WIDTH;
152 |             //this['line2']['path'].strokeColor.alpha = .4;
153 |             //this['line']['path'].strokeColor.alpha = .4;
154 | 
155 | 
156 | 	}
157 | 	this.fillNode = function(){
158 | 			this.innerc.fillColor = 'black';
159 |             this['line']['path'].strokeWidth = LINE_WIDTH + LINE_EMPH;
160 |             this['line2']['path'].strokeWidth = LINE_WIDTH + LINE_EMPH;
161 |             move_infobox(this)
162 |             //this['line2']['path'].strokeColor.alpha = .9;
163 |             //this['line']['path'].strokeColor.alpha= .9;
164 |             
165 | 	} 
166 | 	
167 |     // Title to display.
168 | 	this['text'] = new PointText( this['position'] + name_offset );
169 | 	this['text'].content = this['name'];
170 |     this['text'].characterStyle = CHARACTER_STYLE;
171 |     this['text'].rotate( -name_angle, this.position);
172 | 	
173 | 	//generate visual shapes
174 | 	var c2 = new Path.Circle( this.positionAlt , NODE_SIZE);
175 | 	c2.strokeWidth = STROKE_WIDTH;
176 | 	c2.strokeColor = 'black';
177 | 	c2.fillColor = 'white';
178 | 	var c2 = new Path.Circle( this.positionAlt, CUR_NODE_SIZE+1);
179 | 	c2.fillColor = this.line2.color;
180 | 	
181 | 	var c1 = new Path.Circle( this.position, NODE_SIZE);
182 | 	c1.strokeWidth = STROKE_WIDTH;
183 | 	c1.fillColor = 'white';
184 | 	c1.strokeColor = 'black';
185 | 	this.innerc = new Path.Circle( this.position, CUR_NODE_SIZE);
186 | 	this.innerc.fillColor = this.line.color;
187 | 	
188 | 
189 | 	//add it the the lines.
190 | 	this['line'].path.add( this['position']);
191 | 	this['line2'].path.add(this['positionAlt']);
192 | 	
193 | 	
194 | 	}
195 |     
196 | 
197 |     
198 |     
199 |     
200 | function move_infobox(node){
201 |     var x = node['position'].x;
202 |     var y = node['position'].y;
203 |     
204 |     
205 |     infobox.style.left = x + 20;
206 |     infobox.style.top = y - 20 ;
207 |     document.getElementById('infobox-text').innerHTML = document.getElementById( toHTMLname(node['name']) ).innerHTML; //might be easier to have a property in the object to store this.
208 |     return;
209 |  }    
210 |  
211 |  
212 | function toHTMLname( name ){
213 |     //var htmlname = name.replace(//g, '' );
214 |     var htmlname = name.replace(/[.'-*\s]/g, '').toLowerCase()
215 |     console.log( htmlname );
216 | 
217 |     return htmlname.toLowerCase();
218 |     }
219 |    
220 |     
221 | function LegendItem( start, end, subwayLine ){
222 |     
223 |      this['line'] = new Line(subwayLine['color'], subwayLine['name']);
224 |      this['line']['path'].add( start, end)
225 |      var title = new PointText( end + new Point( 7,5) );
226 |      title.content = subwayLine.name;
227 |      title.characterStyle = {
228 | 		fillColor: 'black',
229 | 		fontSize: 14,
230 |         font: TEXT_FONT
231 | 		}; 
232 |         
233 | }
234 |    
235 |  
236 | function onKeyDown(event){
237 |     var key = event.key;
238 |     if ((key=="up" && shiftDown) || (key=="w" ) ){
239 |         current_position.onkeydownNode('N');}
240 |     else if ((key=="left" && shiftDown) || (key=="a" ) ){
241 |         current_position.onkeydownNode('W');}
242 |     else if ((key=="right" && shiftDown) || (key=="d" ) ){
243 |         current_position.onkeydownNode('E');}
244 |     else if ((key=="down" && shiftDown) || (key=="s" ) ){
245 |         current_position.onkeydownNode('S');}
246 |     //else if (key in oc(['enter', 'space']) ){
247 | 	//	window.location.href=current_position.url;}
248 |     else if (key=="shift"){
249 |         shiftDown=1;}
250 | }
251 | 
252 | function onKeyUp(event){
253 |     if (event.key == "shift"){
254 |         shiftDown=0;
255 |         }
256 | }
257 |  
258 | function onkeydownNode( keydown, node ){
259 |     for ( key in this['neighbours'] ){
260 |         if (key == keydown){
261 |             current_position.emptyNode();
262 |             current_position = this['neighbours'][key];
263 |             current_position.fillNode();
264 |             }
265 |     }
266 |     return;
267 | }
268 | 
269 | 
270 | 
271 | 
272 | 	   
273 | 	
274 | function DashLine( color, point1, point2){
275 | 	this['color'] = color;
276 | 	this['path'] = new Path();
277 | 	this['path'].style = { 
278 | 		strokeWidth: LINE_WIDTH,
279 | 		strokeColor: this.color,
280 | 		};
281 | 	this['path'].dashArray = [7,4];
282 | 	
283 | 	this['path'].add(point1, point2);
284 | 	}
285 | 
286 | 
287 | 
288 | 
289 | 
290 | function onMouseDown(event){
291 |     // This function fires whenever the mouse is pressed down. It iteratres through the stations and stops if it finds the 
292 |     // cursor is over a station.
293 | 	var N = nodes.length;
294 |     var point = event.point;
295 | 	for( var i=0; i<N; i++){
296 | 		var node_position = nodes[i].position;
297 | 		if (Path.Circle( node_position, NODE_SIZE ).bounds.contains(point) ){
298 | 			current_position.emptyNode();
299 | 			current_position = nodes[i];
300 | 			current_position.fillNode();
301 | 			break;
302 | 		}
303 | 	}
304 | }
305 | function onMouseMove(event){
306 |     // This function fires whenever the mouse moves. Creates hover pointer
307 | 	var N = nodes.length;
308 |     var point = event.point;
309 | 	for( var i=0; i<N; i++){
310 | 		var node_position = nodes[i].position;
311 | 		if (Path.Circle( node_position, NODE_SIZE ).bounds.contains(point) ){
312 |             document.body.style.cursor = 'pointer';
313 | 
314 | 			return;
315 | 		}
316 | 	}
317 |     document.body.style.cursor = 'default';
318 | 
319 | }
320 | 
321 | function onFrame(event){
322 |     //This control the halo. You can choose to turn it off by removing this function, or you can create your own using 
323 |     //this function too.
324 | 	halo.strokeColor = current_position['line']['color'];
325 |     halo.scale( Math.pow( 1.04, Math.sin(event.count/5 )));
326 |     halo.position = current_position['position'];
327 |     
328 |     //test how long it takes to compute sin(x) for different values of x.
329 | 
330 | }
331 | 
332 | 
333 | H_CANVAS = 800;
334 | W_CANVAS = 1000;
335 | offset = new Point( 20 ,20);
336 | H_SLC = 250
337 | W_SLC = 450
338 | 
339 | 
340 | SLC_delta = 190;
341 | 
342 | //create the river
343 | river = new Path()
344 | river.add( new Point(W_SLC - 60 + 90,  H_SLC+SLC_delta + 200) )
345 | river.add( new Point(W_SLC - 60 - 20,  H_SLC+SLC_delta) )
346 | river.add( new Point(W_SLC - 60,  H_SLC) )
347 | river.add( new Point(W_SLC - 120,  H_SLC - 30) )
348 | river.add( new Point(W_SLC - 190,  H_SLC - 30) )
349 | river.add( new Point( W_SLC - 2*SLC_delta/2 - 60, H_SLC - 1*SLC_delta/2) )
350 | river.add( new Point( W_SLC - 2*SLC_delta/2, H_SLC - 1*SLC_delta/2 - 60 ) )
351 | river.add( new Point( W_SLC - 1*SLC_delta/2-20, 0)  )
352 | 
353 | 
354 | river.smooth();
355 | 
356 | river.strokeColor = "rgb(200,200,255)";
357 | river.strokeWidth = 12;
358 | 
359 | 
360 | //create lines
361 | RingLine = new Line( '#af1b8b', 'Ring Line');
362 | NWLine = new Line( '#b3d529', 'SLC Line');
363 | NLine = new Line( '#ababab', 'CIF Line');
364 | DCLine = new Line( '#9AE4E8', 'DC Line');
365 | EVLine = new Line( 'rgb(23,45,100)', 'EV Line');
366 | 
367 | var dCIF = new DashLine( NLine['color'], new Point( W_SLC+SLC_delta, H_SLC-160)+ new Point( 0, -75),  new Point( W_SLC+SLC_delta, H_SLC-160)  );
368 | var dUWP = new DashLine( NWLine['color'], new Point( W_SLC+2*SLC_delta + 100, H_SLC+SLC_delta + 55)+ new Point( +75, 0),  new Point( W_SLC+2*SLC_delta + 100, H_SLC+SLC_delta + 55)  );
369 | 
370 | 
371 | clv = new SingleNode( NWLine, new Point( W_SLC - 3*SLC_delta/2, H_SLC - 2*SLC_delta/2), null, 'CLV', '/', new Point(25, 0), 0);
372 | rev = new SingleNode( NWLine, new Point( W_SLC - 2*SLC_delta/2, H_SLC - 1*SLC_delta/2), null, 'REV', '/', new Point(15,-18), 0);
373 | v1 = new SingleNode( NWLine, new Point( W_SLC - 1*SLC_delta/2, H_SLC - 1*SLC_delta/2), null, 'V1', '/', new Point(15,-18), 0);
374 | 
375 | slc = new TransitionNode(  RingLine, NWLine,3.8, new Point( W_SLC, H_SLC ), null, 'SLC','/', new Point( -65, 15), 0 );
376 |     dp2 = new TransitionNode( NLine, EVLine,  -4.2, new Point( W_SLC+SLC_delta, H_SLC + SLC_delta/2), null, '', '/', new Point(20, -7), 0);
377 | 
378 |     dp = new TransitionNode( NLine, NWLine,  .2, new Point( W_SLC+SLC_delta, H_SLC + SLC_delta/2), null, 'DP Library', '/', new Point(24, -15), 0);
379 |     
380 |     cif = new SingleNode( NLine, new Point( W_SLC+SLC_delta, H_SLC-160), null, 'CIF', '/', new Point(23,5), 0);
381 | bmh = new TransitionNode(  RingLine, NLine, 4.75, new Point( W_SLC+SLC_delta, H_SLC-70 ), null, 'BMH','/', new Point(25, -10), 0 );
382 |     mc = new TransitionNode( NLine, DCLine, 0, new Point( W_SLC+SLC_delta, H_SLC), null, 'MC', '/', new Point(20, 34), 0 );
383 | 
384 | 
385 | dc = new TransitionNode(  RingLine, DCLine, -3.1, new Point( W_SLC+2*SLC_delta, H_SLC), null, 'DC','/', new Point(20,25), 0 );
386 |     engplus = new SingleNode( DCLine, new Point( W_SLC+2.5*SLC_delta, H_SLC), null, 'ENG-Plus', '/', new Point(20,25), 0);
387 | 
388 | engminus = new TransitionNode(  RingLine, NWLine, .5, new Point( W_SLC+2*SLC_delta, H_SLC+SLC_delta), null, 'ENG-Minus','/', new Point( 20, -10), 0 );
389 |     uwp = new SingleNode( NWLine, new Point( W_SLC+2*SLC_delta + 100, H_SLC+SLC_delta + 55), null, 'UW Place', '', new Point(18, 28), 0);
390 |     
391 | sch2 = new TransitionNode(  RingLine, EVLine, -2, new Point( W_SLC+SLC_delta, H_SLC+SLC_delta+70), null, '','/', new Point(-175, 30), 0 );
392 | 
393 | sch = new TransitionNode(  RingLine, NLine, 1.3, new Point( W_SLC+SLC_delta, H_SLC+SLC_delta+70), null, 'South Campus Hall','/', new Point(-175, 30), 0 );
394 | 
395 |     seagram = new SingleNode( NLine, new Point( W_SLC + 1.5*SLC_delta, H_SLC+SLC_delta+55 + SLC_delta/2), null, 'Seagram','/', offset, 0 );
396 | 
397 |     
398 | 
399 |     ev = new TransitionNode( RingLine, EVLine, -1.8, new Point(W_SLC,  H_SLC+SLC_delta), null, 'EV*', '', new Point(-50, 18), 0);
400 | 
401 |     health =  new SingleNode( EVLine, new Point( W_SLC - 1*SLC_delta/2- 20, H_SLC+SLC_delta - 1*SLC_delta/2 ), null, 'College', '/', new Point(-30,-22), 0);
402 |     
403 | RingLine.path.closePath();
404 | 
405 | 
406 | 
407 | 
408 | clv.neighbours = { 'S':rev, 'E': rev};
409 | seagram.neighbours = { 'N':sch, 'W': sch};
410 | uwp.neighbours = { 'N':engminus, 'W': engminus};
411 | rev.neighbours = { 'N':clv, 'E':v1, 'W':clv};
412 | v1.neighbours = { 'W':rev, 'S':slc, 'E':slc};
413 | slc.neighbours = { 'S':ev, 'W':v1, 'N':bmh, 'E':dp};
414 | ev.neighbours = {'N': slc, 'E':sch, 'S':sch, 'W': health};
415 | dp.neighbours = {'W':slc, 'S': sch, 'N': mc, 'E':engminus};
416 | bmh.neighbours = {'W':slc, 'S': mc, 'N': cif, 'E':dc};
417 | dc.neighbours = {'W':mc, 'S': engminus, 'N': bmh, 'E':engplus};
418 | engminus.neighbours = {'W':dp, 'S': sch, 'N':dc,  'E':uwp};
419 | sch.neighbours = {'W':ev, 'S': seagram, 'N':dp,  'E':engminus};
420 | engplus.neighbours = {'W':dc};
421 | mc.neighbours = {'S': dp, 'N': bmh, 'E':dc};
422 | cif.neighbours = {'S':bmh};
423 | health.neighbours = {'S':ev, 'E': ev};
424 | 
425 | 
426 | 
427 | 
428 | 
429 | //legend
430 | 
431 | var lg1 = new LegendItem( new Point( 60,300), new Point( 170,300), RingLine);
432 | var lg2 = new LegendItem( new Point( 60,330), new Point( 170,330), NWLine);
433 | var lg3 = new LegendItem( new Point( 60,360), new Point( 170,360), NLine);
434 | var lg4 = new LegendItem( new Point( 60,390), new Point( 170,390), DCLine);
435 | var lg4 = new LegendItem( new Point( 60,420), new Point( 170,420), EVLine);
436 | 
437 | 
438 | // title
439 | var title = new PointText( new Point(60,500) );
440 | title.content = "University of Waterloo \nProposed Subway Map";
441 | title.characterStyle = {
442 | 		fillColor: 'black',
443 | 		fontSize: 25,
444 |         font: "Helvetica"
445 | 		};
446 | var description = new PointText( new Point(60,560) );
447 | description.content = "This is a map based on a proposed subway system\n underneath the University of Waterloo.\n Hold [shift] and use your arrow keys to move around, \n or press your WASD keys.";
448 | description.characterStyle = {
449 | 		fillColor: 'black',
450 | 		fontSize: 14,
451 |         font: "Arial"
452 | 		};
453 |         
454 | 
455 | var shiftDown = 0;
456 | 
457 | current_position = slc;
458 | current_position.fillNode();
459 | 
460 | // form the halo
461 | halo = new Path.Circle( current_position.position, NODE_SIZE  );
462 | halo.strokeColor = current_position.line.color;
463 | halo.strokeWidth = 3;
464 | 


--------------------------------------------------------------------------------
/examples/ttc.js:
--------------------------------------------------------------------------------
  1 | //TTC subway
  2 | 
  3 | 
  4 | //subway.js
  5 | // Author: Cameron Davidson-Pilon
  6 | // Date: July, 2012
  7 | // License: MIT
  8 | 
  9 | 
 10 | // Dependencies: 
 11 | //  Paper.js (http://paperjs.org/)
 12 | 
 13 | 
 14 | //subway for blogs.
 15 | //canvas dimensions
 16 | width = 1890;
 17 | height = 1000;
 18 | 
 19 | // These change the subway chacteristics. Try manipulating them to see what they do.
 20 | // Note: all measurments are in pixels.
 21 | var NODE_SIZE = 16; //radius.
 22 | var INNER_NODE_SIZE = 7; 
 23 | var CUR_NODE_SIZE = 9;
 24 | var LINE_WIDTH = 23;
 25 | 
 26 | // fonts
 27 | var FONT_SIZE = 16;
 28 | var TEXT_FONT = 'Arial';
 29 | var CHARACTER_STYLE = {
 30 | 		fillColor: 'white',
 31 | 		fontSize: FONT_SIZE,
 32 |         font: TEXT_FONT,
 33 | 		};
 34 |         
 35 | // after initilization, this variable will contain all stations. Needed for clicking with mouse. 
 36 | nodes = []; 
 37 | 
 38 | function Line( color, name ){
 39 |     // the Line object creates a subway line. 
 40 |     //   color: must be a paper.js RgbColor or a keyword color, eg: 'black', 'green'.
 41 |     //   name: the unique name of the line. 
 42 | 
 43 |     this.color = color;
 44 | 
 45 |     this.path = new Path();
 46 |     this.path.strokeWidth = LINE_WIDTH;
 47 |     this.path.strokeColor = this.color;
 48 |     this.name = name;
 49 | 	
 50 | }
 51 | 	
 52 | 	
 53 | 		
 54 | function SingleNode( line, position, neighbours, name, url, name_offset, name_angle){
 55 |     // the Node object is a non transitionay subway stop
 56 |     //      line: the line the node lies on.
 57 |     //      position: the coordinates on the canvas as Point class object.
 58 |     //      neighbours: the neighbours of the node.  It 
 59 |     //          must be the syntax {'E':Neighbour1, 'W':Neighbour2, etc.}. Note: this way we can also do things like:
 60 |     //          {'W': Neighbour1, 'S': Neighbour1, 'E': Neighbour2}. Note all the directions need to be defined.
 61 |     //      name: the station name to be displayed.
 62 |     //      url: the url to go to if the SpaceBar is pressed. Leave as '' if not wanted.
 63 |     //      name_offset: the amount to move the display named away from the center of the station. It must be a paper.js Point
 64 |     //                   object. ie. new Point( 10, 10) will position the top left corner of the text 10 pixels right and 
 65 |     //                  10 pixels below the center of the station.
 66 |     //      name_angle: the angle the name to be at. Enter it in counterclockwise radians.
 67 |     
 68 |     this.line = line;
 69 |     this.position = position;
 70 |     this.neighbours = neighbours;
 71 | 	this.name = name;
 72 | 	this.url = url;
 73 | 	nodes.push(this)
 74 |     
 75 |     //Methods
 76 |     this.onkeydownNode = onkeydownNode;
 77 |     this.emptyNode = emptyNode;
 78 |     this.fillNode = fillNode;
 79 | 
 80 |     // generate the visual shapes.
 81 |     var c = new Path.Circle( this.position, NODE_SIZE);
 82 |     c.fillColor = this.line.color;
 83 |     var ic = new Path.Circle( this.position, INNER_NODE_SIZE);
 84 |     ic.fillColor = 'white';
 85 | 	
 86 | 	this.text = new PointText( this.position + name_offset );
 87 | 	this.text.content = this.name;
 88 |     this.text.characterStyle = CHARACTER_STYLE;
 89 | 	// To rotate names, uncomment below. 
 90 |     this.text.rotate( -name_angle, this.position );
 91 | 
 92 | 	
 93 |     // add it to the line.
 94 |     this.line.path.add( this.position);
 95 |     
 96 |     }
 97 |     
 98 | function TransitionNode( line, line2, angle, position, neighbours, name, url,name_offset, name_angle){
 99 |     // the Node object is a non transitionay subway stop
100 |     //      line: the primary line the node lies on.
101 |     //      line2: the secondary line the node lies on.
102 |     //      angle: the angle of the above and underneath node. Equal to the angle of the two lines.
103 |     //      position: the coordinates on the canvas as Point class object.
104 |     //      neighbours: the neighbours of the node.  It 
105 |     //          must be the syntax {'E':Neighbour1, 'W':Neighbour2, etc.}. Note: this way we can also do things like:
106 |     //          {'W': Neighbour1, 'S': Neighbour1, 'E': Neighbour2}. Note all the directions need to be defined.
107 |     //      name: the station name to be displayed.
108 |     //      url: the url to go to if the SpaceBar is pressed. Leave as '' if not wanted.
109 |     //      name_offset: the amount to move the display named away from the center of the station. It must be a paper.js Point
110 |     //                   object. ie. new Point( 10, 10) will position the top left corner of the text 10 pixels right and 
111 |     //                  10 pixels below the center of the station.
112 |     //      name_angle: the angle the name to be at. Enter it in counterclockwise radians.
113 | 
114 |     
115 | 	STROKE_WIDTH = 2; //this two control the offset and appearance of the 'underneath node'
116 | 	CIRCLE_DIST = 16;
117 | 	
118 | 	
119 | 	//This Node is the class for line transition stations.
120 | 	this.line = line;
121 | 	this.line2 = line2;
122 | 	this.position = position; //This is the position of either of the circles. The angle determines the position of the other one.
123 | 	this.neighbours = neighbours;
124 | 	this.angle = angle; //This is the angle between the two circles.
125 | 	this.positionAlt = this.position + new Point( CIRCLE_DIST*Math.cos( angle), CIRCLE_DIST*Math.sin( angle)  );
126 | 	this.name = name;
127 | 	this.url = url;
128 | 	nodes.push(this);
129 | 	
130 | 	//Methods;
131 | 	this.onkeydownNode = onkeydownNode;
132 | 	this.emptyNode = function(){
133 | 			this.innerc.remove()
134 | 	}
135 | 	//this.fillNode = fillNode;
136 | 	this.fillNode = function(){
137 | 		    this.innerc = new Path.Circle( this.position, CUR_NODE_SIZE);
138 | 			this.innerc.fillColor = 'black';
139 | //            window.location.href=this.url;
140 | 	} 
141 | 	
142 | 	this.text = new PointText( this.position + name_offset );
143 | 
144 | 	this.text.content = this.name;
145 | 
146 |     this.text.characterStyle = CHARACTER_STYLE;
147 |     // uncomment below to rotate.
148 |     this.text.rotate( -name_angle, this.position);
149 | 	
150 | 	//generate visual shapes
151 | 	var c2 = new Path.Circle( this.positionAlt , NODE_SIZE);
152 | 	c2.strokeWidth = STROKE_WIDTH;
153 | 	c2.strokeColor = 'black';
154 | 	c2.fillColor = 'white';
155 | 	var c2 = new Path.Circle( this.positionAlt, CUR_NODE_SIZE+1);
156 | 	c2.fillColor = this.line2.color;
157 | 	
158 | 	var c1 = new Path.Circle( this.position, NODE_SIZE);
159 | 	c1.strokeWidth = STROKE_WIDTH;
160 | 	c1.fillColor = 'white';
161 | 	c1.strokeColor = 'black';
162 | 	var c1 = new Path.Circle( this.position, CUR_NODE_SIZE);
163 | 	c1.fillColor = this.line.color;
164 | 	
165 | 
166 | 	//add it the the lines.
167 | 	this.line.path.add( this.position);
168 | 	this.line2.path.add(this.positionAlt);
169 | 	
170 | 	
171 | 	}
172 |     
173 | function LegendItem( start, end, subwayLine ){
174 |     
175 |      this.line = new Line(subwayLine.color, subwayLine.name);
176 |      this.line.path.add( start, end)
177 |      title = new PointText( end + new Point( 7,5) );
178 |      title.content = subwayLine.name;
179 |      title.characterStyle = {
180 | 		fillColor: 'black',
181 | 		fontSize: 14,
182 |         font: TEXT_FONT
183 | 		}; 
184 |         
185 | }
186 |    
187 |  
188 | function onKeyDown(event){
189 |     //this function fires when a key is pressed.
190 |     if (event.key =='w' ){
191 |         current_position.onkeydownNode('N');}
192 |     if (event.key =='a' ){
193 |         current_position.onkeydownNode('W');}
194 |     if (event.key == 'd'){
195 |         current_position.onkeydownNode('E');}
196 |     if (event.key == 's'){
197 |         current_position.onkeydownNode('S');}
198 |         
199 |     //if (event.key in oc(['enter', 'space']) ){
200 |        //will work if you set station urls. See the doc for SingleNode.
201 | 	//	window.location.href=current_position.url;
202 | 	//	}
203 | }
204 |  
205 | function onkeydownNode( keydown ){
206 |     for ( key in this.neighbours ){
207 |         if (key == keydown){
208 |             current_position.emptyNode();
209 |             current_position = this.neighbours[key];
210 |             current_position.fillNode();
211 |             }
212 |     }
213 |     return 0;
214 | 
215 | }
216 | 
217 | function fillNode(){
218 |     //this method fires when the user enters the node.
219 |     var c = new Path.Circle( this.position, CUR_NODE_SIZE);
220 |     c.fillColor = 'black';
221 | }
222 |     
223 | 
224 | 
225 | function emptyNode(){
226 |     //this function fires when the user leaves the node;
227 |     var c = new Path.Circle( this.position, NODE_SIZE);
228 |     c.fillColor = this.line.color;
229 |     var ic = new Path.Circle( this.position, INNER_NODE_SIZE);
230 |     ic.fillColor = 'white';
231 | }  
232 | 
233 | 
234 | 
235 | 	   
236 | function DashLine( color, point1, point2){
237 |     // This creates a dashed subway line to represent either construction or leaving the webpage.
238 |     //    color: the color of the dashed line.
239 |     //    point1, point2: the beginning and end of the dashed line, as paper.js Point objects. 
240 | 	this.color = color;
241 | 	this.path = new Path();
242 | 	this.path.style = { 
243 | 		strokeWidth: LINE_WIDTH,
244 | 		strokeColor: this.color,
245 | 		};
246 | 	this.path.dashArray = [7,4];
247 | 	
248 | 	this.path.add(point1, point2);
249 | 	}
250 | 
251 | 
252 | 
253 | 
254 | 
255 | function onMouseDown(event){
256 |     // This function fires whenever the mouse is pressed down. It iteratres through the stations and stops if it finds the 
257 |     // cursor is over a station.
258 | 	var N = nodes.length;
259 | 	for( var i=0; i<N; i++){
260 | 		var node_position = nodes[i].position;
261 | 		if (Path.Circle( node_position, NODE_SIZE ).bounds.contains(event.point) ){
262 | 			current_position.emptyNode();
263 | 			current_position = nodes[i];
264 | 			current_position.fillNode();
265 | 			break;
266 | 		}
267 | 	}
268 | }
269 | 
270 | function onFrame(event){
271 |     //This control the halo. You can choose to turn it off by removing this function, or you can create your own using 
272 |     //this function too.
273 | 	halo.strokeColor = current_position.line.color;
274 |     halo.scale( Math.pow( 1.05, Math.sin(event.count/4 )));
275 |     halo.position = current_position.position ;
276 | 
277 | 
278 | }
279 | 
280 | 
281 | 
282 | 
283 | 
284 | 
285 | 
286 | bloorLine = new Line( '#2C7212', 'Bloor Line');
287 | youngeLine = new Line( '#FCC61C', 'Younge Line');
288 | sheppardLine = new Line( 'rgb(151,69,120)', 'Sheppard Line'); 
289 | scarboroughLine = new Line('rgb(0,146,220)', 'Scarborough Line');
290 | 
291 | 
292 | d_bloor = Math.floor( 1700/28 );
293 | i_bloor = 20;
294 | bloor_height = 470 + 70;
295 | bloor_offset = new Point( 15, -12);
296 | bloor_offset_alt = new Point( 20, 8);
297 | bloor_name_angle = 35;
298 | 
299 | younge_offset = new Point( 22, 5 );
300 | younge_d = 50;
301 | younge_i = 30 + 70;
302 | younge_width = i_bloor + 13*d_bloor;
303 | young_d_alt = 44;
304 | // I think it would be useful to package the offset, angle etc. into a new object, so it can be passed around easier. 
305 | 
306 | downsview = new SingleNode( youngeLine, new Point(younge_width - 2*d_bloor+20, younge_i + 0*younge_d), null, 'Downsview','url', younge_offset, 0 );
307 | wilson = new SingleNode( youngeLine, new Point(younge_width -2*d_bloor+20, younge_i + 1*younge_d), null, 'Wilson','url', younge_offset, 0 );
308 | yorkdale = new SingleNode( youngeLine, new Point(younge_width- 2*d_bloor+20, younge_i + 2*younge_d), null, 'Yorkdale','url', younge_offset, 0 );
309 | lawrenceWest = new SingleNode( youngeLine, new Point(younge_width-2*d_bloor+20, younge_i + 3*younge_d), null, 'Lawrence West','url', younge_offset, 0 );
310 | glencairn = new SingleNode( youngeLine, new Point(younge_width-2*d_bloor+20, younge_i + 4*younge_d), null, 'Glencairn','url', younge_offset, 0 );
311 | eglingtonWest = new SingleNode( youngeLine, new Point(younge_width-2*d_bloor+20, younge_i + 5*younge_d), null, 'Eglington West','url', younge_offset, 0 );
312 | stClairWest = new SingleNode( youngeLine, new Point(younge_width-1*d_bloor+10, younge_i + 6*younge_d), null, 'St. Clair West','url', younge_offset, 0 );
313 | dupont = new SingleNode( youngeLine, new Point(younge_width, younge_i + 7*younge_d), null, 'Dupont','url', younge_offset, 0 );
314 | 
315 | 
316 | kipling = new SingleNode( bloorLine, new Point(i_bloor + 0*d_bloor, bloor_height) + new Point( 5, d_bloor-10 ), null, 'Kipling','url', bloor_offset_alt, 0 );
317 | islington = new SingleNode( bloorLine, new Point(i_bloor + 1*d_bloor, bloor_height), null, 'Islington','url', bloor_offset, bloor_name_angle );
318 | royalYork = new SingleNode( bloorLine,new Point(i_bloor + 2*d_bloor, bloor_height), null, 'Royal York','url', bloor_offset, bloor_name_angle );
319 | oldMill = new SingleNode( bloorLine, new Point(i_bloor + 3*d_bloor, bloor_height), null, 'Old Mill','url', bloor_offset, bloor_name_angle );
320 | runnymede = new SingleNode( bloorLine, new Point(i_bloor + 4*d_bloor, bloor_height), null, 'Runnymede','url', bloor_offset, bloor_name_angle );
321 | highPark = new SingleNode( bloorLine, new Point(i_bloor + 5*d_bloor, bloor_height), null, 'High Park','url', bloor_offset, bloor_name_angle );
322 | keele = new SingleNode( bloorLine, new Point(i_bloor + 6*d_bloor, bloor_height), null, 'Keele','url', bloor_offset, bloor_name_angle );
323 | dundasWest = new SingleNode( bloorLine, new Point(i_bloor + 7*d_bloor, bloor_height), null, 'Dundas West','url', bloor_offset, bloor_name_angle );
324 | lansdowne = new SingleNode( bloorLine, new Point(i_bloor + 8*d_bloor, bloor_height), null, 'Landsdowne','url', bloor_offset, bloor_name_angle );
325 | dufferin = new SingleNode( bloorLine, new Point(i_bloor + 9*d_bloor, bloor_height), null, 'Dufferin','url', bloor_offset, bloor_name_angle );
326 | ossington = new SingleNode( bloorLine, new Point(i_bloor + 10*d_bloor, bloor_height), null, 'Ossington','url', bloor_offset, bloor_name_angle );
327 | christie = new SingleNode( bloorLine, new Point(i_bloor + 11*d_bloor, bloor_height), null, 'Christie','url', bloor_offset, bloor_name_angle );
328 | bathurst = new SingleNode( bloorLine, new Point(i_bloor + 12*d_bloor, bloor_height), null, 'Bathurst','url', bloor_offset, bloor_name_angle );
329 | spadina = new TransitionNode(  bloorLine, youngeLine, 1.571, new Point(i_bloor + 13*d_bloor, bloor_height), null, 'Spadina','url', bloor_offset, bloor_name_angle );
330 | stGeorge = new TransitionNode( bloorLine, youngeLine, 1.571, new Point(i_bloor + 14*d_bloor, bloor_height), null, 'St. George','url', bloor_offset, bloor_name_angle );
331 |     
332 |     museum = new SingleNode( youngeLine, new Point(i_bloor + 14*d_bloor, younge_i + 10*younge_d), null, 'Museum','url', new Point(-80,5), 0 );
333 |     queensPark = new SingleNode( youngeLine, new Point(i_bloor + 14*d_bloor, younge_i + 11*younge_d), null, 'Queen\'s Park','url', new Point(-115,5), 0 );
334 |     stPatrick = new SingleNode( youngeLine, new Point(i_bloor + 14*d_bloor, younge_i + 12*younge_d), null, 'St. Patrick','url', new Point(-95,5), 0 );
335 |     osgoode = new SingleNode( youngeLine, new Point(i_bloor + 14*d_bloor, younge_i + 13*younge_d), null, 'Osgoode','url', new Point(-87,5), 0 );
336 |     stAndrew = new SingleNode( youngeLine, new Point(i_bloor + 14*d_bloor, younge_i + 14*younge_d), null, 'St. Andrews','url', new Point(-105,5), 0 );
337 |     union = new SingleNode( youngeLine, new Point(i_bloor + 15*d_bloor, younge_i + 15*younge_d - 20), null, 'Union','url', new Point(20, 15), 0 );
338 |     king = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 14*younge_d), null, 'King','url', younge_offset, 0 );
339 |     queen = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 13*younge_d), null, 'Queen','url', younge_offset, 0 );
340 |     dundas = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 12*younge_d), null, 'Dundas','url', younge_offset, 0 );
341 |     college = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 11*younge_d), null, 'College','url', younge_offset, 0 );
342 |     wellesley = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 10*younge_d), null, 'Wellesley','url', younge_offset, 0 );
343 | 
344 | bay = new SingleNode( bloorLine, new Point(i_bloor + 15*d_bloor, bloor_height), null, 'Bay','url', bloor_offset, bloor_name_angle );
345 |     
346 |     bloorYounge = new TransitionNode( bloorLine, youngeLine, 1.571, new Point(i_bloor + 16*d_bloor, bloor_height), null, 'Bloor/Younge','url', bloor_offset, bloor_name_angle );
347 | 
348 | sherbourne = new SingleNode( bloorLine, new Point(i_bloor + 17*d_bloor, bloor_height), null, 'Sherbourne','url', bloor_offset, bloor_name_angle );
349 | castleFrank = new SingleNode( bloorLine, new Point(i_bloor + 18*d_bloor, bloor_height), null, 'Castle frank','url', bloor_offset, bloor_name_angle);
350 | broadview = new SingleNode( bloorLine, new Point(i_bloor + 19*d_bloor, bloor_height), null, 'Broadview','url', bloor_offset, bloor_name_angle );
351 | chester = new SingleNode( bloorLine, new Point(i_bloor + 20*d_bloor, bloor_height), null, 'Chester','url', bloor_offset, bloor_name_angle );
352 | pape = new SingleNode( bloorLine, new Point(i_bloor + 21*d_bloor, bloor_height), null, 'Pape','url', bloor_offset, bloor_name_angle );
353 | donlands = new SingleNode( bloorLine, new Point(i_bloor + 22*d_bloor, bloor_height), null, 'Donlands','url', bloor_offset, bloor_name_angle );
354 | greenwood = new SingleNode( bloorLine, new Point(i_bloor + 23*d_bloor, bloor_height), null, 'Greenwood','url', bloor_offset, bloor_name_angle );
355 | coxwell = new SingleNode( bloorLine, new Point(i_bloor + 24*d_bloor, bloor_height), null, 'Coxwell','url', bloor_offset, bloor_name_angle );
356 | woodbine = new SingleNode( bloorLine, new Point(i_bloor + 25*d_bloor, bloor_height), null, 'Woodbine','url', bloor_offset, bloor_name_angle);
357 | mainStreet = new SingleNode( bloorLine, new Point(i_bloor + 26*d_bloor, bloor_height), null, 'Main Street','url', bloor_offset_alt, 0);
358 | victoriaPark = new SingleNode( bloorLine, new Point(i_bloor + 27*d_bloor, bloor_height) + new Point( -20, -d_bloor+10 ) , null, 'Victoria Park','url', bloor_offset_alt, 0);
359 | warden = new SingleNode( bloorLine, new Point(i_bloor + 28*d_bloor, bloor_height) + new Point( -2*20, -2*d_bloor+2*10 ), null, 'Warden','url', bloor_offset_alt, 0 );
360 | kennedy = new TransitionNode( bloorLine, scarboroughLine, -1.571, new Point(i_bloor + 29*d_bloor -3*20, bloor_height -3*d_bloor+3*10) , null, 'Kennedy','url', bloor_offset_alt ,0  );
361 | 
362 |     rosedale = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d + 0*young_d_alt), null, 'Rosedale','url', younge_offset, 0 );
363 |     summerhill = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d -1*young_d_alt), null, 'Summerhill','url', younge_offset, 0 );
364 |     stClair = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d-2*young_d_alt), null, 'St. Clair','url', younge_offset, 0 );
365 |     davisville = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d-3*young_d_alt), null, 'Davisville','url', younge_offset, 0 );
366 |     eglington = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d-4*young_d_alt), null, 'Eglington','url', younge_offset, 0 );
367 |     lawrence = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d-5*young_d_alt), null, 'Lawrence','url', younge_offset, 0 );
368 |     yorkMills = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d-6*young_d_alt), null, 'York Mills','url', younge_offset, 0 );
369 |     sheppardYounge = new TransitionNode( youngeLine, sheppardLine, 0, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d-7*young_d_alt), null, 'Sheppard-Younge','url', new Point(-150, 5), 0 );
370 |     northYorkCentre = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d-8*young_d_alt), null, 'North York Centre','url', younge_offset, 0 );
371 |     finch = new SingleNode( youngeLine, new Point(i_bloor + 16*d_bloor, younge_i + 6.5*younge_d-9*young_d_alt), null, 'Finch','url', younge_offset, 0 );
372 | 
373 | //purpz line
374 | shep_d = 60;
375 | shep_i = 90;
376 | bayview = new SingleNode( sheppardLine, new Point(i_bloor + 16*d_bloor + shep_i + 1*shep_d, younge_i + 6.5*younge_d-7*young_d_alt), null, 'Bayview','url', bloor_offset, bloor_name_angle );
377 | bessarion = new SingleNode( sheppardLine, new Point(i_bloor + 16*d_bloor + shep_i + 2*shep_d, younge_i + 6.5*younge_d-7*young_d_alt), null, 'Bessarion','url', bloor_offset, bloor_name_angle );
378 | leslie = new SingleNode( sheppardLine, new Point(i_bloor + 16*d_bloor + shep_i + 3*shep_d, younge_i + 6.5*younge_d-7*young_d_alt), null, 'Leslie','url', bloor_offset, bloor_name_angle );
379 | donMills = new SingleNode( sheppardLine, new Point(i_bloor + 16*d_bloor + shep_i +  4*shep_d, younge_i + 6.5*younge_d-7*young_d_alt), null, 'Don Mills','url', bloor_offset, bloor_name_angle );
380 | 
381 | 
382 | // bluez line
383 | lawrenceEast = new SingleNode( scarboroughLine, new Point(i_bloor + 29*d_bloor -3*20, bloor_height -3*d_bloor+15 - 1*60), null, 'Lawrence East','', bloor_offset_alt, 0);
384 | ellsemere = new SingleNode( scarboroughLine, new Point(i_bloor + 29*d_bloor -3*20, bloor_height -3*d_bloor+15 - 2*60), null, 'Ellsemere', '', bloor_offset_alt, 0);
385 | midland = new SingleNode( scarboroughLine, new Point(i_bloor + 29*d_bloor -3*20, bloor_height -3*d_bloor+15 - 3*60), null, 'Midland','', bloor_offset, bloor_name_angle);
386 | scarboroughCentre = new SingleNode( scarboroughLine, new Point(i_bloor + 29*d_bloor -3*20 + 50, bloor_height -3*d_bloor+15 - 3*60), null, 'Scarborough Centre', '', bloor_offset, bloor_name_angle);
387 | mcCowan = new SingleNode( scarboroughLine, new Point(i_bloor + 29*d_bloor -3*20 + 2*50, bloor_height -3*d_bloor+15 - 3*60), null, 'McCowan', '', bloor_offset, bloor_name_angle);
388 | 
389 |  
390 | 
391 | kipling.neighbours = {'N': islington, 'E': islington };
392 | islington.neighbours = {'W': kipling, 'E': royalYork, 'S':kipling };
393 | royalYork.neighbours = {'W': islington,'E':oldMill};
394 | oldMill.neighbours = {'W':royalYork, 'E':runnymede};
395 | runnymede.neighbours = {'W':oldMill, 'E':highPark};
396 | highPark.neighbours = {'W':runnymede, 'E':keele};
397 | keele.neighbours = {'W':highPark, 'E':dundasWest};
398 | dundasWest.neighbours = {'W':keele, 'E':lansdowne};
399 | lansdowne.neighbours = {'W':dundasWest, 'E':dufferin};
400 | dufferin.neighbours = {'W':lansdowne, 'E':ossington};
401 | ossington.neighbours = {'W':dufferin, 'E':christie};
402 | christie.neighbours = {'W':ossington, 'E':bathurst};
403 | bathurst.neighbours = {'W':christie, 'E':spadina};
404 | spadina.neighbours = {'W':bathurst, 'E':stGeorge, 'N':dupont, 'S':stGeorge};
405 | stGeorge.neighbours = {'W':spadina, 'E':bay, 'S':museum, 'N':spadina};
406 | bay.neighbours = {'W':stGeorge, 'E':bloorYounge};
407 | bloorYounge.neighbours = {'W':bay, 'E':sherbourne, 'N':rosedale, 'S':wellesley};
408 | sherbourne.neighbours = {'E':castleFrank, 'W':bloorYounge};
409 | castleFrank.neighbours = {'W':sherbourne, 'E':broadview};
410 | broadview.neighbours = {'W':castleFrank, 'E':chester};
411 | chester.neighbours = {'W':broadview, 'E':pape};
412 | pape.neighbours = {'W':chester, 'E':donlands};
413 | donlands.neighbours = {'W':pape, 'E':coxwell};
414 | coxwell.neighbours = {'W':donlands, 'E':woodbine};
415 | woodbine.neighbours = {'W':coxwell, 'E':mainStreet};
416 | mainStreet.neighbours = {'W':woodbine, 'E':victoriaPark, 'N':victoriaPark};
417 | victoriaPark.neighbours = {'W':mainStreet, 'E':warden, 'S':mainStreet, 'N':warden};
418 | warden.neighbours = {'W':victoriaPark, 'E':kennedy, 'S':victoriaPark, 'N':kennedy};
419 | kennedy.neighbours = {'W':warden, 'S':warden, 'N':lawrenceEast};
420 | lawrenceEast.neighbours = { 'S':kennedy, 'N':ellsemere};
421 | ellsemere.neighbours = { 'S':lawrenceEast, 'N':midland};
422 | midland.neighbours = { 'S':ellsemere, 'E':scarboroughCentre};
423 | scarboroughCentre.neighbours = { 'W':midland, 'E':mcCowan};
424 | mcCowan.neighbours = { 'W':scarboroughCentre};
425 | 
426 | 
427 | dupont.neighbours = {'S':spadina, 'N':stClairWest, 'W':stClairWest};
428 | stClairWest.neighbours = {'S':dupont, 'N':eglingtonWest, 'W':eglingtonWest, 'E':dupont};
429 | eglingtonWest.neighbours = {'E':stClairWest, 'S':stClairWest, 'N':glencairn};
430 | glencairn.neighbours = {'N':lawrenceWest, 'S':eglingtonWest};
431 | lawrenceWest.neighbours = {'N':yorkdale, 'S':glencairn};
432 | yorkdale.neighbours = {'N':wilson, 'S':lawrenceWest};
433 | wilson.neighbours = {'N':downsview, 'S':yorkdale};
434 | downsview.neighbours = {'S':wilson};
435 | 
436 | finch.neighbours = {'S':northYorkCentre};
437 | northYorkCentre.neighbours = {'S':sheppardYounge, 'N':finch };
438 | sheppardYounge.neighbours = {'S':yorkMills, 'N':northYorkCentre, 'E':bayview };
439 | yorkMills.neighbours = {'S':lawrence, 'N':sheppardYounge };
440 | lawrence.neighbours = {'S':eglington, 'N':yorkMills };
441 | eglington.neighbours = {'S':davisville, 'N':lawrence };
442 | davisville.neighbours = {'S':stClair, 'N':eglington };
443 | stClair.neighbours = {'S':summerhill, 'N':davisville };
444 | summerhill.neighbours = {'S':rosedale, 'N':stClair };
445 | rosedale.neighbours = {'S':bloorYounge, 'N':summerhill };
446 | 
447 | museum.neighbours = {'N':stGeorge, 'S':queensPark};
448 | queensPark.neighbours = {'N':museum, 'S':stPatrick};
449 | stPatrick.neighbours = {'N':queensPark, 'S':osgoode};
450 | osgoode.neighbours = {'N':stPatrick, 'S':stAndrew};
451 | stAndrew.neighbours = {'N':osgoode, 'S':union, 'E':union};
452 | king.neighbours = {'N':queen, 'S':union, 'W':union};
453 | union.neighbours = {'E':king, 'W':stAndrew};
454 | queen.neighbours = {'N':dundas, 'S':king};
455 | dundas.neighbours = {'N':college, 'S':queen};
456 | college.neighbours = {'N':wellesley, 'S':dundas};
457 | wellesley.neighbours = {'N':bloorYounge, 'S':college};
458 | 
459 | bayview.neighbours = {'W':sheppardYounge, 'E':bessarion};
460 | bessarion.neighbours = {'W':bayview, 'E':leslie};
461 | leslie.neighbours = {'W':bessarion, 'E':donMills};
462 | donMills.neighbours = {'W':leslie};
463 | 
464 | 
465 | 
466 | 
467 |     
468 | // initialize myself.
469 | current_position = stGeorge;
470 | current_position.fillNode();
471 | 
472 | // form the halo
473 | halo = new Path.Circle( current_position.position, NODE_SIZE  );
474 | halo.strokeColor = current_position.line.color;
475 | halo.strokeWidth = 3;


--------------------------------------------------------------------------------
/initialization_example.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Paper.js does ot operate across different javascript files yet, so your initialization or subways stations needs to be done in the subway.js file.\
 3 | // I've seperated the two purely for asthetics.
 4 | 
 5 | 
 6 |  
 7 | // initialize some subway lines
 8 | MainLine = new Line( '#af1b8b', 'Main'); // (color, name)
 9 | BlogLine = new Line( '#b3d529', 'Blogs');
10 | ProjectsLine = new Line('#ababab', 'Projects');
11 | 
12 | 
13 | // initalize the subway stations. Note the <i>order</i> of the initilization is important. The subway line will be drawn in order of how they are added
14 | // to the Lines object. Note that I have left the "neighbours" parameter empty for now. They will be initilized later. 
15 | 
16 | homeNode = new SingleNode( MainLine, new Point(30, 100), null, 'Home','http://www.70percentfatfree.com',new Point( 12, -14) );
17 | gitNode = new SingleNode(ProjectsLine,  new Point( 182, 100), null, 'GitHub','https://github.com/Valloway',new Point( 19, 0));
18 | 
19 |     projectsNode = new TransitionNode( MainLine, ProjectsLine, 0.79, new Point( 182, Main_height), null, 'Projects', 'http://www.70percentfatfree.com/Projects.html', new Point( 12, -14));
20 |     pyProcessNode = new SingleNode( ProjectsLine, new Point( 182+diff, Main_height+diff), null, 'PyProcess Library', 'http://pyprocess.70percentfatfree.com/', new Point( 19, 0));
21 |     moreProjectsNode = new SingleNode( ProjectsLine, new Point(100, 200), null, 'More Projects','/', new Point( 12, -14));
22 | 
23 | researchNode = new SingleNode( MainLine, new Point( 334, Main_height), null, 'Research', 'http://www.70percentfatfree.com/Research.html', new Point( 12, -14));
24 | 
25 |     blogNode = new TransitionNode( MainLine, BlogLine, -0.79, new Point( 486, Main_height), null, 'Blogs', '/blogs', new Point( 18, 26) ) ;
26 |     latestBlogNode = new SingleNode( BlogLine, new Point( 486 + 70, 40), null, 'Latest Blog', '/', new Point( 13, -14));
27 |     allBlogsNode = new SingleNode( BlogLine, new Point( 690, 40), null,'All Blogs', '/blogs', new Point( 13, -14));
28 | 
29 | resumeNode = new SingleNode( MainLine, new Point(640, Main_height), null, 'Resume', '/mediaFiles/PDFs/Resume.pdf',new Point( 12, -14));
30 | 
31 | 
32 | //populuate neighbours. This is how the stations are mapped to the keyboard.
33 | homeNode.neighbours = {'E':projectsNode};
34 | projectsNode.neighbours = {'W':homeNode, 'N':gitNode, 'E':researchNode, 'S': pyProcessNode};
35 | researchNode.neighbours = {'E':blogNode, 'W':projectsNode};
36 | blogNode.neighbours = {'W': researchNode, 'E':resumeNode, 'N':latestBlogNode };
37 | gitNode.neighbours = {'S': projectsNode, 'E':projectsNode};
38 | resumeNode.neighbours = {'W':blogNode, 'E':twNode, 'S':twNode };
39 | latestBlogNode.neighbours = {'S': blogNode, 'E': allBlogsNode};
40 | allBlogsNode.neighbours = {'S': latestBlogNode, 'W':latestBlogNode };
41 | pyProcessNode.neighbours = {'N':projectsNode, 'W':projectsNode };
42 | moreProjectsNode.neighbours = {'N':projectsNode};
43 | 
44 | // initialize myself.
45 | current_position = homeNode;
46 | current_position.fillNode();
47 | 
48 | // form the halo around the current position
49 | halo = new Path.Circle( current_position.position, NODE_SIZE  );
50 | halo.strokeColor = current_position.line.color;
51 | halo.strokeWidth = 3;
52 | 
53 | 
54 | // Some asthetics. 
55 | 
56 | //construct same dashed paths.
57 | var blogconstructionpath = new DashLine( BlogLine.color, allBlogsNode.position + new Point(14,0), allBlogsNode.position + new Point(100, 0) );
58 | var projectsconstructionpath = new DashLine( ProjectsLine.color, moreProjectsNode.position + new Point(14,0), moreProjectsNode.position + new Point(110, 0) );
59 | 
60 | //create a legend
61 | var p = new Point(20, 140)
62 | var lgnt = new Point(60,0); //these makes the lines uniformly spread out and even.
63 | var btw = new Point(0,25);
64 | 
65 | var key = new LegendItem( p, p + lgnt, MainLine );
66 | var key = new LegendItem( p + btw, p + btw + lgnt, BlogLine );
67 | var key = new LegendItem( p + btw+btw, p + btw+btw + lgnt, ProjectsLine );
68 | 
69 | 
70 | // create a title
71 | var title = new PointText( new Point(20,55) );
72 | title.content = "Metro";
73 | title.characterStyle = {
74 | 		fillColor: 'black',
75 | 		fontSize: 28,
76 |         font: TEXT_FONT
77 | 		}; 
78 | 		
79 | 


--------------------------------------------------------------------------------
/subway.js:
--------------------------------------------------------------------------------
  1 | 
  2 | //subway.js
  3 | // Author: Cameron Davidson-Pilon
  4 | // Date: July, 2012
  5 | // License: MIT
  6 | 
  7 | 
  8 | // Dependencies: 
  9 | //  Paper.js (http://paperjs.org/)
 10 | 
 11 | 
 12 | 
 13 | 
 14 | 
 15 | // These change the subway node design. Try manipulating them to see what they do.
 16 | // Note: all measurments are in pixels.
 17 | 
 18 | var NODE_SIZE = 16; //radius of the nodes
 19 | var INNER_NODE_SIZE = 7; //radius of the inner circle in the stations
 20 | var CUR_NODE_SIZE = 9; // radious of the inner cicle, if is is currently selected.
 21 | var LINE_WIDTH = 23; //width of the inter-station lines.
 22 | 
 23 | // fonts
 24 | var FONT_SIZE = 16;
 25 | var TEXT_FONT = 'Arial';
 26 | var FONT_COLOR = 'black';
 27 | 
 28 | var CHARACTER_STYLE = {
 29 | 		fillColor: FONT_COLOR,
 30 | 		fontSize: FONT_SIZE,
 31 |         font: TEXT_FONT,
 32 | 		};
 33 |         
 34 | var nodes = []; // after initilization, this variable will contain all stations. Needed for clicking stations with mouse. 
 35 | var shiftDown = 0; //This is used in controlling the location with the keys. It is a boolean representing whether the 
 36 |                    // shift key is currently pressed down. 
 37 | 
 38 | function Line( color, name ){
 39 |     // the Line object creates a subway line. 
 40 |     //   color: must be a paper.js RgbColor or a keyword color, eg: 'black', 'green'.
 41 |     //   name: the unique name of the line. 
 42 | 
 43 |     this['color'] = color;
 44 |     this['path'] = new Path();
 45 |     this['path'].strokeWidth = LINE_WIDTH;
 46 |     this['path'].strokeColor = this['color'];
 47 |     this['name'] = name;
 48 | 	
 49 | }
 50 | 	
 51 | 	
 52 | 		
 53 | function SingleNode( line, position, neighbours, name, url, name_offset, name_angle){
 54 |     // the Node object is a non transitionay subway stop
 55 |     //      line: the line the node lies on.
 56 |     //      position: the coordinates on the canvas as Point class object.
 57 |     //      neighbours: the neighbours of the node.  It 
 58 |     //          must be the syntax {'E':Neighbour1, 'W':Neighbour2, etc.}. Note: this way we can also do things like:
 59 |     //          {'W': Neighbour1, 'S': Neighbour1, 'E': Neighbour2}. Note all the directions need to be defined.
 60 |     //      name: the station name to be displayed.
 61 |     //      url: the url to go to if the SpaceBar is pressed. Leave as '' if not wanted.
 62 |     //      name_offset: the amount to move the display named away from the center of the station. It must be a paper.js Point
 63 |     //                   object. ie. new Point( 10, 10) will position the top left corner of the text 10 pixels right and 
 64 |     //                  10 pixels below the center of the station.
 65 |     //      name_angle: the angle the name to be at. Enter it in counterclockwise radians.
 66 |     
 67 |     this['line'] = line;
 68 |     this['position'] = position;
 69 | 	this['name'] = name;
 70 | 	this['url'] = url;
 71 |     this['name_angle'] = name_angle;
 72 |     this['neighbours'] = neighbours;
 73 | 	nodes.push(this)
 74 |     
 75 |     //Methods
 76 |     this.onkeydownNode = onkeydownNode; //this controls the movement if keys are pressed.
 77 |     this.fillNode = function(){
 78 |             //this method fires when the user enters the node.
 79 |             this.ic.fillColor = 'black';
 80 |     }; 
 81 |     this.emptyNode = function(){
 82 |             //this method fires when the user enters the node.
 83 |             this.ic.fillColor = 'white';
 84 |     };
 85 | 
 86 |     
 87 |     // generate the visual shapes.
 88 |     var c = new Path.Circle( this['position'], NODE_SIZE);
 89 |     c.fillColor = this['line']['color'];
 90 |     var ic = new Path.Circle( this['position'], INNER_NODE_SIZE+2);
 91 |     ic.fillColor = 'black';
 92 |     
 93 |     this.ic = new Path.Circle( this['position'], INNER_NODE_SIZE);
 94 |     this.ic.fillColor = 'white';
 95 | 	
 96 | 	this['text'] = new PointText( this['position'] + name_offset );
 97 | 	this['text'].content = this['name'];
 98 |     this['text'].characterStyle = CHARACTER_STYLE;
 99 |     this['text'].rotate( -this['name_angle'], this['position'] );
100 | 
101 | 	
102 |     // add it to the line.
103 |     this['line']['path'].add( this['position'] );
104 |     
105 |     }
106 |     
107 | function TransitionNode( line, line2, angle, position, neighbours, name, url,name_offset, name_angle){
108 |     // the Node object is a non transitionay subway stop
109 |     //      line: the primary line the node lies on.
110 |     //      line2: the secondary line the node lies on.
111 |     //      angle: the angle of the above and underneath node. Equal to the angle of the two lines.
112 |     //      position: the coordinates on the canvas as Point class object.
113 |     //      neighbours: the neighbours of the node.  It 
114 |     //          must be the syntax {'E':Neighbour1, 'W':Neighbour2, etc.}. Note: this way we can also do things like:
115 |     //          {'W': Neighbour1, 'S': Neighbour1, 'E': Neighbour2}. Note all the directions need to be defined.
116 |     //      name: the station name to be displayed.
117 |     //      url: the url to go to if the SpaceBar is pressed. Leave as '' if not wanted.
118 |     //      name_offset: the amount to move the display named away from the center of the station. It must be a paper.js Point
119 |     //                   object. ie. new Point( 10, 10) will position the top left corner of the text 10 pixels right and 
120 |     //                  10 pixels below the center of the station.
121 |     //      name_angle: the angle the name to be at. Enter it in counterclockwise radians.
122 | 
123 |     
124 | 	var STROKE_WIDTH = 2; //this two control the offset and appearance of the 'underneath node'
125 | 	var CIRCLE_DIST = 16;
126 | 	
127 | 	
128 | 	//This Node is the class for line transition stations.
129 | 	this['line'] = line;
130 | 	this['line2'] = line2;
131 | 	this['position'] = position; //This is the position of either of the circles. The angle determines the position of the other one.
132 | 	this['neighbours'] = neighbours;
133 | 	this['angle'] = angle; //This is the angle between the two circles.
134 | 	this['positionAlt'] = this['position'] + new Point( CIRCLE_DIST*Math.cos( angle), CIRCLE_DIST*Math.sin( angle)  );
135 | 	this['name'] = name;
136 | 	this['url'] = url;
137 | 	nodes.push(this);
138 | 	
139 | 	//Methods;
140 | 	this.onkeydownNode = onkeydownNode;
141 | 	this.emptyNode = function(){
142 | 			this.innerc.fillColor = this['path']['color'];
143 | 	}
144 | 	this.fillNode = function(){
145 | 			this.innerc.fillColor = 'black';
146 | 	} 
147 | 	
148 |     // Title to display.
149 | 	this['text'] = new PointText( this['position'] + name_offset );
150 | 	this['text'].content = this['name'];
151 |     this['text'].characterStyle = CHARACTER_STYLE;
152 |     this['text'].rotate( -name_angle, this.position);
153 | 	
154 | 	//generate visual shapes
155 | 	var c2 = new Path.Circle( this.positionAlt , NODE_SIZE);
156 | 	c2.strokeWidth = STROKE_WIDTH;
157 | 	c2.strokeColor = 'black';
158 | 	c2.fillColor = 'white';
159 | 	var c2 = new Path.Circle( this.positionAlt, CUR_NODE_SIZE+1);
160 | 	c2.fillColor = this.line2.color;
161 | 	
162 | 	var c1 = new Path.Circle( this.position, NODE_SIZE);
163 | 	c1.strokeWidth = STROKE_WIDTH;
164 | 	c1.fillColor = 'white';
165 | 	c1.strokeColor = 'black';
166 | 	this.innerc = new Path.Circle( this.position, CUR_NODE_SIZE);
167 | 	this.innerc.fillColor = this.line.color;
168 | 	
169 | 
170 | 	//add it the the lines.
171 | 	this['line'].path.add( this['position']);
172 | 	this['line2'].path.add(this['positionAlt']);
173 | 	
174 | 	
175 | 	}
176 |     
177 | function LegendItem( start, end, subwayLine ){
178 |     
179 |      this['line'] = new Line(subwayLine['color'], subwayLine['name']);
180 |      this['line']['path'].add( start, end)
181 |      var title = new PointText( end + new Point( 7,5) );
182 |      title.content = subwayLine.name;
183 |      title.characterStyle = {
184 | 		fillColor: 'black',
185 | 		fontSize: 14,
186 |         font: TEXT_FONT
187 | 		}; 
188 |         
189 | }
190 |    
191 |  
192 | function onKeyDown(event){
193 |     var key = event.key;
194 |     if ((key=="up" && shiftDown) || (key=="w" ) ){
195 |         current_position.onkeydownNode('N');}
196 |     else if ((key=="left" && shiftDown) || (key=="a" ) ){
197 |         current_position.onkeydownNode('W');}
198 |     else if ((key=="right" && shiftDown) || (key=="d" ) ){
199 |         current_position.onkeydownNode('E');}
200 |     else if ((key=="down" && shiftDown) || (key=="s" ) ){
201 |         current_position.onkeydownNode('S');}
202 |     //else if (key in oc(['enter', 'space']) ){
203 | 	//	window.location.href=current_position.url;}
204 |     else if (key=="shift"){
205 |         shiftDown=1;}
206 | }
207 | 
208 | function onKeyUp(event){
209 |     if (event.key == "shift"){
210 |         shiftDown=0;
211 |         }
212 | }
213 | 
214 |  
215 | function onkeydownNode( keydown, node ){
216 |     for ( key in this['neighbours'] ){
217 |         if (key == keydown){
218 |             current_position.emptyNode();
219 |             current_position = this['neighbours'][key];
220 |             current_position.fillNode();
221 |             }
222 |     }
223 |     return;
224 | }
225 | 
226 | 
227 | 
228 | 
229 | 	   
230 | function DashLine( color, point1, point2){
231 |     // This creates a dashed subway line to represent either construction or leaving the webpage.
232 |     //    color: the color of the dashed line.
233 |     //    point1, point2: the beginning and end of the dashed line, as paper.js Point objects. 
234 | 	this.color = color;
235 | 	this.path = new Path();
236 | 	this.path.style = { 
237 | 		strokeWidth: LINE_WIDTH,
238 | 		strokeColor: this.color,
239 | 		};
240 | 	this.path.dashArray = [7,4];
241 | 	
242 | 	this.path.add(point1, point2);
243 | 	}
244 | 
245 | 
246 | 
247 | 
248 | 
249 | function onMouseDown(event){
250 |     // This function fires whenever the mouse is pressed down. It iteratres through the stations and stops if it finds the 
251 |     // cursor is over a station.
252 | 	var N = nodes.length;
253 |     var point = event.point;
254 | 	for( var i=0; i<N; i++){
255 | 		var node_position = nodes[i].position;
256 | 		if (Path.Circle( node_position, NODE_SIZE ).bounds.contains(point) ){
257 | 			current_position.emptyNode();
258 | 			current_position = nodes[i];
259 | 			current_position.fillNode();
260 | 			break;
261 | 		}
262 | 	}
263 | }
264 | 
265 | function onFrame(event){
266 |     //This control the halo. You can choose to turn it off by removing this function, or you can create your own using 
267 |     //this function too.
268 | 	halo.strokeColor = current_position['line']['color'];
269 |     halo.scale( Math.pow( 1.04, Math.sin(event.count/8 )));
270 |     halo.position = current_position['position'];
271 |     
272 |     //test how long it takes to compute sin(x) for different values of x.
273 | 
274 | }
275 | 
276 | var shiftDown = 0;
277 | 
278 | 
279 | 


--------------------------------------------------------------------------------