diff --git a/common.ts b/common.ts index d78c4fd..e8e7c2f 100644 --- a/common.ts +++ b/common.ts @@ -79,3 +79,15 @@ export function drawDashedLine(ctx: CanvasRenderingContext2D, start: Point, end: drawLine(ctx, start, end, color, true); } +export function drawPoints(ctx: CanvasRenderingContext2D, points: Point[]) { + for (const p of points) { + drawCircle(ctx, p, 2, 0xFF00FF); + } +} + +export function drawCurve(ctx: CanvasRenderingContext2D, curve: Point[]) { + for (let i=0; i < curve.length - 1; ++i) { + drawLine(ctx, curve[i], curve[i+1], 0xFFFFFF); + } +} + diff --git a/index.html b/index.html index 2b4d6c8..21f38f4 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,7 @@
  • Image demo
  • Move demo
  • Game of life
    • +
  • Ray
    • diff --git a/ray.html b/ray.html new file mode 100644 index 0000000..b96599d --- /dev/null +++ b/ray.html @@ -0,0 +1,12 @@ + + + + + + Document + + + + + + diff --git a/ray.ts b/ray.ts new file mode 100644 index 0000000..2e3e2c4 --- /dev/null +++ b/ray.ts @@ -0,0 +1,65 @@ +import { + Point, resizeCanvas, drawCircle, drawLine, + cubicBezier, quadraticBezier, drawCurve, drawPoints +} from "./common.js" + +const GRID_SIZE = 20; + +function init() { + const canvas = document.getElementById("canvas") as HTMLCanvasElement | null; + if (!canvas) throw new Error("unable to get canvas HTML element"); + + const ctx = canvas.getContext("2d") as CanvasRenderingContext2D | null; + if (!ctx) throw new Error("unable to get canvas 2D context"); + + resizeCanvas(ctx); + + drawGrid(ctx); + + const points: Point[] = []; + canvas.onmousedown = (evt: MouseEvent) => { + const { clientX, clientY } = evt; + if (points.length < 2) { + // clamp to grid + const p = { + x: Math.floor(clientX / GRID_SIZE) * GRID_SIZE + GRID_SIZE/2, + y: Math.floor(clientY / GRID_SIZE) * GRID_SIZE + GRID_SIZE/2, + }; + console.log(p); + + points.push(p); + drawCircle(ctx, p, 1, 0xFF00FF); + } + + if (points.length == 2) { + const first: Point = points.shift()!; + const second: Point = points.shift()!; + const angle = Math.atan2(second.y - first.y, second.x - first.x); + for (let i=0; i < 1000; i+=10) { + const x = first.x + i * Math.cos(angle); + const y = first.y + i * Math.sin(angle); + drawCircle(ctx, { x, y }, 0.1, 0xFF0000); + } + } + }; + + +} + +function drawGrid(ctx: CanvasRenderingContext2D) { + for (let x = 0; x <= ctx.canvas.width; x += GRID_SIZE) { + ctx.moveTo(x, 0); + ctx.lineTo(x, ctx.canvas.height); + } + + for (let y = 0; y <= ctx.canvas.height; y += GRID_SIZE) { + ctx.moveTo(0, y); + ctx.lineTo(ctx.canvas.width, y); + } + + ctx.strokeStyle = '#ccc'; + ctx.stroke(); +} + +init(); + diff --git a/spline.ts b/spline.ts index a72265f..7b6ad32 100644 --- a/spline.ts +++ b/spline.ts @@ -1,17 +1,8 @@ -import { Point, resizeCanvas, drawCircle, drawLine, cubicBezier, quadraticBezier } from "./common.js" +import { + Point, resizeCanvas, drawCircle, drawLine, + cubicBezier, quadraticBezier, drawCurve, drawPoints +} from "./common.js" -function drawPoints(ctx: CanvasRenderingContext2D, points: Point[]) { - for (const p of points) { - drawCircle(ctx, p, 2, 0xFF00FF); - } -} - - -function drawCurve(ctx: CanvasRenderingContext2D, curve: Point[]) { - for (let i=0; i < curve.length - 1; ++i) { - drawLine(ctx, curve[i], curve[i+1], 0xFFFFFF); - } -} function draw(ctx: CanvasRenderingContext2D, points: Point[]) { let start = 0; @@ -126,4 +117,3 @@ function init() { } init(); -