P5.js video upload into switch statement

[empero1615]

How can I upload a video into a switch statement and get it to play? I have referred to the video canvas example and have applied that code within my program but it still doesn’t run, I’m not sure if P5 allows me to upload videos within specific cases. I’ve also tried to use the following lines of code:

<var vid;
function preload(){
vid=createVideo(‘back.mp4’)

}
function setup() {
createCanvas(300, 150);
vid.play();
//print(vid.width,vid.height)
}

function draw() {
background(220)
vid.position(0,0);

}>

In its own canvas, the back.mp4 video plays when I run the program but when I add these lines of code within my switch statement it does not run.

[micuat]

Hi! Welcome to the forum!

First of all could you properly format the code using </> button (it’s not that you wrap the code with < > but you need to wrap with back ticks that appear when you hit that button)

Also could you provide the code with switch statement? If I understand correctly, the code you provided works, and with switch statement (that you didn’t post) the video doesn’t show up, right?

Note that how you’re showing the video is using DOM and not drawing on the canvas. You need to video.hide() in setup and image(video,0,0) in draw if you want to show the video on canvas (with DOM it may work smoother but if you want to modify pixels or overlay shapes, drawing on canvas is easier).

[empero1615]

var vid;
function preload(){
  vid=createVideo('back.mp4')
  
}
function setup() {
  createCanvas(300, 150);
  vid.play();
  //print(vid.width,vid.height)
}

function draw() {
  background(220)
 vid.position(0,0);
  
}

[empero1615]

var img, img2, img3, img4;
var door, Buddha, BlackJesus, Laozi;
var state = 0;
var slider1, slider2, slider3;
var x = 0;
var y = 80;
var vid;

function preload() {
  img0 = loadImage("door1.jpg");
  img1 = loadImage("Buddha.jpg");
  img2 = loadImage("Black Jesus.jpg");
  //img9 = loadImage("Overview Of 10 Commandments.jpg");
  img10 = loadImage("1-4 Commandments.jpg")
  img11 = loadImage("5-10 Commandments.jpg")
  img12 = loadImage("Last Supper.jpg")
  img3 = loadImage("Laozi.jpg");
  img14 = loadImage("Bagua.jpg")
  door = loadSound('Open and Close Door.mp3');
  Buddha = loadSound('Buddha.mp3');
  BlackJesus = loadSound('Black Jesus.mp3');
  Laozi = loadSound('Laozi.mp3');
  vid = createVideo('Buddha video1.mov');
}

function setup() {
  createCanvas(480, 440);
  let mouseHere = false;
  slider1 = createSlider(x, 1, 0.5, 0.1); //Create the sliders
  slider2 = createSlider(x, 1, 0.5, 0.1);
  slider3 = createSlider(x, 1, 0.5, 0.1);
  textAlign(CENTER);

  vid.play();
}

