350 lines
14 KiB
HTML
350 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="og:description" content="Cailean Finn's Garden (ง•_•)ง Artist * Creative Technologist" />
|
||
<meta name="description" content="Cailean Finn's Garden (ง•_•)ง Artist * Creative Technologist" />
|
||
<meta content="cailean.finn" property="og:title"/>
|
||
<meta content="cailean.finn" property="og:site_name"/>
|
||
<meta content="website" property="og:type"/>
|
||
<meta name="keywords" content="cailean finn, new media, art and technology, digital art" />
|
||
<meta name="robots" content="all" />
|
||
<title>cailean.finn</title>
|
||
<link rel="icon" type="image/png" href="/images/favicon/favicon-cf-32x32.png" sizes="32x32">
|
||
<link rel="icon" type="image/png" href="/images/favicon/favicon-cf-192x192.png" sizes="192x192">
|
||
<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=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="/css/styles.css">
|
||
</head>
|
||
<body>
|
||
<div id="main-container">
|
||
<div id="nav-container">
|
||
<div class="nav-emoji">
|
||
<a href="/"><div class="emoji-flip">(ง•_•)ง</div></a>
|
||
</div>
|
||
<div class="nav-about"><a href="/about">cailean.finn</a></div>
|
||
<div class="nav-emoji"><a href="/list">projects</a></div>
|
||
<div class="nav-emoji"><a href='/gallery'>gallery</a></div>
|
||
</div>
|
||
|
||
<div id="container">
|
||
<div id="list-container">
|
||
<div class="filter">
|
||
<label for="tag-select">Filter by tag:</label>
|
||
<select id="tag-select" onchange="filterArticles()">
|
||
<option value="all">All</option>
|
||
|
||
<option value="WebXR">WebXR</option>
|
||
|
||
<option value="Digital Garden">Digital Garden</option>
|
||
|
||
<option value="Affetcion Mapping">Affetcion Mapping</option>
|
||
|
||
<option value="AI">AI</option>
|
||
|
||
<option value="Embedded Computing">Embedded Computing</option>
|
||
|
||
<option value="Unity">Unity</option>
|
||
|
||
<option value="Simulation">Simulation</option>
|
||
|
||
<option value="RL">RL</option>
|
||
|
||
<option value="Performance">Performance</option>
|
||
|
||
<option value="VFX">VFX</option>
|
||
|
||
<option value="Web">Web</option>
|
||
|
||
<option value="ML">ML</option>
|
||
|
||
<option value="p5">p5</option>
|
||
|
||
<option value="Creative-Coding">Creative-Coding</option>
|
||
|
||
<option value="HPE">HPE</option>
|
||
|
||
<option value="DeepFakes">DeepFakes</option>
|
||
|
||
<option value="TD">TD</option>
|
||
|
||
<option value="NLP">NLP</option>
|
||
|
||
<option value="Virtualisation">Virtualisation</option>
|
||
|
||
<option value="Video-Synthesis">Video-Synthesis</option>
|
||
|
||
<option value="MaxMSP">MaxMSP</option>
|
||
|
||
<option value="Jitter">Jitter</option>
|
||
|
||
</select>
|
||
</div>
|
||
<div class="articles">
|
||
|
||
<div class="article" data-tags="WebXR Digital Garden">
|
||
|
||
<a href= 'articles/emancipating-xr'><div class="article-image">
|
||
<img src="/images/exr-title.gif">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ WebXR</div>
|
||
|
||
<div class="project-tag">✳ Digital Garden</div>
|
||
|
||
</div>
|
||
|
||
<h2>Emancipating XR</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="Affetcion Mapping AI Embedded Computing">
|
||
|
||
<a href= 'articles/stubborn-vectors'><div class="article-image">
|
||
<img src="/images/sv-image.webp">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ Affetcion Mapping</div>
|
||
|
||
<div class="project-tag">✳ AI</div>
|
||
|
||
<div class="project-tag">✳ Embedded Computing</div>
|
||
|
||
</div>
|
||
|
||
<h2>Stubborn Vectors</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="AI Unity Simulation RL">
|
||
|
||
<a href= 'articles/moloch'><div class="article-image">
|
||
<img src="/images/moloch.png">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ AI</div>
|
||
|
||
<div class="project-tag">✳ Unity</div>
|
||
|
||
<div class="project-tag">✳ Simulation</div>
|
||
|
||
<div class="project-tag">✳ RL</div>
|
||
|
||
</div>
|
||
|
||
<h2>Moloch</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="RL AI Unity Simulation">
|
||
|
||
<a href= 'articles/beauty-and-the-beep'><div class="article-image">
|
||
<img src="/images/beep.png">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ RL</div>
|
||
|
||
<div class="project-tag">✳ AI</div>
|
||
|
||
<div class="project-tag">✳ Unity</div>
|
||
|
||
<div class="project-tag">✳ Simulation</div>
|
||
|
||
</div>
|
||
|
||
<h2>Beauty and The Beep</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="Unity Performance VFX">
|
||
|
||
<a href= 'articles/dwelling'><div class="article-image">
|
||
<img src="/images/dwelling.png">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ Unity</div>
|
||
|
||
<div class="project-tag">✳ Performance</div>
|
||
|
||
<div class="project-tag">✳ VFX</div>
|
||
|
||
</div>
|
||
|
||
<h2>Dwelling</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="Web ML p5">
|
||
|
||
<a href= 'articles/data'><div class="article-image">
|
||
<img src="/images/data.png">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ Web</div>
|
||
|
||
<div class="project-tag">✳ ML</div>
|
||
|
||
<div class="project-tag">✳ p5</div>
|
||
|
||
</div>
|
||
|
||
<h2>The BIG D.A.T.A Interview</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="Web Creative-Coding">
|
||
|
||
<a href= 'articles/undefined'><div class="article-image">
|
||
<img src="/images/undefined-panorama.png">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ Web</div>
|
||
|
||
<div class="project-tag">✳ Creative-Coding</div>
|
||
|
||
</div>
|
||
|
||
<h2>Undefined Panorama</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="HPE AI">
|
||
|
||
<a href= 'articles/ai-x-body'><div class="article-image">
|
||
<img src="/images/aixbody.webp">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ HPE</div>
|
||
|
||
<div class="project-tag">✳ AI</div>
|
||
|
||
</div>
|
||
|
||
<h2>AI x Body</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="Performance AI DeepFakes TD">
|
||
|
||
<a href= 'articles/latent-mirror'><div class="article-image">
|
||
<img src="/images/latent-mirror.png">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ Performance</div>
|
||
|
||
<div class="project-tag">✳ AI</div>
|
||
|
||
<div class="project-tag">✳ DeepFakes</div>
|
||
|
||
<div class="project-tag">✳ TD</div>
|
||
|
||
</div>
|
||
|
||
<h2>Latent Mirror</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="AI NLP Simulation">
|
||
|
||
<a href= 'articles/(o)machine'><div class="article-image">
|
||
<img src="/images/o-machine.png">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ AI</div>
|
||
|
||
<div class="project-tag">✳ NLP</div>
|
||
|
||
<div class="project-tag">✳ Simulation</div>
|
||
|
||
</div>
|
||
|
||
<h2>(O)MACHINE</h2>
|
||
</div>
|
||
|
||
<div class="article" data-tags="Virtualisation Video-Synthesis MaxMSP Jitter">
|
||
|
||
<a href= 'articles/electronic-image'><div class="article-image">
|
||
<img src="/images/electronic-image.png">
|
||
</div></a>
|
||
|
||
<div id="project-tags">
|
||
|
||
<div class="project-tag">✳ Virtualisation</div>
|
||
|
||
<div class="project-tag">✳ Video-Synthesis</div>
|
||
|
||
<div class="project-tag">✳ MaxMSP</div>
|
||
|
||
<div class="project-tag">✳ Jitter</div>
|
||
|
||
</div>
|
||
|
||
<h2>The Electronic Image, An Object of Time and Energy</h2>
|
||
</div>
|
||
|
||
<div id="clouds">
|
||
<div class="cloud">
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣶⣶⣶⣶⣤⣤⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⢀⣀⣴⠟⠋⠁⠀⠀⠀⠀⠈⠉⠙⠻⢿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⠛⠿⣿⣛⣿⠿⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⣿⣻⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠿⣶⣦⣤⣤⣤⣤⣤⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣟⣛⣛⣿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠾⢿⣿⣿⣭⣭⣿⣄⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⣠⣶⡾⠿⠛⠛⠋⠉⠉⠙⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠋⠐⠾⠏⠉⠉⠙⠛⠻⢷⣄⠀⠀⠀
|
||
⠀⠀⢠⣾⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣆⠀
|
||
⣀⣀⣸⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣷
|
||
⣿⡛⠋⠉⢀⣀⠀⠀⠀⣤⡄⠀⠀⠀⣀⣴⢶⣿⣯⢄⣀⣀⣀⡀⠀⢀⣄⣠⣤⣀⠁⠀⠀⢸⣿⣿⣶⠶⣶⡄⠀⠀⢠⣀⣀⡀⣀⣠⣿⣾
|
||
⣯⣿⣿⣦⣽⣭⣷⣦⣤⣼⣿⣶⣴⣶⣿⣁⣸⠃⠀⠀⠀⠉⢻⣧⠀⠻⠉⣉⣿⣿⡙⣶⡄⠈⠿⢷⡿⢻⣾⠿⢷⣾⣿⠿⠟⠛⠛⠋⠁⠉
|
||
⠀⠀⠙⠛⠋⠀⠘⠛⠉⠛⢿⣟⣻⣿⣟⣿⣿⣤⣴⣶⣄⣶⣌⡋⠀⠀⠞⢻⣧⣿⣧⣿⣷⣾⣷⣴⣿⣿⡿⣿⠿⠟⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠛⠛⠛⠛⠛⠛⠛⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
</div>
|
||
<div class="cloud2">
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣶⣶⣶⣶⣤⣤⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⢀⣀⣴⠟⠋⠁⠀⠀⠀⠀⠈⠉⠙⠻⢿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⠛⠿⣿⣛⣿⠿⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⣿⣻⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠿⣶⣦⣤⣤⣤⣤⣤⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣟⣛⣛⣿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠾⢿⣿⣿⣭⣭⣿⣄⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⣠⣶⡾⠿⠛⠛⠋⠉⠉⠙⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠋⠐⠾⠏⠉⠉⠙⠛⠻⢷⣄⠀⠀⠀
|
||
⠀⠀⢠⣾⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣆⠀
|
||
⣀⣀⣸⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣷
|
||
⣿⡛⠋⠉⢀⣀⠀⠀⠀⣤⡄⠀⠀⠀⣀⣴⢶⣿⣯⢄⣀⣀⣀⡀⠀⢀⣄⣠⣤⣀⠁⠀⠀⢸⣿⣿⣶⠶⣶⡄⠀⠀⢠⣀⣀⡀⣀⣠⣿⣾
|
||
⣯⣿⣿⣦⣽⣭⣷⣦⣤⣼⣿⣶⣴⣶⣿⣁⣸⠃⠀⠀⠀⠉⢻⣧⠀⠻⠉⣉⣿⣿⡙⣶⡄⠈⠿⢷⡿⢻⣾⠿⢷⣾⣿⠿⠟⠛⠛⠋⠁⠉
|
||
⠀⠀⠙⠛⠋⠀⠘⠛⠉⠛⢿⣟⣻⣿⣟⣿⣿⣤⣴⣶⣄⣶⣌⡋⠀⠀⠞⢻⣧⣿⣧⣿⣷⣾⣷⣴⣿⣿⡿⣿⠿⠟⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠛⠛⠛⠛⠛⠛⠛⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
</div>
|
||
<div class="cloud1">
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣶⣶⣶⣶⣤⣤⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⢀⣀⣴⠟⠋⠁⠀⠀⠀⠀⠈⠉⠙⠻⢿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⠛⠿⣿⣛⣿⠿⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⣿⣻⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠿⣶⣦⣤⣤⣤⣤⣤⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣟⣛⣛⣿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠾⢿⣿⣿⣭⣭⣿⣄⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⣠⣶⡾⠿⠛⠛⠋⠉⠉⠙⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠋⠐⠾⠏⠉⠉⠙⠛⠻⢷⣄⠀⠀⠀
|
||
⠀⠀⢠⣾⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣆⠀
|
||
⣀⣀⣸⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣷
|
||
⣿⡛⠋⠉⢀⣀⠀⠀⠀⣤⡄⠀⠀⠀⣀⣴⢶⣿⣯⢄⣀⣀⣀⡀⠀⢀⣄⣠⣤⣀⠁⠀⠀⢸⣿⣿⣶⠶⣶⡄⠀⠀⢠⣀⣀⡀⣀⣠⣿⣾
|
||
⣯⣿⣿⣦⣽⣭⣷⣦⣤⣼⣿⣶⣴⣶⣿⣁⣸⠃⠀⠀⠀⠉⢻⣧⠀⠻⠉⣉⣿⣿⡙⣶⡄⠈⠿⢷⡿⢻⣾⠿⢷⣾⣿⠿⠟⠛⠛⠋⠁⠉
|
||
⠀⠀⠙⠛⠋⠀⠘⠛⠉⠛⢿⣟⣻⣿⣟⣿⣿⣤⣴⣶⣄⣶⣌⡋⠀⠀⠞⢻⣧⣿⣧⣿⣷⣾⣷⣴⣿⣿⡿⣿⠿⠟⠀⠀⠀⠀⠀⠀⠀⠀
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠛⠛⠛⠛⠛⠛⠛⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
|
||
</div>
|
||
<div class="cloud-gif">
|
||
<img src="/images/website/lakitu.gif">
|
||
</div>
|
||
</div>
|
||
<script src="js/search.js"></script>
|
||
|
||
</div>
|
||
</body>
|
||
</html> |