Switching logic is not working

blyk · March 2017

Okay, It may look like this question should be under hardware category but please bear with me, it is not a hardware realted question.

I have been trying to create two canvas using instantiation mode in p5js where when you take an input from sensor, it switches the canvas back-forth and activates one canvas at a time and set the opacity to 50% of other canvas.

I have been using Neurosky mindwave to take eyeblink input from Neurosky EEG sensor and when user blinks the it should activate one canvas and deactivates another one. The sketch works fine when I use mouseIsPressed and switch back-forth but it doesn't work with the sensor. Note: - It switch the canvas but only once and doesn't switch back to previous state when using Neurosky sensor.

I am using this node module for Neurosky - MODULE

**Code - **

    sketch.js // contains two sketches

    var stateTwo, stateOne = true;
    var k = 0;
    // sketch one -----------------------------------

    var first = new p5(firstSketch, "canvasOne");

    function firstSketch(p) {

        p.setup = function() {
            p.createCanvas(400, 250);
        }
        p.draw = function() {
            p.background(255, 10, 100);
            p.fill(255);
            p.ellipse(p.width / 2, p.height / 2, 50, 50);
            if (blink > 30) {
                stateOne = false;
                stateTwo = true;
                console.log(k + " <-- one");
               // k = 0;
                blink = 0;
            }
            if (stateOne) {
                $('#canvasOne').css('opacity', '1');
                $('#canvasTwo').css('opacity', '0.5');
                // console.log("canvas One");
                p.fill(255, 0, 0);
                p.ellipse(p.random(p.width), p.random(p.height), 50, 50);
            }
        }
    }

    // sketch two -----------------------------------

    var second = new p5(secondSketch, "canvasTwo");

    function secondSketch(p) {

        p.setup = function() {
            p.createCanvas(400, 250);
        }
        p.draw = function() {
            p.background(60, 250, 100);
            p.fill(0);
            p.ellipse(p.width / 2, p.height / 2, 50, 50);

            if (blink > 30) {
                stateOne = true;
                stateTwo = false;
                console.log(k + " <-- two");
              //  k = 0;
                blink = 0;
            }

            if (stateTwo) {
                $('#canvasOne').css('opacity', '0.5');
                $('#canvasTwo').css('opacity', '1');
                // console.log("canvas Two");
                p.fill(0, 0, 255);
                p.ellipse(p.random(p.width), p.random(p.height), 50, 50);
            }
        }
    }

HTML

        <!DOCTYPE html>
        <html lang="en">

        <head>
            <meta charset="UTF-8">
            <title>CANVAS</title>
            <link rel="stylesheet" href="css/custom.css">
        </head>

        <body>
            <div>
                <div id="canvasOne"></div>
                <div id="canvasTwo"></div>
            </div>
            <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
            <script type="text/javascript" src="js/p5.js"></script>
            <script type="text/javascript" src="js/p5.dom.js"></script> 
            <script type="text/javascript" src="js/connect.js"></script>
            <script type="text/javascript" src="js/sketch.js"></script>
        </body>

        </html>

CONNECT.js

             var attention = 0;
             var meditation = 0;
             var blink;
             var poorSignalLevel = 0;

             if ("WebSocket" in window) {
                 console.log("WebSocket is supported by your Browser. Proceed.");
                 // $('#connect-controls').show();
             }

             var ws = new WebSocket("ws://127.0.0.1:8080");
             ws.onopen = function() {
                 console.log('opened connection');
                 ws.send("Hello from websocket client!");
             };

             // whenever websocket server transmit a message, do this stuff
             ws.onmessage = function(evt) {
                 // parse the data (sent as string) into a standard JSON object (much easier to use)
                 var data = JSON.parse(evt.data);
                 // handle "eSense" data
                 if (data.eSense) {
                     $('#brain').css({
                         opacity: 1
                     });
                     attention = data.eSense.attention;
                     meditation = data.eSense.meditation;
                     // brainProgress('#focusProgress', attention);
                     // brainProgress('#medProgress', meditation);
                     $("#focus").text(attention);
                     $("#meditation").text(meditation);
                 }

                 // handle "blinkStrength" data
                 if (data.blinkStrength) {
                     blink = data.blinkStrength;
                     var blinkcol = "white";
                     var eyeVal = map_range(blink, 0, 255, 0, 100);
                     $('#eyeBlinkStrength').text(parseInt(eyeVal));
                     if (blink > 25) {
                         //blinkcol = "rgba(102,211,43,1.0)";
                         k++;   
                         console.log(blink + " " +k);
                     } else blinkcol = "white";
                     $('#eyeBlink').css({
                         width: eyeVal,
                         height: eyeVal,
                         background: blinkcol
                     });
                 } else {
                     blink = 0;
                 }

                 // handle "poorSignal" data
                 if (data.poorSignalLevel != null) {
                     poorSignalLevel = parseInt(data.poorSignalLevel);
                 }
             };

             // when websocket closes connection, do this stuff
             ws.onclose = function() {
                 // websocket is closed.
                 console.log("Connection is closed...");
             };


             function map_range(value, low1, high1, low2, high2) {
                 return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
             }

