content upload
This commit is contained in:
@@ -0,0 +1,151 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Roland Hollós — the AI-translated rendering of a human-written site.">
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Scroll-reveal animations -->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/ai.css">
|
||||||
|
<title>Roland Hollós · AI</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Animated background -->
|
||||||
|
<div class="aurora" aria-hidden="true"><span></span><span></span><span></span></div>
|
||||||
|
<div class="grid-overlay" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<span class="site-title"><strong>Roland Hollós</strong></span>
|
||||||
|
|
||||||
|
<!-- Toggle: AI active. Links back to the human page. -->
|
||||||
|
<a href="/index.html" class="toggle toggle--ai" aria-label="Switch to Human version">
|
||||||
|
<span class="toggle-label">Human</span>
|
||||||
|
<span class="toggle-track">
|
||||||
|
<span class="toggle-knob"></span>
|
||||||
|
</span>
|
||||||
|
<span class="toggle-label">AI</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero" data-aos="fade-up">
|
||||||
|
<span class="ai-badge">
|
||||||
|
<span class="spark">✦</span> AI-Translated Rendering
|
||||||
|
</span>
|
||||||
|
<h1>An introduction,<br>refined by a machine.</h1>
|
||||||
|
<p class="subtitle"><span id="typed"></span></p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<blockquote class="motto" data-aos="fade-up" data-aos-delay="80">
|
||||||
|
In the midway of this our mortal life,<br>
|
||||||
|
I found me in a gloomy wood, astray<br>
|
||||||
|
Gone from the path direct: and e'en to tell
|
||||||
|
<cite>— Dante Alighieri, <em>Inferno</em></cite>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<div class="card" data-aos="fade-up" data-aos-delay="120">
|
||||||
|
<p>
|
||||||
|
Every meaningful conversation between strangers begins with a proper
|
||||||
|
introduction — the small act of opening a door so that curiosity can step
|
||||||
|
through. Online, where genuine intimacy is rare, that gesture leaves us
|
||||||
|
exposed. I take the risk regardless: here, you find me openly.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" data-aos="fade-up" data-aos-delay="120">
|
||||||
|
<p>
|
||||||
|
Its companion page is written <strong>entirely by a human</strong>, its
|
||||||
|
imperfections left in place — embraced rather than hidden. This page is
|
||||||
|
the counterpart: the whole site is passed through an automated pipeline
|
||||||
|
that <strong>renders the human original into a more polished form using
|
||||||
|
AI</strong>. Flip the switch above — a kind of <em>LLM-mode</em>, in the
|
||||||
|
spirit of a dark-mode toggle — to move between the two.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" data-aos="fade-up" data-aos-delay="120">
|
||||||
|
<p>
|
||||||
|
Everyone seeks connection — Deleuze would agree — for it is among the most
|
||||||
|
essential parts of being human. Shared origins, common experience, and
|
||||||
|
mutual interdependence are what make a relationship possible at all. My
|
||||||
|
central question is this: <strong>how does AI support the work of
|
||||||
|
connecting?</strong> Is there a genuine human–AI complementarity? Rather
|
||||||
|
than answer outright, I would sooner leave the choice with you — and stay
|
||||||
|
curious about how much our expression, and the bonds between us, stand to
|
||||||
|
lose or gain as these tools advance.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 data-aos="fade-up"><span class="accent">Who am I?</span></h2>
|
||||||
|
<div class="card" data-aos="fade-up" data-aos-delay="80">
|
||||||
|
<p>
|
||||||
|
I am <strong>Roland Hollós</strong>, a Hungarian environmental scientist
|
||||||
|
driven above all by curiosity and a deep urge to create. My work sits at
|
||||||
|
the crossroads of environmental science, mathematics, and computer
|
||||||
|
science, and I remain a devoted reader of philosophy, sociology,
|
||||||
|
psychology, history, and literature.
|
||||||
|
</p>
|
||||||
|
<div class="chips">
|
||||||
|
<span class="chip">Environmental Science</span>
|
||||||
|
<span class="chip">Mathematics</span>
|
||||||
|
<span class="chip">Computer Science</span>
|
||||||
|
<span class="chip">Philosophy</span>
|
||||||
|
<span class="chip">Sociology</span>
|
||||||
|
<span class="chip">Psychology</span>
|
||||||
|
<span class="chip">History</span>
|
||||||
|
<span class="chip">Literature</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pipeline" data-aos="fade-up">
|
||||||
|
<span class="spark" aria-hidden="true">✦</span>
|
||||||
|
<span>
|
||||||
|
This page was generated automatically from the human-authored
|
||||||
|
<code>index.html</code> by an AI translation pipeline. The wording is the
|
||||||
|
machine's; the meaning remains Roland's.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
Rendered in LLM-mode · the human original is one switch away.
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Libraries -->
|
||||||
|
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.1.0/dist/typed.umd.js"></script>
|
||||||
|
<script>
|
||||||
|
// Scroll-reveal
|
||||||
|
if (window.AOS) {
|
||||||
|
AOS.init({ duration: 700, easing: "ease-out-cubic", once: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Typewriter subtitle — signals the "generated" nature of the page.
|
||||||
|
if (window.Typed) {
|
||||||
|
new Typed("#typed", {
|
||||||
|
strings: [
|
||||||
|
"Rendering a human introduction…",
|
||||||
|
"Same person, same meaning — machine-polished prose.",
|
||||||
|
"You are reading the AI translation of a hand-written page."
|
||||||
|
],
|
||||||
|
typeSpeed: 32,
|
||||||
|
backSpeed: 12,
|
||||||
|
backDelay: 1800,
|
||||||
|
startDelay: 400,
|
||||||
|
loop: true,
|
||||||
|
smartBackspace: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
document.getElementById("typed").textContent =
|
||||||
|
"The AI translation of a hand-written page.";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+328
@@ -0,0 +1,328 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
ai.css — styling for the AI-translated version of the site.
|
||||||
|
Human version lives in human.css and is intentionally left untouched.
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #07080d;
|
||||||
|
--bg-soft: #0e1018;
|
||||||
|
--surface: rgba(20, 23, 34, 0.55);
|
||||||
|
--surface-border: rgba(140, 160, 255, 0.14);
|
||||||
|
--text: #e7e9f3;
|
||||||
|
--text-dim: #969cb3;
|
||||||
|
--accent: #00b4d8; /* echoes the cyan of the human nav */
|
||||||
|
--accent-2: #7c5cff; /* AI-purple */
|
||||||
|
--accent-3: #ff5cc8; /* magenta highlight */
|
||||||
|
--radius: 18px;
|
||||||
|
--maxw: 68ch;
|
||||||
|
--font: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html {
|
||||||
|
background: var(--bg);
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: var(--font);
|
||||||
|
color: var(--text);
|
||||||
|
line-height: 1.7;
|
||||||
|
background:
|
||||||
|
radial-gradient(1200px 700px at 15% -10%, rgba(124, 92, 255, 0.18), transparent 60%),
|
||||||
|
radial-gradient(1100px 650px at 110% 10%, rgba(0, 180, 216, 0.16), transparent 55%),
|
||||||
|
radial-gradient(900px 600px at 50% 120%, rgba(255, 92, 200, 0.12), transparent 60%),
|
||||||
|
var(--bg);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------------------------------------
|
||||||
|
Animated aurora background (pure CSS, no dependencies)
|
||||||
|
-------------------------------------------------------------------------- */
|
||||||
|
.aurora {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -2;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
filter: blur(60px) saturate(140%);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.aurora span {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 45vw;
|
||||||
|
height: 45vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
animation: drift 22s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.aurora span:nth-child(1) { background: var(--accent-2); top: -10%; left: -5%; animation-delay: 0s; }
|
||||||
|
.aurora span:nth-child(2) { background: var(--accent); top: 20%; right: -10%; animation-delay: -7s; }
|
||||||
|
.aurora span:nth-child(3) { background: var(--accent-3); bottom: -15%; left: 25%; animation-delay: -13s; }
|
||||||
|
|
||||||
|
@keyframes drift {
|
||||||
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||||
|
33% { transform: translate(6vw, 4vh) scale(1.15); }
|
||||||
|
66% { transform: translate(-5vw, -3vh) scale(0.9); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* faint dot grid on top of the aurora */
|
||||||
|
.grid-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: none;
|
||||||
|
background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
|
||||||
|
background-size: 26px 26px;
|
||||||
|
mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------------------------------------
|
||||||
|
Navigation + Human/AI toggle (same markup as the human page)
|
||||||
|
-------------------------------------------------------------------------- */
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.9rem 1.4rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(10, 12, 20, 0.55);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
-webkit-backdrop-filter: blur(14px);
|
||||||
|
border-bottom: 1px solid var(--surface-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.toggle-label {
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
opacity: 0.45;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
/* AI side active */
|
||||||
|
.toggle--ai .toggle-label:first-child { opacity: 0.45; }
|
||||||
|
.toggle--ai .toggle-label:last-child { opacity: 1; }
|
||||||
|
|
||||||
|
.toggle-track {
|
||||||
|
position: relative;
|
||||||
|
width: 3rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||||
|
background: linear-gradient(90deg, var(--accent), var(--accent-2));
|
||||||
|
box-shadow: 0 0 14px rgba(124, 92, 255, 0.6);
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.toggle-knob {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(100% - 1rem - 3px); /* knob on the AI (right) side */
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
|
||||||
|
transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.toggle:hover .toggle-knob { left: calc(100% - 1rem - 5px); }
|
||||||
|
|
||||||
|
/* --------------------------------------------------------------------------
|
||||||
|
Layout
|
||||||
|
-------------------------------------------------------------------------- */
|
||||||
|
main {
|
||||||
|
width: 90vw;
|
||||||
|
max-width: var(--maxw);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 3.5rem 0 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* AI badge */
|
||||||
|
.ai-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.4rem 0.9rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text);
|
||||||
|
border: 1px solid var(--surface-border);
|
||||||
|
background: rgba(124, 92, 255, 0.12);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.ai-badge::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.25) 50%, transparent 80%);
|
||||||
|
transform: translateX(-100%);
|
||||||
|
animation: shimmer 3.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes shimmer {
|
||||||
|
0%, 60% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
.ai-badge .spark {
|
||||||
|
display: inline-block;
|
||||||
|
animation: spin-pulse 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes spin-pulse {
|
||||||
|
0%, 100% { transform: rotate(0) scale(1); opacity: 1; }
|
||||||
|
50% { transform: rotate(180deg) scale(1.25); opacity: 0.7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero { margin: 1.6rem 0 2.5rem; }
|
||||||
|
.hero h1 {
|
||||||
|
font-size: clamp(2.4rem, 6vw, 3.6rem);
|
||||||
|
line-height: 1.05;
|
||||||
|
margin: 0.6rem 0 0.4rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
background: linear-gradient(120deg, #ffffff 20%, var(--accent) 55%, var(--accent-2) 90%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.hero .subtitle {
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
min-height: 1.7em; /* reserve space for the typewriter line */
|
||||||
|
}
|
||||||
|
.hero .subtitle .typed-cursor { color: var(--accent); }
|
||||||
|
|
||||||
|
/* Motto */
|
||||||
|
.motto {
|
||||||
|
margin: 2.2rem 0;
|
||||||
|
padding: 1.2rem 1.4rem;
|
||||||
|
border-left: 2px solid transparent;
|
||||||
|
border-image: linear-gradient(180deg, var(--accent), var(--accent-3)) 1;
|
||||||
|
background: linear-gradient(90deg, rgba(124,92,255,0.08), transparent);
|
||||||
|
font-style: italic;
|
||||||
|
color: #c7cbe0;
|
||||||
|
}
|
||||||
|
.motto cite {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.6rem;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glass content cards */
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--surface-border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1.6rem 1.8rem;
|
||||||
|
margin: 1.4rem 0;
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
-webkit-backdrop-filter: blur(16px);
|
||||||
|
box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
|
||||||
|
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(124, 92, 255, 0.35);
|
||||||
|
box-shadow: 0 30px 70px -30px rgba(124, 92, 255, 0.4);
|
||||||
|
}
|
||||||
|
.card p:last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin: 2.6rem 0 0.4rem;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
h2 .accent {
|
||||||
|
background: linear-gradient(90deg, var(--accent), var(--accent-2));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
p { color: #d3d7e6; }
|
||||||
|
strong { color: #fff; }
|
||||||
|
|
||||||
|
/* Tag chips for the "who am I" fields */
|
||||||
|
.chips {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.chip {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--surface-border);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
color: var(--text-dim);
|
||||||
|
transition: color 0.2s, border-color 0.2s, transform 0.2s;
|
||||||
|
}
|
||||||
|
.chip:hover {
|
||||||
|
color: var(--text);
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pipeline note / footer */
|
||||||
|
.pipeline {
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding: 1.2rem 1.4rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border: 1px dashed var(--surface-border);
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-dim);
|
||||||
|
display: flex;
|
||||||
|
gap: 0.9rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.pipeline code {
|
||||||
|
color: var(--accent);
|
||||||
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 2rem 0 3rem;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Respect reduced-motion preferences */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.aurora span,
|
||||||
|
.ai-badge::after,
|
||||||
|
.ai-badge .spark { animation: none; }
|
||||||
|
html { scroll-behavior: auto; }
|
||||||
|
}
|
||||||
+132
@@ -0,0 +1,132 @@
|
|||||||
|
body {
|
||||||
|
width: 90vw;
|
||||||
|
max-width: 65ch;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin: 0 auto; /* This centers the block */
|
||||||
|
line-height: 1.6;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
/* box-shadow: 12px 12px 2px 1px rgb(0 0 255 / 0.2); */
|
||||||
|
/* text-align: justify; */
|
||||||
|
/* hyphens: auto; */
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: #AAAAAA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.motto {
|
||||||
|
/* font-size: 1.5em; */
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mottotext {
|
||||||
|
width: fit-content;
|
||||||
|
text-align: left;
|
||||||
|
/* max-width: 330px; */
|
||||||
|
color: #555;
|
||||||
|
/* margin-right: 10px; */
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
/* nav { */
|
||||||
|
/* position: sticky; */
|
||||||
|
/* top: 0; */
|
||||||
|
/* left -10px: z-index: 100; */
|
||||||
|
/* background-color: #00AAFF; */
|
||||||
|
/* height: 40px; */
|
||||||
|
/* padding-left: 20px; */
|
||||||
|
/* padding-top: 10px; */
|
||||||
|
/* font-size: larger; */
|
||||||
|
/* font-weight: bold; */
|
||||||
|
/* font-style: italic; */
|
||||||
|
/* } */
|
||||||
|
/* */
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #bd6b4e;
|
||||||
|
padding: 0.6rem 1.2rem;
|
||||||
|
margin: 0 -1.6rem;
|
||||||
|
border-radius: 14px 14px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Toggle wrapper */
|
||||||
|
.toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Labels: Human / AI */
|
||||||
|
.toggle-label {
|
||||||
|
color: white;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
opacity: 0.6; /* inactive label is dimmed */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active label: Human side on human page */
|
||||||
|
.toggle .toggle-label:first-child {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active label: AI side on AI page */
|
||||||
|
.toggle--ai .toggle-label:first-child {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.toggle--ai .toggle-label:last-child {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The pill track */
|
||||||
|
.toggle-track {
|
||||||
|
position: relative;
|
||||||
|
width: 3rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 2px solid rgba(255,255,255,0.5);
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The knob */
|
||||||
|
.toggle-knob {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 3px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: left 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#scene {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
width: 90vw;
|
||||||
|
max-width: 65ch;
|
||||||
|
margin: 6vh auto 8vh;
|
||||||
|
padding: 0 1.6rem 2rem;
|
||||||
|
background: rgba(250, 246, 238, 0.86);
|
||||||
|
backdrop-filter: blur(7px) saturate(112%);
|
||||||
|
-webkit-backdrop-filter: blur(7px) saturate(112%);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.55);
|
||||||
|
border-radius: 14px;
|
||||||
|
box-shadow: 0 30px 80px -40px rgba(60, 40, 20, 0.6);
|
||||||
|
}
|
||||||
+1689
File diff suppressed because it is too large
Load Diff
+57
@@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="css/human.css">
|
||||||
|
<title>Roland Hollós</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id="scene" aria-hidden="true"></canvas>
|
||||||
|
<div class="page">
|
||||||
|
<nav>
|
||||||
|
<span class="site-title"><em><strong>Roland Hollós</strong></em></span>
|
||||||
|
|
||||||
|
<!-- Toggle: Human active -->
|
||||||
|
<a href="/ai.html" class="toggle" aria-label="Switch to AI version">
|
||||||
|
<span class="toggle-label">Human</span>
|
||||||
|
|
||||||
|
<span class="toggle-track">
|
||||||
|
<span class="toggle-knob"></span>
|
||||||
|
</span>
|
||||||
|
<span class="toggle-label">AI</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
<blockquote class="motto">
|
||||||
|
<div id=mottotext>
|
||||||
|
In the midway of this our mortal life,<br>
|
||||||
|
I found me in a gloomy wood, astray<br>
|
||||||
|
Gone from the path direct: and e’en to tell<br>
|
||||||
|
-- <a href="https://www.gutenberg.org/files/1000/1000-h/1000-h.htm" target="_blank">Dante's Inferno</a><br>
|
||||||
|
</div>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<p>
|
||||||
|
Every good talk between us mortals, alien to each other, starts with a proper introduction. This way we can get enough inspiration to open up ourself. In this online world, where intimacy is almost impossible ,this kind of introduction feels scary, and show us vulnerable. Taking the risk, here you can find me open.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This is why this site is written purely by me: human. I do not hide my imperfections, I embrace them, while offering you the standards which would make my reading more easily digestable and familiar in the AI enhanced world I created an automated pipeline which translates my whole website to something fancy using AI. That website can be accessed using the AI switch on the top of the web site (similarly to dark-mode switch I have an LLM-mode too).
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Everyone seek connection (Deleuze would agree with this) as this is one of the most important aspect of being a human. Common origin, shared experiences, mutual interdependence makes the relationship possible at all. My main question is that how AI supports this activity? Are there any human-AI complementarity? Instead of answering the question directly, I really wanted to give you an option to make your decision. I am quite curious how much the expression, the relationship between us would loose or gain with the advancements of AI.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Who am I?</h2>
|
||||||
|
|
||||||
|
I am Roland Hollós a Hungarian environmental scientist, who is mainly driven by curiocity, the deep wish of creation. I leave mainly at the crossroad of Environmental Science, Mathematics, Computer Science, however I am fascinated consumer of Philosophy, Sociology, Psychology, History, Literature too.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<script src="js/background.js"></script>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
const LEAF_PATHS = {
|
||||||
|
ovate: {
|
||||||
|
blade: "M 0 0.5 Q -0.32 0.05 0 -0.5 Q 0.32 0.05 0 0.5 Z",
|
||||||
|
veins: "M 0 0.5 L 0 -0.5 M 0 0.28 L -0.35 0.12 M 0 0.28 L 0.35 0.12 M 0 0.12 L -0.35 -0.04 M 0 0.12 L 0.35 -0.04 M 0 -0.04 L -0.35 -0.2 M 0 -0.04 L 0.35 -0.2 M 0 -0.2 L -0.35 -0.36 M 0 -0.2 L 0.35 -0.36 M 0 -0.36 L -0.35 -0.52 M 0 -0.36 L 0.35 -0.52",
|
||||||
|
},
|
||||||
|
lanceolate: {
|
||||||
|
blade: "M 0 0.5 Q -0.1524 0.0238 0 -0.5 Q 0.1524 0.0238 0 0.5 Z",
|
||||||
|
veins: "M 0 0.5 L 0 -0.4524 M 0 0.2905 L -0.3333 0.1381 M 0 0.2905 L 0.3333 0.1381 M 0 0.1381 L -0.3333 -0.0143 M 0 0.1381 L 0.3333 -0.0143 M 0 -0.0143 L -0.3333 -0.1667 M 0 -0.0143 L 0.3333 -0.1667 M 0 -0.1667 L -0.3333 -0.319 M 0 -0.1667 L 0.3333 -0.319 M 0 -0.319 L -0.3333 -0.4714 M 0 -0.319 L 0.3333 -0.4714",
|
||||||
|
},
|
||||||
|
cordate: {
|
||||||
|
blade: "M 0 -0.5 C 0.5412 -0.1941 0.4235 0.5588 0.0706 0.4176 Q 0 0.5824 -0.0706 0.4176 C -0.4235 0.5588 -0.5412 -0.1941 0 -0.5 Z",
|
||||||
|
veins: "M 0 0.4412 L 0 -0.5 M 0 0.2341 L -0.4118 0.0459 M 0 0.2341 L 0.4118 0.0459 M 0 0.0835 L -0.4118 -0.1047 M 0 0.0835 L 0.4118 -0.1047 M 0 -0.0671 L -0.4118 -0.2553 M 0 -0.0671 L 0.4118 -0.2553 M 0 -0.2176 L -0.4118 -0.4059 M 0 -0.2176 L 0.4118 -0.4059 M 0 -0.3682 L -0.4118 -0.5565 M 0 -0.3682 L 0.4118 -0.5565",
|
||||||
|
},
|
||||||
|
serrate: {
|
||||||
|
blade: "M 0 0.5 L -0.1026 0.3889 L -0.1504 0.2778 L -0.2598 0.1667 L -0.2304 0.0556 L -0.2954 -0.0556 L -0.2026 -0.1667 L -0.1928 -0.2778 L -0.08 -0.3889 L 0 -0.5 L 0 -0.5 L 0.08 -0.3889 L 0.1928 -0.2778 L 0.2026 -0.1667 L 0.2954 -0.0556 L 0.2304 0.0556 L 0.2598 0.1667 L 0.1504 0.2778 L 0.1026 0.3889 Z",
|
||||||
|
veins: "M 0 0.5 L 0 -0.5 M 0 0.28 L -0.35 0.12 M 0 0.28 L 0.35 0.12 M 0 0.12 L -0.35 -0.04 M 0 0.12 L 0.35 -0.04 M 0 -0.04 L -0.35 -0.2 M 0 -0.04 L 0.35 -0.2 M 0 -0.2 L -0.35 -0.36 M 0 -0.2 L 0.35 -0.36 M 0 -0.36 L -0.35 -0.52 M 0 -0.36 L 0.35 -0.52",
|
||||||
|
},
|
||||||
|
maple: { // Acer pseudoplatanus — 5 palmate lobes
|
||||||
|
blade: "M 0 -0.5 L 0.1119 -0.2575 L 0.1052 -0.02 L 0.3016 -0.1953 L 0.4915 -0.2399 L 0.3528 0.0221 L 0.2627 0.141 L 0.5266 0.1572 L 0.5691 0.2691 L 0.3803 0.3927 L 0.2546 0.468 L 0.1228 0.5 L 0 0.4691 L -0.1228 0.5 L -0.2546 0.468 L -0.3803 0.3927 L -0.5691 0.2691 L -0.5266 0.1572 L -0.2627 0.141 L -0.3528 0.0221 L -0.4915 -0.2399 L -0.3016 -0.1953 L -0.1052 -0.02 L -0.1119 -0.2575 Z",
|
||||||
|
veins: "M 0 0.4691 L 0 -0.5 M 0 0.4691 L 0.4915 -0.2399 M 0 0.4691 L 0.5691 0.2691 M 0 0.4691 L -0.4915 -0.2399 M 0 0.4691 L -0.5691 0.2691",
|
||||||
|
},
|
||||||
|
oak: { // Quercus robur — obovate, rounded lobes
|
||||||
|
blade: "M 0 0.5 L 0.001 0.4889 L 0.003 0.4778 L 0.0062 0.4667 L 0.0109 0.4556 L 0.0173 0.4444 L 0.0253 0.4333 L 0.0343 0.4222 L 0.0437 0.4111 L 0.0524 0.4 L 0.0596 0.3889 L 0.0644 0.3778 L 0.0664 0.3667 L 0.0656 0.3556 L 0.0626 0.3444 L 0.0584 0.3333 L 0.0546 0.3222 L 0.0527 0.3111 L 0.0544 0.3 L 0.0612 0.2889 L 0.0737 0.2778 L 0.092 0.2667 L 0.1152 0.2556 L 0.1417 0.2444 L 0.1692 0.2333 L 0.195 0.2222 L 0.2164 0.2111 L 0.231 0.2 L 0.2372 0.1889 L 0.2343 0.1778 L 0.223 0.1667 L 0.2051 0.1556 L 0.1832 0.1444 L 0.161 0.1333 L 0.1422 0.1222 L 0.1304 0.1111 L 0.1285 0.1 L 0.1381 0.0889 L 0.1594 0.0778 L 0.1911 0.0667 L 0.2304 0.0556 L 0.2732 0.0444 L 0.315 0.0333 L 0.351 0.0222 L 0.377 0.0111 L 0.39 0 L 0.3884 -0.0111 L 0.3724 -0.0222 L 0.3443 -0.0333 L 0.3076 -0.0444 L 0.2672 -0.0556 L 0.2283 -0.0667 L 0.1962 -0.0778 L 0.1751 -0.0889 L 0.1679 -0.1 L 0.1756 -0.1111 L 0.1973 -0.1222 L 0.2301 -0.1333 L 0.2699 -0.1444 L 0.3114 -0.1556 L 0.3492 -0.1667 L 0.3782 -0.1778 L 0.3947 -0.1889 L 0.3965 -0.2 L 0.3832 -0.2111 L 0.3564 -0.2222 L 0.3192 -0.2333 L 0.2761 -0.2444 L 0.2318 -0.2556 L 0.1913 -0.2667 L 0.1585 -0.2778 L 0.1362 -0.2889 L 0.1254 -0.3 L 0.1257 -0.3111 L 0.135 -0.3222 L 0.1502 -0.3333 L 0.1673 -0.3444 L 0.1826 -0.3556 L 0.1928 -0.3667 L 0.1954 -0.3778 L 0.1896 -0.3889 L 0.1754 -0.4 L 0.1545 -0.4111 L 0.129 -0.4222 L 0.1018 -0.4333 L 0.0756 -0.4444 L 0.0524 -0.4556 L 0.0335 -0.4667 L 0.0192 -0.4778 L 0.0086 -0.4889 L 0 -0.5 L 0 -0.5 L -0.0086 -0.4889 L -0.0192 -0.4778 L -0.0335 -0.4667 L -0.0524 -0.4556 L -0.0756 -0.4444 L -0.1018 -0.4333 L -0.129 -0.4222 L -0.1545 -0.4111 L -0.1754 -0.4 L -0.1896 -0.3889 L -0.1954 -0.3778 L -0.1928 -0.3667 L -0.1826 -0.3556 L -0.1673 -0.3444 L -0.1502 -0.3333 L -0.135 -0.3222 L -0.1257 -0.3111 L -0.1254 -0.3 L -0.1362 -0.2889 L -0.1585 -0.2778 L -0.1913 -0.2667 L -0.2318 -0.2556 L -0.2761 -0.2444 L -0.3192 -0.2333 L -0.3564 -0.2222 L -0.3832 -0.2111 L -0.3965 -0.2 L -0.3947 -0.1889 L -0.3782 -0.1778 L -0.3492 -0.1667 L -0.3114 -0.1556 L -0.2699 -0.1444 L -0.2301 -0.1333 L -0.1973 -0.1222 L -0.1756 -0.1111 L -0.1679 -0.1 L -0.1751 -0.0889 L -0.1962 -0.0778 L -0.2283 -0.0667 L -0.2672 -0.0556 L -0.3076 -0.0444 L -0.3443 -0.0333 L -0.3724 -0.0222 L -0.3884 -0.0111 L -0.39 0 L -0.377 0.0111 L -0.351 0.0222 L -0.315 0.0333 L -0.2732 0.0444 L -0.2304 0.0556 L -0.1911 0.0667 L -0.1594 0.0778 L -0.1381 0.0889 L -0.1285 0.1 L -0.1304 0.1111 L -0.1422 0.1222 L -0.161 0.1333 L -0.1832 0.1444 L -0.2051 0.1556 L -0.223 0.1667 L -0.2343 0.1778 L -0.2372 0.1889 L -0.231 0.2 L -0.2164 0.2111 L -0.195 0.2222 L -0.1692 0.2333 L -0.1417 0.2444 L -0.1152 0.2556 L -0.092 0.2667 L -0.0737 0.2778 L -0.0612 0.2889 L -0.0544 0.3 L -0.0527 0.3111 L -0.0546 0.3222 L -0.0584 0.3333 L -0.0626 0.3444 L -0.0656 0.3556 L -0.0664 0.3667 L -0.0644 0.3778 L -0.0596 0.3889 L -0.0524 0.4 L -0.0437 0.4111 L -0.0343 0.4222 L -0.0253 0.4333 L -0.0173 0.4444 L -0.0109 0.4556 L -0.0062 0.4667 L -0.003 0.4778 L -0.001 0.4889 L 0 0.5 Z",
|
||||||
|
veins: "M 0 0.5 L 0 -0.5 M 0 0.42 L 0.0445 0.37 M 0 0.42 L -0.0445 0.37 M 0 0.22 L 0.1963 0.17 M 0 0.22 L -0.1963 0.17 M 0 0.02 L 0.3315 -0.03 M 0 0.02 L -0.3315 -0.03 M 0 -0.18 L 0.337 -0.23 M 0 -0.18 L -0.337 -0.23 M 0 -0.38 L 0.1491 -0.43 M 0 -0.38 L -0.1491 -0.43",
|
||||||
|
},
|
||||||
|
svg_green: { // hand-drawn in Inkscape (leafs.svg) — pointed almond
|
||||||
|
blade: "M 0.0514 0.4973 C -0.1305 0.5352 -0.3584 0.182 -0.2801 -0.0684 C -0.2017 -0.3188 -0.0818 -0.5445 0.0791 -0.4927 C 0.2399 -0.4408 0.2399 -0.3306 0.2848 -0.1265 C 0.3298 0.0775 0.2332 0.4594 0.0514 0.4973 Z",
|
||||||
|
veins: "M 0.0193 0.4898 L 0.0442 -0.504 M 0.0316 -0.2053 L 0.2236 -0.354 M 0.0271 -0.0559 L 0.262 -0.1777 M 0.0259 0.0672 L 0.2761 -0.0601 M 0.028 0.2016 L 0.285 0.0544 M 0.0222 0.3163 L 0.2589 0.1954 M 0.0184 0.4021 L 0.229 0.2936 M 0.0348 -0.2121 L -0.1572 -0.3608 M 0.0357 -0.0613 L -0.2182 -0.1984 M 0.036 0.068 L -0.2631 -0.0951 M 0.0225 0.1977 L -0.2901 0.0215 M 0.0273 0.3232 L -0.2738 0.1665 M 0.0187 0.402 L -0.2262 0.2735",
|
||||||
|
},
|
||||||
|
svg_willow: { // hand-drawn — narrow willow-like blade
|
||||||
|
blade: "M -0.0984 0.5 C -0.0984 0.5 -0.2228 0.3124 -0.0792 -0.1154 C 0.0643 -0.5433 0.0739 -0.4987 0.0739 -0.4987 C 0.0739 -0.4987 0.2377 -0.1933 0.0797 0.1406 C -0.0782 0.4745 -0.0984 0.5 -0.0984 0.5 Z",
|
||||||
|
veins: "M -0.1045 0.4845 C -0.0629 0.3388 -0.0284 0.1911 -0.001 0.0422 C 0.032 -0.137 0.0546 -0.318 0.0667 -0.4998",
|
||||||
|
},
|
||||||
|
svg_round: { // hand-drawn — round leaf
|
||||||
|
blade: "M 0.3991 0.1009 C 0.3991 0.3213 0.2204 0.5 0 0.5 C -0.2204 0.5 -0.3991 0.3213 -0.3991 0.1009 C -0.3991 -0.1196 -0.2012 -0.4094 -0.0112 -0.5 C 0.1718 -0.4111 0.3991 -0.1196 0.3991 0.1009 Z",
|
||||||
|
veins: "M 0.0051 0.49 L -0.0158 -0.501 M 0.0039 0.4735 L 0.3738 0.2145 M 0.0023 0.367 L 0.3828 0.0882 M -0.0037 0.2768 L 0.3712 -0.0008 M -0.002 0.1811 L 0.329 -0.07 M -0.0005 0.0801 L 0.3013 -0.1694 M -0.0069 -0.0245 L 0.2626 -0.2399 M -0.005 -0.1172 L 0.2167 -0.2924 M -0.0076 -0.2136 L 0.1499 -0.3557 M -0.0124 -0.311 L 0.1041 -0.4158 M -0.0043 0.4633 L -0.3516 0.2867 M -0.0066 0.3665 L -0.3971 0.1691 M -0.0012 0.26 L -0.3996 0.0719 M -0.0079 0.1725 L -0.3831 -0.0091 M -0.0015 0.0729 L -0.3557 -0.0868 M -0.0029 -0.0347 L -0.3159 -0.1785 M -0.0061 -0.1237 L -0.2849 -0.2467 M -0.0085 -0.2157 L -0.2322 -0.3099 M -0.0191 -0.3209 L -0.1597 -0.3891",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function leafColor() {
|
||||||
|
const r = Math.random();
|
||||||
|
let h, s, l;
|
||||||
|
if (r < 0.60) { // greens
|
||||||
|
h = 80 + Math.random() * 55; s = 30 + Math.random() * 30; l = 28 + Math.random() * 20;
|
||||||
|
} else if (r < 0.85) { // amber / gold
|
||||||
|
h = 34 + Math.random() * 18; s = 55 + Math.random() * 25; l = 40 + Math.random() * 12;
|
||||||
|
} else { // rust / brown
|
||||||
|
h = 14 + Math.random() * 16; s = 45 + Math.random() * 25; l = 30 + Math.random() * 12;
|
||||||
|
}
|
||||||
|
return `hsl(${h}, ${s}%, ${l}%)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function paintRandomLeaf(ctx,leaf, W, H){
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(Math.random() * W, Math.random() * H);
|
||||||
|
ctx.rotate(Math.random() * 2 * Math.PI);
|
||||||
|
const scale = 40 + Math.random() ** 2 * 56;
|
||||||
|
ctx.scale(scale, scale);
|
||||||
|
ctx.fillStyle = leafColor();
|
||||||
|
ctx.strokeStyle = "rgba(0,0,0,0.2)";
|
||||||
|
ctx.shadowColor = "rgba(40, 45, 25, 0.28)";
|
||||||
|
ctx.shadowBlur = scale * 0.12;
|
||||||
|
ctx.lineWidth = 0.02;
|
||||||
|
ctx.beginPath();
|
||||||
|
const path = new Path2D(leaf.blade);
|
||||||
|
ctx.fill(path);
|
||||||
|
ctx.stroke(path);
|
||||||
|
ctx.clip(path);
|
||||||
|
const veinsPath = new Path2D(leaf.veins);
|
||||||
|
ctx.shadowColor = "transparent";
|
||||||
|
ctx.stroke(veinsPath);
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(){
|
||||||
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
const W = window.innerWidth, H = window.innerHeight;
|
||||||
|
canvas.width = W * dpr;
|
||||||
|
canvas.height = H * dpr;
|
||||||
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // now you draw in CSS pixels
|
||||||
|
|
||||||
|
const g = ctx.createRadialGradient(
|
||||||
|
W / 2, H * 0.35, 0,
|
||||||
|
W / 2, H * 0.5, Math.max(W, H) * 0.8
|
||||||
|
);
|
||||||
|
g.addColorStop(0, "#f7f3ea"); // warm cream (center)
|
||||||
|
g.addColorStop(1, "#e7ddca"); // soft sand (edges)
|
||||||
|
ctx.fillStyle = g;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
for (let i = 0; i < 150; i++) {
|
||||||
|
const leafTypes = Object.keys(LEAF_PATHS);
|
||||||
|
const randomLeafType = leafTypes[Math.floor(Math.random() * leafTypes.length)];
|
||||||
|
const leaf = LEAF_PATHS[randomLeafType];
|
||||||
|
paintRandomLeaf(ctx, leaf, W, H);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const canvas = document.getElementById("scene");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
draw();
|
||||||
|
window.addEventListener("resize", draw);
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
# Decision making un
|
||||||
|
|
||||||
Reference in New Issue
Block a user