York Underground Map

Design Guidelines

Your map should follow the design detailed in

https://content.tfl.gov.uk/tfl-line-diagram-standard.pdf

library.js

The constant x defines the width of the lines.

The class Line is used to draw lines.

const line = new Line(colour, startX, startY, startDirection);

The startDirection is one of eight compass points

const northDeg = 0;
const northEastDeg = 45;
const eastDeg = 90;
const southEastDeg = 135;
const southDeg = 180;
const southWestDeg = 225;
const westDeg = 270;
const northWestDeg = 315;

The goForward(distance) function will then draw a line in the current direction.

Note, the distance is the displacement in the x and/or y axis, not the length of the line.

i.e. If you are at 10, 50 and are heading north west. Then GoForward(10) will move you to 20, 40

The other available funtion is Turn(LeftOrRight, Direction)

LeftOrRight accepts

const TurnRight = "TurnRight";
const TurnLeft = "TurnLeft";

and the direction must be either 45 or 90.

Other functions in library.js are

• drawText (Draws text to the screen in the correct font)
• drawStation (Draws the small square representing a station)
• drawInterchange (Draws the circle indicating that lines arrive on different platforms)
• drawDumbbell (Draws the two linked circles indicating a walk between the lines)

utils.js

Extends library.js with some helper function to aid with the positioning of stations and their labels.

gallery.js

Showcase of the functions provided.

Exercise 1

• Open index.html in your browser. The gallery should be displayed.

• Change index.html to display solution.js rather than gallery.js

• Put code into solution.js which displays a horizontal line, with a couple of labelled stations and a station at the start and end of the line.

Exercise 2

For the rest of the evening you have a choice!

Option 1

Design and draw out a map of the York underground. The number of lines and stations used are up to you. Feel free to add other features (such as links to National Rail) which are detailed in the design document. (Pull requests back to library.js are greatfully received)

Option 2 (Harder)

Write a program which picks stations and lines at random, so each time your program runs you get a different map.

There were a couple of different approaches I thought about.

1. Place the stations at random first. Then draw lines which pick the next sensible station at random. Only then display the stations which have been reached by a line.

or

2. Draw random lines first, and then add stations at random to the lines.