You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
13 KiB
306 lines
13 KiB
<!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 personal website showcasing his works, research, and experiments." />
|
|
<meta name="description" content="Cailean Finn's personal website showcasing his works, research, and experiments." />
|
|
<meta content="Beta Festival 2024" property="og:title"/>
|
|
<meta content="Beta Festival 2024" 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">list</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="AI">AI</option>
|
|
|
|
<option value="NLP">NLP</option>
|
|
|
|
<option value="Simulation">Simulation</option>
|
|
|
|
<option value="HPE">HPE</option>
|
|
|
|
<option value="RL">RL</option>
|
|
|
|
<option value="Unity">Unity</option>
|
|
|
|
<option value="Web">Web</option>
|
|
|
|
<option value="ML">ML</option>
|
|
|
|
<option value="p5">p5</option>
|
|
|
|
<option value="Performance">Performance</option>
|
|
|
|
<option value="VFX">VFX</option>
|
|
|
|
<option value="Virtualisation">Virtualisation</option>
|
|
|
|
<option value="Video-Synthesis">Video-Synthesis</option>
|
|
|
|
<option value="MaxMSP">MaxMSP</option>
|
|
|
|
<option value="Jitter">Jitter</option>
|
|
|
|
<option value="DeepFakes">DeepFakes</option>
|
|
|
|
<option value="TD">TD</option>
|
|
|
|
<option value="Creative-Coding">Creative-Coding</option>
|
|
|
|
</select>
|
|
</div>
|
|
<div class="articles">
|
|
|
|
<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="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="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="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="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="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 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 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="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 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>
|