Functional Reactive Game Programming
 RxJS 5, Immutable.js and three.js @manuelwieser

Manuel Wieser Lead Developer
 Technical Lead/Senior Front-End Developer
 karriere.at Lecturer
 Hypermedia User Experience Engineering
 FH OÖ Campus Hagenberg

No content

RxJS RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

const button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click') .subscribe(() => console.log('Yay!'));

Immutable.js Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming.

const map1 = Immutable.Map({ a: 1, b: 2, c: 3 }); const map2 = map1.set('b', 1337); map1.get('b'); // 2 map2.get('b'); // 1337

three.js The aim of the project is to create an easy to use, lightweight, 3D library. The library provides , , CSS3D and WebGL renderers.

const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render();

const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, windowWidth / windowHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(windowWidth, windowHeight); document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube);

function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render();

No content

Thank you for your attention Code
 GitHub.com/Lorti/Corsair Blog manu.ninja
 Twitter @manuelwieser