From 1c574cb8fe508ed4835f9b9e0cfb6dc48f370686 Mon Sep 17 00:00:00 2001 From: PeculiarE Date: Sun, 27 Oct 2024 22:55:03 +0000 Subject: [PATCH 1/3] chore: move river vid to assets folder --- river.mp4 => assets/river.mp4 | Bin 1 file changed, 0 insertions(+), 0 deletions(-) rename river.mp4 => assets/river.mp4 (100%) diff --git a/river.mp4 b/assets/river.mp4 similarity index 100% rename from river.mp4 rename to assets/river.mp4 From ae3bc78151e182e14dab5edb75c7f2287a9db062 Mon Sep 17 00:00:00 2001 From: PeculiarE Date: Mon, 28 Oct 2024 03:02:33 +0000 Subject: [PATCH 2/3] chore: separate functions into respective modules --- dragdrop.html | 72 ++------------------------------------------ dragdrop.js | 61 +++++++++++++++++++++++++++++++++++++ modules/cyclogram.js | 37 +++++++++++++++++++++++ modules/video.js | 61 +++++++++++++++++++++++++++++++++++++ prototype.js | 0 5 files changed, 161 insertions(+), 70 deletions(-) create mode 100644 dragdrop.js create mode 100644 modules/cyclogram.js create mode 100644 modules/video.js create mode 100644 prototype.js diff --git a/dragdrop.html b/dragdrop.html index 21c493f..b3f8e0d 100644 --- a/dragdrop.html +++ b/dragdrop.html @@ -4,8 +4,9 @@ - Cyclogram.js prototype + Cyclogram.js + -
- -

Select a video or image file

-
-
-
+
+ +

Select a video or image file

