Recently, CDG's Vi Hart and web programmer Niky Case relased a highly cited and praised web page called Parables of the Polygons. Not only beautifully designed, the page explains a mathematics concept in an explorable way and leads to conveying a positive social lesson for tolerance of all. We took the task of remaking the web page in Sketchpad14 and the CDP model to understand the advantages and limitations of our approach. This chapter summarizes what it took to make the demo.

Figure above is a snapshot of the demo done in Sketchpad14. Though this demo does not fully implement the original page, most interesting and interactive behaviors are present. Surprisingly, only three new constraint types had to be defined, two of which can be seen in the constraint list view in the figure above. The other five type of constraints were already part of our predefined set of constraints or present in previous demos.

You could find the source code for this demo at "../2d/demo/polygons/example-polygons.js" or scroll down to the bottom of this page to play it. Let's examine it. It should be possible to develop it all within the tool itself, but at the moment the UI just isn't usable yet.

All CDP programs are conventionally organized in the same way. Data classes are defined first, then constraint classes. Afterwards data objects are created and then constraints are instantiated to operate on them. Finally, should this be an interactive program (all Sketchpad14 programs are because objects are draggable), events are registered, whose job is to modify the data and constraint stores.

• Shape (Position position, Number kind, Number mood, Image image, Board board, Vector boardPos)

  denotes each polygon shape in the page. kind is 1 for squares and 2 for triangles. mood is -1 for sad, 0 for meh, and 1 for yay. When shape is part of a board, properties board and boardPos are set. The latter tells the board coordinates at which the shape is placed.

  Note that each data class, such as this one, has defined a draw method that is responsible for drawing the object on the shared canvas.

• Board (Position position, Number cols, Number rows, Number cellLength, Shape[] cells, Number kindPercentage)

  denotes each board in the page. cells is an array representing what's on it, whose elements may be Shapes or none. Board elements will be indexed by (row# * cols + col#) zero-indexed encoding. kindPercentage is the ratio of the count of surrounding kind shapes to all surrounding shapes, which is the threshold below which the shape will feel sad and inclined to move.

  We will see later than one the constraint types will be affecting the cells array property of a board. Clearly the default solution merge function (dampedAverageMergeFn seen in the previous part) does not work on non-real values and hence unsuitable here. Instead, the class uses a different merge function called dictionaryAddMergeFn:

  
  // Dictionary add merge fn:
  dictionaryAddMergeFn = function(curr, solutions) {
      solutions.forEach(function(v) { for (var k in v) curr[k] = v[k] })
      return curr
  }
  	  

  where each solution is a dictionary of key/value pairs that include keys (in this case indices in an array) that it wants to change. So, here is how the class defines its merge function:

  
  Board.prototype.merge = function() { 
      return {cells: dictionaryAddMergeSolutions}
  }
  

  Now the reason the above works is that we happen to know there will be exactly one solution and no chance of conflicts, because there will be exactly one constraint that will want to set the cells property of a board at a given time. This will become obvious later when we see how constraints are set up.

  This class also has a few important functions related to the logic of the game, implemented in JS code:

  • fits(Vector pos) returns whether or not the board based on its current placements can fit a new piece in coordinates pos. a vector has i and j indices to represent a row and column index.
  • getCoord(Point position) determines whether or not a position on the canvas falls in one of the cells of the board, and if so it computes the associated coordinates.
  • getEmptyCoord() returns a random empty cell coordinate, should there one exist.
  • getMood(Shape shape) returns the mood of a shape (i.e., -1, 0, or 1) depending on its surrounding cells.
  • firstSadShape() returns the first sad shape (moving from top-left to bottom-right corner) on the board.

