２つのベクトルのなす角の内積・外積の数値の変化を確認 #HTML5

２つのベクトルのなす角が0°〜360°の間でどのように数値として変化するかを確認するDartのプログラム。

pubspec.yaml

name: dotcheck
dependencies:
    browser: any
    vector_math: any

index.html

<!DOCTYPE html>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="application/dart" src="dotcheck.dart"></script>
<script src="packages/browser/dart.js"></script>

dotcrosscheck.dart

import 'dart:html';
import 'dart:math';
import 'package:vector_math/vector_math.dart';

CanvasElement canvas;
CanvasRenderingContext2D ctx;

num theta = 0;
num r = 100;

Vector2 origin = new Vector2.zero();
Vector2 to = new Vector2.zero();

main() {
  canvas = document.query('#canvas');
  ctx = canvas.getContext('2d');

  ctx.strokeStyle = 'black';

  window.requestAnimationFrame(update);
}

num lastTime;
update(num time) {
  num dt = lastTime != null ? (time - lastTime) / 1000 : 0;
  lastTime = time;

  window.requestAnimationFrame(update);

  render();

  theta += (PI / 4) * dt;
  if (theta > PI * 2) {
    theta %= PI * 2;
  }
}

render() {
  ctx
    ..resetTransform()
    ..clearRect(0, 0, canvas.width, canvas.height)
    ..translate(canvas.width / 2, canvas.height / 2)
    ..beginPath()
    ..moveTo(0, 0)
    ..lineTo(r, 0)
    ..moveTo(0, 0)
    ..lineTo(cos(theta) * r, sin(theta) * r)
    ..stroke();

  origin
    ..x = 1
    ..y = 0;
  to
    ..x = cos(theta)
    ..y = sin(theta);

  ctx
    ..fillText('angle: ${(theta * 180 / PI).toInt()}', 10, 10)
    ..fillText('dot: ${origin.dot(to)}', 10, 30)
    ..fillText('cross: ${origin.cross(to)}', 10, 50);
}