+
+
+
diff --git a/dragdrop.js b/dragdrop.js index 5f9c3a7..920fe00 100644 --- a/dragdrop.js +++ b/dragdrop.js @@ -1,12 +1,7 @@ import { createCyclogramCanvas, drawCyclogram } from "./modules/cyclogram.js"; import { processUploadedVideo } from "./modules/video.js"; -let video; -let frameRate; -let steps; -let density; -let myX = 100; // where you've clicked -let myY = 400; +let processedVideoResponse = {}; let framesPerDay = 288/2; // remove nighttime hours, crudely let dotSize = 6; let i = 0; @@ -24,13 +19,7 @@ new p5(function(p5) { document.getElementById('input').addEventListener('change', async function(event) { try { - const response = await processUploadedVideo(p5, event); - video = response.video; - frameRate = response.frameRate; - steps = response.steps; - density = response.density; - myX = response.myX; - myY = response.myY; + processedVideoResponse = await processUploadedVideo(p5, event); } catch (error) { alert('Error loading file!'); } @@ -38,24 +27,25 @@ new p5(function(p5) { } p5.draw = function() { + const { video, frameRate, steps, density, x, y } = processedVideoResponse; if (video) { const drawOptions = { video, frameRate, steps, density, - myX, - myY, + myX: x || 100, + myY: y || 400, framesPerDay, dotSize, i, rowNumber, colNumber, }; - const response = drawCyclogram(p5, drawOptions); - i = response.i; - rowNumber = response.rowNumber; - colNumber = response.colNumber; + const cyclogramResults = drawCyclogram(p5, drawOptions); + i = cyclogramResults.i; + rowNumber = cyclogramResults.rowNumber; + colNumber = cyclogramResults.colNumber; } } }); diff --git a/modules/cyclogram.js b/modules/cyclogram.js index fac56b3..7d02461 100644 --- a/modules/cyclogram.js +++ b/modules/cyclogram.js @@ -22,7 +22,6 @@ function drawCyclogram(p5Instance, drawOptions) { colNumber += 1; if (i % framesPerDay == 0) { rowNumber += 1; // new row - console.log('rowNumber', rowNumber); colNumber = 0; } if (i == steps) i = 0; diff --git a/modules/video.js b/modules/video.js index 4377857..bef7318 100644 --- a/modules/video.js +++ b/modules/video.js @@ -1,34 +1,35 @@ -function loadVideo(p5, loadOptions) { +function getCoordinatesOfVideoClick(video, clickEvent) { + const x = parseInt(clickEvent.offsetX/video.elt.clientWidth * video.width); + const y = parseInt(clickEvent.offsetY/video.elt.clientHeight * video.height); + clickEvent.preventDefault(); + return { x, y }; +} + +function loadVideo(p5Instance, loadOptions) { const { url, element } = loadOptions; - const video = p5.createVideo(url); + const video = p5Instance.createVideo(url); video.parent(element); // video.elt.getVideoPlaybackQuality().totalVideoFrames // only how many frames have loaded so far video.elt.controls = true; video.elt.load(); - p5.noStroke(); + p5Instance.noStroke(); const frameRate = 30; const steps = parseInt(frameRate * video.elt.duration) // in seconds const density = 1; // pixelDensity(); - return { video, frameRate, steps, density }; -} + let coordinates = {}; + video.elt.onclick = function click(event) { + coordinates = getCoordinatesOfVideoClick(video, event); + }; -function getCoordinatesOfVideoClick(video, clickEvent) { - const x = parseInt(clickEvent.offsetX/video.elt.clientWidth * video.width); - const y = parseInt(clickEvent.offsetY/video.elt.clientHeight * video.height); - clickEvent.preventDefault(); - return { x, y }; + return { video, frameRate, steps, density, ...coordinates }; } -async function processUploadedVideo(p5, event) { +async function processUploadedVideo(p5Instance, event) { const file = event.target.files[0]; const fileReader = new FileReader(); - let response = {}; - let myX = 100; - let myY = 400; - return new Promise((resolve, reject) => { fileReader.onerror = () => { fileReader.abort(); @@ -39,16 +40,8 @@ async function processUploadedVideo(p5, event) { const blob = new Blob([fileReader.result], { type: file.type }); const url = URL.createObjectURL(blob); const loadOptions = { url, element: 'video' }; - response = loadVideo(p5, loadOptions); - const video = response.video; - - video.elt.onclick = function click(event) { - const coordinates = getCoordinatesOfVideoClick(video, event); - myX = coordinates.x; - myY = coordinates.y; - }; - - resolve({ ...response, myX, myY }); + const response = loadVideo(p5Instance, loadOptions); + resolve(response); }; fileReader.readAsArrayBuffer(file); }); diff --git a/prototype.html b/prototype.html index 744fcbb..9b30808 100644 --- a/prototype.html +++ b/prototype.html @@ -1,4 +1,3 @@ - @@ -6,6 +5,7 @@ Cyclogram.js prototype + -
-
- - - +
+
diff --git a/prototype.js b/prototype.js index e69de29..bf85036 100644 --- a/prototype.js +++ b/prototype.js @@ -0,0 +1,47 @@ +import { createCyclogramCanvas, drawCyclogram } from "./modules/cyclogram.js"; +import { loadVideo } from "./modules/video.js"; + +let processedVideoResponse = {}; +let framesPerDay = 288/2; // remove nighttime hours, crudely +let dotSize = 6; +let i = 0; +let rowNumber = 0; +let colNumber = 0; + +new p5(function(p5) { + p5.setup = function() { + const canvasOptions = { + width: 1000, + height: 400, + element: 'canvas', + }; + createCyclogramCanvas(p5, canvasOptions); + + const url = '../assets/river.mp4'; + const loadOptions = { url, element: 'video' }; + processedVideoResponse = loadVideo(p5, loadOptions); + } + + p5.draw = function() { + const { video, frameRate, steps, density, x, y } = processedVideoResponse; + if (video) { + const drawOptions = { + video, + frameRate, + steps, + density, + myX: x || 100, + myY: y || 400, + framesPerDay, + dotSize, + i, + rowNumber, + colNumber, + }; + const cyclogramResults = drawCyclogram(p5, drawOptions); + i = cyclogramResults.i; + rowNumber = cyclogramResults.rowNumber; + colNumber = cyclogramResults.colNumber; + } + } +});