Close ghoulsblade#14 : Rotation supported with new matrices

MaddieM4 · May 14, 2013 · 08313dd · 08313dd
1 parent fdefccc
commit 08313dd
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 1 deletion.
diff --git a/clouds_rotate/body.png b/clouds_rotate/body.png
diff --git a/clouds_rotate/cloud_plain.png b/clouds_rotate/cloud_plain.png
diff --git a/clouds_rotate/conf.lua b/clouds_rotate/conf.lua
@@ -0,0 +1,4 @@
+
+function love.conf(t)
+	t.title = "Passing Clouds"
+end
diff --git a/clouds_rotate/ear.png b/clouds_rotate/ear.png
diff --git a/clouds_rotate/face.png b/clouds_rotate/face.png
diff --git a/clouds_rotate/index.html b/clouds_rotate/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+<head>
+<title>Love2D-Webplayer</title>
+<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+
+<link rel="stylesheet" href="../style.css" type="text/css">
+
+<script type="text/javascript" src="../js/weblua/build/liblua.js"		></script>
+<script type="text/javascript" src="../js/gamepad.js"      ></script>
+<script type="text/javascript" src="../js/jquery.js"      ></script>
+<script type="text/javascript" src="../js/jquery.hotkeys.js"      ></script>
+<script type="text/javascript" src="../js/utils.js"         ></script>
+<script type="text/javascript" src="../js/utils.webgl.js"       ></script>
+<script type="text/javascript" src="../js/love.render.js"       ></script>
+<script type="text/javascript" src="../js/main.js"			></script>
+
+<script type="text/javascript" src="../js/love.audio.js"        ></script>
+<script type="text/javascript" src="../js/love.event.js"        ></script>
+<script type="text/javascript" src="../js/love.filesystem.js"   ></script>
+<script type="text/javascript" src="../js/love.font.js"     ></script>
+<script type="text/javascript" src="../js/love.graphics.js" ></script>
+<script type="text/javascript" src="../js/love.image.js"        ></script>
+<script type="text/javascript" src="../js/love.joystick.js" ></script>
+<script type="text/javascript" src="../js/love.keyboard.js" ></script>
+<script type="text/javascript" src="../js/love.mouse.js"        ></script>
+<script type="text/javascript" src="../js/Box2dWeb-2.1.a.3.min.js"  ></script>
+<script type="text/javascript" src="../js/love.physics.js"  ></script>
+<script type="text/javascript" src="../js/love.sound.js"        ></script>
+<script type="text/javascript" src="../js/love.thread.js"       ></script>
+<script type="text/javascript" src="../js/love.timer.js"        ></script>
+
+<script type="text/javascript">
+    gShaderCode_Fragment = LoadShaderCode("../js/fragment.shader");
+    gShaderCode_Vertex   = LoadShaderCode("../js/vertex.shader");
+</script>
+
+</head>
+<body onload="MainOnLoad(['body.png','cloud_plain.png','ear.png','face.png','love.png'])">
+<a href="https://github.com/ghoulsblade/love-webplayer">Love2D-Webplayer</a><br>
+<canvas id="glcanvas" width="800" height="600">  
+Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.  
+</canvas>
+<div id="output" style="font-family: Courier New,Courier,monospace;"></div>
+</body></html>
diff --git a/clouds_rotate/love.png b/clouds_rotate/love.png
diff --git a/clouds_rotate/main.lua b/clouds_rotate/main.lua
@@ -0,0 +1,133 @@
+-------------------------------------------------
+-- LOVE: Passing Clouds Demo								
+-- Website: http://love.sourceforge.net			
+-- Licence: ZLIB/libpng									
+-- Copyright (c) 2006-2009 LOVE Development Team
+-------------------------------------------------
+
+function love.load()
+
+	-- The amazing music.
+	music = love.audio.newSource("prondisk.xm")
+
+	-- The various images used.
+	body = love.graphics.newImage("body.png")
+	ear = love.graphics.newImage("ear.png")
+	face = love.graphics.newImage("face.png")
+	logo = love.graphics.newImage("love.png")
+	cloud = love.graphics.newImage("cloud_plain.png")
+
+	-- Set the background color to soothing pink.
+	love.graphics.setBackgroundColor(0xff, 0xf1, 0xf7)
+
+	-- Spawn some clouds.
+	for i=1,5 do
+		spawn_cloud(math.random(-100, 900), math.random(-100, 700), 80 + math.random(0, 50))
+	end
+
+	love.graphics.setColor(255, 255, 255, 200)
+
+	love.audio.play(music, 0)
+end
+
+function love.update(dt)
+	if love.joystick.isDown(1, 1) then
+		nekochan:update(dt)
+		nekochan:update(dt)
+		nekochan:update(dt)
+	end
+	nekochan.x = nekochan.x + love.joystick.getAxis(1, 1)*200*dt
+	nekochan.y = nekochan.y + love.joystick.getAxis(1, 2)*200*dt
+	if love.keyboard.isDown('up') then
+		nekochan.y = nekochan.y - 200*dt
+	end
+	if love.keyboard.isDown('down') then
+		nekochan.y = nekochan.y + 200*dt
+	end
+	if love.keyboard.isDown('left') then
+		nekochan.x = nekochan.x - 200*dt
+	end
+	if love.keyboard.isDown('right') then
+		nekochan.x = nekochan.x + 200*dt
+	end
+	try_spawn_cloud(dt)
+
+	nekochan:update(dt)
+
+
+	-- Update clouds, iterating backwards for safe removal of off-screen ones.
+	local width = love.graphics.getWidth()
+	for k=#clouds,1,-1 do
+		local c = clouds[k]
+		c.x = c.x + c.s * dt
+		if c.x > width then
+			table.remove(clouds, k)
+		end
+	end
+
+end
+
+function love.draw()
+
+	love.graphics.draw(logo, 400, 380, 0, 1, 1, 128, 64)
+
+	for k, c in ipairs(clouds) do
+		love.graphics.draw(cloud, c.x, c.y)
+	end
+
+	nekochan:render()
+
+end
+
+function love.keypressed(k)
+	if k == "r" then
+		love.filesystem.load("main.lua")()
+	end
+end
+
+
+nekochan = {
+	x = 400, 
+	y = 250, 
+	a = 0
+}
+
+function nekochan:update(dt)
+		self.a = self.a + 10 * dt	
+end
+
+function nekochan:render()
+    love.graphics.push()
+    love.graphics.rotate(self.a*math.pi/60)
+    love.graphics.translate(self.x, self.y)
+	love.graphics.draw(body, 0, 0, 0, 1, 1, 64, 64)
+	love.graphics.draw(face, 0, 0 + math.sin(self.a/5) * 3, 0, 1, 1, 64, 64)
+	local r = 1 + math.sin(self.a*math.pi/20)
+	for i = 1,10 do
+		love.graphics.draw(ear, 0, 0, (i * math.pi*2/10) + 0/10, 1, 1, 16, 64+10*r)
+	end
+    love.graphics.pop()
+
+end
+
+-- Holds the passing clouds.
+clouds = {}
+
+cloud_buffer = 0
+cloud_interval = 1
+
+-- Inserts a new cloud.
+function try_spawn_cloud(dt)
+
+	cloud_buffer = cloud_buffer + dt
+
+	if cloud_buffer > cloud_interval then
+		cloud_buffer = 0
+		spawn_cloud(-512, math.random(-50, 500), 80 + math.random(0, 50))
+	end
+
+end
+
+function spawn_cloud(xpos, ypos, speed)
+	table.insert(clouds, { x = xpos, y = ypos, s = speed } )
+end
diff --git a/clouds_rotate/prondisk.xm b/clouds_rotate/prondisk.xm
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
 <h2>Ported to Weblua</h2>
 <ul>
 <li><a href="clouds/">demo:clouds</a></li>
