05 write "Genuary"
This commit is contained in:
parent
cf2ed00d53
commit
b467c1ec88
35
05/animate.js
Normal file
35
05/animate.js
Normal 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();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,6 +1,7 @@
|
|||||||
#!/usr/bin/env python
|
#!/usr/bin/env python
|
||||||
|
|
||||||
COORDS = 'coords.txt'
|
COORDS = 'coords.txt'
|
||||||
|
import copy
|
||||||
|
|
||||||
def load_coords():
|
def load_coords():
|
||||||
data = []
|
data = []
|
||||||
@ -8,24 +9,60 @@ def load_coords():
|
|||||||
for line in cfh:
|
for line in cfh:
|
||||||
parts = line[:-1].split(" ")
|
parts = line[:-1].split(" ")
|
||||||
datum = { "command": parts[0] }
|
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)
|
data.append(datum)
|
||||||
return data
|
return data
|
||||||
|
|
||||||
def coords_string(coords):
|
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 ])
|
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'
|
svg += f' d="{d}" />\n'
|
||||||
return svg
|
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()
|
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
105
05/index.html
Normal file
File diff suppressed because one or more lines are too long
35
dist/05/animate.js
vendored
Normal file
35
dist/05/animate.js
vendored
Normal 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
105
dist/05/index.html
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user