Functional Reactive Game Programming

RxJS 5, Immutable.js and three.js (WebGL)
https://github.com/Lorti/corsair
https://manu.ninja/functional-reactive-game-programming-rxjs-5-immutable-js-and-three-js

Transcript

1. Functional Reactive Game Programming

   RxJS 5, Immutable.js and three.js
   @manuelwieser
   

   View Slide

2. Manuel Wieser
   Lead Developer

   Technical Lead/Senior Front-End Developer

   karriere.at
   Lecturer

   Hypermedia User Experience Engineering

   FH OÖ Campus Hagenberg
   

   View Slide

3. View Slide

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

   View Slide

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

   View Slide

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.
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

14. Thank you for
    your attention
    Code

    GitHub.com/Lorti/Corsair
    Blog manu.ninja

    Twitter @manuelwieser
    

    View Slide