Title

Probieren hilft beim Studieren
Interaktive Vorlesungsfolien im Webbrowser
Mario Botsch
Universität Bielefeld

Anleitung für die HTML-Folien

  • Mit Cursor-links/Cursor-rechts Folien durchschalten
  • Klick auf Icon (links oben) öffnet das Navigationsmenü
  • Mit f/ESC Fullscreen-Modus an-/abschalten
  • Doppelklick auf ein Element (z.B. ein Bild) für Rein-/Raus-Zoomen
  • Mit Ctrl-Shift-f den Such-Dialog öffnen, mit ESC schließen.
  • Zum virtuellen Whiteboard runter-scrollen, wenn der untere Rand blinkt
  • Für die 3D-Demos am besten Google Chrome oder Firefox verwenden. Apple’s Safari implementiert leider nicht alle nötigen Web-Standards, so dass manche interaktiven Demos nicht funktionieren.
    • Klick auf Icon (recht oben im Demo-Fenster) bringt Demos in den Fullscreen-Modus.

Features der HTML-Folien

Bilder und Videos

Bild-Caption
Video-Caption

Aufzählungen

  • Supermario
    • Der Held
  • Peach
    • Die Prinzessin
  • Donkey Kong
    • Der böse Affe

supermario.png peach.png donkeykong.png

Textauszeichnungen

  • Supermario
    • ist fett
  • Prinzessin Peach
    • ist hochgestellt
  • Donkey Kong
    • ist schräg

supermario.png peach.png donkeykong.png

Numerierungen

  1. Donkey Kong
    • entführt Peach
  2. Mario
    • rettet Peach
  3. Peach
    • findet Mario toll
donkeykong-2.png

Task-Listen

  • Was können wir?
    • Mathe
    • Informatik
    • alles andere
  • Stärken/Schwächen?
    • Mathe
    • Informatik
    • alles andere
  • Was ist cool?
    • Mathe
    • Informatik
    • alles andere
  • Wer braucht mehr 💰?
    • Mathe
    • Informatik
    • alle anderen

Mathe-Formeln mit MathJax

  • Navier-Stokes-Gleichungen \[\begin{eqnarray} \dot{\vec{u}} &=& \fragment{-\vec{u}\cdot\grad\vec{u}} \fragment{\;-\; \frac{1}{\rho}\grad p} \fragment{\;+\; \nu \laplace \vec{u}} \fragment{\;+\; \vec{f}} \label{eq:momentum} \\[2mm] \grad \cdot \vec{u} &=& 0 \label{eq:incompressibility} \end{eqnarray}\]
  • Formeln können schrittweise eingeblendet werden
  • Formeln können referenziert und verlinkt werden

Zeilenweises Einblenden von Gleichungen

\[ \begin{align*} \dot{\mat{R}}(t) \, \bar{\vec{r}}_i &= \diff{\mat{R}}{\alpha} \, \diff{\alpha}{t} \, \bar{\vec{r}}_i \\ &= \matrix{ -\sin\alpha & -\cos\alpha \\ \cos\alpha & -\sin\alpha } \dot{\alpha} \, \bar{\vec{r}}_i \\[2mm] &= \matrix{ \cos(\alpha+90^\circ) & -\sin(\alpha+90^\circ) \\ \sin(\alpha+90^\circ) & \cos(\alpha+90^\circ) } \, \bar{\vec{r}}_i \, \dot{\alpha} \\[2mm] &= \matrix{ \cos(90^\circ) & -\sin(90^\circ) \\ \sin(90^\circ) & \cos(90^\circ) } \, \matrix{ \cos(\alpha) & -\sin(\alpha) \\ \sin(\alpha) & \cos(\alpha) } \, \bar{\vec{r}}_i \, \dot{\alpha} \\[2mm] &= \omega \, \vec{r}_i^\perp \end{align*} \]

Virtuelle Tafel

  • Herleitungen an der Tafel sind nicht in Videoaufzeichnung
  • Herleitungen auf den Folien sind zu schnell \[ \begin{eqnarray*} a &=& b \\ a^2 &=& ab \\ 2a^2 &=& a^2 + ab \\ 2a^2-2ab &=& a^2 - ab \\ 2a(a-b) &=& a (a-b) \\ 2a &=& a \\ 2 &=& 1 \end{eqnarray*} \]
  • Die virtuelle Tafel ist ein guter Kompromiss 👍

Source Code mit highlight.js

qsort []     = []
qsort (x:xs) = <mark>qsort small ++ mid ++ qsort large</mark>
  where
    small = [y | y<-xs, y<x]
    mid   = [y | y<-xs, y==x] ++ [x]
    large = [y | y<-xs, y>x]
int     i, N=100000000;
double  x, dx=1.0/(double)N;
double  f, pi=0.0;

