p5.js Web Editor | happy copy22 copy copy 1more copy2 copy

xxxxxxxxxx
// set start page
let isStartPage = true;
let isInstructionspage = false;
// other variables declaration for wheel
let a = 0,
  rotated = false,
  frm,
  nm,
  val,
  hidden = true,
  stoppedColor,
  currentColor;
let randomHand;
let colors = ['#FF0000', '#0EDBFA', '#64AF00','#FDFD4A'];
// Flag to track if randomHand has been randomized
let handRandomized = false;
let handOptions = ["Right Hand", "Left Hand"];
// score
let score=0;
let scoreSet=false;
​
//array to track previously pressed switches
let correctStates=[0,0,0,0,0,0,0,0,0,0,0,0];
let correctSwitch=false;
let wrongSwitch=false;
​
​
function preload() {
  backgroundImage = loadImage('t1.png');
  backgroundImage2 = loadImage('t2.png');
  instructions = loadImage('instructions.png');
}
​
​
function setup() {
  createCanvas(800,500);
  textSize(18);
  //   wheel of 16 divisions
  frm = floor(random(1000, 1100));
  nm = [];
  for (let i = 1; i <= 16; i++) {
    nm.push(i);
  }
  
  // Create a Speech Recognition object with callback
  speechRec = new p5.SpeechRec('en-US', gotSpeech);
  // "Continuous recognition" (as opposed to one time only)
  let continuous = true;
  // If you want to try partial recognition (faster, less accurate)
  let interimResults = false;
  // This must come after setting the properties
  speechRec.start(continuous, interimResults);
}
​
function gotSpeech() {
      // Something is there
      // Get it as a string, you can also get JSON with more info
      if (speechRec.resultValue) {
        let said = speechRec.resultString.toLowerCase();
        console.log(said);
        if ('start' === said) {
          rotated = !rotated;
          frameCount = 0;
          frm = floor(random(1000, 1100));
        } else if ('stop' === said) {
          rotated = false;
          // Reset the flag when the wheel starts spinning again
          randomHand = random(handOptions);
          handRandomized = true;
​
        }
      }
}
​
// wheel screen setup
​
function setupWheelScreen() 
{
  document.body.oncontextmenu = () => {
    return false;
  };
  frm = floor(random(1000, 1100));
  nm = [];
  for (let i = 1; i <= 16; i++) {
    nm.push(i);
  }
}
​
// drawing the wheel screen
function drawWheelScreen() 
{
  
  clear();
  
   
    //wrong switch end game
    if (wrongSwitch)
    {
      drawEndScreen();
      return;
    }
  strokeWeight(3);
  //random hand text and color
  fill(stoppedColor || colors[3 % colors.length]);
  textSize(30);
  text(randomHand, 80,20);
  //call create wheel each time
  createWheel();
  textSize(20);
  fill(0);
  text('Score: ' + score, -300,-200 );
  rotate(a);
  push();
  rotate(-a);
  fill(0);
  ellipse(0, 0, 150);
  fill(stoppedColor || colors[3 % colors.length]); // Use the stoppedColor or default color
  ellipse(0, 0, 100);
  pop();
  if (rotated) {
    a += 0.5;
    a %= 2 * PI;
  }
  
  if (rotated==false)
  {
    scoreSet=false;
    console.log(stoppedColor);
    console.log(randomHand);
    
    //check correct/wrong switches
    //red
    if (stoppedColor == colors[0]) 
    {
      if (switchStates[0] == 1 && correctStates[0]!=1) 
      {
        correctSwitch = true;
        correctStates[0]=1;
      } else if (switchStates[1] == 1 && correctStates[1]!=1)  
      {
        correctSwitch = true;
        correctStates[1]=1;
      }
      else if (switchStates[8] == 1 && switchStates[8] != 1) 
      {
        correctSwitch = true;
        correctStates[8]=1;
      }
​
​
      if (switchStates[2] == 1 && correctStates[2]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      } 
      else if (switchStates[3] == 1  && correctStates[3]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      }
      else if (switchStates[4] == 1  && correctStates[4]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      } 
      else if (switchStates[5] == 1  && correctStates[5]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      }
      else if (switchStates[6] == 1  && correctStates[6]!=1)
      {
        correctSwitch = false;
        wrongSwitch=true;
      }
      else if (switchStates[7] == 1  && correctStates[7]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      }
      else if (switchStates[9] == 1  && correctStates[9]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      }
       else if (switchStates[10] == 1  && correctStates[10]!=1) 
       {
        correctSwitch = false;
        wrongSwitch=true;
      }
      else if (switchStates[11] == 1  && correctStates[11]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      }
    }
​
  
  //blue
    if (stoppedColor == colors[1]) 
    {
      if (switchStates[2] == 1 && correctStates[2]!=1)
      {
        correctSwitch = true;
        correctStates[2]=1;
        // wrongSwitch=false;
      } 
      else if (switchStates[3] == 1 && correctStates[3]!=1) 
      {
        correctSwitch = true;
        correctStates[3]=1;
        // wrongSwitch=false;
      }
      else if (switchStates[9] == 1 && correctStates[9]!=1) 
      {
        correctSwitch = true;
        correctStates[9]=1;
        // wrongSwitch=false;
      }
    
​
      if (switchStates[0] == 1 && correctStates[0]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      } 
      else if (switchStates[1] == 1  && correctStates[1]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      } 
      else if (switchStates[4] == 1  && correctStates[4]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      } 
      else if (switchStates[5] == 1  && correctStates[5]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      } 
      else if (switchStates[6] == 1  && correctStates[6]!=1)
      {
        correctSwitch = false;
        wrongSwitch=true;
      } 
      else if (switchStates[7] == 1  && correctStates[7]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      }
      else if (switchStates[8] == 1  && correctStates[8]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      }
       else if (switchStates[10] == 1  && correctStates[10]!=1) 
       {
        correctSwitch = false;
        wrongSwitch=true;
      }
      else if (switchStates[11] == 1  && correctStates[11]!=1) 
      {
        correctSwitch = false;
        wrongSwitch=true;
      }
    }
​
​
​
  //green
  if (stoppedColor == colors[2])
  {
    if (switchStates[4] == 1 && correctStates[4]!=1) 
    {
      correctSwitch = true;
      correctStates[4]=1;
      // wrongSwitch=false;
    } else if (switchStates[5] == 1 && correctStates[5]!=1) 
    {
      correctSwitch = true;
      correctStates[5]=1;
      // wrongSwitch=false;
    }
    else if (switchStates[10] == 1 &&  correctStates[10]!=1) 
    {
      correctSwitch = true;
      correctStates[10]=1;
      // wrongSwitch=false;
    }
    
    
    if (switchStates[0] == 1 && correctStates[0]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[1] == 1  && correctStates[1]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[2] == 1  && correctStates[2]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[3] == 1  && correctStates[3]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[6] == 1  && correctStates[6]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[7] == 1  && correctStates[7]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    }
    else if (switchStates[8] == 1  && correctStates[8]!=1) 
    
    {
      correctSwitch = false;
      wrongSwitch=true;
    }
     else if (switchStates[9] == 1  && correctStates[9]!=1) 
     {
      correctSwitch = false;
      wrongSwitch=true;
    }
    else if (switchStates[11] == 1  && correctStates[11]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    }
  }
  
  
  //yellow
  else if (stoppedColor == colors[3]) 
  {
    if (switchStates[6] == 1 && correctStates[6]!=1) 
    {
      correctSwitch = true;
      correctStates[6]=1;
      // wrongSwitch=false;
    }
    else if (switchStates[7] == 1 && correctStates[7]!=1) 
    {
      correctSwitch = true;
      correctStates[7]=1;
      // wrongSwitch=false;
    }
    else if (switchStates[11] == 1 && correctStates[11]!=1) 
    {
      correctSwitch = true;
      correctStates[11]=1;
      // wrongSwitch=false;
    }
    
    if (switchStates[0] == 1  && correctStates[0]!=1)
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[1] == 1  && correctStates[1]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[2] == 1  && correctStates[2]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[3] == 1  && correctStates[3]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[4] == 1 && correctStates[4]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    } 
    else if (switchStates[5] == 1 && correctStates[5]!=1) 
    {
      correctSwitch = false;
      wrongSwitch=true;
    }
     else if (switchStates[8] == 1  && correctStates[8]!=1) 
     {
      correctSwitch = false;
      wrongSwitch=true;
    }
     else if (switchStates[9] == 1  && correctStates[9]!=1) 
     {
      correctSwitch = false;
      wrongSwitch=true;
    }
     else if (switchStates[10] == 1  && correctStates[10]!=1) 
     {
      correctSwitch = false;
      wrongSwitch=true;
    }
  }
​
    
    //correct switch add score
  
    if (correctSwitch)
    {
      // fill(255,0,255);
      // rect(0,0,100,100);
      if (scoreSet==false){
      score+=1;
      scoreSet=true;}
      correctSwitch=false;
      console.log('correctstates:',correctStates);
    }
    
    
​
  if (frameCount > frm) 
  {
    rotated = false;
    stoppedColor = undefined;
    scoreSet = false; 
    // Reset the flag when the wheel starts spinning again
    handRandomized = false;
  }
}
}
​
​
function drawEndScreen() {
​
  image(backgroundImage2,0,0, width, height); // Draw the image at the center
  fill(255,0,0);
  textSize(20);
  text("Score: "+score, width/2, height/2+20);
}
​
// draw wheel   
function createWheel() {
      let beg = 0;
      let angle = 2 * PI / nm.length;
      translate(width / 2, height / 2);
      ellipseMode(CENTER);
      let wh = min(width, height);
      stroke(0);
      fill(0);
      ellipse(0, 0, wh - 10);
      for (var i = 0; i < nm.length; i++) {
        fill(colors[i % colors.length]);
        stroke(0);
        if (a >= beg && a <= beg + angle) {
          stoppedColor = colors[i % colors.length];
          fill(0);
          // stroke(stoppedColor);
          strokeWeight(2);
          val = nm[i];
        }
        arc(0, 0, wh - 50, wh - 50, beg, beg + angle, PIE);
​
        let x = (wh - 150) * cos((beg + beg + angle) / 2) / 2;
        let y = (wh - 150) * sin((beg + beg + angle) / 2) / 2;
​
       
​
        beg += angle;
      }
      noFill();
    }
