Avatar of Matthieu Holzer

Matthieu Holzer


Master of Science (M.Sc.) Computer Science and Media


JavaScript Developer

Working @ Amazon Distribution GmbH

ballistics-calculator

A JavaScript based interactive ballistics calculator

What?

A single-page application (realized @die.interaktiven) based on AngularJS and node.js which calculates and displays how different parameters have an influence to the trajectory of a bullet. A user can create several profiles, with different settings, scopes, rifles and conditions like temperature or height above sea level. The profiles can be compared visually, locked for modification and shared via an unique url.

The project is build on top of the MEAN-Stack:

  • MongoDB – Stores the product specific calculation settings and the user sessions.
  • Express – Creates the REST-API for the calculations and profile management.
  • AngularJS – The front-end logic.
  • Node.js – The platform for the back-end architecture.

As the webapp should be usable offline, there is a node-webkit version, based on the same code, which can be packaged and deployed to the users.

Architecture of the ballistics-calculator application
Architecture of the ballistics-calculator application
How?

The user can select a bullet from predefined factory settings and/or enter custom data to create a profile. A session is then generated and stored on the server. All the calculations are done on the server-side, as these are private and the routines and algorithms should not be visible to the public. Results and graphs are shown and updated nearly live in the browser after each profile change.

Visualization of the riflescope and trajectory are done via D3.js and dynamic SVG diagrams.

tl;dr

muskepeer

Distributed computing using browsers and WebRTC

What?

The Muskepeer-Framework is a JavaScript based prototype for decentralized distributed computing using web browsers. It is a project I realized as my Master-Thesis @ the THM.

It is based on the principle, that many participants will solve a problem much quicker than only a few. A problem can be defined in a JSON file and can then be passed to the Muskepeer-Framework. The browser of each participant downloads the needed resources and connects to other browsers to create a WebRTC-based Peer-to-Peer-Network (P2P), to exchange updates and partial solutions.

Principle of distributed computing
Basic principle of distributed computing
How?
Basic structure of the muskepeer system
Architecture of the Muskepeer-System

Each client executes a Worker-Script to generate results. These results get stored to a local database and synchronized between all clients. A project can have an additional Factory-Script which creates Jobs (tasks) for the Worker-Scripts, or even read and write files to the local filesystem. It's build to give you a bunch of options inside the Worker- or Factory-Scripts. Some facts:

  • JavaScript framework for Distributed computing
  • Decentralized Clients through WebRTC
  • WebRTCs DataChannels for a direct communication between the browsers
  • Custom Signaling Channel using Web Sockets
  • WebWorker isolated code-execution
  • Results & Jobs get stored via the IndexedDB
  • Muskepeer-Dashboard to visualize the progress
  • Use REST-Services (like parse.com) for external storage
  • Files can be used as ressources though the FileSystem API
  • Network API usage for offline computation
  • Released under a MIT-License, so feel free to use and contribute
More
tl;dr

html5-videoEditor

A browser based video-editing tool

What?

The html5-videoEditor is a proof of concept web-application for video-editing in the browser. It allows a user to select videos from his local machine (PC, tablet, phone, etc.) and to create video compositions. The videos get automatically uploaded to a server where they get transcoded if necessary.

The GUI is similar to classical video-editing tools but heavily based on HTML5, JavaScript and CSS. The application can be used without the need to install any third party plugin or extension. This allows a platform independent utilization.

Compositions can be shared via an unique url and encoded on the server-side into various video-formats.

The html5-videoEditor was an internal project @ the THM during my master studies.

Overview of the html5-videoEditor
Overview of the html5-videoEditor
More
tl;dr

led-animator

A browser-based editor for 2d and 3d LED animations

What?

2D or 3D LED-animations can be created in the browser by a graphical editor, which allows frame-by-frame animations by giving each LED a specific color. Those animations can be saved and/or sent to a LED-Matrix or -Cube and can be started from the browser. Browsing and playing animations is even possible with a mobile device.

The editor is using the canvas-element and/or WebGL (three.js) to create a preview. The animations get saved as a JSON-Document or directly send to a Processing/Java application which will display the animation and send it as a bytstream to a Matrix or Cube via USB (Serial). For the visualization of a LED-Cube WebGL is beeing used. The hardware components are: a Rainbowduino LED driver, a 8x8 LED Matrix and a 4x4x4 LED Cube.

This was an internal project @ the THM during my master studies.

Schematic of the led-animator
Schematic of the led-animator
More
tl;dr

arduino-network

Live sensor data collected by arduinos and pushed to the browser

What?

This proejct is about how to build an interface for a dynamic network of arduino-controllers hooked up with sensors and actuators. The metered values get send to a local server and directly pushed via internet to clients which are able to subscribe to specific data and get informed. This project connects the physical computing world to the real-time web.

The bidirectional communication between the arduinos and an Aobe Air server-application is created via WiFi or Ethernet. Each (web)-client connects to the same server over TCP and registers for a specific protocol (e.g. Flash, WebSockets) and a serialization format (JSON, XML, AMF). If there is updated data the server pushes these updates directly to the clients. Storing the data to an CouchDB-database is optional.

This project was my bachelor-thesis supervised by the Scholz & Volkmer GmbH and got an internal award at the THM.

Principle of the arduino-network
Principle of the arduino-network
More
tl;dr

flash-advertisements

Advertisements in various styles and formats

What?

Online advertisements, teasers, mastheads, technical animations, microsites and landing-pages for the Coca-Cola GmbH and Panasonic, which where shown on different platforms like Youtube, studiVZ etc. Realized @ Scholz & Volkmer GmbH

Mostly those Ads where created using ActionScript 3.0 with the Flash IDE or FDT. Some where created using special components like DoubleClick Studio or AdWonder. When dealing with video-content some basic editing skills in After Effects where required.

tl;dr