hans
/
VFX2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: hans:10c516215fe6280f8f7e55a7290fa461a3f4ae70
Branches Tags
hans:master
..
compare: hans:4c268dd6524d3615c32b71d9017ab19058ac366e
Branches Tags
hans:master

No commits in common. '10c516215fe6280f8f7e55a7290fa461a3f4ae70' and '4c268dd6524d3615c32b71d9017ab19058ac366e' have entirely different histories.
10c516215f ... 4c268dd652

3 changed files with 93 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  1. 5
      index.html
  2. 26
      index.js
  3. 197
      script.js

5
index.html
Unescape View File

@ -7,6 +7,11 @@
</head>
<body>
<div id="visualizer">
<div class="video-layer">
</div>
<div class="video-layer">
</div>
<canvas id="videoCanvas"></canvas>

26
index.js
Unescape View File

@ -1,11 +1,20 @@
const express = require('express');
const app = express();
const path = require('path');
const fs = require('fs');
const port = 8000
const assetsDir = path.join(__dirname, 'assets');
const videoFiles = [
{ "src": "assets/Blender Physics Simulations-8TGNRJDZX_o_compressed.webm"},
{ "src": "assets/Death Grips - Birds-XX5wk-6Mn5s_compressed.webm"},
{ "src": "assets/Jon Hopkins - 'Open Eye Signal' (Official Music Video)-Q04ILDXe3QE_compressed.webm"},
{ "src": "assets/Best Scene From Hackers The Movie-IyWv6snuZLk_compressed.webm"},
{ "src": "assets/$UICIDEBOY$ - O PANA!-VSXg2swBmrY_compressed.webm"},
{ "src": "assets/3D Fractals (Render Test 1)-xQ6nJYanKCY_compressed.webm"},
{ "src": "assets/Beyond The Minds Eye-wKxH51vPtHk -4_compressed.webm"},
{ "src": "assets/A Scene From Troll 2-HyophYBP_w4_compressed.webm"}
// Add more video files as needed
];
app.use(express.static(path.join(__dirname)));
@ -14,18 +23,7 @@ app.get('/', (req, res) => {
});
app.get('/api/videos', (req, res) => {
fs.readdir(assetsDir, (err, files) => {
if (err) {
console.error('Error reading directory:', err);
res.status(500).send('Internal Server Error');
return;
}
const webmFiles = files.filter(file => file.endsWith('.webm'));
const videoFiles = webmFiles.map(file => ({ src: `assets/${file}` }));
res.json(videoFiles);
});
res.json(videoFiles);
});
app.listen(port, () => {

197
script.js
Unescape View File

@ -1,72 +1,48 @@
// Define a debug mode variable
let debugMode = true
let debugMode = true;
const canvas = document.getElementById("videoCanvas")
const ctx = canvas.getContext("2d")
const canvas = document.getElementById("videoCanvas");
const ctx = canvas.getContext("2d");
let videosToLoad = 2
const maxVideosToLoad = 9
const videos = []
let videosLoaded = 0
let aspectRatio = 1
const videos = [createVideoElement(), createVideoElement()];
let videosLoaded = 0;
let aspectRatio = 1;
let cachedVideos = []
let showText = true
function debugLog(...args) {
if (debugMode) {
console.log(...args)
}
}
function loadVideos(num) {
debugLog(`Loading ${num} videos`)
while (num > 0) {
let video = createVideoElement()
video.addEventListener("loadedmetadata", handleVideoLoaded)
video.addEventListener("ended", handleVideoEnded)
video.addEventListener("error", handleVideoEnded)
video.src = selectRandomVideo(video)
videos.push(video)
num--
}
while (num < 0) {
let video = videos.pop()
video.removeEventListener("loadedmetadata", handleVideoLoaded)
video.removeEventListener("ended", handleVideoEnded)
num++
}
}
window.addEventListener("DOMContentLoaded", () => {
let previousVideo
videos.forEach((video) => {
previousVideo = selectRandomVideo(previousVideo || video)
});
})
videos.forEach((video) => {
video.addEventListener("loadedmetadata", handleVideoLoaded)
video.addEventListener("ended", handleVideoEnded)
})
video.addEventListener("loadedmetadata", handleVideoLoaded);
video.addEventListener("ended", handleVideoEnded);
});
function createVideoElement() {
const video = document.createElement("video")
video.autoplay = true
video.muted = true
return video
const video = document.createElement("video");
video.autoplay = true;
video.muted = true;
return video;
}
function handleVideoLoaded() {
videosLoaded++
videosLoaded++;
if (videosLoaded === videos.length) {
updateCanvasSize()
drawVideos()
updateCanvasSize();
drawVideos();
}
}
function handleVideoEnded(event) {
const video = event.target
//debugLog(video,event)
selectRandomVideo(video)
const video = event.target;
selectRandomVideo(video);
}
function drawVideos() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.clearRect(0, 0, canvas.width, canvas.height);
let blendModes = ["source-over","overlay","screen"]
@ -84,133 +60,112 @@ function drawVideos() {
// Use default blend mode for first video (i=0), repeat the rest of blendModes
if (i === 0) {
ctx.globalCompositeOperation = blendModes[0]
ctx.globalCompositeOperation = blendModes[0];
} else {
ctx.globalCompositeOperation = blendModes[(i - 1) % (blendModes.length - 1) + 1]
ctx.globalCompositeOperation = blendModes[(i - 1) % (blendModes.length - 1) + 1];
}
// Draw the current video frame onto the canvas
ctx.drawImage(video, offsetX, offsetY, scaledWidth, scaledHeight)
// Reset composite operation
ctx.globalCompositeOperation = "source-over"
ctx.globalCompositeOperation = "source-over";
})
// If showText is true, draw debug text
if (showText) {
drawDebugText()
// If debugMode is true, draw debug text
if (debugMode) {
drawDebugText();
}
// Request next frame
requestAnimationFrame(drawVideos)
requestAnimationFrame(drawVideos);
}
function drawDebugText() {
// Set font style and color
ctx.font = "16px Arial"
ctx.fillStyle = "white"
ctx.font = "16px Arial";
ctx.fillStyle = "white";
let corners = [[0, 0], [1, 1], [0, 1], [1, 0]]; // Top-left, bottom-right, top-right, bottom-left
let padding = 20
videos.forEach((video, i) => {
// Get the corner coordinates for the current video
const corner = corners[i]
const corner = corners[i];
// Calculate the position of the text in the corner
let positionX = corner[0] ? canvas.width : padding
let positionY = corner[1] ? canvas.height : padding
// Adjust position to ensure text is within the canvas bounds
//positionX = Math.max(0, Math.min(positionX, canvas.width - ctx.measureText(getFilename(video.src)).width))
positionY = Math.max(0, Math.min(positionY, canvas.height - padding*3))
//positionX = Math.max(0, Math.min(positionX, canvas.width - ctx.measureText(getFilename(video.src)).width));
positionY = Math.max(0, Math.min(positionY, canvas.height - padding*3));
// Set text alignment based on corner
ctx.textAlign = corner[0] ? "right" : "left"
ctx.textBaseline = corner[1] ? "bottom" : "top"
// Draw debug text for the video
ctx.fillText(getFilename(video.src), positionX, positionY)
ctx.fillText(`Dimensions: ${video.videoWidth}x${video.videoHeight} ()`, positionX, positionY + 20)
ctx.fillText(formatTime(video.currentTime) + "/" + formatTime(video.duration), positionX, positionY + 40)
ctx.fillText(getFilename(video.src), positionX, positionY);
ctx.fillText(`Dimensions: ${video.videoWidth}x${video.videoHeight} ()`, positionX, positionY + 20);
ctx.fillText(formatTime(video.currentTime) + "/" + formatTime(video.duration), positionX, positionY + 40);
// Add more debug information as needed
})
});
}
// Function to extract filename from full path
function getFilename(src) {
const parts = src.split('/')
return decodeURIComponent(parts[parts.length - 1].replace(/\%20/g, ' '))
const parts = src.split('/');
return decodeURIComponent(parts[parts.length - 1].replace(/\%20/g, ' '));
}
// Helper function to format time in HH:MM:SS format
function formatTime(seconds) {
const hours = Math.floor(seconds / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
const remainingSeconds = Math.floor(seconds % 60)
return `${(hours?hours.toString().padStart(2, '0')+':':'')}${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}
function updateCanvasSize() {
aspectRatio = Math.max(
videos[0].videoWidth / videos[0].videoHeight,
videos[1].videoWidth / videos[1].videoHeight
)
);
canvas.width = window.innerWidth
canvas.height = window.innerWidth / aspectRatio
canvas.width = window.innerWidth;
canvas.height = window.innerWidth / aspectRatio;
}
window.addEventListener("resize", updateCanvasSize)
function getSourceFiles() {
debugLog("Getting source files")
return fetch("/api/videos")
.then(response => response.json())
.then(videoFiles => {
debugLog("Success")
cachedVideos = videoFiles;
})
.catch(error => console.error("Error fetching videos:", error));
}
window.addEventListener("resize", updateCanvasSize);
updateCanvasSize()
function selectRandomVideo(videoElement) {
if (cachedVideos.length) {
const currentSrc = videoElement.src;
const filteredVideos = cachedVideos.filter(video => video.src !== currentSrc);
if (filteredVideos.length > 0) {
const randomIndex = Math.floor(Math.random() * filteredVideos.length);
const randomVideo = filteredVideos[randomIndex];
videoElement.src = randomVideo.src;
} else {
debugLog("No other videos available.");
getSourceFiles().then(()=>{
selectRandomVideo(videoElement)
})
}
} else {
debugLog("Cache empty, doing new request")
getSourceFiles().then(()=>{
selectRandomVideo(videoElement)
})
}
console.log("selectRandomVideo",videoElement)
fetch("/api/videos")
.then((response) => response.json())
.then((videoFiles) => {
const otherVideo = videos.find((video) => video !== videoElement);
let randomVideo;
do {
const randomIndex = Math.floor(Math.random() * videoFiles.length);
randomVideo = videoFiles[randomIndex];
} while (randomVideo === otherVideo);
videoElement.src = randomVideo.src;
videoElement.play();
return videoElement
});
}
document.addEventListener('keydown', function(event) {
console.log('keyDown',event)
// Check if the pressed key is the one you want to bind
if (event.key === 'Enter') {
showText = !showText
}
if (event.key === 'ArrowDown') {
loadVideos(-1)
if (event.key === 'Enter') { // Change 'Enter' to the desired key
debugMode = !debugMode
console.log("debugMode:",debugMode)
}
if (event.key === 'ArrowUp') {
loadVideos(1)
}
})
getSourceFiles().then(()=>{
loadVideos(videosToLoad)
updateCanvasSize()
})
});
Write Preview
Loading…
Cancel
Save