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

57
draw.ts
View File

@ -1,7 +1,8 @@
import { Vec2 } from "./common.js" import { Vec2 } from "./common.js"
import { Graphics } from "./graphics.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_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color"); 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, positions[2].x, positions[2].y,
] ]
const color: Array<number> = [ const colors: Array<number[]> = [
1, 0, 0, 1, color,
0, 1, 0, 1, color,
0, 0, 1, 1, color,
]; ];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW); 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); 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_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color"); 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, position.x, position.y + exts.y,
] ]
const color: Array<number> = [ const colors: Array<number[]> = [
1, 0, 0, 1, color,
0, 1, 0, 1, color,
0, 0, 1, 1, color,
]; ];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW); 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); 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_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color"); 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, position.x, position.y + exts.y,
] ]
const color: Array<number> = [ const colors: Array<number[]> = [
1, 0, 0, 1, color,
0, 1, 0, 1, color,
0, 0, 1, 1, color,
1, 0, 0, 1, color,
0, 1, 0, 1, color,
0, 0, 1, 1, color,
]; ];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW); 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); 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 points: Array<Vec2> = new Array<Vec2>();
const precision = 40; const precision = 40;
@ -89,11 +90,11 @@ function drawCircle(gfx: Graphics, position: Vec2, radius: number) {
const current = points[i]; const current = points[i];
const next = points[(i + 1) % points.length]; const next = points[(i + 1) % points.length];
let center = position; 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_position = gfx.getAttribute("a_position");
const a_color = gfx.getAttribute("a_color"); const a_color = gfx.getAttribute("a_color");
@ -102,13 +103,13 @@ function drawLine(gfx: Graphics, A: Vec2, B: Vec2) {
B.x, B.y, B.x, B.y,
]; ];
const color: Array<number> = [ const colors: Array<number[]> = [
1, 0, 0, 1, color,
0, 0, 1, 1, color,
]; ];
a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW); 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); 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); const position = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
gfx.clear(0, 0, 0, 0); gfx.clear(0, 0, 0, 0);
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height); gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
drawing.drawRectangle(gfx, position, new Vec2(200, 200)); 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)]); 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)); drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100), [0, 1, 0, 0.8]);
drawing.drawCircle(gfx, new Vec2(400, 200), 100); 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)); drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600), [1, 0, 0, 1]);
drawing.drawLine(gfx, new Vec2(0, 1), new Vec2(100, 1));
} }
(() => { (() => {
const canvasId = "game"; const canvasId = "game";

11
script.ts
View File

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