Mikkel/neural-driving
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Mikkel Troels Kongsted 2024-03-01 22:25:12 +01:00
commit d970236709
5 changed files with 192 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
*.swp
*~
public/js/*

140
index.ts Normal file
View File

@ -0,0 +1,140 @@
type Vec2 = [number, number];
type Rad = number;
interface Graphics {
clear(): void;
drawCar(pos: Vec2, angle: Rad): void;
}
class CanvasGraphics implements Graphics {
private canvas = document.querySelector<HTMLCanvasElement>("#canvas")!;
private ctx = this.canvas.getContext("2d")!;
private alpha = 1;
private trans: Vec2 = [100, 350];
public setup() {
this.canvas.width = 500;
this.canvas.height = 500;
}
public clear() {
this.setFill(100, 170, 255);
this.fillRect([0, 0], [this.canvas.width, this.canvas.height]);
// Draw ground
this.setFill(50, 155, 50);
this.fillRect([0, 350], [this.canvas.width, 150]);
}
public drawCar(pos: Vec2, angle: Rad) {
const [x, y] = pos;
this.ctx.save();
this.ctx.translate(...this.trans);
this.ctx.save();
this.ctx.translate(60 + x, 0 + y);
this.ctx.rotate(angle);
// Draw car body
this.setFill(200, 0, 0);
this.fillRect([-20, -40], [80, 20]);
this.fillRect([-20, -20], [100, 20]);
// Draw rear wheel
this.setFill(0, 0, 0);
this.fillCircle([0, 0], 10);
// Draw front wheel
this.fillCircle([60, 0], 10);
this.ctx.restore();
this.ctx.restore();
}
private setFill(red: number, green: number, blue: number): void {
this.ctx.fillStyle = `rgba(${red}, ${green}, ${blue}, ${this.alpha})`;
}
private fillRect(pos: Vec2, size: Vec2): void {
const [x, y] = pos;
const [width, height] = size;
this.ctx.fillRect(x, y, width, height);
}
private fillCircle(pos: Vec2, radius: number) {
const [x, y] = pos;
this.ctx.beginPath();
this.ctx.arc(x, y, radius, 0, Math.PI * 2);
this.ctx.fill();
}
}
interface Entity {
render(graphics: Graphics): void;
update(delta: number): void;
}
class Car implements Entity {
private pos: Vec2 = [0, 0];
private angle: Rad = Math.PI / -4;
private speeder = 1.0;
public render(graphics: Graphics): void {
graphics.drawCar(this.pos, this.angle);
}
public update(delta: number): void {
this.pos[0] += this.speeder * delta * 100;
}
}
class Matrix {
private entities: Entity[] = []
private graphics = new CanvasGraphics();
public setup() {
this.graphics.setup();
}
public start() {
const looped = (before: number) => {
const now = Date.now();
const delta = (now - before) / 1000;
for (const entity of this.entities) {
entity.update(delta);
}
this.graphics.clear();
for (const entity of this.entities) {
entity.render(this.graphics);
}
requestAnimationFrame(() => looped(now));
}
looped(Date.now());
}
public addEntity(entity: Entity) {
this.entities.push(entity);
}
}
function main() {
const matricen = new Matrix();
matricen.setup();
const car = new Car();
matricen.addEntity(car);
matricen.start();
}
main();

12
package.json Normal file
View File

@ -0,0 +1,12 @@
{
"name": "canvas",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"build": "tsc",
"dev": "tsc --watch"
},
"author": "",
"license": "ISC"
}

22
public/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<script defer src="js/index.js"></script>
<style>
body {
text-align: center;
background-color: #333;
}
#canvas {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

14
tsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"target": "esnext",
"module": "none",
"lib": ["esnext", "dom"],
"inlineSourceMap": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true,
"outDir": "public/js"
},
"include": ["index.ts"]
}