high level raycasting functions

examples/mazeRaycastedLight.js

@@ -0,0 +1,137 @@
+kaboom({
+	scale: 0.5,
+	background: [0, 0, 0],
+})
+
+loadSprite("bean", "sprites/bean.png")
+loadSprite("steel", "sprites/steel.png")
+
+const TILE_WIDTH = 64
+const TILE_HEIGHT = TILE_WIDTH
+
+function createMazeMap(width, height) {
+	const size = width * height
+	function getUnvisitedNeighbours(map, index) {
+		const n = []
+		const x = Math.floor(index / width)
+		if (x > 1 && map[index - 2] === 2) n.push(index - 2)
+		if (x < width - 2 && map[index + 2] === 2) n.push(index + 2)
+		if (index >= 2 * width && map[index - 2 * width] === 2) n.push(index - 2 * width)
+		if (index < size - 2 * width && map[index + 2 * width] === 2) n.push(index + 2 * width)
+		return n
+	}
+	const map = new Array(size).fill(1, 0, size)
+	map.forEach((_, index) => {
+		const x = Math.floor(index / width)
+		const y = Math.floor(index % width)
+		if ((x & 1) === 1 && (y & 1) === 1) {
+			map[index] = 2
+		}
+	})
+
+	const stack = []
+	const startX = Math.floor(Math.random() * (width - 1)) | 1
+	const startY = Math.floor(Math.random() * (height - 1)) | 1
+	const start = startX + startY * width
+	map[start] = 0
+	stack.push(start)
+	while (stack.length) {
+		const index = stack.pop()
+		const neighbours = getUnvisitedNeighbours(map, index)
+		if (neighbours.length > 0) {
+			stack.push(index)
+			const neighbour = neighbours[Math.floor(neighbours.length * Math.random())]
+			const between = (index + neighbour) / 2
+			map[neighbour] = 0
+			map[between] = 0
+			stack.push(neighbour)
+		}
+	}
+	return map
+}
+
+function createMazeLevelMap(width, height, options) {
+	const symbols = options?.symbols || {}
+	const map = createMazeMap(width, height)
+	const space = symbols[" "] || " "
+	const fence = symbols["#"] || "#"
+	const detail = [
+		space,
+		symbols["╸"] || "╸",   //  1
+		symbols["╹"] || "╹",   //  2
+		symbols["┛"] || "┛",   //  3
+		symbols["╺"] || "╺",   //  4
+		symbols["━"] || "━",   //  5
+		symbols["┗"] || "┗",   //  6
+		symbols["┻"] || "┻",   //  7
+		symbols["╻"] || "╻",   //  8
+		symbols["┓"] || "┓",   //  9
+		symbols["┃"] || "┃",   //  a
+		symbols["┫"] || "┫",   //  b
+		symbols["┏"] || "┏",   //  c
+		symbols["┳"] || "┳",   //  d
+		symbols["┣"] || "┣",   //  e
+		symbols["╋ "] || "╋ ", //  f
+	]
+	const symbolMap = options?.detailed ? map.map((s, index) => {
+		if (s === 0) return space
+		const x = Math.floor(index % width)
+		const leftWall = x > 0 && map[index - 1] == 1 ? 1 : 0
+		const rightWall = x < width - 1 && map[index + 1] == 1 ? 4 : 0
+		const topWall = index >= width && map[index - width] == 1 ? 2 : 0
+		const bottomWall = index < height * width - width && map[index + width] == 1 ? 8 : 0
+		return detail[leftWall | rightWall | topWall | bottomWall]
+	}) : map.map((s) => {
+		return s == 1 ? fence : space
+	})
+	const levelMap = []
+	for (let i = 0; i < height; i++) {
+		levelMap.push(symbolMap.slice(i * width, i * width + width).join(""))
+	}
+	return levelMap
+}
+
+const level = addLevel(
+	createMazeLevelMap(15, 15, {}),
+	{
+		tileWidth: TILE_WIDTH,
+		tileHeight: TILE_HEIGHT,
+		tiles: {
+			"#": () => [
+				sprite("steel"),
+				tile({ isObstacle: true }),
+			],
+		},
+	},
+)
+
+const bean = level.spawn([
+	sprite("bean"),
+	anchor("center"),
+	pos(32, 32),
+	tile(),
+	agent({ speed: 640, allowDiagonals: true }),
+	"bean",
+], 1, 1)
+
+onClick(() => {
+	const pos = mousePos()
+	bean.setTarget(vec2(
+		Math.floor(pos.x / TILE_WIDTH) * TILE_WIDTH + TILE_WIDTH / 2,
+		Math.floor(pos.y / TILE_HEIGHT) * TILE_HEIGHT + TILE_HEIGHT / 2,
+	))
+})
+
+onUpdate(() => {
+	const pts = [bean.pos]
+	// This is overkill, since you theoretically only need to shoot rays to grid positions
+	for (let i = 0; i < 360; i += 1) {
+		const hit = level.raycast(bean.pos, Vec2.fromAngle(i))
+		pts.push(hit.point)
+	}
+	pts.push(pts[1])
+	drawPolygon({
+		pts: pts,
+		color: rgb(255, 255, 100),
+	})
+})