function draw() {
  background(255);

  switch (state) {

    case 0:
      textSize(59);
      fill(x, 175, 244, 95);
      text('~ Pick your path ~', width / 2, 60);
      image(img0, x, y);
      image(img0, y * 2, y);
      image(img0, y * 4, y);
      break;

      //DOORS INTO CHOSEN SPIRITUALITY

    case 1:
      image(img1, x, x, width, height);
      textSize(20);
      fill(x);
      text('A)Move forward go into the buddhist stomach', width / 2, 30);
      text('B)Click door to go back', width / 2, 50);
      break;

    case 2:
      image(img2, x, x, width, height);
      textSize(20);
      fill(x);
      text("A)Move forward go into Christ's head", 250, 30);
      text('B)Click arrow to go back', 250, 50);
      break;

    case 3:
      image(img3, x, x, width, height);
      textSize(20);
      fill(x);
      text("A)Move forward go into the Ying Yang sign", 250, 30);
      text('B)Click arrow to go back', 250, 50);
      break;

      //BUDDHIST JOURNEY TO NIRVANA   

    case 4: //New room in the buddha journey
      //image(img4, x, x, width, height);
      // vid.position(x,x)
      textSize(12);
      fill(x);
      text('Overview of Buddhism & Chakras-The 8 fold path is the Helm & the chakras build the ship', width / 2, 30);
      break;

    case 5: //Next room in the buddha journey
      //image(img5, x, x, width, height);
      textSize(15);
      fill(x);
      text('Chakras 3, 2, & 1: The Root, Sacral & Solar Plexus Chakras', width / 2, 30);
      break;

    case 6: //Next room in the buddha journey
      //image(img6, x, x, width, height);
      textSize(15);
      fill(x);
      text('Chakra 4: The Heart Chakra', width / 2, 30);
      break;

    case 7: //Next room in the buddha journey
      //image(img7, x, x, width, height);
      textSize(15);
      fill(x);
      text('Chakras 7, 6, & 5: The Throat, Third eye & Crown Chakras', width / 2, 30);
      break;

    case 8: //Final room in the buddha journey
      //image(img8, x, x, width, height);
      textSize(15);
      fill(x);
      text('Enlightenment', width / 2, 30);
      break;

      //CHRISTIAN JOURNEY TO NIRVANA   

    case 9: //New room in the Christ room
      vid.position(50,50);
      //image(img9, x, x, width, height);
      textSize(15);
      fill(x);
      text('Overview of the Ten Commandments: Baptism', width / 2, 30);
      break;

    case 10: //Next room in the Christ room
      image(img10, x, x, width, height);
      textSize(15);
      fill(x);
      text('First four Commandments-Confirmation', width / 2, 30);
      break;

    case 11: //Next room in the Christ room
      image(img11, x, x, width, height);
      textSize(15);
      fill(x);
      text('Next six Commandments-Confirmation', width / 2, 30);
      break;

    case 12: //Next room in the Christ room
      image(img12, x, x, width, height);
      textSize(15);
      fill(255);
      text('The last supper-Communion', width / 2, 30);
      break;

    case 13: //Final room in the Christ room
      // image(img13, x, x, width, height);
      textSize(15);
      fill(x);
      text('Enlightenment', width / 2, 30);
      break;


      //DAOIST JOURNEY TO NIRVANA   

    case 14: //New room in the Laozi room
      image(img14, x, x, width, height);
      textSize(15);
      fill(x);
      text('Overview of Daoism, the taijitu (Yin/yang), & the Bagua', width / 2, 30);
      break;

    case 15: //Next room in the Laozi room
      //image(img15, x, x, width, height);
      textSize(15);
      fill(x);
      text('First four areas, elements, and symbols of the Bagua', width / 2, 30);
      break;

    case 16: //Next room in the Laozi room
      //image(img16, x, x, width, height);
      textSize(15);
      fill(x);
      text('Next four areas, elements, and symbols of the Bagua', width / 2, 30);
      break;

    case 17: //Next room in the Laozi room
      //image(img17, x, x, width, height);
      textSize(15);
      fill(x);
      text('The Balance of Harmony: Integration of its equal parts', width / 2, 30);
      break;

    case 18: //Final room in the Laozi room
      //image(img18, x, x, width, height);
      textSize(15);
      fill(x);
      text('Enlightenment', width / 2, 30);
      break;

    default:
      print('default')
  }

  Buddha.setVolume(slider1.value()); //Call the sliders
  BlackJesus.setVolume(slider2.value());
  Laozi.setVolume(slider3.value());

}

