Add license, readMe

Author: collidingScopes

LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alan Ang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.MD

@@ -1,17 +1,27 @@
-This is a generative art project which turns images into "force-field" particle animations in real-time. The animation effect uses a force repulsion / self-healing effect.
+Video-to-Pixel-Art
+=====
 
-Live demo: https://collidingscopes.github.io/forcefield/
-
-Upload your own image, open the GUI controls to change the animation parameters, and then use your mouse or touchscreen to activate the animation.
-
-This project is open source (offered under MIT license), so feel free to use it however you wish.
-
-If you liked this and are feeling generous, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!
+<p>Turn videos into pixel art! Use your webcam feed or upload a video, then use the controls to adjust the color palette and pixel size.</p>
+<img src="assets/ipodAd.gif">
+<p>All processing is done in real-time within your browser, using javascript / webgl shaders / html canvas (see github repo linked below).</p>
+<p>You can export your creations as images or videos to save / share your work.</p>
+<p>This tool is completely free, open source (MIT license), without any paywalls or premium options. You are welcome to use it for personal or commercial purposes.</p>
+<p>If you found this tool useful, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!</p>
 
 <a href="https://www.buymeacoffee.com/stereoDrift" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee"></a>
 
-This project is coded using Javascript, HTML, and CSS. Video creation and encoding is done using mp4 muxer.
-
-Enormous thanks and credit to the project <a href="https://aijs.io/project?user=Tezumie&project=1-Million-Particles" target="_blank" rel="noopener">"1 million particles" by Tezumie</a>, which provided the code foundation for the particle repulsion animation.
-
-Feel free to reach out to discuss, ask questions, or to share your creations! The animations can be easily uploaded to instagram or otherwise -- you can tag me <a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener">@stereo.drift</a> :)
+<p>If the video export feature does not work for you, please try a free screen-recording tool such as OBS Studio.</p>
+<p>I do not have access to any of the videos that you upload here, as all processing is done "client-side" (i.e., <b>no videos or images are saved/stored by me — they stay on your computer only</b>).</p>
+<p>If you enjoyed this, you may be interested in my other free / open source art projects:</p>
+<ul>
+<li><a href="https://collidingScopes.github.io/ascii" target="_blank" rel="noopener">Video-to-ASCII</a>: turn videos into ASCII pixel art</li>
+<li><a href="https://collidingScopes.github.io/shimmer" target="_blank" rel="noopener">Shape Shimmer</a>: turn photos into funky wave animations</li>
+<li><a href="https://collidingScopes.github.io" target="_blank" rel="noopener">Colliding Scopes</a>: turn photos into kaleidoscope animations</li>
+<li><a href="https://collidingScopes.github.io/forcefield" target="_blank" rel="noopener">Force-Field Animation</a>: turn photos into particle animations</li>
+</ul>
+
+<p>Feel free to reach out to discuss, ask questions, or to share your creations! The animations can be easily uploaded to instagram or otherwise -- you can tag me <a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener">@stereo.drift</a> :)</p>
+
+License
+=======
+This is an open source project provided under an <a href="https://opensource.org/license/MIT">MIT license</a>

assets/ipodAd.gif

