Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Functional Reactive Game Programming

Functional Reactive Game Programming

Manuel Wieser

November 27, 2017
Tweet

More Decks by Manuel Wieser

Other Decks in 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