Add wiki dump and instructions
This commit is contained in:
parent
f71e54a92f
commit
37f9cc3fd1
449 changed files with 44307 additions and 0 deletions
268
eh22.easterhegg.eu/design/generator.html
Normal file
268
eh22.easterhegg.eu/design/generator.html
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="shortcut icon" href="assets/image/favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="assets/style/styleguide.css"
|
||||
/>
|
||||
<title>Image Generator</title>
|
||||
</head>
|
||||
|
||||
<body style="height: 100vh">
|
||||
<header>
|
||||
<a href="../index.html" id="backToWiki">
|
||||
<img
|
||||
src="assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu_small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="../index.html"><i data-icon="arrow_left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="index.html"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="colors.html"><i data-icon="pen"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="typography.html"><i data-icon="font"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="iconography.html"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="logo.html"><i data-icon="hare_head"></i>Logo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="glow.html"><i data-icon="lightbulb"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="doodles.html"><i data-icon="looping"></i>Doodles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="demopage.html"><i data-icon="code"></i>Demopage</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="generator.html"><i data-icon="settings"></i>Image Generator</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="changelog.html"><i data-icon="history"></i>Changelog</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="lightbulb"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="lightbulb"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<h1>Image Generator</h1>
|
||||
<p>
|
||||
We wanted images to (optionally) have a glitchy, distorted appearance.
|
||||
To achieve this, we apply two effects to an image. Firstly, bright
|
||||
vertical edges in an image are highlighted by adding a parallel line
|
||||
in our primary color to their left and in our secondary color to their
|
||||
right hand side. Secondly, the image gets distorted by offsetting
|
||||
different parts of the image horizontally, seemingly by random
|
||||
amounts, but it is actually somewhat osscilating.
|
||||
</p>
|
||||
<p>
|
||||
This page utilizes a small bit of Javascript to add an SVG filter to
|
||||
an image of your choice. The resulting image will then be previewed
|
||||
further below and can be downloaded using a button at the end of the
|
||||
page. Not all browsers' canvas implementations generate the same
|
||||
outcome, especially firefox tends to create wrong results, so we
|
||||
recommend using a chromium based browser for creating these exports.
|
||||
</p>
|
||||
<div class="generator">
|
||||
<div>
|
||||
<input id="file_input" type="file" name="image" accept="image/*" />
|
||||
</div>
|
||||
|
||||
<img id="source_img" src="generator.html" />
|
||||
<i data-icon="arrow_down"></i>
|
||||
<img id="result_img" src="generator.html" />
|
||||
|
||||
<div style="display: none">
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<filter
|
||||
id="filter0"
|
||||
color-interpolation-filters="linearRGB"
|
||||
filterUnits="objectBoundingBox"
|
||||
primitiveUnits="objectBoundingBox"
|
||||
>
|
||||
<feFlood x="0" width="0.001" result="floodLeftColumn" />
|
||||
<feComposite
|
||||
in="SourceGraphic"
|
||||
in2="floodLeftColumn"
|
||||
operator="in"
|
||||
result="sourceLeftColumn"
|
||||
/>
|
||||
<feMorphology
|
||||
x="-0.5"
|
||||
in="sourceLeftColumn"
|
||||
operator="dilate"
|
||||
radius="0.5 0.000001"
|
||||
result="sourceLeftColumnWide"
|
||||
/>
|
||||
|
||||
<feFlood x="0.999" width="0.001" result="floodRightColumn" />
|
||||
<feComposite
|
||||
in="SourceGraphic"
|
||||
in2="floodRightColumn"
|
||||
operator="in"
|
||||
result="sourceRightColumn"
|
||||
/>
|
||||
<feMorphology
|
||||
x="0.5"
|
||||
in="sourceRightColumn"
|
||||
operator="dilate"
|
||||
radius="0.5 0.000001"
|
||||
result="sourceRightColumnWide"
|
||||
/>
|
||||
|
||||
<feMerge result="expandedSource">
|
||||
<feMergeNode in="sourceLeftColumnWide" />
|
||||
<feMergeNode in="sourceRightColumnWide" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
|
||||
<feColorMatrix
|
||||
in="expandedSource"
|
||||
type="saturate"
|
||||
values="0"
|
||||
result="bw"
|
||||
/>
|
||||
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
|
||||
<feComponentTransfer in="ltoa" result="ltoa_inverse">
|
||||
<feFuncA type="table" tableValues="0 1" />
|
||||
</feComponentTransfer>
|
||||
|
||||
<feConvolveMatrix
|
||||
in="ltoa_inverse"
|
||||
result="pink_edges"
|
||||
kernelMatrix="0 0 0 -8 0 8 0 0 0"
|
||||
/>
|
||||
<feComponentTransfer in="pink_edges" result="pink">
|
||||
<feFuncR type="table" tableValues="0.7765 0" />
|
||||
<feFuncG type="table" tableValues="0.1451 0" />
|
||||
<feFuncB type="table" tableValues="0.4902 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="pink" result="pink_shift0" dx="-0.0015" />
|
||||
<feOffset in="pink" result="pink_shift1" dx="-0.0030" />
|
||||
<feOffset in="pink" result="pink_shift2" dx="-0.0045" />
|
||||
|
||||
<feConvolveMatrix
|
||||
in="ltoa_inverse"
|
||||
result="cyan_edges"
|
||||
kernelMatrix="0 0 0 4 0 -4 0 0 0"
|
||||
/>
|
||||
<feComponentTransfer in="cyan_edges" result="cyan">
|
||||
<feFuncR type="table" tableValues="0.2941 0" />
|
||||
<feFuncG type="table" tableValues="0.6784 0" />
|
||||
<feFuncB type="table" tableValues="0.8471 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="cyan" result="cyan_shift0" dx="0.0015" />
|
||||
<feOffset in="cyan" result="cyan_shift1" dx="0.0030" />
|
||||
<feOffset in="cyan" result="cyan_shift2" dx="0.0045" />
|
||||
|
||||
<feMerge result="pink_cyan_shift">
|
||||
<feMergeNode in="expandedSource" />
|
||||
<feMergeNode in="pink_shift0" />
|
||||
<feMergeNode in="pink_shift1" />
|
||||
<feMergeNode in="cyan_shift0" />
|
||||
<feMergeNode in="cyan_shift1" />
|
||||
</feMerge>
|
||||
|
||||
<feTurbulence
|
||||
type="fractalNoise"
|
||||
baseFrequency="0 0.05"
|
||||
numOctaves="2"
|
||||
result="noise"
|
||||
/>
|
||||
<feDisplacementMap
|
||||
in="pink_cyan_shift"
|
||||
in2="noise"
|
||||
result="distorted_raw"
|
||||
scale="0.04"
|
||||
/>
|
||||
|
||||
<feComponentTransfer
|
||||
in="distorted_raw"
|
||||
result="SourceDistorted"
|
||||
>
|
||||
<feFuncA type="linear" slope="0.9" />
|
||||
</feComponentTransfer>
|
||||
|
||||
<feMerge>
|
||||
<feMergeNode in="expandedSource" />
|
||||
<feMergeNode in="distorted_raw" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<g filter="url(#filter0)">
|
||||
<image href="" width="100%" height="100%" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<button id="download" disabled>Download Result</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="assets/script/generator.js" type="text/javascript"></script>
|
||||
<script
|
||||
src="assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue