Functional Reactive Game Programming

Transcript

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

2. Manuel Wieser Lead Developer
 Technical Lead/Senior Front-End Developer
 karriere.at Lecturer


   Hypermedia User Experience Engineering
 FH OÖ Campus Hagenberg
3. None

4. RxJS RxJS is a library for reactive programming using Observables,

   to make it easier to compose asynchronous or callback-based code.

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

6. 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.

7. const map1 = Immutable.Map({ a: 1, b: 2, c: 3

   }); const map2 = map1.set('b', 1337); map1.get('b'); // 2 map2.get('b'); // 1337

8. three.js The aim of the project is to create an

   easy to use, lightweight, 3D library. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.

9. 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();

10. 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);

11. 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);

12. function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1;

    renderer.render(scene, camera); } render();
13. None

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

    @manuelwieser