Convert complex data into visuals
Let's say we have a collection of two-dimensional arrays:
var hallwayOrWall =[ // 1=hallway (black), 0=wall (blue) rows: 0-30, columns: 0-27
// [0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6], index of column numbers to help with data entry
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], // row 0
[1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1], // row 1
[0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0], // row 2
[0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0], // row 3
[0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0], // row 4
[0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0], // row 5
[0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0], // row 6
[0,1,0,0,1,1,1,1,1,1,0,0,1,0,0,1,0,0,1,1,1,1,1,1,0,0,1,0], // row 7
[0,1,0,0,1,0,0,0,0,1,0,0,1,1,1,1,0,0,1,0,0,0,0,1,0,0,1,0], // row 8
[0,1,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,1,0], // row 9
[0,1,1,1,1,1,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,1,1,1,1,1,0], // row 10
[0,0,0,0,0,0,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,0,0,0,0,0,0], // row 11
[0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0], // row 12
[0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0], // row 13
[0,1,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,1,0], // row 14
[0,1,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,1,0], // row 15
[0,1,1,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,1,1,0], // row 16
[0,0,0,1,0,0,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,0,0,1,0,0,0], // row 17
[0,0,0,1,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,0,0], // row 18
[0,0,0,1,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,0,0], // row 19
[0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0], // row 20
[0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0], // row 21
[0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0], // row 22
[1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1], // row 23
[0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0], // row 24
[0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0], // row 25
[0,1,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1,1,0], // row 26
[0,1,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0], // row 27
[0,1,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0], // row 28
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], // row 29
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] // row 30
];
var hasADot =[ // 1=dot, 0=nodot rows: 0-30, columns: 0-27
// [0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6], index of column numbers to help with data entry
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], // row 0
[0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0], // row 1
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0], // row 2
[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0], // row 3
[0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0], // row 4
[0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0], // row 5
[0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0], // row 6
[0,1,0,0,1,1,1,1,1,1,0,0,1,0,0,1,0,0,1,1,1,1,1,1,0,0,1,0], // row 7
[0,1,0,0,1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,1,0,0,1,0], // row 8
[0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0], // row 9
[0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0], // row 10
[0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0], // row 11
[0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0], // row 12
[0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0], // row 13
[0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0], // row 14
[0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0], // row 15
[0,1,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,1,1,0], // row 16
[0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0], // row 17
[0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0], // row 18
[0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0], // row 19
[0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0], // row 20
[0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0], // row 21
[0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0], // row 22
[0,0,0,1,1,1,1,0,0,1,1,1,0,0,0,0,1,1,1,0,0,0,1,1,1,0,0,0], // row 23
[0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0], // row 24
[0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0], // row 25
[0,0,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1,0,0], // row 26
[0,1,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0], // row 27
[0,1,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0], // row 28
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], // row 29
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] // row 30
];
var hasAPowerPill =[ // 1=power pill, 0=no power pill rows: 0-30, columns: 0-27
// [0123456789012345678901234567], index of column numbers to help with data entry
// sometimes typing commas gets old, so I am using .split('') instead...
// .split('') separates a string into an array one character at a time
"0000000000000000000000000000".split(''), // row 0
"0000000000000000000000000000".split(''), // row 1
"0000000000000000000000000000".split(''), // row 2
"0000000000000000000000000000".split(''), // row 3
"0100000000000000000000000010".split(''), // row 4
"0000000000000000000000000000".split(''), // row 5
"0000000000000000000000000000".split(''), // row 6
"0000000000000000000000000000".split(''), // row 7
"0000000000000000000000000000".split(''), // row 8
"0000000000000000000000000000".split(''), // row 9
"0000000000000000000000000000".split(''), // row 10
"0000000000000000000000000000".split(''), // row 11
"0000000000000000000000000000".split(''), // row 12
"0000000000000000000000000000".split(''), // row 13
"0000000000000000000000000000".split(''), // row 14
"0000000000000000000000000000".split(''), // row 15
"0000000000000000000000000000".split(''), // row 16
"0000000000000000000000000000".split(''), // row 17
"0000000000000000000000000000".split(''), // row 18
"0000000000000000000000000000".split(''), // row 19
"0000000000000000000000000000".split(''), // row 20
"0000000000000000000000000000".split(''), // row 21
"0000000000000000000000000000".split(''), // row 22
"0000000000000000000000000000".split(''), // row 23
"0000000000000000000000000000".split(''), // row 24
"0000000000000000000000000000".split(''), // row 25
"0100000000000000000000000010".split(''), // row 26
"0000000000000000000000000000".split(''), // row 27
"0000000000000000000000000000".split(''), // row 28
"0000000000000000000000000000".split(''), // row 28
"0000000000000000000000000000".split('') // row 30
];
Then we can group them into a single object that we can use in a pipeline
var mazeObject ={
hallOrWall: hallwayOrWall,
dot: hasADot,
pill: hasAPowerPill
};
We can process this information and display it as a map:
Saving your work
Download the template
and rename it to your last name, such as "1.27H-DrawMsPacmanMaze-LastName.html".
The assignment
Use function pipelines and complex data structures to initialize information about a map, process it into HTML, and then display it.
You can create your own map if you wish.
Recommended procedure
- Read over Complex data structures and Draw a maze again
- Plan your separate functions input, process, and output functions.
-
Plan your function pipeline. Consider using:
initMazeObject() return mazeObject ⇓ createHtmlTableFromMazeObject(mazeObject) return htmlTable ⇓ outputTableInformation(htmlTable) - You may also want a function that acts according to whether a cell has a dot or power pill in it
-
Create your functions empty at first with only the input parameters and return variables, like this:
function someKindOfFunction (inputVariable) {
console.log('in someKindOfFunction, inputVariable=' + inputVariable);
var outputVariable;
return outputVariable;
}
- Fill in the actual working code of the functions last of all, testing as you go.
Evaluation (out of 10)
- ___/2 — Well-modularized code into separate input/processing/output functions
- ___/2 — Successful use of objects, arrays, and complex data structures
- ___/1 — Successful use of function pipelines
- ___/2 — Successful output of the map in HTML
- ___/3 — Well-commented code with good indentation, commenting (including "INIT:", ...), and style