for (i=0; i<N; ++i)
{
	x = (i+0.5) * dx;
	f = 4.0 / (1.0 + x*x);
	pi += dx * f;
}

printf("pi = %f\n", pi);

Webseiten

Tabellen

Warum sind HTML-Folien so toll?
Powerpoint LaTeX-Beamer HTML-Folien
plattformunabhängig 😢 😊 😊
Mathe-Formelsatz 😢 😊 😊
Videos 😊 😢 😊
Studi-Export 😢 😢 😍
erweiterbar 😢 😢 😍
interaktiv 😢 😢 😍
Aufwand 😊 😢 😭

Bibliographie mit BibTeX

  • Bibliographie kann mit BibTeX verwaltet werden.
  • Die Referenzliste wird dann automatisch erstellt (siehe nächste Folie).
  • Hier ein Beispiel:
    • Realistische Avatare sind toll (Waltemate u. a. 2018) 👍.
    • Achenbach u. a. (2017) können sie in <10 Minuten erzeugen 😲.
    • Sie können in Echtzeit animiert werden (Komaritzan und Botsch 2019) 💪.

Referenzen

Achenbach, J., T. Waltemate, M. Latoschik, und M. Botsch. 2017. „Fast Generation of Realistic Virtual Humans“. In Proceedings of ACM Symposium on Virtual Reality Software and Technology.

Komaritzan, M., und M. Botsch. 2019. „Fast Projective Skinning“. In Proceedings of ACM Motion, Interaction and Games.

Waltemate, T., D. Gall, D. Roth, M. Botsch, und M. Latoschik. 2018. „The Impact of Avatar Personalization and Immersion on Virtual Body Ownership, Presence, and Emotional Response“. IEEE Transactions on Visualization and Computer Graphics 24 (4): 1643–52.

PDF-Unterstützung

  • Folien lassen sich auf Knopfdruck als PDF-Dokument exportieren.
  • PDF-Dokumente lassen sich in Präsentationen einbinden

Statische und dynamische Visualisierungen

Bild-Sequenzen

laserMario4.jpg laserMario3.jpg laserMario2.jpg laserMario1.jpg

Animierte Vektorgrafiken

image/svg+xml
de Casteljau Algorithmus

Interaktive Charts mit chart.js

1.0, 1.3, 1.7, 2.0, 2.3, 2.7, 3.0, 3.3, 3.7, 4.0, 5.0
Irgendwelche Zahlen, 5, 6, 5, 2, 3, 3, 4, 3, 3, 5, 11
Andere Zahlen, 11, 8, 5, 5, 2, 7, 4, 1, 5, 0, 15

Interaktive Charts mit chart.js

1.0, 1.3, 1.7, 2.0, 2.3, 2.7, 3.0, 3.3, 3.7, 4.0, 5.0
Irgendwelche Zahlen, 5, 6, 5, 2, 3, 3, 4, 3, 3, 5, 11

Graph-Diagramme mit GraphViz

Diagramme mit Tikz/Latex

Plots mit gnuplot

Decker error

/Users/botsch/git/slides/eLearning/.decker/code/code-c5fc68ca.gnuplot: openFile: resource busy (file is locked)

encountered while processing

``` {.gnuplot .render height="500px"}
set terminal svg 

set xrange [0:2500]
set yrange [0:1500]

set xtics nomirror
set ytics nomirror 
set key off
set tic font ",20"
set border 3

set xlabel "Grundstückspreis in 1000€" textcolor rgb "black" font "Arial, 25" offset 0
set ylabel "Grundstücksgröße in qm" textcolor rgb "black" font "Arial, 25" offset 0 rotate by 90

f1(x) = a + b * x
f2(x) = c + d * x + e * x * x
f3(x) = f + g * x + h * x * x + i * x * x * x

FIT_LIMIT = 1e-6

fit [0:2000] [0:1500] f1(x) "data/house-price-to-size.dat" via a,b
fit [0:2000] [0:1500] f2(x) "data/house-price-to-size.dat" via c,d,e
fit [0:2000] [0:1500] f3(x) "data/house-price-to-size.dat" via f,g,h,i

plot "data/house-price-to-size.dat" with points pt 7 ps 1 lw 1 lc rgb "#F09838", f1(x) title "Test" lc "blue"  lw 3, f2(x) lc "green" lw 3,  f3(x) lc "red" lw 3
```

Marc Latoschik, Uni Würzburg

Interaktive Plots

Auf 3D Surface klicken!

Martin Heistermann, Uni Bern

3D-Modelle

Space-Taste: Zeichenmodus ändern. Linke Maus: Rotieren

Polygon Mesh Processing Library

Interaktive Demos

Interaktive Demos in Javascript

de Casteljau Algorithmus: Kontrollpunkte verschieben, Parameter t verändern

