Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

some loop and function refactoring #5

Merged
merged 3 commits into from

2 participants

@alonisser

refactored with while loops instead of for loops, refactored desaturate .to include lightlevel check and so got rid from another traversing the while canvas data array.

added webcamSwiperOn boolean (obvious reasons)

changed the eventemitting variable name for readibilty (minor)

I think this is a briliant lib with a great future and You've done a great job with it.

currently I'm trying to make it more accurate, responsive and to add up/down movements (also the last one, and probably the most important one is probably out of my level).

alonisser added some commits
@alonisser alonisser refactored with while loops instead of for loops, refactored desatura…
…te to include lightlevel check, added webcamSwiperOn boolean (obvious reasons), changed the eventemitting variable name(minor) for readibilty
8f438c9
@alonisser alonisser added a tenary in motionweight to correctly handle the right most pix…
…els in the pixelarray
f0c5da4
@alonisser alonisser more loop optimization, changing the while loops to countdown and a l…
…ittle more efficient array handling with pop
0da284b
@iambrandonn iambrandonn merged commit 9d38d3b into from
@alonisser

am I understanding this right? is the right most pixel gets a zero value from (i/4)%canvaswidth?

@iambrandonn
Owner

Each pixel gets four values in the array (one for red, one for green, one for blue, and one for alpha). This is why the i/4. The desaturation makes each of the red, green, and blue values the same.

It might be easiest to pretend these are our pixels

0 1 2 3 4
5 6 7 8 9

With these correct weights:
-2 -1 0 1 2

In this case our canvas width would by 5. The weight of a right most pixel would be (4 % 5) - (5 / 2). The 5 / 2 is to determine half of the canvas width. In this case we actually get 1.5 which is close enough. I believe it gets rounded later.

So in looking closer at your pull request... I'm not sure it was right. Because subtracting i -1 will put us on the transparency value of the previous pixel. And also if the (pixel index % canvas width) == 0 that means we are dealing with the left most column of pixels. So I think it still needs the subtraction. It all still works fine because of the noisiness covers up the wrong weights for that one column of pixels.

Did that all make sense or am I too tired to write clearly? :)

@alonisser

I'm not sure I understood you correctly: I agree that the subtraction is needed only if we are on the most left pixel, that what I was trying to do, actually an easier way to do that would be doing:
motionWeight += (((i / 4) % canvasWidth) == 0 ? ((i-1) / 4 % canvasWidth) : (canvasWidth / 2))
wouldn't it?
and another thought - this line doesn;t actually take into consideration the amount of change taking place, I suggest adding to motion something like (psuedocode):
(i-1) / 4 % canvasWidth) * Math.abs(previousData[i] - currentData[i]-PIXEL_CHANGE_THRESHOLD) so the amount of change would have some significance, I'll try to implent it tonight

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 6, 2012
  1. @alonisser

    refactored with while loops instead of for loops, refactored desatura…

    alonisser authored
    …te to include lightlevel check, added webcamSwiperOn boolean (obvious reasons), changed the eventemitting variable name(minor) for readibilty
Commits on Oct 7, 2012
  1. @alonisser
Commits on Oct 8, 2012
  1. @alonisser

    more loop optimization, changing the while loops to countdown and a l…

    alonisser authored
    …ittle more efficient array handling with pop
This page is out of date. Refresh to see the latest.
Showing with 36 additions and 20 deletions.
  1. +36 −20 webcam-swiper-0.1.js
