diff --git a/src/main/js/Display.ts b/src/main/js/Display.ts
index cb82f85..b727ed9 100644
--- a/src/main/js/Display.ts
+++ b/src/main/js/Display.ts
@@ -1,10 +1,6 @@
import {CachedPrimeMath, PrimeMath} from "./PrimeMath";
-const width: number = 100;
-const height: number = 100;
-
-
export class Display {
private readonly canvas: HTMLCanvasElement;
@@ -43,64 +39,85 @@ export class Display {
public reloadPainter(): void {
- this.canvas.width = this._painter?.getWidth() ?? 1;
- this.canvas.height = this._painter?.getHeight() ?? 1;
+ this.canvas.width = this._painter?.getPixelWidth() ?? 1;
+ this.canvas.height = this._painter?.getPixelHeight() ?? 1;
}
}
export interface Painter {
+ getPixelWidth(): number;
+
+ getPixelHeight(): number;
+
draw(canvas: HTMLCanvasElement): void;
-
- getWidth(): number;
-
- getHeight(): number;
}
export class GridPainter implements Painter {
- private readonly scale: number = 15;
private readonly primeMath: PrimeMath = CachedPrimeMath.getInstance();
+ public scale: number = 15;
+ public cols: number = 100;
+ public max: number = 10_001;
+
+ public get rows(): number {
+ return Math.ceil(this.max / this.cols);
+ }
+
+
+ getPixelWidth(): number {
+ return this.scale * this.cols;
+ }
+
+ getPixelHeight(): number {
+ return this.scale * this.rows;
+ }
+
draw(canvas: HTMLCanvasElement): void {
const ctx = canvas.getContext("2d")!;
- // Clear canvas
+ this.clearCanvas(ctx);
+ this.drawGrid(ctx);
+ this.drawPrimes(ctx);
+ }
+
+ private clearCanvas(ctx: CanvasRenderingContext2D): void {
ctx.save();
ctx.fillStyle = "#ffffff";
- ctx.fillRect(0, 0, canvas.width, canvas.height);
+ ctx.fillRect(0, 0, this.getPixelWidth(), this.getPixelHeight());
ctx.restore();
+ }
- // Draw grid
+ private drawGrid(ctx: CanvasRenderingContext2D): void {
+ // TODO: Don't draw grid for non-filled rows
ctx.save();
ctx.beginPath();
ctx.strokeStyle = "#7b7b7b";
- for (let x = 0; x <= width; x++) {
+ for (let x = 0; x <= this.cols; x++) {
ctx.moveTo(x * this.scale, 0);
- ctx.lineTo(x * this.scale, height * this.scale);
+ ctx.lineTo(x * this.scale, this.rows * this.scale);
}
- for (let y = 0; y <= height; y++) {
+ for (let y = 0; y <= this.rows; y++) {
ctx.moveTo(0, y * this.scale);
- ctx.lineTo(width * this.scale, y * this.scale);
+ ctx.lineTo(this.cols * this.scale, y * this.scale);
}
ctx.stroke();
ctx.restore();
+ }
- // Draw primes
+ private drawPrimes(ctx: CanvasRenderingContext2D): void {
ctx.save();
ctx.fillStyle = "#ff0000";
- for (let i = 1; i <= width * height; i++) {
+ for (let i = 1; i <= this.max; i++) {
if (this.primeMath.isPrime(i))
- ctx.fillRect(((i - 1) % width) * this.scale, Math.floor((i - 1) / width) * this.scale, this.scale, this.scale);
+ ctx.fillRect(
+ ((i - 1) % this.cols) * this.scale,
+ Math.floor((i - 1) / this.cols) * this.scale,
+ this.scale,
+ this.scale
+ );
}
ctx.restore();
}
-
- getWidth(): number {
- return this.scale * width;
- }
-
- getHeight(): number {
- return this.scale * height;
- }
}
diff --git a/src/main/js/Main.ts b/src/main/js/Main.ts
index 5b72236..27ac0f3 100644
--- a/src/main/js/Main.ts
+++ b/src/main/js/Main.ts
@@ -24,6 +24,25 @@ doAfterLoad(async () => {
canvas.classList.remove("invisible");
const display = new Display(canvas);
- display.painter = new GridPainter();
+ const gridPainter = new GridPainter();
+ display.painter = gridPainter;
display.startDrawLoop();
+
+ const gridCols = $("#gridCols");
+ gridCols.addEventListener("change", () => {
+ gridPainter.cols = gridCols.value;
+ display.reloadPainter();
+ });
+
+ const gridMax = $("#gridMax");
+ gridMax.addEventListener("change", () => {
+ gridPainter.max = gridMax.value;
+ display.reloadPainter();
+ });
+
+ const gridScale = $("#gridScale");
+ gridScale.addEventListener("change", () => {
+ gridPainter.scale = gridScale.value;
+ display.reloadPainter();
+ });
});