多个 HTML5 canvas 与 Neurosky 传感器输入不工作

Question

我在 P5JS 中使用实例化模式创建了多个 html5 canvas。我正在使用 Neurosky mindwave EEG 传感器一个一个地激活和停用 canvas。 Neurosky mindwave EEG 传感器可以检测用户的眨眼，我将其用作输入。当用户眨眼时，它应该激活一个 canvas 并停用另一个 canvas，副 versa.I 我正在使用 Neurosky mindwave EEG 传感器一个接一个地激活和停用 canvas。 Neurosky mindwave EEG 传感器可以检测用户的眨眼，我将其用作输入。当用户眨眼时，它应该激活一个 canvas 并停用另一个 canvas ，反之亦然。

只是为了检查我的代码逻辑是否有效，我使用鼠标按下输入在 canvas 之间切换并且它运行良好。但是，当我将它与传感器一起使用时，它不起作用。

我做了什么 - 我在 P5JS 中使用实例化模式创建了多个 HTML5 canvas。我使用 node-neurosky 节点模块从传感器捕获眨眼数据。 Node Module

什么有效 - 当我启动应用程序时，它第一次将眨眼作为输入并激活另一个 canvas 但是当我再次眨眼时它没有不要停用当前 canvas 并激活另一个 canvas。我已经尝试打印标志来检查代码并且它运行良好。每次眨眼时都会检测到眨眼，但它不会切换 canvas.

什么不起作用 - 当我尝试将眨眼强度直接用于 sketch.js 它不起作用然后我创建了另一个布尔变量 eyeclick 也没有用。

sketch.js

var stateTwo, stateOne = true;
// 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 (eyeclicked) {
            stateOne = false;
            stateTwo = true;
            console.log(" canvas <-- one");
            // k = 0;
            eyeclicked = false;
        }
        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 (eyeclicked) {
            stateOne = true;
            stateTwo = false;
            console.log(" canvas <-- two");
            //  k = 0;
            eyeclicked = false;
        }

        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);
        }
    }
}

与传感器连接的节点代码connect.js

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

 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 > 40) {
             //blinkcol = "rgba(102,211,43,1.0)";
             eyeclicked = true;
             //  k++;   
             console.log(blink + " " + eyeclicked);
         } else blinkcol = "white";
         $('#eyeBlink').css({
             width: eyeVal,
             height: eyeVal,
             background: blinkcol
         });
     } else {
         blink = 0;
         eyeclicked = false;
     }

     // 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);
 }

编辑 CODE PEN DEMO

基于鼠标输入 演示多个canvas 之间切换逻辑的代码。它工作得很好。尝试点击进入中心圈

var stateTwo, stateOne = true;
var eyeIsBlinked;
// 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 (p.mouseIsPressed && p.dist(p.mouseX, p.mouseY, p.width / 2, p.height / 2) < 50) {
            stateOne = false;
            stateTwo = true;
            console.log(" <-- one");
            // k = 0;
            // window.eyeIsBlinked = false;
            // 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 (p.mouseIsPressed && p.dist(p.mouseX, p.mouseY, p.width / 2, p.height / 2) < 50) {
            stateOne = true;
            stateTwo = false;
            console.log(" <-- two");
            //  k = 0;
            //  window.eyeIsBlinked = false;
            //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);
        }
    }
}

Answer 1

我不知道你的项目是如何运作的。但我想问题可能是范围问题。两个文件都使用 eyeclicked 变量，但它们可能使用两个不同的变量。尝试通过在 window 全局变量中使用它来确保它们使用相同的变量。

所以不用 eyeclicked 使用 window.eyeclicked.

多个 HTML5 canvas 与 Neurosky 传感器输入不工作

multiple HTML5 canvas with Neurosky sensor input is not working

html

javascript

canvas

mindwave