cube/index.html at master · d-band/cube · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cube</title>
  <link rel="shortcut icon" type="image/x-icon" href="https://g-cdn.jsmartx.com/cube.ico"/>
  <link rel="stylesheet" href="/index.css">
</head>
<body>
  <div class="container">
    <div class="content">
      <button id="getState" type="button" class="btn state-btn"></button>
      <div class="rubiks-cube">
        <canvas id="glcanvas" width="640" height="480">
          Your browser does not support the HTML5 canvas tag.
        </canvas>
      </div>
    </div>
    <div class="sidebar">
      <div class="colors">
        <div class="btn-square color-U" data-k="U"></div>
        <div class="btn-square color-R" data-k="R"></div>
        <div class="btn-square color-F" data-k="F"></div>
        <div class="btn-square color-D" data-k="D"></div>
        <div class="btn-square color-L" data-k="L"></div>
        <div class="btn-square color-B" data-k="B"></div>
      </div>
      <div class="surfaces"></div>
      <div class="cube-state">
        <input type="text" class="form-input output">
        <button id="solve" type="button" class="btn btn-primary">Solve</button>
      </div>
      <div class="cube-solved">
        <div class="solved-output form-input"></div>
        <div class="btns">
          <button id="prev" type="button" class="btn">Prev</button>
          <button id="next" type="button" class="btn">Next</button>
        </div>
      </div>
      <div class="controls">
        <div class="input-group speed-wrap">
          <input id="speedInput" type="text" class="form-input" readonly>
          <button id="speedup" type="button" class="btn input-group-btn">+</button>
          <button id="slowdown" type="button" class="btn input-group-btn">-</button>
        </div>
        <div class="input-group shuffle-wrap">
          <div class="progress-bar">
            <div id="progressBar" class="progress" style="width: 0;"></div>
          </div>
          <select id="shuffleLength" class="form-input">
            <option value="50">50 Rotations</option>
            <option value="200">200 Rotations</option>
            <option value="1000">1000 Rotations</option>
          </select>
          <button id="shuffle" type="button" class="btn input-group-btn">Shuffle</button>
        </div>
        <button id="capture" type="button" class="btn">Capture</button>
        <button id="reset" type="button" class="btn reset-btn">Reset</button>
      </div>
    </div>
  </div>
  <div class="modal fade" id="captureModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Face Color Detection</h5>
          <button type="button" class="close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="camera">
            <video id="captureVideo" class="capture-video">Video stream not available.</video>
            <div class="rect-cells">
              <div class="rect-h"></div>
              <div class="rect-v"></div>
            </div>
          </div>
          <canvas id="captureCanvas" class="capture-canvas"></canvas>
        </div>
        <div class="modal-footer">
          <span class="current-face">Current face: <span id="currentFace"></span></span>
          <button id="detectColors" type="button" class="btn btn-primary">Detect Colors</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Fragment shader program -->
  <script id="shader-fs" type="x-shader/x-fragment">
    varying highp vec2 vTextureCoord;
    varying highp vec3 vLighting;
    uniform sampler2D uSampler;
    void main(void) {
      highp vec4 texelColor = texture2D(uSampler,
      vec2(vTextureCoord.s, vTextureCoord.t));
      gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
    }
  </script>
  <!-- Vertex shader program -->
  <script id="shader-vs" type="x-shader/x-vertex">
    attribute highp vec3 aVertexNormal;
    attribute highp vec3 aVertexPosition;
    attribute highp vec2 aTextureCoord;

    uniform highp mat4 uNormalMatrix;
    uniform highp mat4 uMVMatrix;
    uniform highp mat4 uPMatrix;

    varying highp vec2 vTextureCoord;
    varying highp vec3 vLighting;

    void main(void) {
      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
      vTextureCoord = aTextureCoord;
      // Apply lighting effect
      highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
      highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
      highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
      highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
      highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
      vLighting = ambientLight + (directionalLightColor * directional);
    }
  </script>
  <script type="text/javascript" src="/index.js"></script>
</body>
</html>