big-bang
to-draw-page
to-draw
stop-when
stop-when!
key=?
1 Event handlers
on-tick
on-tick!
on-key
on-key!
on-click
on-click!
2 HTML user interface constructors
js-p
js-div
js-button
js-input
js-img
js-text
js-select
3 Miscellaneous functions
4 Examples
Version: 5.0.1

jsworld

 (require jsworld)

jsworld provides a world programming library that allows simple animation and games, as well as reactive HTML graphical user interfaces.

(big-bang a-world handlers ...)  void
  a-world : world
  handlers : handler
Starts a reactive computation with big-bang. The rest of the arguments hook into the reactive computation.

By default, the page that’s displayed contains a rendering of the world value. In the presence of an on-draw or to-draw handler, big-bang will show a customized view.

The majority of the handlers register different stimuli that can trigger changes to the world. One instance is on-tick, which registers a function to update the world on a clock tick.

to-draw Same as single-argument to-draw: http://docs.racket-lang.org/teachpack/2htdpuniverse.html?q=on-tick#(form._((lib._2htdp/universe..rkt)._to-draw))

to-draw-page initial-effect

(to-draw-page to-dom to-css)  handler
  to-dom : (world -> (DOM-sexp))
  to-css : (world -> (CSS-sexp))
One of the main handlers to big-bang is to-draw-page, which controls how the world is rendered on screen. The first argument computes a rendering of the world as a DOM tree, and the second argument computes that tree’s styling.

(to-draw hook)  handler
  hook : (world -> scene)
For simple applications, to-draw is sufficient to draw a scene onto the display. The following program shows a ball falling down a scene.

  (define WIDTH 320)
  (define HEIGHT 480)
  (define RADIUS 15)
  
  (define INITIAL-WORLD 0)
  
  (define (tick w)
    (+ w 5))
  
  (define (hits-floor? w)
    (>= w HEIGHT))
  
  (check-expect (hits-floor? 0) false)
  (check-expect (hits-floor? HEIGHT) true)
  
  (define (render w)
    (place-image (circle RADIUS "solid" "red") (/ WIDTH 2) w
                 (empty-scene WIDTH HEIGHT)))
  
  (big-bang INITIAL-WORLD
               (on-tick tick 1/15)
               (to-draw render)
               (stop-when hits-floor?))

(stop-when stop?)  handler?
  stop? : (world -> boolean)
When the world should be stopped – when stop? applied to the world produces true – then the big-bang terminates.

The program:
  (define (at-ten x)
    (>= x 10))
  
  (big-bang 0
               (on-tick add1 1)
               (stop-when at-ten))
counts up to ten and then stops.

(stop-when!)  handler?
Produces a handler that stops a big-bang whenever the provided world function produces true.

(key=? key1 key2)  boolean?
  key1 : key?
  key2 : key?
Produces true if key1 is equal to key2.

1 Event handlers

(on-tick)  handler?
Produces a handler that responds to clock ticks.

(on-tick!)  handler?
Produces a handler that responds to clock ticks.

(on-key)  handler?
Produces a handler that responds to key events.

(on-key!)  handler?
Produces a handler that responds to key events.

(on-click)  handler?
Produces a handler that responds to click events.

(on-click!)  handler?
Produces a handler that response to click events.

2 HTML user interface constructors

(js-p)  ...
(js-div)  ...
(js-button)  ...
(js-input)  ...
(js-img)  ...
(js-text)  ...
(js-select)  ...

3 Miscellaneous functions

world-with-effects

4 Examples