• ShapeSwingConstraint (Shape shape, Number swingSpeed, Boolean dangling)

  states that shape must swing back and forth over a span of ~36 degrees, at a rate of swingSpeed. We will see later how dangling boolean flag is used. this.image will be set as shape.image.

  So let's go over the functions that must be defined for a constraint type:

  • Definitions related to property type checking and summary generation:

    
    // property types:
    ShapeSwingConstraint.prototype.propertyTypes =
        {shape: 'Shape', swingSpeed: 'Number', dangling: 'Boolean'}
    
    // class summary:
    ShapeSwingConstraint.description = function() {
    return "ShapeSwingConstraint(Shape S, Number R, Boolean D) causes "
        + "image of S to swing at rate R. When D is true this is simulating dangling "
        + "and will gradually subside."
    } 
    
    // instance-specific summary:
    ShapeSwingConstraint.prototype.description = function() {
        return  "image of shape" + this.shape
        + " should " + (this.dangle ? "dangle" : "swing") + " at an initial "
        + "rate of " + this.swingSpeed
    }
    

  • And now things related to constraint solving:

    
    ShapeSwingConstraint.prototype.computeError = function(pseudoTime) {
        this.targetRotation = this.image.origRotation
            + (Math.sin(this.image.swingSpeed * pseudoTime + this.rotationOffset)
                   * Math.PI / 10)
        return this.targetRotation - this.image.rotation
    }
    
    ShapeSwingConstraint.prototype.solve = function(pseudoTime) {
        return {image: {rotation: this.targetRotation}}
    }
    

  
  
  • TimerConstraint (Timer timer)

    Note that the previous constraint was temporal, i.e., it's a function of time, or as we have here: pseudoTime. In order for the system pseudo time to advance, the user must add a TimerConstraint. It simply tells the system that it should update the pseudoTime to reflect the time passed since last evaluation cycle (see Part IV).

  
  
  • ShapeMoodConstraint (Shape shape)

    states that the URL of the image belonging to the shape must reflect its mood property, which must be set based on the surrounding shapes.

    We'll skip the functions related to type checking and summary generation, as they are similar to the previous constraint. So let's go over the constraint solving parts:

    • computeError function:

      
      ShapeMoodConstraint.prototype.computeError = function(pseudoTime) {
          this.targetMood = this.shape.board.getMood(this.shape)
          return (shape.mood ==  this.targetMood
            && this.shapeImage.url === this.shape.getUrl(this.targetMood)) ? 0 : 1
      }
      

    • solve function:

      
      ShapeMoodConstraint.prototype.solve = function(pseudoTime) {
          return {shape: {mood: this.targetMood},
                  shapeImage: {url: this.shape.getUrl(this.targetMood)}}
      }
      

    
    
    • ShapePlacementConstraint (Shape shape)

      Behavior of ShapePlacementConstraint

      states if shape is moved inside the its board and it fits in the dropped coordinate, it should snap in place in the center and its board should add it in the right index of its cells array. Otherwise it should snap back in its original position. As we will see, we only add this constraint when a shaped is picked up to be dragged. Once another shape is picked up, this constraint is no longer necessary (must have already snapped in the right place) and we'll remove the constraint.

      So let's go over the functions that must be defined for a constraint type:

      • computeError: We check if the position of shape is within the board and if the board coordinate closest to the shape's position is free. If so, we compute the position where the shape should be snapped into. Otherwise, it should snap back at its original place on the board (this.shapeOrigPos). We store the target position in this.targetPos to avoid recomputation in the solve function. The error value is the distance between the current position of the shape and its computed target position:

        
        ShapePlacementConstraint.prototype.computeError = function(pseudoTime) {
            var shapeCurrPos = this.shapePos, board = this.shape.board
            this.shapeCoord = board.getCoord(shapeCurrPos)
            var inside = board.containsPoint(shapeCurrPos)
            if (inside && board.fits(shapeCoord)) {
                this.placing = true
                this.targetPos = plus(board.position,
                    {x: shapeCoord.j * board.cellLength,
                     y: shapeCoord.i * board.cellLength})
            } else {
                this.placing = false
                this.targetPos = this.shapeOrigPos
            }
            return magnitude(minus(this.targetPos, shapeCurrPos))
        }
        

      • solve: We have already computed where the position of shape must be updated to and stored it in this.targetPos. If we the shape is being placed on the board (captured by boolean value this.placing) then the solution wants to free up the previous cell location and set the content of the new cell coordinates to this shape. This is done by setting the respective location in the cells array to 0 or the shape, respectively:

        
        ShapePlacementConstraint.prototype.solve = function(pseudoTime) {
            var board = this.board, shape = this.shape
            var sol = {shapePos: {x: this.targetPos.x, y: this.targetPos.y}}
            if (this.placing) {
                var shapeOldCoord = shape.boardPos
                var dict = {}
                dict[(shapeOldCoord.i * board.width) + shapeOldCoord.j] = 0
                dict[(this.shapeCoord.i * board.width) + this.shapeCoord.j] = shape
                sol.board = {cells: dict}
                sol.shapeBoardPos = {i: this.shapeCoord.i, j: this.shapeCoord.j}
            }
            return sol
        }
        

