Skip to content

Commit 3c8b472

Browse files
5hashN5hashN
committed
chore: initial setup
0 parents  commit 3c8b472

27 files changed

Lines changed: 2255 additions & 0 deletions

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
Thumbs.db
3+
4+
*.png

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# my_sketches

‎css/main.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
:root {
2+
--bg-color: #f4f4f5;
3+
--text-color: #1a1a1a;
4+
--border-color: #d4d4d8;
5+
--link-color: #2563eb;
6+
--link-hover: #1d4ed8;
7+
--btn-bg: #e5e5e5;
8+
}
9+
10+
@media (prefers-color-scheme: dark) {
11+
:root {
12+
--bg-color: #111111;
13+
--text-color: #eeeeee;
14+
--border-color: #333333;
15+
--link-color: #4da6ff;
16+
--link-hover: #99ccff;
17+
--btn-bg: #222222;
18+
}
19+
}
20+
21+
:root.light-theme {
22+
--bg-color: #f4f4f5;
23+
--text-color: #1a1a1a;
24+
--border-color: #d4d4d8;
25+
--link-color: #2563eb;
26+
--link-hover: #1d4ed8;
27+
--btn-bg: #e5e5e5;
28+
}
29+
30+
:root.dark-theme {
31+
--bg-color: #111111;
32+
--text-color: #eeeeee;
33+
--border-color: #333333;
34+
--link-color: #4da6ff;
35+
--link-hover: #99ccff;
36+
--btn-bg: #222222;
37+
}
38+
39+
body {
40+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
41+
background-color: var(--bg-color);
42+
color: var(--text-color);
43+
padding: 2rem;
44+
max-width: 800px;
45+
margin: 0 auto;
46+
transition: background-color 0.3s ease, color 0.3s ease;
47+
}
48+
49+
header {
50+
display: flex;
51+
justify-content: space-between;
52+
align-items: baseline;
53+
border-bottom: 1px solid var(--border-color);
54+
padding-bottom: 0.5rem;
55+
margin-bottom: 1.5rem;
56+
}
57+
58+
h1 {
59+
margin: 0;
60+
border: none;
61+
padding: 0;
62+
}
63+
64+
button {
65+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
66+
font-size: 1.4rem;
67+
background-color: var(--btn-bg);
68+
color: var(--text-color);
69+
border: 1px solid var(--border-color);
70+
padding: 0.2rem 0.6rem;
71+
cursor: pointer;
72+
border-radius: 4px;
73+
transition: background-color 0.2s ease;
74+
line-height: 1;
75+
}
76+
77+
button:hover {
78+
opacity: 0.8;
79+
}
80+
81+
.project-list {
82+
display: flex;
83+
flex-direction: column;
84+
gap: 1rem;
85+
}
86+
87+
.project-item {
88+
display: flex;
89+
align-items: baseline;
90+
gap: 1rem;
91+
}
92+
93+
.ref-link {
94+
transition: opacity 0.2s ease, color 0.2s ease;
95+
}
96+
97+
a {
98+
color: var(--link-color);
99+
text-decoration: none;
100+
font-size: 1.2rem;
101+
transition: color 0.2s ease;
102+
}
103+
104+
a:hover {
105+
text-decoration: underline;
106+
color: var(--link-hover);
107+
}

‎css/sketch.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
html, body {
2+
margin: 0;
3+
padding: 0;
4+
overflow: hidden;
5+
background-color: #000;
6+
}
7+
8+
canvas {
9+
display: block;
10+
}

