Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Holman gyro #33

Merged
merged 2 commits into from Dec 8, 2012
Merged

Holman gyro #33

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67997a7
Add gyroscopic support
holman Dec 3, 2012
cf06a69
Account for the fact that firefox still fires DeviceOrientationEvent
Cameron423698 Dec 8, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
156 changes: 26 additions & 130 deletions js/plax.js
View file
Open in desktop
Expand Up @@ -30,23 +30,13 @@
lastRender = new Date().getTime(),
layers = [],
plaxActivityTarget = $(window),
motionEnabled = false,
motionMax = 1,
motionAllowance = .05,
movementCycles = 0,
motionLowPassFilter= 0.05,
motionLastX = 1,
motionLastY = 1,
motionData = {
"xArray" : [0,0,0,0,0],
"yArray" : [0,0,0,0,0],
"xMotion" : 0,
"yMotion" : 0
}
motionStartX = null,
motionStartY = null,
ignoreMoveable = false

// Public Methods
$.fn.plaxify = function (params){

return this.each(function () {
var layerExistsAt = -1
var layer = {
Expand Down Expand Up @@ -111,103 +101,29 @@
})
}


// Get minimum value of an array
//
// arr - array to be tested
//
// returns the smallest value in the array

function getMin(arr){
return Math.min.apply({}, arr)
}


// Get maximum value of an array
//
// arr - array to be tested
//
// returns the largest value in the array

function getMax(arr){
return Math.max.apply({}, arr)
}


// Determine if the device has an accelerometer
//
// returns true if the browser has window.DeviceMotionEvent (mobile)

function moveable(){
return window.DeviceMotionEvent != undefined
return (ignoreMoveable==true) ? false : window.DeviceOrientationEvent != undefined
}


// Determine if the device is actually moving. If it is, enable motion based parallaxing.
// Otherwise, use the mouse to parallax
//
// Parameters
//
// e - devicemotion event
// The values pulled from the gyroscope of a motion device.
//
// returns nothing

function detectMotion(e){
if (new Date().getTime() < lastRender + delay) return

if(moveable()){
var accel= e.accelerationIncludingGravity,
x = accel.x,
y = accel.y

x = (x * motionLowPassFilter) + (motionLastX * (1.0 - motionLowPassFilter));
y = (y * motionLowPassFilter) + (motionLastY * (1.0 - motionLowPassFilter));

motionLastX = x;
motionLastY = y;

if(motionData.xArray.length >= 5){
motionData.xArray.shift()
}
if(motionData.yArray.length >= 5){
motionData.yArray.shift()
}
motionData.xArray.push(x)
motionData.yArray.push(y)

motionData.xMotion = Math.round((getMax(motionData.xArray) - getMin(motionData.xArray))*1000)/1000
motionData.yMotion = Math.round((getMax(motionData.yArray) - getMin(motionData.yArray))*1000)/1000

if((motionData.xMotion > 1.5 || motionData.yMotion > 1.5)) {
if(motionMax!=10){
motionMax = 10
}
}

// test for sustained motion
if(motionData.xMotion > motionAllowance || motionData.yMotion > motionAllowance){
movementCycles++;
} else {
movementCycles = 0;
}
// Returns an object literal with x and y as options.
function valuesFromMotion(e) {
x = e.gamma
y = e.beta

if(movementCycles >= 5){
motionEnabled = true
$(document).unbind('mousemove.plax')
//window.ondevicemotion = function(e){plaxifier(e)}
motionStartX = (motionStartX == null) ? x : motionStartX
motionStartY = (motionStartY == null) ? y : motionStartY

$(window).bind('devicemotion', plaxifier(e))
} else {
motionEnabled = false
$(window).unbind('devicemotion')
$(document).bind('mousemove.plax', function (e) {
plaxifier(e)
})
}
return {
x: x - motionStartX,
y: y - motionStartY
}
}


// Move the elements in the `layers` array within their ranges,
// based on mouse or motion input
//
Expand All @@ -216,50 +132,31 @@
// e - mousemove or devicemotion event
//
// returns nothing

function plaxifier(e) {
if (new Date().getTime() < lastRender + delay) return
lastRender = new Date().getTime()
var leftOffset = (plaxActivityTarget.offset() != null) ? plaxActivityTarget.offset().left : 0,
topOffset = (plaxActivityTarget.offset() != null) ? plaxActivityTarget.offset().top : 0,
topOffset = (plaxActivityTarget.offset() != null) ? plaxActivityTarget.offset().top : 0,
x = e.pageX-leftOffset,
y = e.pageY-topOffset
if (
x < 0 || x > plaxActivityTarget.width() ||
y < 0 || y > plaxActivityTarget.height()
) return


if(motionEnabled == true){
// portrait(%2==0) or landscape
var i = window.orientation ? (window.orientation + 180) % 360 / 90 : 2,
accel= e.accelerationIncludingGravity,
tmp_x = i%2==0 ? -accel.x : accel.y,
tmp_y = i%2==0 ? accel.y : accel.x
// facing up(>=2) or down
x = i>=2 ? tmp_x : -tmp_x
y = i>=2 ? tmp_y : -tmp_y

// change value from a range of -x to x => 0 to 1
x = (x+motionMax)/2
y = (y+motionMax)/2

// keep values within range
if(x < 0 ){
x = 0
} else if( x > motionMax ) {
x = motionMax
if(moveable()){
if(e.gamma == undefined){
ignoreMoveable = true
}
values = valuesFromMotion(e)

if(y < 0 ){
y = 0
} else if( y > motionMax ) {
y = motionMax
}
// Admittedly fuzzy measurements
x = values.x / 30
y = values.y / 30
}

var hRatio = x/((motionEnabled == true) ? motionMax : plaxActivityTarget.width()),
vRatio = y/((motionEnabled == true) ? motionMax : plaxActivityTarget.height()),
var hRatio = x/((moveable() == true) ? motionMax : plaxActivityTarget.width()),
vRatio = y/((moveable() == true) ? motionMax : plaxActivityTarget.height()),
layer, i

for (i = layers.length; i--;) {
Expand All @@ -277,7 +174,6 @@
}

$.plax = {

// Begin parallaxing
//
// Parameters
Expand All @@ -300,7 +196,7 @@
})

if(moveable()){
window.ondevicemotion = function(e){detectMotion(e)}
window.ondeviceorientation = function(e){plaxifier(e)}
}

},
Expand All @@ -315,7 +211,7 @@
// returns nothing
disable: function(){
$(document).unbind('mousemove.plax')
window.ondevicemotion = undefined
window.ondeviceorientation = undefined
}
}

Expand Down