examples/raycastObject.js

@@ -0,0 +1,199 @@
+kaboom()
+
+add([
+	pos(80, 80),
+	circle(40),
+	color(BLUE),
+	area(),
+])
+
+add([
+	pos(180, 210),
+	circle(20),
+	color(BLUE),
+	area(),
+])
+
+add([
+	pos(40, 180),
+	rect(20, 40),
+	color(BLUE),
+	area(),
+])
+
+add([
+	pos(140, 130),
+	rect(60, 50),
+	color(BLUE),
+	area(),
+])
+
+add([
+	pos(180, 40),
+	polygon([vec2(-60, 60), vec2(0, 0), vec2(60, 60)]),
+	color(BLUE),
+	area(),
+])
+
+add([
+	pos(280, 130),
+	polygon([vec2(-20, 20), vec2(0, 0), vec2(20, 20)]),
+	color(BLUE),
+	area(),
+])
+
+onUpdate(() => {
+	const shapes = get("shape")
+	shapes.forEach(s1 => {
+		if (shapes.some(s2 => s1 !== s2 && s1.getShape().collides(s2.getShape()))) {
+			s1.color = RED
+		}
+		else {
+			s1.color = BLUE
+		}
+	})
+})
+
+onDraw("selected", (s) => {
+	const bbox = s.worldArea().bbox()
+	drawRect({
+		pos: bbox.pos.sub(s.pos),
+		width: bbox.width,
+		height: bbox.height,
+		outline: {
+			color: YELLOW,
+			width: 1,
+		},
+		fill: false,
+	})
+})
+
+onMousePress(() => {
+	const shapes = get("area")
+	const pos = mousePos()
+	const pickList = shapes.filter((shape) => shape.hasPoint(pos))
+	selection = pickList[pickList.length - 1]
+	if (selection) {
+		get("selected").forEach(s => s.unuse("selected"))
+		selection.use("selected")
+	}
+})
+
+onMouseMove((pos, delta) => {
+	get("selected").forEach(sel => {
+		sel.moveBy(delta)
+	})
+	get("turn").forEach(laser => {
+		const oldVec = mousePos().sub(delta).sub(laser.pos)
+		const newVec = mousePos().sub(laser.pos)
+		laser.angle += oldVec.angleBetween(newVec)
+	})
+})
+
+onMouseRelease(() => {
+	get("selected").forEach(s => s.unuse("selected"))
+	get("turn").forEach(s => s.unuse("turn"))
+})
+
+function laser() {
+	return {
+		draw() {
+			drawTriangle({
+				p1: vec2(-16, -16),
+				p2: vec2(16, 0),
+				p3: vec2(-16, 16),
+				pos: vec2(0, 0),
+				color: this.color,
+			})
+			if (this.showRing || this.is("turn")) {
+				drawCircle({
+					pos: vec2(0, 0),
+					radius: 28,
+					outline: {
+						color: RED,
+						width: 4,
+					},
+					fill: false,
+				})
+			}
+			pushTransform()
+			pushRotate(-this.angle)
+			const MAX_TRACE_DEPTH = 3
+			const MAX_DISTANCE = 400
+			let origin = this.pos
+			let direction = Vec2.fromAngle(this.angle).scale(MAX_DISTANCE)
+			let traceDepth = 0
+			while (traceDepth < MAX_TRACE_DEPTH) {
+				const hit = raycast(origin, direction, ["laser"])
+				if (!hit) {
+					drawLine({
+						p1: origin.sub(this.pos),
+						p2: origin.add(direction).sub(this.pos),
+						width: 1,
+						color: this.color,
+					})
+					break
+				}
+				const pos = hit.point.sub(this.pos)
+				// Draw hit point
+				drawCircle({
+					pos: pos,
+					radius: 4,
+					color: this.color,
+				})
+				// Draw hit normal
+				drawLine({
+					p1: pos,
+					p2: pos.add(hit.normal.scale(20)),
+					width: 1,
+					color: BLUE,
+				})
+				// Draw hit distance
+				drawLine({
+					p1: origin.sub(this.pos),
+					p2: pos,
+					width: 1,
+					color: this.color,
+				})
+				// Offset the point slightly, otherwise it might be too close to the surface
+				// and give internal reflections
+				origin = hit.point.add(hit.normal.scale(0.001))
+				// Reflect vector
+				direction = direction.reflect(hit.normal)
+				traceDepth++
+			}
+			popTransform()
+		},
+		showRing: false,
+	}
+}
+
+const ray = add([
+	pos(150, 270),
+	rotate(-45),
+	anchor("center"),
+	rect(64, 64),
+	area(),
+	laser(0),
+	color(RED),
+	opacity(0.0),
+	"laser",
+])
+
+get("laser").forEach(laser => {
+	laser.onHover(() => {
+		laser.showRing = true
+	})
+	laser.onHoverEnd(() => {
+		laser.showRing = false
+	})
+	laser.onClick(() => {
+		get("selected").forEach(s => s.unuse("selected"))
+		if (laser.pos.sub(mousePos()).slen() > 28 * 28) {
+			laser.use("turn")
+		}
+		else {
+			laser.use("selected")
+		}
+	})
+})