‎index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>my generative coding sketchbook</title>
7+
8+
<link rel="stylesheet" href="css/main.css">
9+
10+
<script>
11+
function initializeTheme() {
12+
const savedTheme = localStorage.getItem('theme');
13+
if (savedTheme) {
14+
document.documentElement.classList.add(savedTheme);
15+
}
16+
}
17+
initializeTheme();
18+
</script>
19+
</head>
20+
<body>
21+
22+
<header>
23+
<h1>my generative coding sketchbook</h1>
24+
<button id="theme-toggle" aria-label="Toggle Theme">&#9728;</button>
25+
</header>
26+
27+
<nav class="project-list">
28+
<div class="project-item">
29+
<a href="sketches/physarum/index.html">physarum</a>
30+
<a class="ref-link" href="https://cargocollective.com/sagejenson/physarum">>>></a>
31+
</div>
32+
33+
<div class="project-item">
34+
<a href="sketches/lenia/index.html">lenia</a>
35+
<a class="ref-link" href="https://chakazul.github.io/lenia.html">>>></a>
36+
</div>
37+
38+
<div class="project-item">
39+
<a href="sketches/flow_fields/index.html">flow fields</a>
40+
<a class="ref-link" href="https://www.tylerxhobbs.com/words/flow-fields">>>></a>
41+
</div>
42+
43+
<div class="project-item">
44+
<a href="sketches/circle_packing/index.html">circle packing</a>
45+
</div>
46+
47+
<div class="project-item">
48+
<a href="sketches/pulsing_glows/index.html">pulsing glows</a>
49+
</div>
50+
51+
<div class="project-item">
52+
<a href="sketches/inky_waves/index.html">webgl inky waves</a>
53+
</div>
54+
55+
<div class="project-item">
56+
<a href="sketches/wave_function_collapse">wave function collapse</a>
57+
</div>
58+
</nav>
59+
60+
<script>
61+
const toggleBtn = document.getElementById('theme-toggle');
62+
const root = document.documentElement;
63+
64+
function updateButtonText() {
65+
const isDark = root.classList.contains('dark-theme') ||
66+
(!root.classList.contains('light-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
67+
68+
toggleBtn.innerHTML = isDark ? '&#9728;' : '&#9790;';
69+
}
70+
71+
toggleBtn.addEventListener('click', () => {
72+
const isCurrentlyDark = root.classList.contains('dark-theme') ||
73+
(!root.classList.contains('light-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
74+
75+
if (isCurrentlyDark) {
76+
root.classList.remove('dark-theme');
77+
root.classList.add('light-theme');
78+
localStorage.setItem('theme', 'light-theme');
79+
} else {
80+
root.classList.remove('light-theme');
81+
root.classList.add('dark-theme');
82+
localStorage.setItem('theme', 'dark-theme');
83+
}
84+
85+
updateButtonText();
86+
});
87+
88+
updateButtonText();
89+
</script>
90+
</body>
91+
</html>

‎js/colors.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const globalPalettes = {
2+
'Pastel Blue': ["#cae7ff", "#add8e6", "#b4d2ff", "#bae1ff", "#a0c8f0", "#d2e6fa", "#b4dcf5"],
3+
'Pastel Green': ["#d0f5df", "#b8eec1", "#c8f2c2", "#aee9b1", "#d2f8d2", "#b7e4c7", "#e2fadb"],
4+
'Bioluminescent Blue': ["#00fff7", "#00d4ff", "#00aaff", "#0080ff", "#0055aa", "#002b55", "#001a1a"],
5+
'Neon Acid': ["#00fff7", "#00bfff", "#a259ff", "#f759ff", "#39ff14", "#baffc9", "#c3c6ff"],
6+
'Deep Ocean': ["#b3cde0", "#6497b1", "#005b96", "#03396c", "#011f4b", "#011f4b", "#011f4b"],
7+
'Monochrome Ink': ["#ffffff", "#e0e0e0", "#b0b0b0", "#808080", "#505050", "#202020", "#050505"],
8+
9+
'Viridis': ["#440154", "#443983", "#31688e", "#21918c", "#35b779", "#90d743", "#fde725"],
10+
'Plasma': ["#0d0887", "#5402a3", "#8b0aa5", "#b93289", "#db5c68", "#f48849", "#f0f921"],
11+
'Inferno': ["#000004", "#320a5e", "#781c6d", "#bc3754", "#ed6925", "#f9cb35", "#fcffa4"],
12+
'Magma': ["#000004", "#2b105f", "#721f81", "#b63679", "#f1605d", "#feaf77", "#fcfdbf"],
13+
'Cividis': ["#00224e", "#2b3b64", "#505672", "#76747d", "#9e9381", "#c7b47e", "#fde725"],
14+
15+
'RdBu': ["#b2182b", "#ef8a62", "#fddbc7", "#f7f7f7", "#d1e5f0", "#67a9cf", "#2166ac"],
16+
'Coolwarm': ["#3b4cc0", "#6788ee", "#9aabb9", "#dddddd", "#e78778", "#ca5241", "#b40426"],
17+
'Spectral': ["#d53e4f", "#fc8d59", "#fee08b", "#ffffbf", "#e6f598", "#99d594", "#3288bd"],
18+
'Twilight': ["#e2d9e2", "#9cb0d1", "#5d75a6", "#33324f", "#572c49", "#9c3b4a", "#d88f83"],
19+
20+
'Turbo': ["#30123b", "#4686fb", "#1ae4b6", "#a4fc3c", "#faba39", "#e4460a", "#7a0403"],
21+
'Bone': ["#000000", "#24242d", "#484b5c", "#6c7689", "#94a5b4", "#c0d1d9", "#ffffff"],
22+
'Copper': ["#000000", "#331f13", "#663e26", "#995c39", "#cc7b4c", "#ff9a60", "#ffb380"],
23+
'YlGnBu': ["#ffffd9", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#0c2c84"],
24+
'GnBu': ["#084081", "#0868ac", "#2b8cbe", "#4eb3d3", "#7bccc4", "#ccece6", "#f7fcf0"],
25+
'PuRd': ["#91003f", "#ce1256", "#e7298a", "#df65b0", "#c994c7", "#d4b9da", "#f1eef6"],
26+
27+
'Cyberpunk': ["#09080e", "#2a0845", "#640d5f", "#c3195d", "#ff2e93", "#00f0ff", "#ffffff"],
28+
'Synthwave': ["#0d0221", "#261447", "#7209b7", "#b5179e", "#f72585", "#4895ef", "#4cc9f0"],
29+
'Neon Pink': ["#ff2e93", "#c3195d", "#640d5f", "#2a0845", "#09080e", "#00f0ff", "#ffffff"],
30+
'Toxic Slime': ["#39ff14", "#2f9a46", "#107231", "#004d22", "#002b12", "#051105", "#000000"],
31+
'Crimson Splatter': ["#0a0000", "#1f0000", "#3d0000", "#660000", "#990000", "#cc0000", "#ff1a1a"],
32+
'Molten Iron': ["#050100", "#240400", "#5c0f00", "#a12800", "#eb5805", "#ff941a", "#ffdb57"],
33+
'Golden Ratio': ["#111111", "#2a2512", "#554817", "#8c7722", "#c8ab37", "#f0d45f", "#ffeb99"],
34+
'Sepia Manuscript': ["#2b2112", "#4a3b22", "#705a34", "#9e8253", "#c7ab7b", "#e6cfb3", "#f5e8d3"],
35+
'Volcanic Ash': ["#f2eceb", "#d9cdcc", "#bfaba8", "#8c7672", "#594a47", "#332d2d", "#1a1a1a"]
36+
};
37+
38+
function getBinaryScheme(name) {
39+
const p = globalPalettes[name];
40+
if (!p) return { trail: "#ffffff", bg: "#000000" };
41+
return {
42+
trail: p[0],
43+
bg: p[p.length - 1]
44+
};
45+
}

‎js/utils.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
function hexToRgb(hex) {
2+
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
3+
return result ? [
4+
parseInt(result[1], 16) / 255.0,
5+
parseInt(result[2], 16) / 255.0,
6+
parseInt(result[3], 16) / 255.0
7+
] : [0, 0, 0];
8+
}
9+
10+
function refreshGUI(folder) {
11+
for (let i in folder.__controllers) {
12+
folder.__controllers[i].updateDisplay();
13+
}
14+
for (let f in folder.__folders) {
15+
refreshGUI(folder.__folders[f]);
16+
}
17+
}
18+
19+
function isMouseOverGUI(guiInstance) {
20+
if (guiInstance && guiInstance.domElement) {
21+
let rect = guiInstance.domElement.getBoundingClientRect();
22+
return (mouseX >= rect.left && mouseX <= rect.right &&
23+
mouseY >= rect.top && mouseY <= rect.bottom);
24+
}
25+
return false;
26+
}

0 commit comments

Comments
 (0)