Live Note

Remain optimistic

Posted on Edited on In

一旦声明，值不可变

1
2
const PI = 3.14
PI = 3 //TypeError: Assignment to constant variable.

只声明不赋值也会报错。

1
const foo; //SyntaxError: Missing initializer in const declaration

实质为变量指向的内存地址不可变动

const 只能保证这个指针是固定的，不能控制数据结构的变化。

1
2
3
const foo = {}
foo.prop = 123 //Success
foo = {} //TypeError: 'foo' is read-only

对象冻结方法

使用 Object.freeze 函数，冻结对象

1
const foo = Object.freeze({})

冻结属性的函数

1
2
3
4
5
6
7
8
var makeConstant = (obj) => {
  Object.freeze(obj)
  Object.keys(obj).forEach((key, i) => {
    if (typeof obj[key] === "object") {
      makeConstant(obj[key])
    }
  })
}

Posted on Edited on In

data 自定义数据在 query、mobile 常用。

1
2
3
4
5
6
7
<div id="div1" data-test="hello" data-test-last="world"></div>

<script>
  let oDiv = document.getElementById("div1")
  oDiv.dataset.test //'hello'
  oDiv.dataset.testLast //'world'
</script>

Posted on Edited on In 
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
/**
 * set the cookie
 * @param {String} name
 * @param {String} value
 * @param {Number} day
 */
let setCookie = (name, value, day) => {
  let date = new Date()
  date.setDate(date.getDate() + day)
  document.cookie = name + "=" + value + ";expires=" + date
}

/**
 * get the cookie by name
 * @param {String} name
 */
let getCookie = (name) => {
  let str = document.cookie.split("; ").filter((i) => {
    let result = i.split("=")
    return result[0] == name
  })
  return str.length ? str[0].split("=")[1] : ""
}

/**
 * check user
 */
let checkCookie = () => {
  let username = document.cookie ? getCookie("username") : ""
  if (username != "") {
    alert("Welcome " + username)
  } else {
    username = prompt("please input your username")
    if (username && username != "") {
      setCookie("username", username, 7)
    }
  }
}

checkCookie()
console.log(getCookie("username"))

Posted on Edited on In

绘制流程

  1. 计算变换后的位置坐标。
  2. 清空画板。
  3. 绘制
  4. 循环 1-3 操作。

代码实现

使用库函数简化数学计算

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
const vShaderSource = `
    attribute vec4 a_Position;
    uniform mat4 u_ModelMatrix;
    void main() {
        gl_Position = u_ModelMatrix * a_Position;
    }
`

const fShaderSource = `
    void main() {
        gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
    }
`

const main = () => {
  const gl = document.querySelector("#canvas").getContext("webgl")
  if (!initShaders(gl, vShaderSource, fShaderSource)) reutrn

  let n = initVertexBuffers(gl)
  if (n < 0) return

  gl.clearColor(0, 0, 0, 1)

  rotating(gl, n, 360)
}

const rotating = (gl, n, ANGLE_STEP = 30) => {
  let currentAngle = 0
  let modelMatrix = new Matrix4()
  let u_ModelMatrix = gl.getUniformLocation(gl.program, "u_ModelMatrix")

  let tick = function () {
    currentAngle = animate(currentAngle, ANGLE_STEP)
    draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix)
    requestAnimationFrame(tick)
  }
  tick()
}

const draw = (gl, n, currentAngle, modelMatrix, u_ModelMatrix) => {
  modelMatrix.setRotate(currentAngle, 0, 0, 1) // Set rotation matrix.
  // modelMatrix.translate(0.5, 0, 0);
  gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)
  gl.clear(gl.COLOR_BUFFER_BIT) // Clear canvas.
  gl.drawArrays(gl.TRIANGLES, 0, n) // Draw triangle.
}

let g_last = Date.now()

/**
 * Get the new angle.
 * @param currentAngle {number}
 * @param ANGLE_STEP {number}
 * @returns {number}
 */
const animate = (currentAngle, ANGLE_STEP) => {
  let now = Date.now()
  let temp = now - g_last
  g_last = now
  return (currentAngle + (ANGLE_STEP * temp) / 1000) % 360
}

Posted on Edited on In

旋转原理

将 WebGL 坐标系转为极坐标，然后通过角度计算得出旋转后的左标位置。
旋转矩阵：

$$
\begin{bmatrix}
x’ \
y’ \
z’ \
1 \
\end{bmatrix} =
\begin{bmatrix}
\cos \beta & -\sin \beta & 0 & 0 \
\sin \beta & \cos \beta & 0 & 0 \
0 & 0 & 1 & 0 \
0 & 0 & 0 & 1 \
\end{bmatrix} ×
\begin{bmatrix}
x \
y \
z \
1 \
\end{bmatrix}
$$

代码实现

使用u_SinBCosB存放SinB与CosB。

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
/**
 * 2d rotate
 * x' = x * cosB - y * sinB
 * y' = x * sinB + y * cosB
 * z' = z
 */
const vShaderSource = `
    attribute vec4 a_Position;
    uniform vec2 u_SinBCosB;
    void main() {
        gl_Position.x = a_Position.x * u_SinBCosB.y - a_Position.y * u_SinBCosB.x;
        gl_Position.y = a_Position.x * u_SinBCosB.x + a_Position.y * u_SinBCosB.y;
        gl_Position.z = a_Position.z;
        gl_Position.w = 1.0;
    }
`

const fShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

let ANGLE = 30.0

function main() {
  const gl = document.querySelector("#canvas").getContext("webgl")
  if (!initShaders(gl, vShaderSource, fShaderSource)) return

  let n = initVertexBuffers(gl)
  if (n < 0) return

  let radian = (Math.PI * ANGLE) / 180.0 // Transform to radian.
  let SinB = Math.sin(radian)
  let CosB = Math.cos(radian)

  let u_SinBCosB = gl.getUniformLocation(gl.program, "u_SinBCosB")

  gl.uniform2f(u_SinBCosB, SinB, CosB)

  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.drawArrays(gl.TRIANGLES, 0, n)
}