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.

Figma Designs

Details:

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

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

Notes and Examples:

The Scene Grid

• 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