MaciejSamborski
/
webgl_game
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Color parameter to drawing functions

This commit is contained in:
Maciej Samborski 2024-12-13 14:12:26 +01:00
parent 4835d7ef21
commit 3fabeb109b
5 changed files with 70 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common.ts
View File

@ -5,6 +5,8 @@ function initializeContext(canvasId: string): WebGL2RenderingContext | null {
return ctx;
}
type Color = [number, number, number, number]
class Vec2 {
x: number;
y: number;
@ -78,4 +80,4 @@ class Vec3 {
}
}
export { initializeContext, Vec2, Vec3 };
export { initializeContext, Vec2, Vec3, Color };

56
draw.js
View File

@ -1,5 +1,5 @@
import { Vec2 } from "./common.js";
function drawTriangle(gfx, positions) {
function drawTriangle(gfx, positions, color) {
const a_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color");
const points = [
@ -7,16 +7,16 @@ function drawTriangle(gfx, positions) {
positions[1].x, positions[1].y,
positions[2].x, positions[2].y,
];
const color = [
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1,
const colors = [
color,
color,
color,
];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
}
function drawTriangleExts(gfx, position, exts) {
function drawTriangleExts(gfx, position, exts, color) {
const a_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color");
const points = [
@ -24,16 +24,16 @@ function drawTriangleExts(gfx, position, exts) {
position.x + exts.x, position.y,
position.x, position.y + exts.y,
];
const color = [
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1,
const colors = [
color,
color,
color,
];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
}
function drawRectangle(gfx, position, exts) {
function drawRectangle(gfx, position, exts, color) {
const a_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color");
const points = [
@ -44,19 +44,19 @@ function drawRectangle(gfx, position, exts) {
position.x + exts.x, position.y,
position.x, position.y + exts.y,
];
const color = [
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1,
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1,
const colors = [
color,
color,
color,
color,
color,
color,
];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
}
function drawCircle(gfx, position, radius) {
function drawCircle(gfx, position, radius, color) {
const points = new Array();
const precision = 40;
const angle = 2.0 * Math.PI / precision;
@ -71,22 +71,22 @@ function drawCircle(gfx, position, radius) {
const current = points[i];
const next = points[(i + 1) % points.length];
let center = position;
drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)], color);
}
}
function drawLine(gfx, A, B) {
function drawLine(gfx, A, B, color) {
const a_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color");
let points = [
A.x, A.y,
B.x, B.y,
];
const color = [
1, 0, 0, 1,
0, 0, 1, 1,
const colors = [
color,
color,
];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
}
export { drawTriangle, drawTriangleExts, drawRectangle, drawCircle, drawLine };

57
draw.ts
View File

@ -1,7 +1,8 @@
import { Vec2 } from "./common.js"
import { Graphics } from "./graphics.js";
import { Color } from "./common.js";
function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2]) {
function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2], color: Color) {
const a_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color");
@ -11,18 +12,18 @@ function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2]) {
positions[2].x, positions[2].y,
]
const color: Array<number> = [
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1,
const colors: Array<number[]> = [
color,
color,
color,
];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
}
function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2) {
function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2, color: Color) {
const a_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color");
@ -32,18 +33,18 @@ function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2) {
position.x, position.y + exts.y,
]
const color: Array<number> = [
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1,
const colors: Array<number[]> = [
color,
color,
color,
];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
}
function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2) {
function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2, color: Color) {
const a_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color");
@ -57,22 +58,22 @@ function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2) {
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,
const colors: Array<number[]> = [
color,
color,
color,
color,
color,
color,
];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
}
function drawCircle(gfx: Graphics, position: Vec2, radius: number) {
function drawCircle(gfx: Graphics, position: Vec2, radius: number, color: Color) {
const points: Array<Vec2> = new Array<Vec2>();
const precision = 40;
@ -89,11 +90,11 @@ function drawCircle(gfx: Graphics, position: Vec2, radius: number) {
const current = points[i];
const next = points[(i + 1) % points.length];
let center = position;
drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)], color);
}
}
function drawLine(gfx: Graphics, A: Vec2, B: Vec2) {
function drawLine(gfx: Graphics, A: Vec2, B: Vec2, color: Color) {
const a_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color");
@ -102,13 +103,13 @@ function drawLine(gfx: Graphics, A: Vec2, B: Vec2) {
B.x, B.y,
];
const color: Array<number> = [
1, 0, 0, 1,
0, 0, 1, 1,
const colors: Array<number[]> = [
color,
color,
];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
}

11
script.js
View File

@ -30,12 +30,11 @@ function draw(gfx) {
const position = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
gfx.clear(0, 0, 0, 0);
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
drawing.drawRectangle(gfx, position, new Vec2(200, 200));
drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
drawing.drawCircle(gfx, new Vec2(400, 200), 100);
drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
drawing.drawLine(gfx, new Vec2(0, 1), new Vec2(100, 1));
drawing.drawRectangle(gfx, position, new Vec2(200, 200), [0, 0, 1, 1]);
drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)], [1, 0, 0, 1]);
drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100), [0, 1, 0, 0.8]);
drawing.drawCircle(gfx, new Vec2(400, 200), 100, [0.7, 0.1, 0.1, 1]);
drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600), [1, 0, 0, 1]);
}
(() => {
const canvasId = "game";

11
script.ts
View File

@ -38,12 +38,11 @@ function draw(gfx: Graphics) {
gfx.clear(0, 0, 0, 0);
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
drawing.drawRectangle(gfx, position, new Vec2(200, 200))
drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
drawing.drawCircle(gfx, new Vec2(400, 200), 100);
drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
drawing.drawLine(gfx, new Vec2(0, 1), new Vec2(100, 1));
drawing.drawRectangle(gfx, position, new Vec2(200, 200), [0, 0, 1, 1]);
drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)], [1, 0, 0, 1]);
drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100), [0, 1, 0, 0.8]);
drawing.drawCircle(gfx, new Vec2(400, 200), 100, [0.7, 0.1, 0.1, 1]);
drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600), [1, 0, 0, 1]);
}
(() => {