facejam/index.html at master · point9repeating/facejam · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html>

<head>
  <title>facejam</title>
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <form oninput="cellsoutput.value = Math.pow(2, cells.value)" onchange="cellsoutput.value = Math.pow(2, cells.value)">
    <select name="shape">
      <!--<option value="ellipse">Ellipse</option>-->
      <option value="rect">Rectangle</option>
      <option value="circle">Circle</option>
      <option value="triangle">Triangle</option>
      <option value="parallelogram">Parallelogram</option>
      <!--<option value="star">Star</option>-->
      <option value="pentagon">Pentagon</option>
      <option value="random">Random</option>
    </select>
    <label for="min-decibels">
      Sensitivity
      <input id="min-decibels" type="range" min="40" max="180" step="10" value="120" />
    </label>
    <label for="distortion">
      Distortion
      <input id="distortion" type="range" min="1" max="20" step="1" value="2" />
    </label>
    <label for="colorsort-l">
      <input id="colorsort-l" name="colorsort" type="radio" value="l" checked />
      Lightness
    </label>
    <label for="colorsort-h">
      <input id="colorsort-h" name="colorsort" type="radio" value="h" />
      Hue
    </label>
    <label for="colorsort-s">
      <input id="colorsort-s" name="colorsort" type="radio" value="s" />
      Saturation
    </label>
    <label for="reverse-sort">
      <input id="reverse-sort" name="reverse-sort" type="checkbox" />
      Reverse color sort
    </label>
    <label for="fill">
      <input id="fill" name="fill" type="checkbox" checked />
      Fill
    </label>
    <label for="stroke">
      <input id="stroke" name="stroke" type="checkbox" checked />
      Stroke
    </label>
    <input name="cells" type="range" min="0" step="1" max="7" value="6"/>
    <output name="cellsoutput" for="cells">64</output>
    <button name="usecam">Webcam</button>
    <button name="usemic">Mic</button>
  </form>
  <div id="performance">
    <div>
      fps:
      <span id="fps"></span>
    </div>
    <div>
      pixel-averaging:
      <span id="pixelmath-perf"></span>
      ms
    </div>
    <div>
      image-data:
      <span id="image-data-perf"></span>
      ms
    </div>
    <div>
      sort:
      <span id="sort-perf"></span>
      ms
    </div>
    <div>
      hsl:
      <span id="hsl-perf"></span>
      ms
    </div>
    <div>
      rendering:
      <span id="render-perf"></span>
      ms
    </div>
  </div>
  <canvas id="colorbar"></canvas>
  <canvas id="facejam"></canvas>
  <div id="timeline"></div>
  <video></video>
  <audio></audio>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js" charset="utf-8"></script>
  <!--<script src="//connect.soundcloud.com/sdk.js"></script>-->
  <script src="js/inyourface.canvas.js"></script>
  <script src="js/facejam.js"></script>
</body>

</html>