Interaktive Demos mit D3.js

Voronoi-Diagramm (Punkte mit Maus verschieben)

Komplexere Demos in C++

Rechte Maustaste: Flüssigkeit injizieren. Linke Maustaste: Verwirbeln

Interaktive Mathe mit SAGE

Wir definieren ein paar Punkte \(\mathbf{x}_1, \dots, \mathbf{x}_6\) und verbinden sie zu einem Linienzug:

points = matrix([ [0,0], [1,1], [2,-1], [3,0], [2.5,0.5], [3,1] ])
pointsPlot = plot(line(points, color="red", aspect_ratio=1))
show(pointsPlot)

Jetzt interpolieren wir die Punkte \(\mathbf{x}_1, \dots, \mathbf{x}_n\) mit einem Polynom vom Grad \(n-1\). Testen Sie verschiedene Werte für \(n \in \{2, \dots, 6 \}\). Was fällt auf?

# select n points
n = 6
B = points.submatrix(0,0,n,2)

# define matrix for polynomial interpolation
A = matrix(n, n, lambda i,j: i^j)

# solve A*X=B, then X contains the poly coefficients
X = A\B

# define function for evaluating polynomial
var('k, coeffs, t')
def curve(coeffs, t):
    return sum(coeffs[k] * t^k for k in [0..n-1])
   
# finally, plot fitted curves and point set
curvePlot = parametric_plot(curve(X,t), (t, 0, n-1))
show(pointsPlot + curvePlot)

Interaktives Python

from math import exp,pi,cos,sin
import matplotlib.pyplot as plt
import numpy as np
x0=1; t0=0; tf=25; x=x0; t=t0;
h = pi/16
X=[]
T=[]
while t < tf:
    X.append(x)
    T.append(t)
    x = x + h*(-x*cos(t));
    t = t+h
plt.plot(T,X,'b*--')
T1=np.linspace(t0,tf,200);
plt.plot(T1,[exp(-sin(t)) for t in T1],'r-')
plt.title('h = %f' % (h))
plt.legend(('Numerical solution','Exact solution'),loc='upper left')
plt.show()

Example from Roberto De Leo, Howard University

Interaktive Statistic mit R und SAGE

Die Trainingsdaten bestehen aus Alter und Maximalpuls als \(x\)- und \(y\)-Koordinaten.

x = c(18,23,25,35,65,54,34,56,72,19,23,42,18,39,37) # ages of individuals
y = c(202,186,187,180,156,169,174,172,153,199,193,174,198,183,178) # maximum heart rate of each one
plot(x,y) # make a plot

Wir fitten jetzt eine Gerade durch lineare Regression:

plot(x,y) # make a plot
lm(y ~ x) # do the linear regression
abline(lm(y ~ x)) # plot the regression line

Shader-Programmierung

Press Ctrl-Enter or Cmd-Enter to compile shaders

Quizzes und Selbstlernphase

Audience Response System

Audience Response System

peach.png Wer bekommt am Ende die Prinzessin?

  • Donkey Kong donkeykong.png
    • Nein, der ist böse!
  • Sponge Bob spongebob.png
    • Nein, der lebt unter Wasser!
  • Kleine A-Loch arschloch.png
    • Nein, den mag keiner!
  • Supermario supermario.png
    • Klar!

Hier können Vorlesungsteilnehmer*innen online abstimmen, wenn der Quiz-Server gestartet wird.

Zuordnungsaufgaben

“Who is who” per Drag&Drop zuordnen

Prinzessin
Donkey Kong
Supermario
peach.png
donkeykong.png
supermario.png


Freitextaufgaben

peach.png

Wie heißt die Prinzessin?

donkeykong.png supermario.png spongebob.png

Die Prinzessin ist verliebt in .

Embedded NanoQuiz

Thanks to Christian Rössl, Uni Magdeburg

Folienerstellung

Von Markdown zu HTML

image/svg+xml     Markdown pandoc Reveal.js Filter Plugins

Open-Source “Zutatenliste”

  • Reveal.js
    • Javascript-Framework zur Darstellung von Folien im Webbrowser
  • Pandoc
    • Tool/Bibliothek zur Konvertierung von Markdown in Reveal.js-Folien.
  • decker
    • decker basiert auf pandoc und übersetzt Markdown in HTML-Folien.
    • Es erweitert pandoc und reveal.js um zusätzliche Filter und Plugins.
    • Wird entwickelt von Marc Latoschik & Team (Uni Würzburg), Henrik Tramberend (Beuth Hochschule Berlin) und Mario Botsch (Uni Bielefeld).
    • Wird verwendet an Uni Würzburg, Beuth Hochschule Berlin, Uni Bielefeld, Uni Osnabrück, Uni Bern und EPFL.