How do i create a program to loop through videos in p5.js

p5.js Libraries
1

< I am pretty new to coding, I am trying to apply different seriously.js effects on different arrays of videos, I am not even able to make the program loop through the videos in the array

                                                 />

let vid1= ‘footb1.mp4’;
let vid2= ‘footb3.mp4’;
let vid3= ‘futball1.mp4’;
let vid4 =‘Mfash.mp4’;
let vid5= ‘fas4.mp4’;
let vid6 = ‘rfaash1.mp4’;
let vid7 = ‘futball2.mp4’;
let vid8 = ‘footb5.mp4’;
let vid9 = ‘footb4.mp4’;
let vid10 = ‘fash3.mp4’;
let vid11 = ‘fas1.mp4’;
let vid12 = ‘footb2.mp4’;
a=[];
a = [vid1,vid2,vid3,vid4,vid5,vid6,vid7,vid8,vid9,vid10,vid11,vid12];

//mmv

b = [];
b = [vid1,vid2,vid3];

//mav
c=[];
c = [vid7,vid8];

//mev
d = [];
d = [vid9,vid12];

//wav

e = [];
e=[vid4,vid5,vid6];

//wev
f=[];
f=[vid10,vid11];

let z;let p;
let q;let w;let r;let y;

function preload(){
for (var i = 0;i<a.lenght;i++){
z= createVideo(a[i]);
}
for (var j = 0; j<b.lenght;j++){
q= createVideo(b[j]);

}
for (var k = 0; k<c.lenght;k++){
w= createVideo(c[j]);

}
for (var l = 0; l<d.lenght;l++){
r= createVideo(d[l]);

}
for (var x = 0; x<e.lenght;x++){
y= createVideo(e[x]);

}
for (var t = 0; t<f.lenght;t++){
p= createVideo(f[t]);

}

}

function setup() {
createCanvas(640,480, WEBGL);

}

function draw() {
background(220);
}

2

Hi @iade2021,

Welcome to the forum! :wink:

Before answering your question, can you please format your code by using the </> button when editing a message on the forum?

Or use backticks:

```javascript
your code…
```

Also if your post is p5js related you can change the tags on the thread!

3

please can you just show me a little sample of how to put it together? sorry, i am really a novice in these things, just starting out

4

What exactly is not working in your current code? It’s difficult to test if we don’t have the videos so it will be better if you break the problem into sub problems so we can try to solve them.

  • Are you able to import a single video and display it on the canvas?
  • What about loading multiple videos? What data structure is the most appropriate for that?
  • What about switching between those movies when the user press a key? or every X seconds?
5

thanks a lot, i was trying to stretch my imagination don’t know if it is something feasible, thought of having different arrays of videos, with each array(say[ai] looping through [ai]) playing at a particular keypressed(); and when another key is pressed, a different array of videos play

6

sorry, it’s funny, i am just starting out, and i am already assuming what i can’t tell if it’s possible

7

these are some of the links to different patterns i have been trying towards the project

p5.js Web Editor | seriously copy (p5js.org)

p5.js Web Editor | Phantom success copy copy (p5js.org)

8

this is exactly what you need to do!

9

This is a cross post from StackOverflow where I’ve already provided some advice about working with arrays. However, since there are a few more issues in this more extensive version of the code:

let vid1 = "footb1.mp4";
let vid2 = "footb3.mp4";
let vid3 = "futball1.mp4";
let vid4 = "Mfash.mp4";
let vid5 = "fas4.mp4";
let vid6 = "rfaash1.mp4";
let vid7 = "futball2.mp4";
let vid8 = "footb5.mp4";
let vid9 = "footb4.mp4";
let vid10 = "fash3.mp4";
let vid11 = "fas1.mp4";
let vid12 = "footb2.mp4";

// REVIEW: You should always declare your new variables with the let keyword (I won't go into details, but it is a good habit
a = []; // Should be: let a = [];
// REVIEW: You don't need to declare "a" as an empty array and then assign it a new value (this array) you can combine this into one statement.
a = [vid1, vid2, vid3, vid4, vid5, vid6, vid7, vid8, vid9, vid10, vid11, vid12];

// REVIEW: ditto above for all of these...
b = [];
b = [vid1, vid2, vid3];

c = [];
c = [vid7, vid8];

d = [];
d = [vid9, vid12];

e = [];
e = [vid4, vid5, vid6];

f = [];
f = [vid10, vid11];

let z;
let p;
let q;
let w;
let r;
let y;

function preload() {
  // REVIEW: typo, a.lenght should be a.length (the h and t were transposed)
  for (var i = 0; i < a.lenght; i++) {
    // REVIEW: this logic doesn't make sense. You are in a loop, so this statement will run multiple times.
    // Each time it runs it will replace the value stored in the variable "z". So at the end of the loop only the
    // last video created will be stored in "z". It would make more sense to declare "z" as an empty array
    // above and then add items to it, either by using the Array.push() function or by using the index
    // operator in an assignment:
    // Option 1: z.push(createVideo(a[i]));
    // Option 2: z[i] = createVideo(a[i]);
    // Note: these both assume let z = []; above
    z = createVideo(a[i]);
  }
  // REVIEW: ditto the above for all of these.
  for (var j = 0; j < b.lenght; j++) {
    q = createVideo(b[j]);
  }
  for (var k = 0; k < c.lenght; k++) {
    w = createVideo(c[j]);
  }
  for (var l = 0; l < d.lenght; l++) {
    r = createVideo(d[l]);
  }
  for (var x = 0; x < e.lenght; x++) {
    y = createVideo(e[x]);
  }
  for (var t = 0; t < f.lenght; t++) {
    p = createVideo(f[t]);
  }
}

function setup() {
  createCanvas(640, 480, WEBGL);
}

function draw() {
  background(220);
}
2 Likes