We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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);
}
Answers
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! #-oSo whichever 1 reaches this condition 1st:
if (blink > 30) {}
, the other fails its ownif (blink > 30) {}
, b/c blink is0
now! /:)@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
Modified Part of the Code in connect.js
Modified Part of the Code in Sketch.js
I have added a code demo to show how the above code works perfectly with mouse event - [CODEPEN](http://codepen.io/xblack/pen/NpEvwm)
@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)