Scene in the Coding Environment

Summary:

When running programs created in the Inclusive Coding Environment, I would like to see the results of my program displayed on the screen.

The scene is a large area that shows the robot that is involved in the program.

There are 3 buttons, a play/pause, a step and a restart.

The robot starts in the centre of the scene and moves on the scene synchronously with the program execution/highlighting.

The robot leaves a trace on the scene based on the pen down toggle.

Fixed number of columns and rows (9x5 in this iteration of the design)
As the browser window size is changed, the number of grid cells stays constant, and the grid cells stay square
The aspect ratio of the grid stays constant
As the width of the browser is changed, the height of the scene is adjusted appropriately to maintain the aspect ratio
In the future the number of rows and columns will be editable