From 4835d7ef212020bd003c405d36f993d3a9192959 Mon Sep 17 00:00:00 2001 From: Maciej Samborski Date: Fri, 13 Dec 2024 14:05:38 +0100 Subject: [PATCH] Refactored drawing functions --- common.js | 7 ++- common.ts | 9 +++- draw.js | 92 +++++++++++++++++++++++++++++++++ draw.ts | 115 ++++++++++++++++++++++++++++++++++++++++++ graphics.js | 8 ++- graphics.ts | 11 +++- script.js | 120 ++++--------------------------------------- script.ts | 143 ++++------------------------------------------------ style.css | 5 +- 9 files changed, 263 insertions(+), 247 deletions(-) create mode 100644 draw.js create mode 100644 draw.ts diff --git a/common.js b/common.js index 1a9768c..18aac64 100644 --- a/common.js +++ b/common.js @@ -1,3 +1,8 @@ +function initializeContext(canvasId) { + const canvas = document.getElementById(canvasId); + const ctx = canvas.getContext("webgl2", { antialias: false }); + return ctx; +} class Vec2 { x; y; @@ -56,4 +61,4 @@ class Vec3 { this.z -= other.z; } } -export { Vec2, Vec3 }; +export { initializeContext, Vec2, Vec3 }; diff --git a/common.ts b/common.ts index 2dfbf41..fb63275 100644 --- a/common.ts +++ b/common.ts @@ -1,3 +1,10 @@ +function initializeContext(canvasId: string): WebGL2RenderingContext | null { + const canvas = document.getElementById(canvasId) as HTMLCanvasElement; + const ctx = canvas.getContext("webgl2", {antialias: false}); + + return ctx; +} + class Vec2 { x: number; y: number; @@ -71,4 +78,4 @@ class Vec3 { } } -export {Vec2, Vec3}; +export { initializeContext, Vec2, Vec3 }; diff --git a/draw.js b/draw.js new file mode 100644 index 0000000..28d50e1 --- /dev/null +++ b/draw.js @@ -0,0 +1,92 @@ +import { Vec2 } from "./common.js"; +function drawTriangle(gfx, positions) { + const a_position = gfx.getAttribute("a_position"); + const a_color = gfx.getAttribute("a_color"); + const points = [ + positions[0].x, positions[0].y, + 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, + ]; + 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, position, exts) { + const a_position = gfx.getAttribute("a_position"); + const a_color = gfx.getAttribute("a_color"); + const points = [ + position.x, position.y, + 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, + ]; + 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, position, exts) { + const a_position = gfx.getAttribute("a_position"); + const a_color = gfx.getAttribute("a_color"); + const points = [ + 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 = [ + 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, position, radius) { + const points = new Array(); + 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, A, B) { + 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, + ]; + 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 }; diff --git a/draw.ts b/draw.ts new file mode 100644 index 0000000..d59ecc0 --- /dev/null +++ b/draw.ts @@ -0,0 +1,115 @@ +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 = [ + positions[0].x, positions[0].y, + positions[1].x, positions[1].y, + positions[2].x, positions[2].y, + ] + + const color: Array = [ + 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 = [ + position.x, position.y, + position.x + exts.x, position.y, + position.x, position.y + exts.y, + ] + + const color: Array = [ + 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 = [ + 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 = [ + 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 = new Array(); + + 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 = [ + A.x, A.y, + B.x, B.y, + ]; + + const color: Array = [ + 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 } \ No newline at end of file diff --git a/graphics.js b/graphics.js index 078d4f1..e7e2db7 100644 --- a/graphics.js +++ b/graphics.js @@ -1,3 +1,9 @@ +function fullscreenCanvas(gfx, id) { + const canvas = document.getElementById(id); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + gfx.ctx.viewport(0, 0, canvas.width, canvas.height); +} function createShader(ctx, type, source) { var shader = ctx.createShader(type); if (!shader) { @@ -101,4 +107,4 @@ class Attribute { ctx.vertexAttribPointer(this.loc, this.size, this.type, this.normalized, this.stride, this.offset); } } -export { Graphics, Attribute }; +export { fullscreenCanvas, Graphics, Attribute }; diff --git a/graphics.ts b/graphics.ts index db646d1..1518381 100644 --- a/graphics.ts +++ b/graphics.ts @@ -1,3 +1,12 @@ +import { Vec2 } from "./common.js" + +function fullscreenCanvas(gfx: Graphics, id: string) { + const canvas = document.getElementById(id) as HTMLCanvasElement; + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + gfx.ctx.viewport(0, 0, canvas.width, canvas.height); +} + function createShader(ctx: WebGL2RenderingContext, type: GLenum, source: string): WebGLShader { var shader = ctx.createShader(type); if (!shader) { @@ -136,4 +145,4 @@ class Attribute { } } -export { Graphics, Attribute } +export { fullscreenCanvas, Graphics, Attribute } diff --git a/script.js b/script.js index d53d3c2..da228da 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,6 @@ -import { Vec2 } from "./common.js"; -import { Graphics } from "./graphics.js"; +import { initializeContext, Vec2 } from "./common.js"; +import { Graphics, fullscreenCanvas } from "./graphics.js"; +import * as drawing from "./draw.js"; const vertexShader = `#version 300 es in vec2 a_position; @@ -25,123 +26,24 @@ const fragmentShader = `#version 300 es outColor = color; } `; -function initializeContext(canvasId) { - const canvas = document.getElementById(canvasId); - const ctx = canvas.getContext("webgl2", { antialias: false }); - return ctx; -} -function drawTriangle(gfx, positions) { - const a_position = gfx.getAttribute("a_position"); - const a_color = gfx.getAttribute("a_color"); - const points = [ - positions[0].x, positions[0].y, - 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, - ]; - 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, position, exts) { - const a_position = gfx.getAttribute("a_position"); - const a_color = gfx.getAttribute("a_color"); - const points = [ - position.x, position.y, - 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, - ]; - 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, position, exts) { - const a_position = gfx.getAttribute("a_position"); - const a_color = gfx.getAttribute("a_color"); - const points = [ - 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 = [ - 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, position, radius) { - const points = new Array(); - 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, A, B) { - 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, - ]; - 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); -} -function fullscreenCanvas(id) { - const canvas = document.getElementById(id); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; -} 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); - drawRectangle(gfx, position, new Vec2(200, 200)); - drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]); - drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100)); - drawCircle(gfx, new Vec2(400, 200), 100); - drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600)); + 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)); } (() => { const canvasId = "game"; - fullscreenCanvas(canvasId); const ctx = initializeContext(canvasId); if (ctx === null) return; const gfx = new Graphics(ctx, vertexShader, fragmentShader); + fullscreenCanvas(gfx, canvasId); const a_position = gfx.createAttribute("a_position"); a_position.format(2, gfx.ctx.FLOAT, false, 0, 0); const a_color = gfx.createAttribute("a_color"); @@ -149,7 +51,7 @@ function draw(gfx) { gfx.createUniform("u_resolution"); draw(gfx); window.onresize = () => { - fullscreenCanvas(canvasId); + fullscreenCanvas(gfx, canvasId); draw(gfx); }; })(); diff --git a/script.ts b/script.ts index 8049952..f07d666 100644 --- a/script.ts +++ b/script.ts @@ -1,5 +1,6 @@ -import { Vec2 } from "./common.js"; -import { Graphics } from "./graphics.js"; +import { initializeContext, Vec2 } from "./common.js"; +import { Graphics, fullscreenCanvas } from "./graphics.js"; +import * as drawing from "./draw.js"; const vertexShader = `#version 300 es @@ -30,150 +31,28 @@ const fragmentShader = } `; -function initializeContext(canvasId: string): WebGL2RenderingContext | null { - const canvas = document.getElementById(canvasId) as HTMLCanvasElement; - const ctx = canvas.getContext("webgl2", {antialias: false}); - return ctx; - -} - -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 = [ - positions[0].x, positions[0].y, - positions[1].x, positions[1].y, - positions[2].x, positions[2].y, - ] - - const color: Array = [ - 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 = [ - position.x, position.y, - position.x + exts.x, position.y, - position.x, position.y + exts.y, - ] - - const color: Array = [ - 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 = [ - 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 = [ - 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 = new Array(); - - 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 = [ - A.x, A.y, - B.x, B.y, - ]; - - const color: Array = [ - 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); -} - -function fullscreenCanvas(id: string) { - const canvas = document.getElementById(id) as HTMLCanvasElement; - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; -} function draw(gfx: Graphics) { const position: Vec2 = 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); - drawRectangle(gfx, position, new Vec2(200, 200)) - drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]); - drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100)); - drawCircle(gfx, new Vec2(400, 200), 100); - drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600)); + 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)); } (() => { const canvasId = "game"; - fullscreenCanvas(canvasId); const ctx = initializeContext(canvasId); if (ctx === null) return; const gfx = new Graphics(ctx, vertexShader, fragmentShader); + fullscreenCanvas(gfx, canvasId); const a_position = gfx.createAttribute("a_position"); a_position.format(2, gfx.ctx.FLOAT, false, 0, 0); @@ -185,7 +64,7 @@ function draw(gfx: Graphics) { draw(gfx); window.onresize = () => { - fullscreenCanvas(canvasId); + fullscreenCanvas(gfx, canvasId); draw(gfx); } })(); diff --git a/style.css b/style.css index baac1a6..aabdc9d 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,7 @@ html, body { margin: 0px; padding: 0px; - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; + overflow: hidden; }