Hi,
Is it possible to crossfade across an array of movies? I’m aware of the code below which crossfades from one movie to a second and remains there, using tint() but if there are multiple movies “stacked” how is is possible to crossfade between them?
Thanks,
Peter
Hi,
Thank you for asking this question because it was a nice coding challenge! 
Here is my solution :
Let’s suppose you have a list of movies, it’s a Sequence
Each Movie has it’s own duration
If you were to draw a timeline of the sequence with every movie, you would have this :
Now we want to have linear crossfade which mean we can represent it like this (centered around the cut) :
When we want to display the sequence at a certain time, we need to first loop through the list of movies and find the one we are currently in, we can do this with this code :
// We start at 0
float previousCut = 0;
// Loop through movies
for (Movie movie : movies) {
// The next cut
float nextCut = previousCut + movie.duration;
if (currentTime < nextCut) {
// We display the movie
// Then break the loop
break;
}
// It's not this movie, increase the cut
previousCut += movie.duration
}
Then we need to handle two cases, when the timeline cursor is at the end of the clip and we fade out, we need to crossfade is this condition is true :
We do the same for when the cursor is at the beginning of a clip and we fade in :
We then simply linearly interpolate (with map()) the alpha value for both movies (the current one and the previous/next one for fade in/out). Be careful to switch the order by which you display both movies because it’s going to glitch as soon as the cursor pass after a cut.
These two methods compute the alpha value by passing the distance from the beginning of the fade :
// Compute the alpha value when fading out
float computeFadeOut(float distFromCut) {
return map(distFromCut, 0, fadeDuration, 255, 0);
}
// Same for fade in but reverse
float computeFadeIn(float distFromCut) {
return map(distFromCut, 0, fadeDuration, 0, 255);
}
Here you have a complete sketch with the above principle :
Sequence sequence;
void setup() {
size(1000, 600);
// Create the sequence
sequence = new Sequence(5000);
// Initialize random clips in milliseconds
sequence.initializeRandom(5, 5000, 10000);
}
void draw() {
// Reset the background
background(0);
// Display the sequence output
sequence.displayPlayback();
// Display the timeline
sequence.displayTimeline(width / 2, height - 50, width - 50, 50);
// Stop when finished
if (millis() > sequence.getTotalDuration()) noLoop();
}
/*
* The Movie class with a duration and a color
*/
class Movie {
float duration;
color col;
Movie(float duration, color col) {
this.duration = duration;
this.col = col;
}
// Initialize the movie with a black background
Movie(float duration) {
this(duration, color(0));
}
void display(float x, float y, float sizeX, float sizeY, float alpha) {
fill(col, alpha);
rect(x, y, sizeX, sizeY);
}
int getDurationSeconds() {
return floor(duration / 1000);
}
void randomizeColor() {
col = color(random(255), random(255), random(255));
}
// Display the movie on the whole window
void fullScreen(float alpha) {
display(0, 0, width, height, alpha);
}
}
/*
* The Sequence class is holding a list of movies and
* a fade duration for crossfading between movies
*/
class Sequence {
ArrayList<Movie> movies;
float fadeDuration;
Sequence(float fadeDuration) {
this.movies = new ArrayList<Movie>();
this.fadeDuration = fadeDuration;
}
// Randomly create movies with different durations
void initializeRandom(int n, float minDuration, float maxDuration) {
for (int i = 0; i < n; i++) {
Movie movie = new Movie(random(minDuration, maxDuration));
movie.randomizeColor();
movies.add(movie);
}
}
// Return the total duration of the sequence
float getTotalDuration() {
float total = 0;
for (Movie movie : movies) total += movie.duration;
return total;
}
// Compute the alpha value when fading out
float computeFadeOut(float distFromCut) {
return map(distFromCut, 0, fadeDuration, 255, 0);
}
// Same for fade in but reverse
float computeFadeIn(float distFromCut) {
return map(distFromCut, 0, fadeDuration, 0, 255);
}
// The display method where we do the crossfade
void displayPlayback() {
noStroke();
float previousCut = 0;
float currentTime = millis();
for (int i = 0; i < movies.size(); i++) {
Movie movie = movies.get(i);
// The timestamp of the next movie
float nextCut = previousCut + movie.duration;
// If true this is the current movie
if (currentTime < nextCut) {
// Test if we need to crossfade
if (nextCut - currentTime < fadeDuration / 2) {
float distFromCut = currentTime - (nextCut - fadeDuration / 2);
movie.fullScreen(computeFadeOut(distFromCut));
if (i < movies.size() - 1) {
movies.get(i + 1).fullScreen(computeFadeIn(distFromCut));
}
} else if (currentTime - previousCut < fadeDuration / 2) { // After the previous clip
float distFromCut = currentTime - (previousCut - fadeDuration / 2);
if (i > 0) {
movies.get(i - 1).fullScreen(computeFadeOut(distFromCut));
}
movie.fullScreen(computeFadeIn(distFromCut));
} else {
// We are not crossfading
movie.fullScreen(255);
}
// Display time stamp
fill(0);
textAlign(CENTER, CENTER);
textSize(45);
text((previousCut + movie.duration - millis()) / 1000, width / 2, height / 2);
// Be break to stop the loop
break;
}
// Each time we add the movie length
previousCut += floor(movie.duration);
}
}
void displayTimeline(float centerX, float centerY, float hSize, float vSize) {
float totalDuration = getTotalDuration();
float leftX = centerX - (hSize / 2);
float incrX = leftX;
float topY = centerY - vSize / 2;
float downY = centerY + vSize / 2;
float fadeSize = map(fadeDuration, 0, totalDuration, 0, hSize);
for (int i = 0; i < movies.size(); i++) {
float clipWidth = map(movies.get(i).duration, 0, totalDuration, 0, hSize);
// Display clip
stroke(0);
strokeWeight(3);
movies.get(i).display(incrX, topY, clipWidth, vSize, 200);
// Display cross fade
stroke(255, 0, 0);
strokeWeight(2);
noFill();
if (i > 0) {
// Fade in
line(incrX - fadeSize / 2, downY, incrX + fadeSize / 2, topY);
// Fade out
line(incrX - fadeSize / 2, topY, incrX + fadeSize / 2, downY);
} else {
// Secial case for the first fade in
line(incrX, centerY, incrX + fadeSize / 2, topY);
}
// Also for the last one
if (i == movies.size() - 1) {
line(incrX + clipWidth - fadeSize / 2, topY, incrX + clipWidth, centerY);
}
// Display duration
fill(0);
noStroke();
textSize(20);
text(movies.get(i).getDurationSeconds(), incrX + clipWidth / 2, topY - 20);
// Add the size of the drawn clip
incrX += clipWidth;
}
// Display the time cursor
float cursorX = map(millis(), 0, totalDuration, leftX, leftX + hSize);
stroke(255, 0, 0);
strokeWeight(4);
line(cursorX, topY, cursorX, downY);
// Draw triangle on top
fill(255, 0, 0);
triangle(cursorX, topY + 5, cursorX - 5, topY - 5, cursorX + 5, topY - 5);
}
}
Note : I put comments to explain it and don’t feel lost, it’s just that I made the whole drawing part for the timeline and it’s not the real core of the problem, you should look at the void displayPlayback() method first.
I also didn’t use the Processing movie library but rather simulate a movie with a solid color background. It should be easy to adapt 
Hope it was clear!