bombinans/genuary2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

05 write "Genuary"

Browse Source
This commit is contained in:
Mike Lynch 2026-01-05 12:50:46 +11:00
parent cf2ed00d53
commit b467c1ec88
5 changed files with 324 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
05/animate.js Normal file
View File

@ -0,0 +1,35 @@
const pointer = { x: 0, y: 0 };
window.addEventListener(
"pointermove",
(e) => {
pointer.x = e.clientX;
pointer.y = e.clientY;
},
false
);
const paths = document.getElementsByTagName("path");
const svg = document.getElementsByTagName("svg")[0];
console.log(paths);
function animate() {
requestAnimationFrame(animate);
const rect = svg.getBoundingClientRect();
const x = pointer.x - rect.left;
const y = pointer.y - rect.top;
for( const path of paths ) {
const i = Number(path.getAttribute("id"));
const xk = 0.004 * x;
const yk = 0.004 * (y + i - 200);
path.setAttribute(
"transform", `translate(${x}, ${y}) scale(${xk},${yk}) rotate(${xk * i * 2},20,20)`
);
}
}
animate();

51
05/genuary05.py
View File

@ -1,6 +1,7 @@
#!/usr/bin/env python
COORDS = 'coords.txt'
import copy
def load_coords():
data = []
@ -8,24 +9,60 @@ def load_coords():
for line in cfh:
parts = line[:-1].split(" ")
datum = { "command": parts[0] }
datum["points"] = [ float(p) for p in parts[1:] ]
points = []
for i in range(int((len(parts) - 1) / 2)):
points.append((float(parts[1 + i * 2]), float(parts[2 + i * 2])))
datum["points"] = points
data.append(datum)
return data
def coords_string(coords):
return " ".join([ coords["command"] ] + [ str(f) for f in coords["points"] ])
return " ".join([ coords["command"] ] + [ f"{x} {y}" for x, y in coords["points"] ])
def coords_to_path(coords, r, g, b):
def coords_to_path(coords, i, r, g, b):
d = " ".join([ coords_string(c) for c in coords ])
svg = f'<path style="fill: none; stroke: rgb({r}, {g}, {b});"'
svg = f'<path id="{i}" style="fill: none; stroke: rgb({r}, {g}, {b}); stroke-width:4; opacity: 85%"'
svg += f' d="{d}" />\n'
return svg
def apply_transform(command, f):
new_data = {
"command": command["command"]
}
new_data["points"] = [ f((x, y)) for x, y in command["points"] ]
return new_data
data = load_coords()
print('<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">')
print("""
<html>
<head>
<title>etc.mikelynch.org | Genuary 2026</title>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
print(coords_to_path(data, 255, 0, 0))
<div id="main">
<h1>Genuary 2026 - 05</h1>
<p>Write "Genuary". Avoid using a font</p>
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
""")
for i in range(-100, 100, 5):
warp = lambda p: (p[0], p[1] + i * 0.02 * p[1])
new_data = [ apply_transform(command, warp) for command in data ]
print(coords_to_path(new_data, i, 255, 128 + i, 0))
print("""
</svg>
<script src="animate.js">
</script>
</body>
</html>
""")
print("</svg>")

105
05/index.html Normal file
View File

File diff suppressed because one or more lines are too long

35
dist/05/animate.js vendored Normal file
View File

@ -0,0 +1,35 @@
const pointer = { x: 0, y: 0 };
window.addEventListener(
"pointermove",
(e) => {
pointer.x = e.clientX;
pointer.y = e.clientY;
},
false
);
const paths = document.getElementsByTagName("path");
const svg = document.getElementsByTagName("svg")[0];
console.log(paths);
function animate() {
requestAnimationFrame(animate);
const rect = svg.getBoundingClientRect();
const x = pointer.x - rect.left;
const y = pointer.y - rect.top;
for( const path of paths ) {
const i = Number(path.getAttribute("id"));
const xk = 0.004 * x;
const yk = 0.004 * (y + i - 200);
path.setAttribute(
"transform", `translate(${x}, ${y}) scale(${xk},${yk}) rotate(${xk * i * 2},20,20)`
);
}
}
animate();

105
dist/05/index.html vendored Normal file
View File

File diff suppressed because one or more lines are too long