display.js

/* rendering */
var main = mapMany([
    dimensions, marioState
], function display(dimensions, mario) {
    var src = "/imgs/mario/stand/right.gif"

    var w = dimensions.w
    var h = dimensions.h
    var verb = mario.y > 0 ? "jump" :
        mario.xVelocity !== 0 ? "walk" : "stand"
    var direction = mario.xVelocity < 0 ? "left" : "rigth"

    var src = "/imgs/mario/" + verb + "/" + direction + ".gif"

    var largeRect = rect(h, { x: w / 2, y: h / 2 })
    var smallRect = rect(50, { x: w / 2, y: 25 })
    var sky = filled(largeRect, skyblue)
    var grass = filled(smallRect, grassgreen)
    var marioImage = image(35, 35, src)

    var marioForm = toForm(marioImage, {
        x: mario.x
        , y: (h - 63) - mario.y
    })

    // collage creates a canvas of size w x h and 
    // puts the forms in the array in there as shapes
    return collage(w, h, [sky, grass, marioForm])
})