function mouseClicked() {
  if (state == 0) {
    if (mouseX < 160 && mouseX > 0 && mouseY < 440 && mouseY > 80) {
      mouseHere = true;
      state = 1;
      Buddha.play();
      door.play();
      print("Welcome into Nirvana lotus, may Buddha lead you via the seven chakras into enlightenment.");
      // return;
    }
    if (mouseX < 320 && mouseX > 160 && mouseY < 440 && mouseY > 80) {
      mouseHere = true;
      state = 2;
      BlackJesus.play();
      door.play();
      print("May spirituals lead you into Christ consciousness my sun.");
    }
    if (mouseX < 480 && mouseX > 320 && mouseY < 440 && mouseY > 80) {
      mouseHere = true;
      state = 3;
      Laozi.play();
      door.play();
      print("Vibration is the frequency of all realities, May the balance between the Ying and Yang liberate your soul.");
    }

  } else if (state == 1) {
    if (dist(mouseX, mouseY, 138, 222) < 18) { //Circular door or button on the buddhist stomach
      state = 4;
      background(x);
      Buddha.stop();
    }
    if (dist(mouseX, mouseY, 30, 408) < 26) {
      state = x;
      Buddha.stop();
    }
  } else if (state == 4) {
    if (dist(mouseX, mouseY, 138, 222) < 18) { //Button to enter room 5: Bottom chakras 
      state = 5;
      background(x);
      Buddha.stop();
    }
    if (dist(mouseX, mouseY, 30, 408) < 26) {
      state = 1; //Back button
      Buddha.stop();
    }
  } else if (state == 5) {
    if (dist(mouseX, mouseY, 138, 222) < 18) { //Button to enter room 6: Heart chakra
      state = 6;
      background(x);
      Buddha.stop();
    }
    if (dist(mouseX, mouseY, 30, 408) < 26) {
      state = 4;
      Buddha.stop();
    }
  } else if (state == 6) {
    if (dist(mouseX, mouseY, 138, 222) < 18) { //Button to enter room 7: Top chakras
      state = 7
      background(x);
      Buddha.stop();
    }
    if (dist(mouseX, mouseY, 30, 408) < 26) {
      state = 5;
      Buddha.stop();
    }
  } else if (state == 7) {
    if (dist(mouseX, mouseY, 138, 222) < 18) { //Button to enter room 8: Enlightenment 
      state = 8;
      background(x);
      Buddha.stop();
    }
    if (dist(mouseX, mouseY, 30, 408) < 26) {
      state = 6;
      Buddha.stop();
    }
  } else if (state == 8) {
    if (dist(mouseX, mouseY, 138, 222) < 18) { //Button to enter room 0: Back to doors
      state = x;
      background(x);
      Buddha.stop();
    }
    if (dist(mouseX, mouseY, 30, 408) < 26) {
      state = 7;
      Buddha.stop();
    }
    //print(mouseX + " " + mouseY); //Remove this line of code in the final product- used to figure out the center of the guys stomach
  } else if (mouseY > 440 && mouseY < 480) { //Dimensions of the slider to work
    door.stop();
  } else if (state == 2) {
    if (dist(mouseX, mouseY, 270, 100) < 60) { // click on christ head
      state = 9;
      BlackJesus.stop();
    }
    if (dist(mouseX, mouseY, 30, 407) < 26) {
      state = x;
      BlackJesus.stop();
    }

  }else if (state == 9) {
    if (dist(mouseX, mouseY, 270, 100) < 60) { // click on christ head
      state = 10;
      BlackJesus.stop();
    }
    if (dist(mouseX, mouseY, 30, 407) < 26) {
      state = 2;
      BlackJesus.stop();
    }
    }else if (state == 10) {
    if (dist(mouseX, mouseY, 270, 100) < 60) { // click on christ head
      state = 11;
      BlackJesus.stop();
    }
    if (dist(mouseX, mouseY, 30, 407) < 26) {
      state = 9;
      BlackJesus.stop();
    }
      }else if (state == 11) {
    if (dist(mouseX, mouseY, 270, 100) < 60) { // click on christ head
      state = 12;
      BlackJesus.stop();
    }
    if (dist(mouseX, mouseY, 30, 407) < 26) {
      state = 10;
      BlackJesus.stop();
    }
        }else if (state == 12) {
    if (dist(mouseX, mouseY, 270, 100) < 60) { // click on christ head
      state = 13;
      BlackJesus.stop();
    }
    if (dist(mouseX, mouseY, 30, 407) < 26) {
      state = 11;
      BlackJesus.stop();
    }
          }else if (state == 13) {
    if (dist(mouseX, mouseY, 270, 100) < 60) { // click on christ head
      state = x;
      BlackJesus.stop();
    }
    if (dist(mouseX, mouseY, 30, 407) < 26) {
      state = 12;
      BlackJesus.stop();
    }
    // print(mouseX + " " + mouseY);
  } else if (mouseY > 440 && mouseY < 480) { //Dimensions of the slider to work
    door.stop();

  } else if (state == 3) {
    if (dist(mouseX, mouseY, 270, 200) < 60) { //click on Yin/Yang
      state = 14;
      background(x);
      Laozi.stop();
    }
    if (dist(mouseX, mouseY, 32, 407) < 26) {
      state = x;
      Laozi.stop();
    }
 } else if (state == 14) {
    if (dist(mouseX, mouseY, 270, 200) < 60) { //click on Yin/Yang
      state = 15;
      background(x);
      Laozi.stop();
    }
    if (dist(mouseX, mouseY, 32, 407) < 26) {
      state = 3;
      Laozi.stop();
    }
    } else if (state == 15) {
    if (dist(mouseX, mouseY, 270, 200) < 60) { //click on Yin/Yang
      state = 16;
      background(x);
      Laozi.stop();
    }
    if (dist(mouseX, mouseY, 32, 407) < 26) {
      state = 14;
      Laozi.stop();
    }
       } else if (state == 16) {
    if (dist(mouseX, mouseY, 270, 200) < 60) { //click on Yin/Yang
      state = 17;
      background(x);
      Laozi.stop();
    }
    if (dist(mouseX, mouseY, 32, 407) < 26) {
      state = 15;
      Laozi.stop();
    }
     } else if (state == 17) {
    if (dist(mouseX, mouseY, 270, 200) < 60) { //click on Yin/Yang
      state = 18;
      background(x);
      Laozi.stop();
    }
    if (dist(mouseX, mouseY, 32, 407) < 26) {
      state = 16;
      Laozi.stop();
    }
        } else if (state == 18) {
    if (dist(mouseX, mouseY, 270, 200) < 60) { //click on Yin/Yang
      state = x;
      background(x);
      Laozi.stop();
    }
    if (dist(mouseX, mouseY, 32, 407) < 26) {
      state = 17;
      Laozi.stop();
    }
    print(mouseX + " " + mouseY);
  } else if (mouseY > 440 && mouseY < 480) { //Dimensions of the slider to work
    door.stop();

  } else {
    state = x;
    Buddha.stop();
    BlackJesus.stop();
    Laozi.stop();
    //stop any songs that are playing ex: door.stop()
  }
}