Now that we have all the constraint types we need, we can worry about the interactive/reactive part of the demo.

• Dragging pieces (CoodinateConstraint on mouse events):

  As with all demos, the default dragging-related events allowing things to be moved are in place. We saw these in Part III.

• Placing pieces on a board (ShapePlacementConstraint on mouse events):

  We could have this constraint be a continuous requirement on all pieces that are part of a board. However, since it applies only when a piece that was picked up dropped by the user, it makes sense to only add this requirement then and remove it the next time another piece is picked up (since by that time that original piece is already placed nicely in place).

  
  
  registerEvent('mouseup', function(e) {
      var thing = e.pointedObject
      if (thing instanceof Shape && thing.board !== undefined)
          placementConstraint = addConstraint(
              new ShapePlacementConstraint(thing))
  })
      

  
  
  registerEvent('mousedown', function(e) {
      if (placementConstraint !== undefined) {
          removeConstraint(placementConstraint)
          placementConstraint = undefined
      }
  })
      

• Swinging faster on mouse hover (ShapeSwingConstraint on mouse events):

  The pieces on the header of the page (stored in the swingingShapes array) swing faster when mouse hovers over them. They all already have a ShapeSwingConstraint operating over them, so it's simply a matter of changing the property of that constraint to reflect the speeding or slowing of the swing rate:

  
  	    
  registerEvent('mousemove', function(e) {
      swingingShapes.forEach(function(shape) {
          var dist = distance(e.mousePosition, shape.position)
          // kept a reference of the constraint for convenience:
          shape.swingConstraint.swingSpeed = 
              2 + (dist < 200 ?  ((200-dist)/200*10) : 0)
      }
  })
      

• Pieces dangle when dragged (also using ShapeSwingConstraint on mouse events):

  Dangling effect

  We'll add an instance of ShapeSwingConstraint to not only the happy swinging shapes on the page header, but also to a shape that is picked up by the user (to get a dangling effect). The difference is that the dangling kind's swing rate subsides with passage of time.

  There is a feature we haven't talked about before, but we'll now discuss and use it. Each class (be it a data or constraint type) can define a onEachTimeStep method, which will be run by the CDP execution model right before going to the solving stage, and is used to do any sort of housekeeping, property updating, etc.

  Thus we define a onEachTimeStep for each instance of the ShapeSwingConstraint which happens to be simulating dangling, to get the effect of gradually damping and turning off the dangling speed:

  
  ShapeSwingConstraint.prototype.onEachTimeStep = function(pseudoTime) {
      if (this.dangle) {
          var movement = this.shape.position.x - this.shap.lastPosition.x
          if (Math.abs(movement) > 0)
              this.swingSpeed += (movement / 200)
          else {
              this.swingSpeed /= 1.05
              if (this.image.swingSpeed < 0.001)
                  this.swingSpeed = 0
          }
          this.shape.lastPosition = this.shape.position.copy()
      }
  }	    
  

  Now all we need to do to get dangling working is to add a ShapeSwingConstraint when a shape is picked up:

  
  registerEvent('mousedown', function(e) {
      var thing = e.pointedObject
      if (thing instanceof Shape) {
          danglingConstraint = addConstraint(
              new ShapeSwingConstraint(thing, 2, true))
      }
  })
  

  Similarly, the constraint gets removed when a shape is dropped down.

By now all kinds of data, and continuous and reactive behaviors have been defined. All that's left to do is layout the page and add constraints.

To get the temporal constraints going, don't forget to add a TimerConstraint so that the system's clock gets ticking:

	addConstraint(new TimerConstraint(new Timer(1))) // steps pseudo-time by 1 unit at each frame

Now we'll instantiate as many Shapes, Boards, TextBoxes, etc. as we need, and add constraints as appropriate. That is, all shapes on a board get a ShapeMoodConstraint, and so on.

That's all folks. We omitted some parts of the demo (e.g., In the tool see the slider demo, which was implemented separately and reused here), but you should have gotten a good overview of things by now!