View
56 webcam-swiper-0.1.js
@@ -12,6 +12,7 @@ function initializeWebcamSwiper() {
navigator.getUserMedia({video: true}, function (stream) {
window.webcamSwiperStream = stream;
+ window.webcamSwiperOn = true;
// Create a video element and set its source to the stream from the webcam
var videoElement = document.createElement("video");
@@ -69,12 +70,13 @@ function initializeWebcamSwiper() {
greyscaleCtx.drawImage(videoElement, 0, 0, horizontalResolution, verticalResolution, 0, 0, canvasWidth, canvasHeight);
// Desaturate it
- currentImageData = deSaturate(greyscaleCtx.getImageData(0, 0, canvasWidth, canvasHeight));
+ var deSaturated = deSaturate(greyscaleCtx.getImageData(0, 0, canvasWidth, canvasHeight));
+ currentImageData = deSaturated.pop();
// Make adjustments for light level and system speed
if (scanCount % 50 === 0) {
// Calibrate based on the current light level, if we haven't already
- lightLevel = getLightLevel(currentImageData);
+ lightLevel = deSaturated.pop();
if (lightLevel > 0 && lightLevel <= 1) {
PIXEL_CHANGE_THRESHOLD = 25;
FRAME_THRESHOLD = 3000;
@@ -135,9 +137,9 @@ function initializeWebcamSwiper() {
}
function fireSwipeEvent(eventName) {
- var swipeLeftEvent = document.createEvent("UIEvents");
- swipeLeftEvent.initEvent(eventName, false, false);
- document.getElementsByTagName("body")[0].dispatchEvent(swipeLeftEvent);
+ var swipeEvent = document.createEvent("UIEvents");
+ swipeEvent.initEvent(eventName, false, false);
+ document.getElementsByTagName("body")[0].dispatchEvent(swipeEvent);
}
function getMotionWeight (previous, current) {
@@ -145,11 +147,15 @@ function initializeWebcamSwiper() {
var previousData = previous.data;
var currentData = current.data;
var dataLength = previousData.length;
- for (var i = 0; i < dataLength; i += 4) {
+ var i = dataLength-1;
+ while (i >= 0) {
if (Math.abs(previousData[i] - currentData[i]) > PIXEL_CHANGE_THRESHOLD) {
- motionWeight += ((i / 4) % canvasWidth) - (canvasWidth / 2);
+ motionWeight += (((i / 4) % canvasWidth) == 0 ? ((i-1) / 4 % canvasWidth) : ((i / 4) % canvasWidth)- (canvasWidth / 2));
+
}
+ i -= 4;
}
+
return motionWeight;
}
@@ -161,30 +167,39 @@ function initializeWebcamSwiper() {
// Iterate through each pixel, desaturating it
var dataLength = theData.length;
- for (var i = 0; i < dataLength; i += 4) {
+ var i = dataLength-1;
+ var lightLevel;
+
+ while ( i >= 0) {
// To find the desaturated value, average the brightness of the red, green, and blue values
var average = (theData[i] + theData[i + 1] + theData[i + 2]) / 3;
newData[i] = newData[i+1] = newData[i+2] = average;
// Fully opaque
newData[i+3] = 255;
+ // returning an average intensity of all pixels. Used for calibrating sensitivity based on room light level.
+ lightLevel += newData[i]; //combining the light level in the samefunction
+ i -= 4;
+
}
- return newImageData;
+ return [lightLevel/dataLength,newImageData];
}
// Will return the average intensity of all pixels. Used for calibrating sensitivity based on room light level.
- function getLightLevel (imageData) {
- var theData = imageData.data;
- var dataLength = theData.length;
-
- var value = 0;
- for (var i = 0; i < dataLength; i += 4) {
- value += theData[i];
- }
-
- return value / theData.length;
- }
+ // function getLightLevel (imageData) {
+ // var theData = imageData.data;
+ // var dataLength = theData.length;
+ // var value = 0;
+ // var i = 0;
+
+ // while (i < dataLength) {
+ // value += theData[i];
+ // i += 4
+ // }
+
+ // return value / dataLength;
+ // }
});
});
}
@@ -198,4 +213,5 @@ function destroyWebcamSwiper() {
window.webcamSwiperStream.stop();
window.webcamSwiperStream = undefined;
}
+ window.webcamSwiperOn = false;
}
Something went wrong with that request. Please try again.