thib8956/js-canvas-playground
1
0
Fork 0
Code Issues Pull Requests Activity

add ray example

Browse Source
This commit is contained in:
Thibaud Gasser
2025-08-05 23:33:01 +02:00
parent 2df75eb6cb
commit 7d22dba4b2
5 changed files with 94 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
common.ts
View File

@@ -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);
}
}

1
index.html
View File

@@ -21,6 +21,7 @@
<li><a href="image.html">Image demo</a></li>
<li><a href="move.html">Move demo</a></li>
<li><a href="life.html">Game of life</a></li>
<li><a href="ray.html">Ray</a></li>
</ul>
</body>
</html>

12
ray.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
<canvas id="canvas" width="800" height="600"></canvas>
</body>
<script type="module" src="ray.js"></script>
</html>

65
ray.ts Normal file
View File

@@ -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();

18
spline.ts
View File

@@ -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();