GoToLoop · March 2017

You're relying too much on global variables. And even worse, they're shared among your 3 programs! =;

Worst offender is variable blink, which is declared by your "module".

But rather than restricting writing to blink for your "module" only, your other 2 "sketches" re-assign it to 0 as well! #-o

So whichever 1 reaches this condition 1st: if (blink > 30) {}, the other fails its own if (blink > 30) {}, b/c blink is 0 now! /:)

blyk · March 2017

@GoToLoop Thanks for the reply :) :) but I am sorry it didn't work. I tried not to set the blink to 0. If I didn't set the blink = 0 every time in the codes inside sketch.js it wouldn't even switch for the first time hence it needed to set blink = 0 whenever if(blink>30) satisfies . I know I am using too many global variables. Can you help me there to not to use those many global variable ?

@GoToLoop it worked perfectly when I used mouseIsPressed instead of blink in a given region, like in the center of the canvas. Otherwise it would detect the globle mouseclick and activate both canvas at the same time :D :D

More explanation if original explanation wasn't clear enough

I have created multiple html5 canvas using instantiation mode in P5JS. I am using Neurosky mindwave EEG sensor to activate and deactivate canvas one by one. Neurosky mindwave EEG sensor can detect user's eye blink which I am using as input. When user blinks, it should activate one canvas and deactivate another canvas and vice-versa.

Just to check if my code logic works, I used mouse pressed input to switch between the canvas and it worked perfectly. But, when I used it with the sensor it didn't work.

What I did - I have created multiple HTML5 canvas using instantiation mode in P5JS. I have used node-neurosky node module to capture the eyeblink data from the sensor. Node Module

What worked - When I launch the app it takes the eye blink as input for the first time and activate the another canvas but when I blink again it doesn't deactivate the current canvas and activate another canvas. I have tried printing flags to check the code and it is doing fine. Eyeblink gets detected every time when I blink but it doesn't switch the canvas.

What didn't work - When I tried to use eye blink strength directly into the sketch.js it didn't work then I created another boolean variable eyeclick which also didn't work.

Modified Part of the Code in connect.js

     if (data.blinkStrength) {
             blink = data.blinkStrength;
             var blinkcol = "white";
             var eyeVal = map_range(blink, 0, 255, 0, 100);
             $('#eyeBlinkStrength').text(parseInt(eyeVal));
             if (blink > 25) {
                 //blinkcol = "rgba(102,211,43,1.0)";
                 eyeIsBlinked = true;  
                 console.log(blink + " " +k);
             } else blinkcol = "white";
             $('#eyeBlink').css({
                 width: eyeVal,
                 height: eyeVal,
                 background: blinkcol
             });
         } else {
             blink = 0;
             eyeIsBlinked = false;
         }

Modified Part of the Code in Sketch.js

        var eyeIsBlinked; // introduced a new Boolean variable 

        if (eyeIsBlinked) {
                    stateOne = false;
                    stateTwo = true;
                    console.log(eyeIsBlinked + " <-- one");
                   // k = 0;
                    eyeIsBlinked = false;
                }

I have added a code demo to show how the above code works perfectly with mouse event - [CODEPEN](http://codepen.io/xblack/pen/NpEvwm)

blyk · March 2017

@everybody I solved the problem :) Thank you for the help.

Solution - I just moved this pecie of code into connect.js under if(blink>30)

            stateOne = true;
            stateTwo = false;

Howdy, Stranger!

Categories

In this Discussion

Switching logic is not working

Best Answer

Answers