+<li><a href="clouds_rotate/">demo:clouds with rotation</a></li>
 <li><a href="iyfct/">demo:in your face city trains</a></li>
 <li><a href="no/">demo:no</a></li>
 </ul>

diff --git a/js/love.graphics.js b/js/love.graphics.js
@@ -129,7 +129,7 @@ function Love_Graphics_CreateTable () {
 	}
 	t['scale']				= function (sx,sy) { GLModelViewScale(sx || 1,sy || 1,1); return LuaNil; }
 	t['translate']			= function (tx,ty) { GLModelViewTranslate(tx || 0,ty || 0,0); return LuaNil; }
-	t['rotate']				= function () { return NotImplemented(pre+'rotate'); }
+	t['rotate']				= function (r) { GLModelViewRotate(r); return LuaNil; }
 	t['push']				= function () { GLModelViewPush(); }
 	t['pop']				= function () { GLModelViewPop(); }
 
@@ -549,6 +549,11 @@ function GLModelViewTranslate (tx,ty,tz) {
 	setMatrixUniforms_MV();
 }
 
+function GLModelViewRotate (radians) {
+	matrix4Rotate(gGLMatrix_ModelView,radians);
+	setMatrixUniforms_MV();
+}
+
 var gLoveMatrix_Stack = [];
 function GLModelViewPush () { gLoveMatrix_Stack.push(matrix4Clone(gGLMatrix_ModelView)); }
 function GLModelViewPop () {

diff --git a/js/utils.webgl.js b/js/utils.webgl.js
@@ -314,6 +314,13 @@ function matrix4GetIdentity() { return [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ]; }
 /// returns a 4x4 matrix with scale & translate
 function matrix4GetTranslateScale(tx,ty,tz, sx,sy,sz) { return [ sx,0,0,0, 0,sy,0,0, 0,0,sz,0, tx,ty,tz,1 ]; }
 
+function matrix4GetRotate(radians) {
+    /// returns a 4x4 matrix with 2D rotation around (0,0,0)
+    var sin = Math.sin(radians);
+    var cos = Math.cos(radians);
+    return [ cos,sin,0,0, -sin,cos,0,0, 0,0,0,0, 0,0,0,1];
+}
+
 /// modifies m  (m x n 4x4 matrix mult)
 function matrix4Mult(m,n) {
 	var o = matrix4Clone(m); // copy of old state
@@ -353,6 +360,9 @@ function matrix4Translate(m,tx,ty,tz) {
 	m[3*4+2] += m[3*4+3] * tz;
 }
 
+function matrix4Rotate(m,radians) {
+    matrix4Mult(m,matrix4GetRotate(radians));
+}
 
 var matrixPrintOptimizeMult_AlreadyPrinted = false; 
 function matrixPrintOptimizeMult (n) {