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

Added dvd bouncing effect as default example

This commit is contained in:
Maciej Samborski 2024-12-13 14:43:37 +01:00
parent 3fabeb109b
commit bae774a0ec
4 changed files with 69 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
common.js
View File

@ -14,9 +14,16 @@ class Vec2 {
this.x += other.x;
this.y += other.y;
}
addScalar(scalar) {
this.x += scalar;
this.y += scalar;
}
addNew(other) {
return new Vec2(this.x + other.x, this.y + other.y);
}
addScalarNew(scalar) {
return new Vec2(this.x + scalar, this.y + scalar);
}
sub(other) {
this.x -= other.x;
this.y -= other.y;
@ -25,6 +32,9 @@ class Vec2 {
this.x *= scalar;
this.y *= scalar;
}
multNew(scalar) {
return new Vec2(this.x * scalar, this.y * scalar);
}
splatToArray() {
return [this.x, this.y];
}

13
common.ts
View File

@ -21,10 +21,19 @@ class Vec2 {
this.y += other.y;
}
addScalar(scalar: number) {
this.x += scalar;
this.y += scalar;
}
addNew(other: Vec2): Vec2 {
return new Vec2(this.x + other.x, this.y + other.y);
}
addScalarNew(scalar: number): Vec2 {
return new Vec2(this.x + scalar, this.y + scalar);
}
sub(other: Vec2) {
this.x -= other.x;
this.y -= other.y;
@ -35,6 +44,10 @@ class Vec2 {
this.y *= scalar;
}
multNew(scalar: number): Vec2 {
return new Vec2(this.x * scalar, this.y * scalar);
}
splatToArray(): Array<number> {
return [this.x, this.y];
}

32
script.js
View File

@ -26,15 +26,15 @@ const fragmentShader = `#version 300 es
outColor = color;
}
`;
function draw(gfx) {
const position = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
function draw(gfx, dt, pos, velocity) {
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), [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]);
drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0)
velocity.x *= -1;
if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0)
velocity.y *= -1;
pos.add(velocity.multNew(dt));
}
(() => {
const canvasId = "game";
@ -48,9 +48,19 @@ function draw(gfx) {
const a_color = gfx.createAttribute("a_color");
a_color.format(4, gfx.ctx.FLOAT, false, 0, 0);
gfx.createUniform("u_resolution");
draw(gfx);
window.onresize = () => {
fullscreenCanvas(gfx, canvasId);
draw(gfx);
let pos = new Vec2(300, 300);
let velocity = new Vec2(200, 200);
let prevTimestamp = 0;
const frame = (timestamp) => {
const deltaTime = (timestamp - prevTimestamp) / 1000;
const time = timestamp / 1000;
prevTimestamp = timestamp;
fullscreenCanvas(gfx, "game");
draw(gfx, deltaTime, pos, velocity);
window.requestAnimationFrame(frame);
};
window.requestAnimationFrame((timestamp) => {
prevTimestamp = timestamp;
window.requestAnimationFrame(frame);
});
})();

37
script.ts
View File

@ -33,16 +33,15 @@ const fragmentShader =
function draw(gfx: Graphics) {
const position: Vec2 = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
function draw(gfx: Graphics, dt: number, pos: Vec2, velocity: Vec2) {
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), [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]);
drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0) velocity.x *= -1;
if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0) velocity.y *= -1;
pos.add(velocity.multNew(dt));
}
(() => {
@ -61,9 +60,23 @@ function draw(gfx: Graphics) {
gfx.createUniform("u_resolution");
draw(gfx);
window.onresize = () => {
fullscreenCanvas(gfx, canvasId);
draw(gfx);
let pos = new Vec2(300, 300);
let velocity = new Vec2(200, 200);
let prevTimestamp = 0;
const frame = (timestamp: number) => {
const deltaTime = (timestamp - prevTimestamp)/1000;
const time = timestamp/1000;
prevTimestamp = timestamp;
fullscreenCanvas(gfx, "game");
draw(gfx, deltaTime, pos, velocity);
window.requestAnimationFrame(frame);
}
window.requestAnimationFrame((timestamp) => {
prevTimestamp = timestamp;
window.requestAnimationFrame(frame);
});
})();