Javascript
Monokai
14

Code visualizer

/* /* Minesweeper
This algorithm recibes an 2 dimensional array with 0's and 1's representing
the position of the bombs, then creates a 2 dimensional array with the
classic minesweeper layout, with the amount of bobms aroud each cell.
*/
const records = new AlgorithmCanvas();
const bombMatrix = new Array2D(
[
[1, 0, 1],
[0, 1, 0],
[1, 0, 1],
],
"Bombs position"
);
const mines = new Array2D([[]], "Map layout");
records.watch(bombMatrix, mines);
const isValidPos = (x, y, limX, limY) => {
return x >= 0 && y >= 0 && x < limX && y < limY;
};
const xMov = [0, 1, 1, 1, 0, -1, -1, -1];
const yMov = [-1, -1, 0, 1, 1, 1, 0, -1];
const minesweeper = (matrix) => {
let bombs = matrix.map((a) => a.map((e) => 0));
mines.update(bombs);
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[0].length; j++) {
mines.selectFixed([i, j]);
bombMatrix.selectFixed([i, j]);
records.draw();
for (let mov = 0; mov < 9; mov++) {
let posX = j + xMov[mov];
let posY = i + yMov[mov];
if (isValidPos(posX, posY, matrix[0].length, matrix.length)) {
bombMatrix.select([posY, posX], "rgba(20,100,200,.5");
records.draw();
if (matrix[posY][posX] === 1) {
bombs[i][j]++;
mines.select([i, j], "rgba(200,100,50,1");
bombMatrix.select([posY, posX], "rgba(200,100,50,1");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
01/70
Speed
-500
-300
-20

Bombs position

012
0101
1010
2101

Map layout

012
0000
1000
2000

Code visualizer

Code visualizer improve algorithms and data structures understanding with visualization of data structures with minimum change to the code. Write an algorithm, add some lines of code and you're ready to go.
Code visualizer is an open source project, anyone can contribute writing an algorithm, fixing bugs or improving the application, you just need a github account.

How it works

There are three main aspects in code visulizer, the Algorithm canvas, the Strutures and the Selections.
The algorithm canvas is an object that is in charge to draw content on the visualizer, i will recibe a structure and watch for changes.
There are multiple data structures in code visualizer, first we have the array in one dimension or two dimensions, to create an structure you just need to create a new instance of the requested class, then you give it an inivial value and a name.

const canvas = new AlgorithmCanvas();
const myArray = new Array1D([1,2,3], 'How it works');
canvas.watch(myArray);
canvas.draw();
myArray.update([1,2,3,4]);
canvas.draw();
canvas.end();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

When you are done writing your code and drawing to the canvas you can build it to visualizer in the visualizator, just click on the wrench icon to build it, if everything goes correctly you will see your structures in the visualizator.
In the top part you will see the controls, how many steps you code generated and modify the speed that it's reproduced

1/2
Speed
-500
-300
-20

How it works

012
0 1 2 3

Selections

Visualizing data structure is not enough to undertand what an algorithm is doing, to improve the experience you can select some elements in the data structure, for example lets say that you want to iterate through each one of the elements on the array and show to the user where you are in determinated step, you can highligt the elements with the select method on the structure.
Here is an example.

const canvas = new AlgorithmCanvas();
const myArray = new Array1D([1,2,3,4], 'Selections');
canvas.watch(myArray);
canvas.draw();
for(let i = 0; i < 4; i++){
myArray.select(i);
canvas.draw();
}
canvas.end();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1/5
Speed
-500
-300
-20

Selections

0123
0 1 2 3 4

If you didn't notice the selection have a default style, wich is a lighter background, but if you want multiple selections with different colors you need something more advaned, you can pass as second argument the background color of the element and as third argument the color of the font.
This code iterate through the array and then select the highest among all with red and the the minimum with blue.

const canvas = new AlgorithmCanvas();
const arrayStructure = new Array1D([], 'Selections');
canvas.watch(arrayStructure);
const elements = [3,6,4,1,2,-1];
arrayStructure.update(elements);
canvas.draw();
let minIndex = 0, maxIndex = 0;
for(let i = 0; i < elements.length; i++){
arrayStructure.select(i);
if(elements[i] < elements[minIndex]){
minIndex = i;
}
if(elements[i] > elements[maxIndex]){
maxIndex = i;
}
canvas.draw();
}
arrayStructure.select(minIndex, '#00f');
arrayStructure.select(maxIndex, '#f00');
canvas.draw();
canvas.end();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
0/0
Speed
-500
-300
-20