meatheadzHEAD master

author: Jules <jules@asdf.us> 2016-11-10 15:34:53 -0500
committer: Jules <jules@asdf.us> 2016-11-10 15:34:53 -0500
commit: dc06cab69f9e871aa8f7f519c964cf632d2217ea (patch)
tree: 1c9344a58185c55f90c9b0db7f87c478e5d9a947 /geometry.html
1 files changed, 502 insertions, 0 deletions
diff --git a/geometry.html b/geometry.html
new file mode 100755
index 0000000..e496483
--- /dev/null
+++ b/geometry.html
@@ -0,0 +1,502 @@
+<!doctype html>
+<html>
+<head><title>GEOMETRY</title></head>
+<style type="text/css">
+body
+	{
+	background-color: #000;
+	overflow: hidden;
+	}
+#frustrum
+	{
+	z-index: 666;
+	border: 1px solid red;
+	}
+#player
+	{
+	z-index: 999;
+	background-color: #0f0;
+	}
+#hud
+	{
+	font-size: 14px;
+	font-family: monospace;
+	background-color: #333;
+	z-index: 1000;
+	color: #fff;
+	opacity: 0.7;
+	white-space: pre;
+	}
+#tests
+	{
+	position: fixed;
+	right: 400px;
+	z-index: 1001;
+	}
+</style>
+
+<body>
+<!--
+<div id="tests">
+<button id="random_x">RANDOM X</button>
+</div>
+-->
+</body>
+
+<script type="text/javascript" src="/js/jquery.js"></script>
+<script type="text/javascript">
+var FRAME_RATE = 30
+
+var ABOVE_SURFACE = 3
+var ON_SURFACE = 2
+var LANDING_ON_SURFACE = 1
+var BELOW_SURFACE = 0
+var BEYOND_SURFACE = -1
+var OFF_MAP = -2
+
+var ORIENTATION_RIGHT = 1
+var ORIENTATION_LEFT = -1
+
+var KEY_LEFT = 37
+var KEY_UP = 38
+var KEY_RIGHT = 39
+var KEY_DOWN = 40
+var KEYTRACK = {}
+KEYTRACK[KEY_LEFT] = false
+KEYTRACK[KEY_UP] = false
+KEYTRACK[KEY_RIGHT] = false
+KEYTRACK[KEY_DOWN] = false
+
+function clamp (x, min, max)
+	{
+	return Math.max(min, Math.min(x, max))
+	}
+var HUD =
+	{
+	div: document.createElement("div"),
+	surface: false,
+	update: function ()
+		{
+		var activity = Player.running ? "RUNNING" : ""
+		activity += Player.jumping ? " JUMPING" : ""
+		activity += Player.cannonball ? " CANNONBALL" : ""
+		activity += Player.underwater ? " UNDERWATER" : ""
+		var orientation = Player.orientation === ORIENTATION_RIGHT ? "RIGHT" : "LEFT"
+		HUD.div.innerHTML =
+			[
+			"",
+			"PLAYER", Player.x, Player.y, activity, orientation, "\n",
+			"SPEED ", Player.dx, Player.dy, HUD.surface, "\n",
+			"CANVAS", Canvas.x, Canvas.y, "\n",
+			"KEY_UP", KEYTRACK[KEY_UP], "\n",
+			"KEY_DOWN", KEYTRACK[KEY_DOWN], "\n",
+			"KEY_LEFT", KEYTRACK[KEY_LEFT], "\n",
+			"KEY_RIGHT", KEYTRACK[KEY_RIGHT], "\n",
+			].join(" ")
+		},
+	init: function ()
+		{
+		HUD.div.style.position = "fixed"
+		HUD.div.style.top = 0
+		HUD.div.style.right = 0
+		HUD.div.style.width = 300 + "px"
+		HUD.div.style.height = 300 + "px"
+		HUD.div.setAttribute("id", "hud")
+		document.body.appendChild(HUD.div)
+		},
+	}
+var Canvas =
+	{
+	div: document.createElement("canvas"),
+	x: 0,
+	y: 0,
+	width: 500,
+	height: 320,
+	surfaces:
+		[
+		[0,50, 90,95],
+		[90,95, 110,110],
+		[110,110, 200,300],
+		[200,300, 220,300],
+		[220,300, 300,200],
+		[300,200, 400,95],
+		[400,95, 500,80],
+		],
+	furniture:
+		[
+		[30,50],
+		[75,120],
+		[200,200],
+		[350,110],
+		[450,87],
+		],
+	init: function ()
+		{
+		ctx = Canvas.div.getContext("2d"),
+		Canvas.div.style.position = "fixed"
+		Canvas.div.style.top = 0
+		Canvas.div.style.left = 0
+		Canvas.div.setAttribute("width", 4000+"px")
+		Canvas.div.setAttribute("height", 800+"px")
+		document.body.appendChild(Canvas.div)
+		ctx.beginPath()
+		for (var x = 0.5; x < Canvas.width; x += 10)
+			{
+			ctx.moveTo(x, 0)
+			ctx.lineTo(x, Canvas.height)
+			}
+		for (var y = 0.5; y < Canvas.height; y += 10)
+			{
+			ctx.moveTo(0, y)
+			ctx.lineTo(Canvas.width, y)
+			}
+		ctx.strokeStyle = "#333"
+		ctx.stroke()
+		ctx.fillStyle = "rgba(0,20,255,0.5)"
+		ctx.fillRect(0, Physics.water_level+0.5, Canvas.width, Canvas.height - Physics.water_level)
+		for (var i = 0; i < Canvas.surfaces.length; i++)
+			{
+			var surface = Canvas.surfaces[i]
+			ctx.beginPath()
+			ctx.moveTo(surface[0] + 0.5, surface[1] + 0.5)
+			ctx.lineTo(surface[2] + 0.5, surface[3] + 0.5)
+			ctx.strokeStyle = "#0bf"
+			ctx.stroke()
+			}
+		for (var i = 0; i < Canvas.furniture.length; i++)
+			{
+			console.log(Canvas.furniture[i])
+			var div = document.createElement("div")
+			div.style.position = "fixed"
+			div.style.top = Canvas.furniture[i][1] + "px"
+			div.style.left = Canvas.furniture[i][0] + "px"
+			div.style.background = "yellow"
+			div.style.width = 2 + "px"
+			div.style.height = 2 + "px"
+			div.style.zIndex = 333
+			document.body.appendChild(div)
+			Frustrum.furniture.push (new furniture (div, Canvas.furniture[i][0],Canvas.furniture[i][1]))
+			}
+		},
+	}
+function furniture (div, x, y)
+	{
+	// this.id = div
+	this.elem = div
+	this.x = x
+	this.y = y
+	this.update = function ()
+		{
+		this.elem.style.top = this.y - Frustrum.y + "px"
+		this.elem.style.left = this.x - Frustrum.x + "px"
+		}
+	}
+var Frustrum =
+	{
+	div: document.createElement("div"),
+	x: 0,
+	y: 0,
+	width: 200,
+	height: 150,
+	halfwidth: 0,
+	halfheight: 0,
+	furniture: [],
+	redraw: function ()
+		{
+		Canvas.div.style.top =  Canvas.y - Frustrum.y + "px"
+		Canvas.div.style.left = Canvas.x - Frustrum.x + "px"
+
+		Player.div.style.top =  Player.y - Frustrum.y + "px"
+		Player.div.style.left = Player.x - Frustrum.x + "px"
+	
+		for (var i = 0; i < Frustrum.furniture.length; i++)
+			Frustrum.furniture[i].update()
+		},
+	update: function ()
+		{
+		if (Player.underwater)
+			{
+			Frustrum.dest_y = Player.y - Frustrum.halfheight + Player.height
+			Frustrum.dest_x = Player.x - Frustrum.halfwidth + Player.width
+			if (Player.y > Canvas.height - Frustrum.halfheight)
+				Frustrum.dest_y = Canvas.height - Frustrum.height
+			}
+		else
+			{
+			Frustrum.dest_x = 0
+			Frustrum.dest_y = 0
+			}
+		if (Player.x > Canvas.width - Frustrum.halfwidth)
+			Frustrum.dest_x = Canvas.width - Frustrum.width
+		else if (Player.x > Frustrum.halfwidth)
+			Frustrum.dest_x = Player.x - Frustrum.halfwidth
+		Frustrum.y = Math.floor( (Frustrum.dest_y + Frustrum.y * 9) / 10 )
+		Frustrum.x = Math.floor( (Frustrum.dest_x + Frustrum.x * 9) / 10 )
+		// Frustrum.div.style.top = Frustrum.y + "px"
+		// Frustrum.div.style.left = Frustrum.x + "px"
+		},
+	init: function ()
+		{
+		Frustrum.div.style.position = "fixed"
+		Frustrum.div.style.top = 0
+		Frustrum.div.style.left = 0
+		Frustrum.div.style.width = Frustrum.width + "px"
+		Frustrum.div.style.height = Frustrum.height + "px"
+		Frustrum.div.setAttribute("id", "frustrum")
+		document.body.appendChild(Frustrum.div)
+		Frustrum.halfwidth = Frustrum.width/2
+		Frustrum.halfheight = Frustrum.height/2
+		},
+	}
+var Physics =
+	{
+	gravity: 1,
+	dx_walk: 2,
+	dx_swim: 2,
+	dy_swim_up: -2,
+	dy_swim_down: 2,
+	dy_resistance: 5,
+	dx_resistance: 5,
+	air_resistance: 5,
+	water_resistance: 2,
+	water_level: 100,
+	jump_power: -5,
+	}
+var Player =
+	{
+	div: document.createElement("div"),
+	running: false,
+	jumping: false,
+	start_jump: false,
+	swimming: false,
+	cannonball: false,
+	orientation: ORIENTATION_RIGHT,
+	dx: 0,
+	dy: 0,
+	x: 50,
+	y: 5,
+	width: 2,
+	height: 4,
+	yIntercept: 0,
+	surface: Canvas.surfaces[0],
+	findNearestSurface: function (feet)
+		{
+		for (var i = 0; i < Canvas.surfaces.length; i++)
+			{
+			var s = Canvas.surfaces[i]
+			if (Player.onSurface(feet, s) > BELOW_SURFACE)
+				{
+				return s
+				}
+			}
+		return OFF_MAP
+		},
+	onSurface: function (feet, s)
+		{
+		if (s === OFF_MAP)
+			return OFF_MAP
+
+		// within bounds
+		if (Player.x < s[0] || Player.x > s[2])
+			return BEYOND_SURFACE
+
+		// above the line
+		if (s[1] === s[3])
+			{
+			if (feet < s[1])
+				return ABOVE_SURFACE
+			if (feet <= s[1] + Player.dy + Physics.gravity + Player.height)
+				return ON_SURFACE
+			// if (! Player.surface)
+			// 	return ON_SURFACE
+			return ON_SURFACE
+			// return BELOW_SURFACE
+			}
+		var slope = (s[3] - s[1]) / (s[2] - s[0])
+		Player.yIntercept = (Player.x - s[0]) * slope + s[1]
+		// console.log(Player.yIntercept, Player.y)
+		if (feet < Player.yIntercept)
+			return ABOVE_SURFACE
+		if (feet <= Player.yIntercept + Player.dy + Physics.gravity + Player.height)
+			return ON_SURFACE
+		if (Player.surfaceState === ON_SURFACE)
+			return ON_SURFACE
+		// if (! Player.surface)
+		// 	return ON_SURFACE
+		return ON_SURFACE
+		// return BELOW_SURFACE
+		},
+	underwater: false,
+	update: function ()
+		{
+		var feet = Player.y + Player.height
+		Player.feet = feet
+		Player.surfaceState = Player.onSurface(feet, Player.surface)
+		switch (Player.surfaceState)
+			{
+			case ABOVE_SURFACE:
+				HUD.surface = "ABOVE SURFACE"
+				Player.yIntercept = Player.surface[1]
+				Player.dy = Math.min(Player.dy + Physics.gravity, Physics.dy_resistance)
+				break
+			case ON_SURFACE:
+				HUD.surface = "ON SURFACE"
+				Player.dy = 0
+				Player.y = Player.yIntercept - Player.height
+				Player.jumping = false
+				// Tests.random_x()
+				break
+			case BELOW_SURFACE:
+				HUD.surface = "BELOW SURFACE"
+				break
+			case BEYOND_SURFACE:
+				HUD.surface = "BEYOND SURFACE"
+				// Player.surface = false
+				Player.surface = Player.findNearestSurface(feet)
+				Player.update()
+				break
+			case OFF_MAP:
+				HUD.surface = "OFF MAP"
+				break
+			}
+		// Player.div.style.left = Player.x + "px"
+		// Player.div.style.top = Player.y + "px"
+		if (Player.underwater)
+			{
+			if (Player.y > Physics.water_level - 2 && Player.y < Physics.water_level + 2)
+				Player.dy = 0
+			else if (Player.y < Physics.water_level)
+				{
+				Player.underwater = false
+				Player.cannonball = false
+				Physics.dx_resistance = Physics.air_resistance
+				Physics.dy_resistance = Physics.air_resistance
+				}
+			if (KEYTRACK[KEY_UP])
+				Player.dy = Physics.dy_swim_up
+			if (KEYTRACK[KEY_DOWN])
+				Player.dy = Physics.dy_swim_down
+			if (KEYTRACK[KEY_LEFT] || KEYTRACK[KEY_RIGHT])
+				Player.dx = Physics.dx_swim * Player.orientation
+			else
+				Player.dx = 0
+			}
+		else
+			{
+			if (Player.y > Physics.water_level)
+				{
+				Player.jumping = false
+				Player.cannonball = false
+				Player.underwater = true
+				Player.yJump = Physics.water_level
+				Physics.dx_resistance = Physics.water_resistance
+				Physics.dy_resistance = Physics.water_resistance
+				}
+			else if (Player.yJump < Physics.water_level && Player.yIntercept > Physics.water_level)
+				Player.cannonball = true
+			else
+				Player.cannonball = false
+			if ((Player.start_jump || KEYTRACK[KEY_UP]) && Player.surfaceState === ON_SURFACE)
+				{
+				Player.start_jump = false
+				Player.jumping = true
+				Player.yJump = Player.y
+				Player.dy = Physics.jump_power
+				Player.y += Player.dy
+				Player.surfaceState = ABOVE_SURFACE
+				}
+			if (KEYTRACK[KEY_LEFT] || KEYTRACK[KEY_RIGHT])
+				Player.dx = Physics.dx_walk * Player.orientation
+			else
+				Player.dx = 0
+			}
+		Player.y += Player.dy
+		Player.x = clamp (Player.x + Player.dx, 0, Canvas.width)
+		},
+	init: function ()
+		{
+		Player.div.style.position = "fixed"
+		Player.div.style.top = Player.y + "px"
+		Player.div.style.left = Player.x + "px"
+		Player.div.style.width = Player.width + "px"
+		Player.div.style.height = Player.height + "px"
+		Player.div.setAttribute("id", "player")
+		document.body.appendChild(Player.div)
+		},
+	}
+var Events =
+	{
+	keydown: function (e)
+		{
+		KEYTRACK[e.keyCode] = true
+		switch (e.keyCode)
+			{
+			case KEY_UP:
+				if (Player.underwater || Player.jumping)
+					break
+				Player.start_jump = true
+				break
+			case KEY_LEFT:
+				Player.orientation = ORIENTATION_LEFT
+				break
+			case KEY_RIGHT:
+				Player.orientation = ORIENTATION_RIGHT
+				break
+			}
+		},
+	keyup: function (e)
+		{
+		KEYTRACK[e.keyCode] = false
+		},
+	loop: function ()
+		{
+		Player.update()
+		Frustrum.update()
+		Frustrum.redraw()
+		HUD.update()
+		},
+	init: function ()
+		{
+		$(document).bind("keydown", Events.keydown)
+		$(document).bind("keyup", Events.keyup)
+		setInterval(Events.loop, FRAME_RATE)
+		},
+	}
+var Tests =
+	{
+	random_x: function ()
+		{
+		Player.x = Player.x+1 // Math.floor(Math.random () * 500)
+		if (Player.x > Canvas.width)
+			{
+			Player.x = 0
+			Player.y = 0
+			}
+		// Player.y = 50 // Math.floor(Math.random () * 50)
+		Player.surface = Canvas.surfaces[0]
+		//if (Math.random() > 0.3)
+		//	{
+		//	Player.dy = -5
+		//	}
+		},
+	init: function ()
+		{
+		$("#random_x").click(Tests.random_x)
+		},
+	}
+var Main =
+	{
+	init: function ()
+		{
+		Tests.init()
+		Canvas.init()
+		Player.init()
+		Frustrum.init()
+		HUD.init()
+		Events.init()
+		},
+	}
+Main.init ()
+</script>
+</html>
+
author	Jules <jules@asdf.us>	2016-11-10 15:34:53 -0500
committer	Jules <jules@asdf.us>	2016-11-10 15:34:53 -0500
commit	dc06cab69f9e871aa8f7f519c964cf632d2217ea (patch)
tree	1c9344a58185c55f90c9b0db7f87c478e5d9a947 /geometry.html