PhET Energy Skatepark Free Form Track Construction

Owned by Jonathan Hung
Last updated: Jun 22, 2017
5 min read

Introduction

This is a working document intended to track design issues and possible solutions related to free form track construction for the PhET Energy Skatepark sim.

The Goal

Design an inclusive experience for Energy Skatepark track construction that allows the user to create tracks of any arbitrary shape.

Challenges

  • How would you describe any arbitrary track programmatically?
  • When constructing a track, how would you orient a non-visual user?
  • What would keyboard access be like?











Keyboard Track Construction: Point by point

This interaction is similar to connect-the-dots, with a curve connecting the dots. Similar to the bezier curve tool in Adobe Illustrator.

  1. Place your first point.
  2. Place your second point.
  3. This results in a straight line joining points 1 and 2.
  4. Place a 3rd point - this creates a curve joining the 3 points.
  5. Place a 4th point, this creates a curve joining the 4 points.
  6. etc.

Brainstorming keyboard interaction with text descriptions:

  • User places track points one by one.
  • Grid system is used for moving point around
  • Position of points described by its relative position to the middle of the play area point.
ActionVisual ResultFeedback (Textual and auditory)


Tab to track toolTrack builder tool highlighted"Track construction tool"
Enter
  • Tool becomes activated
  • A grid appears over the play area
  • Construction cursor appears in the middle point in grid
  • "Track construction tool activated."
  • Help text - "You choose locations for track points, and a track is automatically created to connect the points you chose."
  • "Current location is in the middle of the play area."
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Enter
  • Point is placed the middle.
  • "Track point 1 placed in the middle"
  • If the user had moved cursor away from the middle, "Track point placed 2 meters left, and 1 meter above the middle".
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Left arrow
  • Cursor moves left 1 spot
  • Current location is 1 meter left of the middle.
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Left-arrow,Left-arrow, Up-arrow, Up-arrow
  • Cursor moves 2 left and 2 up.
  • Current location is 3 meters left and 2 meters above the middle.
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Enter
  • Point is placed
  • "Track point 2 placed 3 meters left and 2 meters above the middle."
  • "A track has been created sloping upward from the top-right to the middle of the play area. <play sonification of track shape>"
  • "Use arrow keys to change position. Press Enter to place a track point. Press Esc to stop track construction."

Right, right, up, up, Enter
  • point is placed
TODO

The above track isn't right. The shape of the previous track sections shouldn't change after the user has moved on to other parts of the track.

Reshaping a Track During Construction

ActionVisual ResultTextual / Auditory FeedbackMockup
User starts the track construction tool

User presses Enter to place a track point.

User presses up.

User presses up then left twice.

User presses enter.

User presses down

User presses down

User presses right

User presses up

User presses Enter


Design Issues / Questions

How do you allow construction of different track shapes?

  • Example: the following diagram shows the possible basic track shapes connecting 3 points. How do we allow the user to choose the shape they want?

  • One possible idea is to give user the option to choose a basic shape during construction (i.e. after they place the 2nd point, they can then choose the shape from a menu)
  • Another idea is to allow them to choose track sections later and change the shape either by choosing from options, or manually changing it shape using controls (i.e. by dragging / cursor keys to reshape)

Sonifying the track:

  • Position left / right
  • Height
  • Magnitude (steep, gentle, etc.)
  • Track points (the red nodes)
  • Start, end of track
  • If the skater is moving across the track, will it just sound like the track sonification but with an extra layer of skater movement?

How do you sonify the gaps in the track?


Using Web-Native Controls Brainstorming

Question: Is it possible to create a "drag and drop" equivalent using native web controls?

Scheme 1: Separate X and Y sliders

  • X and Y position is controlled by separate sliders.
  • For example, the X-Axis slider may be from 0 to 100. 0 = left edge, 50 = middle, 100 = right edge.
  • As the user moves across the slider, descriptions and updates can be read back so they get a sense of what is in the immediate area as well as the overall scene.

Initial Conclusion:

  • It is unlikely a pure native HTML control will give the flexibility and ease of use desired for the sim.