march 13th, 2024

this is what was published on the 10th, here.
https://amble.quest/notice/AfhzCKhLrynnNg5Qsi

1 files changed, 80 insertions, 0 deletions

diff --git a/served/bits/touching-grass/touching-grass.html b/served/bits/touching-grass/touching-grass.html
new file mode 100644
index 0000000..a57cbd2
--- /dev/null
+++ b/served/bits/touching-grass/touching-grass.html
@@ -0,0 +1,80 @@
+---
+template=post
+title=Touching Grass
+style=touching-grass.css
+style=/styles/post.css
+#Publish 2023-07-29 17:46 -0500
+#Category video
+#Tags writing
+#QuarkedUp
+---
+[@paragraphs off]
+<section style="width: 100%; text-align: right; padding: 8px 0">
+	<video id="grass" controls width="100%" poster="grass_poster.jpg" preload="metadata" loop>
+		<source src="grass_720p.mp4" type="video/mp4" />
+		<track default src="grass.vtt" />
+	</video>
+	<ul>
+		<li class="small">download</li>
+		<li><a href="grass.mp4" download>[1080p | 7.1MB]</a></li>
+		<li><a href="grass_720p.mp4" download>[720p | 1.9MB]</a></li>
+		<li id="long"></li>
+		<li><input type="checkbox" checked id="loop"><label> loop video?</label></input></li>
+	</ul>
+</section>
+
+<script>
+	document.addEventListener("DOMContentLoaded", setup);
+
+	const video = document.getElementById("grass");
+	function setup() {
+		let marks = document.getElementsByClassName("mark");
+		for (let i = 0; i < marks.length; ++i) {
+			marks[i].addEventListener('click', markClick)
+		}
+		console.log(marks);
+
+		let loop = document.getElementById('loop');
+		loop.addEventListener('change', loopChanged)
+
+		// Fire once with a fake event so we aren't desynced
+		loopChanged({ 'target': loop });
+	}
+
+	function markClick(event) {
+		let target = event.target;
+		let time = parseFloat(target.getAttribute('data-time'));
+		console.log(`seeking to ${time}`)
+		video.currentTime = time;
+	}
+
+	function loopChanged(event) {
+		let target = event.target;
+		let checked = target.checked;
+		console.log(`video looping: ${checked}`);
+		video.loop = checked;
+	}
+</script>
+[@paragraphs on]
+
+I took this short video to send to a friend one day and accidentally
+made a 106 frame masterpiece. Well, that's hyperbolic, but there's a
+lot I enjoy about it.
+
+[#the-colours]
+The contrast between my orange painted nails and the surprisingly
+green grass is pretty pleasing. I think the gentle brown of the brick
+in the bottom-left corner helps keep from an overwhelming greenery.
+Thanks bricks :)
+
+[#the-composition]
+The accidental camera movement is nice, too. I like the angle the camera is at and the way it wobbles.
+It's clearly hand-held. At <span class="mark" data-time="1.3">1.3-ish-seconds</span>
+you can see I gently sway forward, but seem to be less wobbly. <i>I'm braced;
+I'm stable! I have-three-points-of-contact-with-the-ground!</i> Then, at roughly
+<span class="mark" data-time="1.9">2&nbsp;seconds</span> when the grass finally
+yields, I get rocked back and wobbles resume.
+
+[#the-sound]
+The sound! And the sound. The ripping of the grass. That planty matter finally giving way. The fibrous tearing.
+I just like it; I enjoy it! I greatly appreciate it.