reexpress/warp.html at gh-pages · blendmaster/reexpress · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<link rel=stylesheet href=style.css>
<title>Beier-Neely Polymorphing</title>

<div>
  <label>Image 1: <input type=file id=i1></label>
  <label>Image 2: <input type=file id=i2></label>
  <label>Image 3: <input type=file id=i3></label>
</div>

<div>
  <label>p: <input type=range id=p min=0 max=1 value=1 step=0.01></label>
  <label>a: <input type=range id=a min=0 max=1 value=0 step=0.01></label>
  <label>b: <input type=range id=b min=0.5 max=2 value=1 step=0.01></label>
  <label>Show Lines: <input type=checkbox id=show-lines></label>
</div>

<div>
  <svg id=p0 width=250 height=250>
    <image class=image id=pi0 x=0 y=0 width=250 height=250></image>
    <g class=avg></g>
  </svg>
  <svg id=p1 width=250 height=250>
    <image class=image id=pi1 x=0 y=0 width=250 height=250></image>
    <g class=avg></g>
  </svg>
  <svg id=p2 width=250 height=250>
    <image class=image id=pi2 x=0 y=0 width=250 height=250></image>
    <g class=avg></g>
  </svg>
  <svg id=input width=250 height=250>
    <image class=image id=si0></image>
    <image class=image id=si1></image>
    <image class=image id=si2></image>
    <path id=triangle></path>
    <circle id=cursor r=10></circle>
  </svg>
</div>
<div>
  <canvas id=o1 width=250 height=250></canvas>
  <canvas id=o2 width=250 height=250></canvas>
  <canvas id=o3 width=250 height=250></canvas>
  <canvas id=output width=250 height=250>
    Yo, you need a modern browser that works with
    canvas elements!
  </canvas>
</div>

<footer>
  Demo of Beier-Neely polymorphing between multiple
  input images.
  Authored by Steven Ruppert and Daria Tolmacheva, 2014.
  <a href=https://github.com/blendmaster/reexpress>Source on Github.</a>
</footer>

<script src=util.js></script>
<script src=numeric-1.2.6.min.js></script>
<script src=d3.min.js></script>
<script src=warpD.js></script>
<script src=warp.js></script>