blob: b5dcdeaa44743ff6ca7a0d8f52c6a24388c918aa (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
template=post
title=Touching Grass
style=touching-grass.css
style=/styles/post.css
published=2023-07-29 17:46
---
[@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 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.
|
