lentil/js-vis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial canvas

Browse Source
This commit is contained in:
Ladd 2026-01-19 16:49:08 -06:00
parent 74f6ecd848
commit 495ac8ed90
8 changed files with 1209 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules/

7
eslint.config.mjs Normal file
View File

@ -0,0 +1,7 @@
import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";
export default defineConfig([
{ files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
]);

14
index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype HTML>
<html><head>
<title>Visualization Utilities</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico">
</head>
<body>
<p>
<ul>
<li><a href="./voronai.html">Voronai</a></li>
</ul>
</body>
</html>

1075
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

18
package.json Normal file
View File

@ -0,0 +1,18 @@
{
"name": "js-vis",
"version": "1.0.0",
"description": "Visualization Utilities in JS",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git@git.laddhoffman.com:lentil/js-vis.git"
},
"author": "Ladd Hoffman <lentil@laddhoffman.com>",
"license": "Unlicense",
"devDependencies": {
"eslint": "^9.39.2"
}
}

13
style.css Normal file
View File

@ -0,0 +1,13 @@
div[id=voronai] {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
div[id=voronai] > canvas {
position: absolute;
top: 0;
left: 0;
}

20
voronai.html Normal file
View File

@ -0,0 +1,20 @@
<!doctype HTML>
<html><head>
<title>Voronai</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico">
<script type="module">
import { Voronai } from './voronai.js';
// Wait for document load
document.addEventListener('DOMContentLoaded', () => {
const voronai = new Voronai().setDiv('voronai');
voronai.fillCanvas();
voronai.drawSomething();
});
</script>
</head>
<body>
<div id="voronai"></div>
</body>
</html>

61
voronai.js Normal file
View File

@ -0,0 +1,61 @@
const colors = {
background: 'rgb(128, 128, 128)',
line: 'rgb(80, 40, 255)',
};
export class Voronai {
div = undefined;
canvas = undefined;
setDiv(id) {
this.div = document.getElementById(id);
// Create canvas that fills the window
// If the window resizes, also resize the canvas
const canvas = document.createElement('canvas')
this.canvas = canvas;
this.div.appendChild(canvas);
this.fullscreen();
window.addEventListener('resize', () => this.fullscreen());
return this;
}
get ctx() {
const ctx = this.canvas.getContext("2d");
ctx.resetTransform();
return ctx;
}
get width() {
return this.canvas.width;
}
get height() {
return this.canvas.height;
}
fullscreen() {
this.canvas.width = document.documentElement.clientWidth;
this.canvas.height = document.documentElement.clientHeight;
}
fillCanvas() {
const ctx = this.ctx;
ctx.fillStyle = colors.background;
ctx.fillRect(0, 0, this.width, this.height);
}
drawSomething() {
const ctx = this.ctx;
ctx.strokeWidth = 1.0;
ctx.strokeStyle = colors.line;
ctx.beginPath();
let x = this.width / 2;
let y = this.height / 2;
// ctx.moveTo(x, y);
ctx.arc(x, y, 10, 0, 2 * Math.PI);
console.log('drawing arc?');
ctx.stroke();
}
}