Permalink
Browse files

Merge pull request #16 from oros/master

Pull request to update PeaksAndValleys from oros.
  • Loading branch information...
2 parents c594e51 + ac4052b commit a8d2fabf46f5d0e96bee73991960af9ce2edfdac @pelegri pelegri committed Jan 23, 2013
Showing with 50 additions and 22 deletions.
  1. +7 −3 PeaksAndValleys/README.md
  2. +0 −8 PeaksAndValleys/css/styles.css
  3. +1 −1 PeaksAndValleys/index.html
  4. +42 −10 PeaksAndValleys/js/Freewill.js
@@ -25,7 +25,7 @@
> For more information on leveraging this tool, please refer to README.md in
> the tools/preprocessor folder.
-### Endless Terrain
+### Endless Terrain via Web Workers
> This release of PeaksAndValleys continuosly renders an area of 60 vertices
> in all directions around the camera's current position. The end result does
@@ -40,6 +40,10 @@
> When near the borders of the terrain / image, the Web Worker wraps around
> to retrieve information from the opposite end of the data to ensure the
> user can technically keep walking forever.
+>
+> Future versions will focus around only loading those vertices that are
+> within our field of view, allowing for more data to be processed in
+> shorter amounts of time.
### Colour Shaders
@@ -72,7 +76,7 @@
> *virtualjoystick.js* was used as a basis for camera movement and rotation.
> Since then, I had created a ControlsOverlay.js for use with a Cocos2d-HTML5
> sample and have adapted that into *Freewill.js* for this release of
-> PeaksAndValleys. For a basic sample implementation, please see: https://github.com/oros/Freewill.js
+> PeaksAndValleys. A sample implementation can be found here: https://github.com/oros/Freewill.js
>
> These new controls allow for multiple Joysticks and Buttons to be placed
> onscreen with the goal of simplicity and are not specific to WebGL applications.
@@ -140,4 +144,4 @@
> * [Andrea Giammarch](http://webreflection.blogspot.ca/2010/09/fragment-and-vertex-shaders-my-way-to.html)
> * [Paul Irish and Erik Moller](http://paulirish.com/2011/requestanimationframe-for-smart-animating)
> * [Ricardo Cabello (mrdoob)](https://github.com/mrdoob/three.js)
-> * The [Valve Developer Community](https://developer.valvesoftware.com/wiki/Skybox)
+> * The [Valve Developer Community](https://developer.valvesoftware.com/wiki/Skybox)
@@ -46,14 +46,6 @@ canvas.joystick {
z-index: -1;
}
-#easle {
- bottom: 0px;
- position: fixed;
- top: 0px;
- width: 100%;
- z-index: 1;
-}
-
#canvas {
border: none;
height: 100%;
@@ -41,7 +41,7 @@
<div id="license" class="panel right"></div>
</div>
- <script type="text/javascript" src="./js/webworks.js"></script>
+ <script type="text/javascript" src="local:///chrome/webworks.js"></script>
<script type="text/javascript" src="./js/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="./js/swipemenu.js"></script>
<script type="text/javascript" src="./js/Utils.js"></script>
@@ -14,7 +14,7 @@
- limitations under the License.
*/
-/*global window, document, console, Utils */
+/*global window, document, console */
/**
* Freewill.js handles our multitouch input controls allowing for easy addition
@@ -23,15 +23,23 @@
var Freewill = function (params) {
'use strict';
- var controls;
+ var Freewill, controls;
/* We require a container when initailizing Freewill. Ironic. */
if (typeof params.container === 'undefined') {
console.log('Missing required parameter: container');
} else {
+ Freewill = this;
+
/* Initialize our controls arrays. */
controls = this.controls = [];
this.container = params.container;
+ this.container.style.position = 'fixed';
+ this.container.style.left = '0px'; this.container.style.right = '0px';
+ this.container.style.top = '0px'; this.container.style.bottom = '0px';
+ this.container.style.border = '0px'; this.container.style.margin = '0px'; this.container.style.padding = '0px';
+ this.container.style.overflow = 'hidden';
+ this.container.style.zIndex = '999';
/* The global 'touchstart' listener for the container. Will cycle through all of our
* controls to find the appropriate owner.
@@ -45,7 +53,7 @@ var Freewill = function (params) {
point = [touch.clientX, touch.clientY];
for (m = 0; m < controls.length; m = m + 1) {
control = controls[m];
- if (Utils.contains(control.trigger, point) === true) {
+ if (Freewill.contains(control.trigger, point) === true) {
control.identifier = touch.identifier;
control._onTouchStart(touch, point);
}
@@ -120,12 +128,13 @@ Freewill.prototype.addJoystick = function (params) {
} else {
_this = this;
joystick = document.createElement('canvas');
- joystick.className = 'joystick';
+ joystick.className = 'freewill joystick';
base = document.createElement('img');
base.onload = function () {
joystick.width = base.width;
joystick.height = base.height;
+ joystick.style.position = 'absolute';
joystick.style.width = base.width;
joystick.style.height = base.height;
@@ -136,6 +145,8 @@ Freewill.prototype.addJoystick = function (params) {
joystick.velocity = [0.0, 0.0];
joystick.direction = 0;
joystick.context = joystick.getContext('2d');
+ joystick.context.drawImage(base, 0.0, 0.0);
+ joystick.context.drawImage(pad, (base.width - pad.width) / 2.0, (base.height - pad.height) / 2.0);
/* Set the Joystick's position. */
params.pos = typeof params.pos !== 'undefined' ? params.pos : [0.0, 0.0];
@@ -162,13 +173,22 @@ Freewill.prototype.addJoystick = function (params) {
if (this.fixed === false) {
this.style.left = (point[0] - base.width / 2.0) + 'px';
this.style.top = (point[1] - base.height / 2.0) + 'px';
+ this.x = point[0];
+ this.y = point[1];
+
+ /* Draw the control. */
+ this.context.clearRect(0.0, 0.0, this.width, this.height);
+ this.context.drawImage(base, 0.0, 0.0);
+ this.context.drawImage(pad, (base.width - pad.width) / 2.0, (base.height - pad.height) / 2.0);
+ } else {
+ this.x = parseFloat(this.style.left.replace('px', '')) + base.width / 2.0;
+ this.y = parseFloat(this.style.top.replace('px', '')) + base.height / 2.0;
+
+ /* Draw the control based on movement from center. */
+ this._onTouchMove(touch, point);
}
- this.x = point[0];
- this.y = point[1];
- /* Draw the control. */
- this.context.drawImage(base, 0.0, 0.0);
- this.context.drawImage(pad, (base.width - pad.width) / 2.0, (base.height - pad.height) / 2.0);
+
/* If there is a user-defined onTouchStart function, invoke it now. */
if (this.onTouchStart) {
@@ -215,6 +235,7 @@ Freewill.prototype.addJoystick = function (params) {
this.direction = Math.floor(4 + (-Math.atan2(dy, dx) + Math.PI / 8) * 4 / Math.PI) % 8;
/* Draw the control. */
+ this.context.clearRect(0.0, 0.0, this.width, this.height);
this.context.drawImage(base, 0.0, 0.0);
this.context.drawImage(pad, dx + (base.width - pad.width) / 2.0, dy + (base.height - pad.height) / 2.0);
@@ -230,6 +251,7 @@ Freewill.prototype.addJoystick = function (params) {
this.velocity = [0.0, 0.0];
/* Draw the control. */
+ this.context.clearRect(0.0, 0.0, this.width, this.height);
this.context.drawImage(base, 0.0, 0.0);
this.context.drawImage(pad, (base.width - pad.width) / 2.0, (base.height - pad.height) / 2.0);
@@ -276,12 +298,13 @@ Freewill.prototype.addButton = function (params) {
} else {
_this = this;
button = document.createElement('canvas');
- button.className = 'button';
+ button.className = 'freewill button';
image = document.createElement('img');
image.onload = function () {
button.width = image.width;
button.height = image.height;
+ button.style.position = 'absolute';
button.style.width = image.width + 'px';
button.style.height = image.height + 'px';
button.getContext('2d').drawImage(image, 0, 0);
@@ -341,4 +364,13 @@ Freewill.prototype.addButton = function (params) {
return button;
}
+};
+
+/* Check whether a point exists within an area. */
+Freewill.prototype.contains = function (area, point) {
+ if (point[0] < area[0]) { return false; }
+ if (point[0] > area[0] + area[2]) { return false; }
+ if (point[1] < area[1]) { return false; }
+ if (point[1] > area[1] + area[3]) { return false; }
+ return true;
};

0 comments on commit a8d2fab

Please sign in to comment.