Live Note

绘制多个点

Posted on 2020-06-18 In WebGL

绘制步骤

创建顶点数组。
创建一个 Buffer。
将 WebGL 的 ARRAY_BUFFER 指向所创建的 Buffer。
将顶点数组赋值到 Buffer 中。
将 Buffer 分配给 Vertex Shader 中的 Attribute。
让 Vertex Shader 访问 Buffer。

const vShaderSource = `
    attribute vec4 a_Position;
    void main() {
        gl_Position = a_Position;
        gl_PointSize = 5.0;
    }
`

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

function main() {
  const gl = document.querySelector("#canvas").getContext("webgl")

  if (!initShaders(gl, vShaderSource, fShaderSource)) {
    return
  }

  let n = initVertexBuffers(gl)
  if (n < 0) {
    console.log("failed to set positions")
    return
  }

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

  gl.drawArrays(gl.POINTS, 0, n) // (type, first, count = n)
}

function initVertexBuffers(gl) {
  let vertices = new Float32Array([
    // Create points array.
    0.0, 0.5, -0.5, -0.5, 0.5, -0.5,
  ])
  let n = vertices.length / 2 // Compute the n.

  let vertexBuffer = gl.createBuffer() // Create buffer.
  if (!vertexBuffer) {
    console.log("failed to create buffer")
    return -1
  }

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer) // Bind buffer.
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW) // Draw data into buffer.

  let a_Position = gl.getAttribLocation(gl.program, "a_Position")

  // size = 2 because of the [x, y] components
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0) // Set data into 'a_Position'.
  gl.enableVertexAttribArray(a_Position) // Link attribute and Buffer.

  return n
}

绘制点

Posted on 2020-06-17 In WebGL

Shader

WebGL 使用两种 Shader：

Vertex Shader：用于描述 point 的特性。
Fragment Shader：用于逐片处理。

Shader Program 使用的是 GLSL ES 语言，在 JS 中需要使用字符串编写，再通过函数加载进去。

WebGL 的执行流程大致为：

Get canvas.
Get WebGL context.
Initialize vertex shader and fragment shader.
Set clear color.
Clear canvas.
Draw.

vec4

在 GLSL ES 中，vec4类型用四维适量描述一个点的三维空间投影，(x, y, z, w)等价与三维空间的(x / w, y / w, z / w)。
WebGL 坐标系统水平向右为 x 正轴，竖直向上为 y 正轴，垂直屏幕向外为 z 正轴。范围都在[-1, 1]之间。

美股再次熔断

Posted on 2020-03-13

开盘受挫

开盘后，标普 500 指数跌幅扩大至 7%，触发本周第二次熔断，美股暂停交易 15 分钟。而加拿大多伦多证交所暂停股票交易，股指跌 9.17%，触发一级市场熔断。
恢复交易后，三大指数进一步下跌，道指一度下挫 2100 点。波音下跌 15.4%，仅仅一个月时间，市值腰斩。巴里克黄金 10.2%，特斯拉跌 9.4%。美股邮轮股大跌，挪威邮轮跌超 30%，皇家加勒比邮轮跌超 25%。
今天，美股期货连续出现熔断，早间，纳斯达克指数期货就跌至 7600 点触发熔断，跌幅超 5%。下午标普 500 指数期货跌超 5%，也触发交易限制。
今日，标普 500 期货、道指期货、纳指期货均跌超 5%，再度触发熔断。据不完全统计，除了美股期指外，日内还有泰国股市、菲律宾股市、韩国股市、巴基斯坦股市、印尼股市、巴西股市，加拿大股市 8 个国家股市发生熔断。巴西股市触发二级熔断

欧洲央行维持三大关键利率不变

欧洲央行公布 3 月会议的利率决议，其中，欧洲央行是否会追随美联储和英国央行的步伐进行降息成为最大看点，今日，欧洲央行宣布，维持三大关键利率不变，其中，维持基准利率在 0.000%不变，将存款利率维持在-0.500%不变。此前市场预期降息 10 个基点。

比特币跌破 5000,24h 涨幅-40%

北京时间 13/03/2020 7:30am，BTC 跌破 5000 美元。短线来看 BTC 的避险属性几乎为零。

比特币跌破 4000,24h 涨幅-47%

北京时间 13/03/2020 10:15am

美股熔断

