jacius/1. README.md

## 1. README.md

      
    Raw
  

              1. README.md
            
          
    Another example of using Scheme to generate HTML and JavaScript. This example is based on the Three.js "Creating a scene" tutorial.
You will need:

Chicken Scheme
html-tags: chicken-install html-tags
spock: chicken-install spock
Make
curl (or just download three.min.js yourself)

Run make to generate the HTML and JS files, then open "index.html" in a web browser.
Optionally, you can use Guard to automatically generate the HTML/JS when the Scheme files change. gem install guard then run guard inside the source directory.

  
## Guardfile
guard 'shell' do
  watch(/(.*)\.scm/) {|m| `make #{m[1]}` }
end

## index.html.scm
(require-library html-tags spock)
(import html-tags spock)

(display "<!DOCTYPE html>")
(display
 (<html>
  (<head>
   (<spock-header>))
  (<body>
   (<script> type: "text/javascript" src: "three.min.js")
   (<script> type: "text/javascript" src: "webgl-test.js"))))

## Makefile
generated = index.html webgl-test.js spock-runtime-min.js three.min.js

all: $(generated)

clean:
	rm $(generated)

%.html: %.html.scm
	csi -s $< > $@

%.js: %.js.scm
	chicken-spock $< > $@

three.min.js:
	curl -O http://mrdoob.github.com/three.js/build/three.min.js

spock-runtime-%.js:
	cp `chicken-spock -library-path`/$@ $@

## webgl-test.js.scm
(define width 600)
(define height 400)

(define scene (new THREE.Scene))
(define camera (new THREE.PerspectiveCamera 75 (/ width height) 0.1 1000))

(define renderer (new THREE.WebGLRenderer))
(%inline .setClearColorHex renderer #x000000 1)
(%inline .setSize renderer width height)
(%inline .appendChild document.body (%property-ref .domElement renderer))

(define geometry (new THREE.CubeGeometry 1 1 1))
(define material (new THREE.MeshLambertMaterial (% "color" #x00ff00)))
(define cube (new THREE.Mesh geometry material))
(%inline .add scene cube)

(define light1 (new THREE.PointLight #xffffff))
(%property-set! .position.z light1 5)
(%inline .add scene light1)

(%property-set! .position.z camera 2)

(define (render)
  (%inline requestAnimationFrame (callback render))
  (%property-set! .rotation.x cube (+ 0.02 (%property-ref .rotation.x cube)))
  (%property-set! .rotation.y cube (+ 0.02 (%property-ref .rotation.y cube)))
  (%inline .render renderer scene camera))

(set! window.onload (callback render))
	(require-library html-tags spock)
	(import html-tags spock)

	(display "<!DOCTYPE html>")
	(display
	(<html>
	(<head>
	(<spock-header>))
	(<body>
	(<script> type: "text/javascript" src: "three.min.js")
	(<script> type: "text/javascript" src: "webgl-test.js"))))
	generated = index.html webgl-test.js spock-runtime-min.js three.min.js

	all: $(generated)

	clean:
	rm $(generated)

	%.html: %.html.scm
	csi -s $< > $@

	%.js: %.js.scm
	chicken-spock $< > $@

	three.min.js:
	curl -O http://mrdoob.github.com/three.js/build/three.min.js

	spock-runtime-%.js:
	cp `chicken-spock -library-path`/$@ $@
	(define width 600)
	(define height 400)

	(define scene (new THREE.Scene))
	(define camera (new THREE.PerspectiveCamera 75 (/ width height) 0.1 1000))

	(define renderer (new THREE.WebGLRenderer))
	(%inline .setClearColorHex renderer #x000000 1)
	(%inline .setSize renderer width height)
	(%inline .appendChild document.body (%property-ref .domElement renderer))

	(define geometry (new THREE.CubeGeometry 1 1 1))
	(define material (new THREE.MeshLambertMaterial (% "color" #x00ff00)))
	(define cube (new THREE.Mesh geometry material))
	(%inline .add scene cube)

	(define light1 (new THREE.PointLight #xffffff))
	(%property-set! .position.z light1 5)
	(%inline .add scene light1)

	(%property-set! .position.z camera 2)

	(define (render)
	(%inline requestAnimationFrame (callback render))
	(%property-set! .rotation.x cube (+ 0.02 (%property-ref .rotation.x cube)))
	(%property-set! .rotation.y cube (+ 0.02 (%property-ref .rotation.y cube)))
	(%inline .render renderer scene camera))

	(set! window.onload (callback render))