​
​
function drawStartPage() 
{
  background(220);
  image(backgroundImage, 0, 0, width, height);
  // textSize(32);
  textAlign(CENTER, CENTER);
}
​
function draw() 
{
  if (isStartPage) {
    drawStartPage();
  }
  else if (isInstructionspage){drawInstructions();}
  else {
    drawWheelScreen();
    
  }
  
  
  
}
​
​
function drawInstructions(){
  image(instructions, 0, 0, width, height);
}
​
​
function keyPressed() {
      if (key == " ") {
        if (!serialActive) {
      setUpSerial();
      // console.log("Serial connection started.");
    }
      }
  if (keyCode == ENTER){
    rotated = !rotated;
        frameCount = 0;
        scoreSet = false; 
        frm = floor(random(1000, 1100));
    if (rotated==false){randomHand = random(handOptions);
          handRandomized = true;}
  } 
    }
function mousePressed() {
  if (isStartPage && mouseX > width / 2 - 40 && mouseX < width / 2 + 230 && mouseY > height / 2 + 90 && mouseY < height / 2 + 130) {
    isStartPage = false;
    isInstructionspage = true;
  } else if (isInstructionspage && mouseX > width / 2 - 40 && mouseX < width / 2 + 230 && mouseY > height / 2 + 130 && mouseY < height) {
    isInstructionspage = false;
    setupWheelScreen();
  }
}
​
​
​
​
// arduino communication
let redSwitch1 = 0;
let redSwitch2 = 0;
let blueSwitch1 = 0;
let blueSwitch2 = 0;
let greenSwitch1 = 0;
let greenSwitch2 = 0;
let yellowSwitch1 = 0;
let yellowSwitch2 = 0;
let redSwitch3 = 0;
let blueSwitch3 = 0;
let greenSwitch3 = 0;
let yellowSwitch3 = 0;
let switchStates = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
function readSerial(data) {
  if (data != null) {
    // Split the received string into an array of integers
    switchStates = data.split(',').map(Number);
​
    // Log switch states to the console for debugging
    console.log("Switch States:", switchStates);
  }
​
  // Send data back to Arduino for handshake
  // let sendToArduino = redSwitch1 + "," + redSwitch2 + "," 
  //                     blueSwitch1 + "," + blueSwitch2 + ","+ 
  //                     greenSwitch1 + "," + greenSwitch2 + "," +
  //                     yellowSwitch1 + "," + yellowSwitch2+"," +redSwitch3+ "," + blueSwitch3 + ","+greenSwitch3 + "," + yellowSwitch3+"\n";
  // writeSerial(sendToArduino);
}
 
Cookies

Sketch Files

Console

Preview