@@ -60,6 +60,10 @@ function saveImage(){
 }
 
 function toggleVideoRecord(){
+
+  userVideo.currentTime = 0;
+  defaultVideo.currentTime = 0;
+
   if(recordVideoState == false){
     recordVideoState = true;
     chooseRecordingFunction();

assets/tokyoTrain.mp4

@@ -21,15 +21,19 @@
     <link rel="icon" href="assets/siteFavicon3.png">
     <link rel="apple-touch-icon" href="assets/siteFavicon3.png">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Tiny5&display=swap" rel="stylesheet">
+
 </head>
 <body>
     <div class="container">
         <div id="gui"></div>        
 
         <canvas id="canvas"></canvas>
 
-        <video id="defaultVideo" class="hidden" width="480px" height="848px" loop muted playsinline>
-          <source src="assets/waves.mp4" type="video/mp4" />
+        <video id="defaultVideo" class="hidden" width="900px" height="504px" loop muted playsinline>
+          <source src="assets/tokyoTrain.mp4" type="video/mp4" />
         </video>
 
         <video id="userVideo" class="hidden" loop muted playsinline></video>
@@ -58,29 +62,34 @@
     <div id="notesDiv">
       <div id="textBox">
 
-          <h2 id="aboutText">About</h2>
+          <h2 id="aboutText">VIDEO-TO-PIXEL-ART</h2>
 
-          <p>Turn videos into ASCII pixel art! Use your webcam feed or upload a video, then use the controls to adjust the colors, resolution, text style, etc...</p>
-          <p>You can create a video export to save and/or share your animation afterwards.</p>
+          <p>Turn videos into pixel art! Use your webcam feed or upload a video, then use the controls to adjust the color palette and pixel size.</p>
+          <p>All processing is done in real-time within your browser, using javascript / webgl shaders / html canvas (see github repo linked below).</p>
+          <p>You can export your creations as images or videos to save / share your work.</p>
           <p>This tool is completely free, open source (MIT license), without any paywalls or premium options. You are welcome to use it for personal or commercial purposes.</p>
           <p>If you found this tool useful, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!</p>
 
           <a href="https://www.buymeacoffee.com/stereoDrift" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee"></a>
 
-          <p>The code used to create the animation is quite resource-intensive, so it may run with some lag if your computer doesn't have enough computing power, too many tabs open, low battery, etc.</p>
           <p>If the video export feature does not work for you, please try a free screen-recording tool such as OBS Studio.</p>
-
-          <p>This project is coded using Javascript, HTML canvas, and CSS (see github repo linked below). Video creation and encoding is done using mp4 muxer.</p>
-          <p>Enormous thanks and credits to <a href="https://medium.com/@sasha.kub95/webcam-stream-to-ascii-art-with-javascript-2a2f9a39befb" target="_blank" rel="noopener">Aleksandr Kubarskii</a>, whose code served as the foundation for this project.</p>
           <p>I do not have access to any of the videos that you upload here, as all processing is done "client-side" (i.e., <b>no videos or images are saved/stored by me — they stay on your computer only</b>).</p>
+          <p>If you enjoyed this, you may be interested in my other free / open source art projects:</p>
+          <ul>
+            <li><a href="https://collidingScopes.github.io/ascii" target="_blank" rel="noopener">Video-to-ASCII</a>: turn videos into ASCII pixel art</li>
+            <li><a href="https://collidingScopes.github.io/shimmer" target="_blank" rel="noopener">Shape Shimmer</a>: turn photos into funky wave animations</li>
+            <li><a href="https://collidingScopes.github.io" target="_blank" rel="noopener">Colliding Scopes</a>: turn photos into kaleidoscope animations</li>
+            <li><a href="https://collidingScopes.github.io/forcefield" target="_blank" rel="noopener">Force-Field Animation</a>: turn photos into particle animations</li>
+          </ul>
+          
           <p>Feel free to reach out to discuss, ask questions, or to share your creations! The animations can be easily uploaded to instagram or otherwise -- you can tag me <a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener">@stereo.drift</a> :)</p>
       </div>
     </div>
 
     <div id="linksDiv">
         <table id="infoMenuTable">
             <tr>
-                <td><button id="gitHubButton"class="socialMediaButton"><a href="https://github.com/collidingScopes/ascii" target="_blank" rel="noopener"><i class="fa-brands fa-github"></i></a></button></td>
+                <td><button id="gitHubButton"class="socialMediaButton"><a href="https://github.com/collidingScopes/video-to-pixel-art" target="_blank" rel="noopener"><i class="fa-brands fa-github"></i></a></button></td>
                 <td><button id="coffeeButton" class="socialMediaButton"><a href="https://www.buymeacoffee.com/stereoDrift" target="_blank" rel="noopener"><i class="fa-solid fa-heart"></i></a></button></td>
                 <td><button id="instagramButton" class="socialMediaButton"><a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i></a></button></td>
                 <td><button id="emailButton" class="socialMediaButton"><a href="mailto:[email protected]" target="_blank" rel="noopener"><i class="fa-solid fa-envelope"></i></a></button></td>

canvasVideoExport.js

@@ -1,14 +1,7 @@
 /*
 To do:
-Review entire code base to understand functionality
-Choose better default video (Tokyo train video -- downsize and optimize first)
-Add more color palettes
 Write about section, footer section, site OG tags
-Clean up code / remove commented out code
-Review CSS / page layout / margins
-Fix upload video on mobile (follow example from ASCII)
 Rename page title, github repo, etc...
-Upon video record, rewind user video and default video to 0 time (see ASCII example)
 */
 
 // DOM Elements
@@ -25,57 +18,19 @@ console.log("Mobile?: "+isMobileFlag);
 
 let userVideo = document.getElementById('userVideo');
 let defaultVideo = document.getElementById('defaultVideo');
-let defaultVideoWidth = 480;
-let defaultVideoHeight = 848;
+let defaultVideoWidth = 900;
+let defaultVideoHeight = 504;
+let maxCanvasWidth = 1200;
 
 if (!gl) {
   alert('WebGL not supported');
   throw new Error('WebGL not supported');
 }
 
-// Event listeners for controls
-fileInput.addEventListener('change', (e) => {
-  cleanupVideoSource();
-  if (e.target.files && e.target.files[0]) {
-      const file = e.target.files[0];
-      // document.getElementById('fileName').textContent = file.name;
-      //handleVideoUpload(file);
-
-      const url = URL.createObjectURL(file);
-      userVideo.src = url;
-      userVideo.addEventListener('loadedmetadata', () => {
-          
-          userVideo.width = userVideo.videoWidth;
-          userVideo.height = userVideo.videoHeight;
-          console.log("user video width/height: "+userVideo.width+", "+userVideo.height);
-
-          canvas.width = userVideo.width;
-          canvas.height = userVideo.height;
-          gl.viewport(0, 0, canvas.width, canvas.height);
-
-      });
-      
-      // // Wait for video to be loaded before playing
-      // userVideo.oncanplay = () => {
-      //     userVideo.play();
-      //     currentVideo = userVideo;
-      //     // animationRequest = render(currentVideo);
-      //     render();
-      // };
-
-      setTimeout(function(){
-        userVideo.play();
-        currentVideo = userVideo;
-        render();
-      },1000);
-  }
-    
-});
-
 //add gui
 let obj = {
-  pixelSize: 8,
-  colorPalette: "field",
+  pixelSize: 5,
+  colorPalette: "underwater",
 };
 
 let gui = new dat.gui.GUI( { autoPlace: false } );
@@ -435,10 +390,6 @@ function render() {
 }
 
 function drawScene(){
-  // if (!currentVideo || currentVideo.readyState < currentVideo.HAVE_CURRENT_DATA) {
-  //   // animationRequest = requestAnimationFrame(() => render(video));
-  //   return;
-  // }
 
   if (!currentVideo.paused) {
       animationPlayToggle = true;
@@ -513,69 +464,37 @@ function useWebcam(){
   });
 }
 
-function handleVideoUpload(file) {
+fileInput.addEventListener('change', (e) => {
   cleanupVideoSource();
+  if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      const url = URL.createObjectURL(file);
+      userVideo.src = url;
+      userVideo.addEventListener('loadedmetadata', () => {
+          
+          userVideo.width = userVideo.videoWidth;
+          userVideo.height = userVideo.videoHeight;
+          console.log("user video width/height: "+userVideo.width+", "+userVideo.height);
+
+          let canvasWidth = Math.min(userVideo.videoWidth, maxCanvasWidth);
+          let canvasHeight = Math.floor(canvasWidth * (userVideo.videoHeight / userVideo.videoWidth)); 
 
-  const video = document.createElement('video');
-  video.setAttribute('playsinline', '');
-  video.setAttribute('webkit-playsinline', '');
-  video.setAttribute('crossorigin', 'anonymous');
-  
-  // Create object URL for the uploaded file
-  const objectURL = URL.createObjectURL(file);
-  video.src = objectURL;
-  video.loop = true;
-  
-  // Set up video loading handlers
-  video.onloadedmetadata = () => {
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      gl.viewport(0, 0, canvas.width, canvas.height);
-  };
-  
-  // Wait for video to be loaded before playing
-  video.oncanplay = () => {
-      video.play();
-      currentVideo = video;
-      // animationRequest = render(currentVideo);
-      render();
-  };
-}
+          canvas.width = canvasWidth;
+          canvas.height = canvasHeight;
+          console.log("canvas width/height: "+canvas.width+", "+canvas.height);
 
-function useDefaultVideo() {
-  cleanupVideoSource();
-  console.log("start default video");
-  // video.setAttribute('playsinline', 'playsinline');
-  // video.setAttribute('webkit-playsinline', 'webkit-playsinline');
-  defaultVideo.setAttribute('crossorigin', 'anonymous');
+          gl.viewport(0, 0, canvas.width, canvas.height);
 
-  if(isMobileFlag){
-    video.setAttribute('playsinline', '');  // Required for iOS
-    video.setAttribute('webkit-playsinline', '');
-    video.setAttribute('autoplay', '');
-    video.style.transform = 'scaleX(-1)';  // Mirror the video
-  }
-  
-  // Create object URL for the uploaded file
-  // const objectURL = URL.createObjectURL(file);
-  // video.src = objectURL;
-  // defaultVideo.loop = true;
-
-  // Set up video loading handlers
-  defaultVideo.onloadedmetadata = () => {
-      canvas.width = defaultVideo.videoWidth;
-      canvas.height = defaultVideo.videoHeight;
-      gl.viewport(0, 0, canvas.width, canvas.height);
-      defaultVideo.play();
-      currentVideo = defaultVideo;
-      render();
-  };
-  
-  // Wait for video to be loaded before playing
-  // defaultVideo.oncanplay = () => {
+      });
 
-  // };
-}
+      setTimeout(function(){
+        userVideo.play();
+        currentVideo = userVideo;
+        render();
+      },1000);
+  }
+    
+});
 
 function startDefaultVideo(){
   if(animationPlayToggle==true){
@@ -584,8 +503,8 @@ function startDefaultVideo(){
       console.log("cancel animation");
   }
 
-  canvasWidth = defaultVideoWidth;
-  canvasHeight = defaultVideoHeight;
+  let canvasWidth = defaultVideoWidth;
+  let canvasHeight = defaultVideoHeight;
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
 

index.html

@@ -70,8 +70,8 @@ canvas {
 }
 
 #aboutText{
-  font-size: 32px;
-  font-family: "Permanent Marker";
+  font-size: 40px;
+  font-family: "Tiny5", sans-serif;
   font-weight: 400;
   font-style: normal;
   display:block;