Web Tech & Teaching – An Experience

Sébastien Boisgérault, MINES ParisTech

16/10/2017, Mini-Séminaire Créative

Introduction

Who Am I?

Lecturer / Researcher
MINES Paristech Center for Robotics
Mathematics / Control / Signal Processing / …

This Set of Slides

In the context of Web Tech & Teaching:

experience feedback / thoughts / tech. watch

collection of use cases (some tiny ones)
pedagogy / implementation / publishing

Cauchy-Riemann Equations

Context

Complex Analysis

Complex-valued functions of a complex variable

visualisation?
differentiability?
holomorphy?

Stack

Classic browser tech: HTML / CSS / JS
3D in the browser: WebGL / Three.js / MathBox
Examples (Steve Wittens):
MathBox 2? …

Poisson Image Editing

Context

Complex Analysis

Solution of the Laplace equation in 2D
Modern Applications?
- Heat equation?
- Fluid Mechanics?
- …

Use GIMP

GNU Image Manipulation Program

What’s missing?

A watch …

GIMP Healing Tool

More Details …

Poisson Image Editing

Complex-Step Differentiation

Context

Numerical Analysis

Compute the derivative of f(x).

def FD(f, x, h):
    return (f(x+h) - f(x)) / h

The step h may be either too large or too small.

Some other difference schemes perform better.

Demonstrate the problems with FD
Show the improvement
Not the solution / explanation yet (teaser)

Video / Screencast?

Use ASCIINEMA

Asciicast

Tech Stack

desktop app: record & upload
lightweight data: asciicast is just JSON
ClojureScript project
embed in HTML or host in the cloud

Robotics

Context

Wheeled Robots Kinematics

Some wheels yield no kinematic constraint.

Example: caster wheels, swedish wheels, etc.

So we remove them from the model.

Not convinced?

Show

Prove

Demo

Demo Tech Stack

More Details …

Robotics

Digital Audio Coding

Context

experiment / design / build 4 audio codecs:

Lossless codec, voice codec, AU-like, MP3-like
10 contact hours (50% lectures / 50% lab sessions)
no prerequisite (programming, signal processing)

Very tight time budget. Can software help?

Audio Coding “for Humans”

Python audio package

focus on the API (few new features)
match the domain abstractions (several layers)
suitable for live demos & pseudo-code

Software “for Humans”

expression coined by Kenneth Reitz
started with “HTTP for Humans”: Python library Requests, a better, higher-level httplib

The Zen of Python

The Python language is already made for humans:
https://www.python.org/dev/peps/pep-0020/

Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
etc.

Make / Play / Save a Pure Tone

High-level API

>>> f = 440.0
>>> x = cos(2 * pi * f * t)
>>> x
array([ 1.        ,  0.99803566,  0.99215037, ...,  ,  0.99803566])
>>> audio.io.play(x)
>>> audio.wave.write(x, "A4.wav")

Experience Quantization

Mid-level API

>>> audio.wave.read("A4.wav")
array([[ 0.99996948,  0.99804688,  0.99215698, ...,  0.98236084,
         0.99215698,  0.99804688]])
>>> audio.wave.read("A4.wav", scale=False)
array([[32767, 32704, 32511, ..., 32190, 32511, 32704]], dtype=int16)

Read Raw Binary Data / Metadata

Low-level API

>>> bytes = open("A4.wav").read()
>>> from audio.bitstream import BitStream
>>> bits = BitStream(bytes).read(8 * 16)
>>> bits
01010010010010010100011001000110101111000000100100000100000000000101011101000001010101100100010101100110011011010111010000100000
>>> bits.read(str)
'RIFF\xbc\t\x04\x00WAVEfmt '