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

Compare commits

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

5 Commits
4c268dd652 ... 10c516215f

Author SHA1 Message Date
HxxxxxS 10c516215f add cachedVideos and only hit api when cache is empty
2 years ago
HxxxxxS bdd5667404 ;
2 years ago
HxxxxxS b6c8bb1a35 improve selectrandomvideo
2 years ago
HxxxxxS e37525514c update videos array to be dynamic
2 years ago
HxxxxxS a5c26cf336 change api/videos to return all webm files in assets/
2 years ago
3 changed files with 135 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 5
      index.html
  2. 24
      index.js
  3. 193
      script.js

5
index.html
Unescape View File

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

24
index.js
Unescape View File

@ -1,20 +1,11 @@
const express = require('express'); const express = require('express');
const app = express(); const app = express();
const path = require('path'); const path = require('path');
const fs = require('fs');
const port = 8000 const port = 8000
const videoFiles = [ const assetsDir = path.join(__dirname, 'assets');
{ "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))); app.use(express.static(path.join(__dirname)));
@ -23,8 +14,19 @@ app.get('/', (req, res) => {
}); });
app.get('/api/videos', (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, () => { app.listen(port, () => {
console.log('Server started on port', port); console.log('Server started on port', port);

193
script.js
Unescape View File

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