blob: de9079874ec34a00f072e397ec5af9c48ec4265b (
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="/3directions.png" />
<link rel="icon" type="image/svg+xml" href="/3directions.svg" />
<title>Touching Grass | nyble.dev</title>
<link rel="stylesheet" href="/styles/common.css" />
<link rel="stylesheet" href="/styles/narrow.css" />
<link rel="stylesheet" href="/styles/touching-grass.css" />
</head>
<body>
<ul id="nav-access">
<li><a href="#content">Skip to main content</a></li>
</ul>
<nav class="sized">
<a id="home" href="/" alt="home">← home</a>
</nav>
<main id="content" class="writing sized">
<h1>Touching Grass</h1>
<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>
<p>
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.
</p>
<p id="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 :)
</p>
<p id="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.
</p>
<p id="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.
</p>
</main>
<footer class="sized">
<ul id="dates">
<li id="dates-title"> times</li>
<li><abbr title="creation time">c</abbr> Jul. 29, 2023 21:17</li>
<li><abbr title="modification time">m</abbr> Oct. 28, 2023 05:16</li>
</ul>
</footer>
</body>
</html>
|
