115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import { Vec2 } from "./common.js"
|
|
import { Graphics } from "./graphics.js";
|
|
|
|
function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2]) {
|
|
const a_position = gfx.getAttribute("a_position");
|
|
const a_color = gfx.getAttribute("a_color");
|
|
|
|
const points: Array<number> = [
|
|
positions[0].x, positions[0].y,
|
|
positions[1].x, positions[1].y,
|
|
positions[2].x, positions[2].y,
|
|
]
|
|
|
|
const color: Array<number> = [
|
|
1, 0, 0, 1,
|
|
0, 1, 0, 1,
|
|
0, 0, 1, 1,
|
|
];
|
|
|
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
|
}
|
|
|
|
function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2) {
|
|
const a_position = gfx.getAttribute("a_position");
|
|
const a_color = gfx.getAttribute("a_color");
|
|
|
|
const points: Array<number> = [
|
|
position.x, position.y,
|
|
position.x + exts.x, position.y,
|
|
position.x, position.y + exts.y,
|
|
]
|
|
|
|
const color: Array<number> = [
|
|
1, 0, 0, 1,
|
|
0, 1, 0, 1,
|
|
0, 0, 1, 1,
|
|
];
|
|
|
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
|
|
}
|
|
|
|
function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2) {
|
|
const a_position = gfx.getAttribute("a_position");
|
|
const a_color = gfx.getAttribute("a_color");
|
|
|
|
const points: Array<number> = [
|
|
position.x, position.y,
|
|
position.x + exts.x, position.y,
|
|
position.x, position.y + exts.y,
|
|
|
|
position.x + exts.x, position.y + exts.y,
|
|
position.x + exts.x, position.y,
|
|
position.x, position.y + exts.y,
|
|
]
|
|
|
|
const color: Array<number> = [
|
|
1, 0, 0, 1,
|
|
0, 1, 0, 1,
|
|
0, 0, 1, 1,
|
|
1, 0, 0, 1,
|
|
0, 1, 0, 1,
|
|
0, 0, 1, 1,
|
|
];
|
|
|
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
|
|
|
|
}
|
|
|
|
function drawCircle(gfx: Graphics, position: Vec2, radius: number) {
|
|
const points: Array<Vec2> = new Array<Vec2>();
|
|
|
|
const precision = 40;
|
|
const angle = 2.0*Math.PI/precision;
|
|
let a = 0;
|
|
for (let i = 0; i < precision; ++i) {
|
|
var vec = Vec2.angle(a);
|
|
vec.mult(radius);
|
|
a += angle;
|
|
points.push(vec);
|
|
}
|
|
|
|
for (let i = 0; i < points.length; i++) {
|
|
const current = points[i];
|
|
const next = points[(i + 1) % points.length];
|
|
let center = position;
|
|
drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
|
|
}
|
|
}
|
|
|
|
function drawLine(gfx: Graphics, A: Vec2, B: Vec2) {
|
|
const a_position = gfx.getAttribute("a_position");
|
|
const a_color = gfx.getAttribute("a_color");
|
|
|
|
let points: Array<number> = [
|
|
A.x, A.y,
|
|
B.x, B.y,
|
|
];
|
|
|
|
const color: Array<number> = [
|
|
1, 0, 0, 1,
|
|
0, 0, 1, 1,
|
|
];
|
|
|
|
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
|
|
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
|
|
gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
|
|
}
|
|
|
|
export { drawTriangle, drawTriangleExts, drawRectangle, drawCircle, drawLine } |