Posted on 2020-03-10

股市停止跳动

美国股市有熔断制度：

当大盘跌幅达到-7%的时候，触发 1 级熔断，美国证券市场停止交易 15 分钟。
当大盘跌幅达到-13%的时候，触发 2 级熔断，美国证券市场再停止交易 15 分钟。
当大盘跌幅达到-20%的时候，触发 3 级熔断，当天直接停盘，不再交易。

这是自颁布以来，继 1997/10/27 之后的第二次熔断。主要的原因很有可能是石油大国之间的价格战争。

石油减产协议

2020/3/6，欧佩克和俄罗斯谈崩，无法达成减产 150 万/日的协议。
2020/3/7，沙特发出增产公告，并大幅度调整官方油价，俄罗斯也应战，增加石油产量。
周一开盘，国际油价暴跌 30%，危机情绪加大，引发各国股市大幅震荡。

TypeScript Type Compatibility

Posted on 2020-03-06 In TypeScript

Introduction

interface A {
  text: string
}

class B {
  text: string
}

let a: A = new B() // no error

At least same member

interface A {
  text: string
}

function foo(obj: { text: string }): string {
  return obj.text
}

let obj = { text: "some text", num: 3 }
let a: A = obj // success
foo(obj) // success

TypeScript Enums

Posted on 2020-03-05 In TypeScript

Numeric enums

enum Direction {
  UP,
  DOWN,
  LEFT,
  RIGHT,
}

function move(length: number, direction: Direction): void {
  console.log(`move: ${direction} ${length}meters.`)
}

move(10, Direction.UP)

String enums

enum Direction {
  UP = "UP",
  DOWN = "DOWN",
  LEFT = "LEFT",
  RIGHT = "RIGHT",
}

TypeScript Generics

Posted on 2020-03-04 In TypeScript

Generics

function foo<T>(arg: T): T {
  return arg
}

function len<T>(arg: Array<T>): Array<T> {
  console.log(arg.length)
  return arg
}

Generics Types

function foo<T>(arg: T): T {
  return arg
}

interface fooInterface<T> {
  (arg: T): T
}

let myFunction: <T>(arg: T) => T = foo
let otherFunction: { <T>(arg: T): T } = foo
let interfaceFunction: fooInterface<number> = foo

TypeScript Functions

Posted on 2020-03-03 In TypeScript

Function Types

Typing the function

function foo(x: number, y: string): string {
  return x + y
}

let fo = function (x: number, y: string): string {
  return x + y
}

Writing the function type

let foo: (x: number, y: string) => string = function (
  x: number,
  y: string
): string {
  return x + y
}

Inferring types

1
2
3

let foo: (x: number, y: string) => string = function (x, y) {
  return x + y
}

TypeScript Classes

Posted on 2020-02-29 In TypeScript

Classes

class Greeter {
  greeting: string

  constructor(message: string) {
    this.greeting = message
  }

  greet(): string {
    return "Hello, " + this.greeting
  }
}

Private

class Animal {
  constructor(private name: string) {}
}

class Horse extends Animal {
  constructor() {
    super("Horse")
  }
}

class Human {
  constructor(private name: string) {}
}

let animal = new Animal("Lucy")
let horse = new Horse()
let human = new Human("Jack")
animal = horse // success
animal = human // failed

TypeScript Interface

Posted on 2020-02-26 In TypeScript

Interface

interface labelValue {
  label: string
}

function printLabel(obj: labelValue): void {
  console.log(obj.label)
}

let obj = { size: 10, label: "some text" }
printLabel(obj)

Optional Properties

interface SquareConfig {
  color?: string
  width?: number
}

function createSquare(config: SquareConfig): { color: string; area: number } {
  let defaultSquare = { color: "White", area: 200 }
  if (config.color) defaultSquare.color = config.color
  if (config.width) defaultSquare.area = config.width ** 2

  return defaultSquare
}

console.log(createSquare({ color: "Black", width: 30 }))

Readonly Properties

interface Point {
  readonly x: number
  readonly y: number
}

let readOnlyArray: ReadonlyArray<number> = [1, 2, 3, 4]
let a: number[] = readOnlyArray as number[] // readonly array assignment to ordinary array

Excess Property Checks

interface SquareConfig {
  color?: string
  width?: number
  [propName: string]: any
}

let newSquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig)