CODEWITHSUNDEEP
p5.js
Yakob
Yakob

Reputation: 159

Make a button display after a video has played using p5.js

I am trying to make a button appear after a video has played. I know this has got to do with setInterval, but I'm unsure how to go about implementing this into my project. the video is roughly 40 seconds long, so I would like a way to show the button after the video has finished playing. I am using the p5.js framework.

it is meant to be a loading screen for a game that I am working on, after the video has finished a button should appear to let you advance to start the game.

bellow is my code.

let bg;
let logo;
let button;
let vid;
let click;

function preload() {
    bg = loadImage('assets/space.png');
    logo = loadImage('assets/logo.png');
    rock1 = loadImage('assets/rock1.png');
    rock2 = loadImage('assets/rock2.png');
    go = loadImage('assets/go.png');
    hs = loadImage('assets/hs.png');
    bg1 = loadImage('assets/space.png');
    w = loadImage('assets/w.png');
    a = loadImage('assets/a.png');
    s = loadImage('assets/s.png');
    d = loadImage('assets/d.png');
    mouse = loadImage('assets/mouse.png');
    click = loadSound('assets/click.mp3');
}

function setup() {
    vid = createVideo('assets/vid.mp4')
    bg = loadImage('assets/space1.png');
    createCanvas(windowWidth, windowHeight);
    strokeWeight(10);
    // frameRate(30);
    button = createButton('CLICK TO START');
    button.position(650, 650);
    button.mousePressed(soundPlay)
    vid.loop();
}



function soundPlay() {
    if (!click.isPlaying()) {
        click.play();
    }
}


function draw() {
    background(bg);

    stroke(189, 51, 164);
    rect(190, 90, 1070, 600, 10);
    for (let i = 200; i < 1250; i++) {
        let r = random(255);
        stroke(r);
        line(i, 100, i, 680);
    }
    image(logo, 180, 70, 200, 200);
    stroke(189, 51, 164);
    line(740, 30, 700, 85);
    line(660, 30, 700, 85);
    circle(660, 30, 20);
    circle(740, 30, 20);
    image(rock1, 1300, 70, 100, 100);
    image(rock2, 60, 70, 100, 100);
    rect(400, 150, 650, 300, 10);
    image(bg1, 400, 155, 650, 290);
    rect(400, 450, 650, 180, 10);
    image(bg1, 400, 455, 650, 170);

    image(w, 410, 500, 25, 25);
    image(a, 410, 530, 24, 24);
    image(s, 410, 560, 24, 24);
    image(d, 410, 590, 24, 24);
    image(mouse, 710, 500, 25, 25);
    noStroke();
    fill(255)
    text("CONTROLLS:", 660, 470);
    textSize(20);
    textStyle(BOLD);
    text("SPACEBAR:", 710, 550);

    image(vid, 400, 150, 650, 300);

    text("LOADING: . . .", 650, 150);



}

Upvotes: 2

Views: 382

Answers (2)

Luke Garrigan
Luke Garrigan

Reputation: 5021

As you're not using the video as its own element, you're plonking it in the canvas and drawing an image each frame - you could simply wrap the image(vid, 400, 150, 650, 300); in an if statement:

if (showVid) {
  image(vid, 400, 150, 650, 300);
}

And then you'll set the showVid variable to false when your video duration has ended:

const videoLength = 5000; // unsure if there's a way in p5.js to get a video's duration
setTimeout(() => showVid = false, videoLength)

Here's a really simple example I've put together, and a link to the p5.js sketch so you can play it.

let vid;
let showVid = true;
function setup() {
  createCanvas(400, 400);
  vid = createVideo('vid.mp4');
  console.log(vid);
  vid.hide();
  vid.loop(); 
  
  const videoLength = 5000; // unsure if there's a way in p5.js to get a video's duration
  setTimeout(() => showVid = false, videoLength)
}

function draw() {
  background(150);
  
  if (showVid) {
    image(vid, 0, 100); 
  }
}

Upvotes: 1

olaf
olaf

Reputation: 372

You can try using vid.onended() to call a function when the video is done, to later display a button. documentation

Upvotes: 1

Related Questions