Functional Reactive Game Programming

Functional Reactive Game Programming

9b509a6ebaf600e9198dcc3a9a075aa8?s=128

Manuel Wieser

November 27, 2017
Tweet

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