[empero1615]

@micuat

Also could you provide the code with switch statement? If I understand correctly, the code you provided works, and with switch statement (that you didn’t post) the video doesn’t show up, right?

Sure. The code I provided works and the switch statement I just uploaded in conjunction to the video lines of code doesn’t work so you are correct. The following link will take you to my code which you can run and see the problem for yourself:

404 Page Not Found - p5.js Web Editor

[micuat]

Thanks. It would have been much helpful if you posted the code in the first place However the code is quite big and has a lot of things that are not relevant to the question. Check out “Is your problem isolated?” in the guideline.

(I know, at this point it’s hard to “isolate” the issue because you already put a lot of effort in the code so taking it apart to figure out the problem sounds like a tedious job. But as you are asking for help, someone has to do that job to solve the issue)

The first thing I noticed is that you commented out the video part. And the source video seems not uploaded on the editor. Did you do it deliberately or did you forget to upload it? Or maybe you couldn’t upload it because of the size limit (file has to be <5MB) ?

If that is not the issue, again, you need to first comment out parts of the code that are irrelevant to the video playback. Or, in this case, I would make a project from scratch and see if I can switch between 2 videos using switch-case statement. For example, this can be a starting point:

https://editor.p5js.org/micuat/sketches/PibMeSsHm

and then you can replace the background with another video to see if you can switch between 2 videos. Note that as I wrote above, video.position(0,0) is not how you want to do it in this case. It will place the video DOM element over the canvas. You need to draw the video using image instead. Also don’t forget to hide the video.