Commit old files

2024-06-21 10:04:10 -06:00
commit 95bd0ea6ed
14 changed files with 1265 additions and 0 deletions
--- a/prototype.html
+++ b/prototype.html
@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<style>
+		.container {
+			position: relative;
+			width: 480px;
+			height: 480px;
+			padding: 0;
+			margin: 0;
+			top: 0;
+			left: 0;
+		}
+		#video {
+			display: none;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 480px;
+			height: 480px;
+		}
+		#slice {
+			position: absolute;
+			border: 2px solid lightblue;
+			/* box-sizing: border-box; */
+		}
+		#slicediv {
+			position: relative;
+		}
+		#slicediv span {
+			position: absolute;
+			color: white;
+			z-index: 1;
+		}
+	</style>
+	
+	<script>
+		"use strict";
+		function sliceVideo() {
+			var video = document.getElementById("video");
+			var canvas = document.getElementById("slice");
+			var context = canvas.getContext("2d");
+			var cw = canvas.width = 120;
+			var ch = canvas.height = 120;
+			var sourceX = 100;
+			var sourceY = 100;
+			var framerate = 15;
+			var delay = 1000 / framerate;
+			context.drawImage(video, sourceX, sourceY, cw, ch, 0, 0, cw, ch);
+			window.setTimeout(sliceVideo, delay);
+		}
+		
+		function moveRight(distance, time) {
+			var slice = document.getElementById("slicediv");
+			console.log("about to move " + distance +"px in " + time + "ms");
+			var framerate = 15;
+			var delay = 1000 / framerate;
+			var frameCount = Math.round(time / delay);
+			var step = distance / frameCount;
+			
+			var setMove = function(framesLeft) {
+				console.log(framesLeft + " frames left");
+				console.log(slice.style.left);
+				if (framesLeft > 0) {
+					window.setTimeout(function() {
+						slice.style.left = (slice.offsetLeft + step) + "px";
+						setMove(framesLeft - 1);
+					}, delay);
+				}
+			}
+			
+			setMove(frameCount);
+		}
+		
+		document.addEventListener("DOMContentLoaded", function() {
+			sliceVideo();
+		});
+	</script>
+</head>
+
+<body>
+	<video id="video" src="video/plasmacropped.mp4" autoplay loop>
+		Video not working! Everything is probably Microsoft's fault!
+	</video>
+	
+	<div class="container">
+		<div id="slicediv" >
+			<span>Click me!</span>
+			<canvas id="slice" onclick="moveRight(200, 800)"></canvas>
+		</div>
+	</div>
+</body>
+
+</html>