Skip to content

Commit 1977455

Browse files
author
GitHub Actions
committed
Deploy micouy/micouy.github.io to micouy/micouy.github.io:gh-pages
0 parents  commit 1977455

File tree

15 files changed

+2293
-0
lines changed

15 files changed

+2293
-0
lines changed

‎.nojekyll

Whitespace-only changes.

‎404.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<!doctype html>
2+
<title>404 Not Found</title>
3+
<h1>404 Not Found</h1>

‎chromatic-aberration/index.html

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="stylesheet" href="/mvp.css" />
6+
<link rel="stylesheet" href="/style.css" />
7+
<title>micouy's blog</title>
8+
</head>
9+
10+
<body>
11+
<main>
12+
<a href="/">micouy's blog</a>
13+
14+
<h1 class="title">Chromatic aberration</h1>
15+
16+
<p class="subtitle"><strong>2021-04-21</strong></p>
17+
18+
<style>
19+
#text-card p {
20+
margin: 0;
21+
}
22+
23+
#text-card {
24+
box-sizing: border-box;
25+
width: 80%;
26+
margin-top: 2em;
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
width: 25em;
31+
margin-top: 0.2em !important;
32+
margin-bottom: 0.2em !important;
33+
border-radius: 2em;
34+
padding: 2em;
35+
background: white;
36+
color: black;
37+
text-align: center;
38+
}
39+
40+
/*
41+
order:
42+
- inner red,
43+
- inner yellow,
44+
- outer red,
45+
- inner turquoise,
46+
- outer turquoise,
47+
- outer blue,
48+
*/
49+
50+
#text-card.glasses-on {
51+
box-shadow:
52+
inset 0.07em 0.07em 0.15em red,
53+
inset 0.2em 0.2em 0.3em yellow,
54+
-0.07em -0.07em 0.15em rgba(255, 0, 0, 0.7),
55+
inset -0.15em -0.15em 0.15em rgba(50, 203, 255),
56+
0.07em 0.07em 0.07em rgba(50, 203, 255),
57+
0.4em 0.4em 0.3em rgba(0, 73, 255, 0.5),
58+
0.4em 0.4em 0.4em rgba(7, 42, 200, 0.2);
59+
}
60+
61+
.black-text {
62+
font-weight: bold;
63+
}
64+
65+
/*
66+
order:
67+
- relative red,
68+
- absolute red,
69+
- relative blue,
70+
- absolute blue,
71+
- relative yellow,
72+
- absolute yellow,
73+
- relative turquoise,
74+
- absolute turquoise,
75+
*/
76+
77+
.glasses-on .black-text {
78+
text-shadow:
79+
0.005em 0.005em 0.01em red,
80+
1px 1px 1px red,
81+
-0.01em -0.01em 0.01em rgb(16 16 248 / 0.7),
82+
-1px -1px 1px rgb(16 16 248 / 0.7),
83+
0.02em 0.02em 0.01em yellow,
84+
4px 4px 1px yellow,
85+
-0.02em -0.02em 0.01em rgb(50 246 255),
86+
-3px -3px 1px rgb(50 246 255);
87+
}
88+
89+
.desaturate {
90+
filter: saturate(10%);
91+
}
92+
93+
#overlay {
94+
top: 0;
95+
left: 0;
96+
position: fixed;
97+
width: 100%;
98+
height: 100%;
99+
display: none;
100+
}
101+
102+
#overlay.blurred {
103+
z-index: 1;
104+
backdrop-filter: blur(10px);
105+
display: block;
106+
}
107+
108+
#toggle {
109+
z-index: 2;
110+
position: fixed;
111+
left: 50%;
112+
bottom: 0.6em;
113+
transform: translate(-50%, 0);
114+
color: black;
115+
background: white;
116+
border: black solid 0.1em;
117+
border-radius: 0.3em;
118+
font-family: Courier;
119+
padding: 0.3em;
120+
outline: none;
121+
width: auto;
122+
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.8);
123+
}
124+
125+
#toggle:hover {
126+
text-decoration: underline;
127+
}
128+
129+
#toggle:active {
130+
color: #777;
131+
}
132+
</style>
133+
<script>
134+
let on = false;
135+
let overlay;
136+
let button;
137+
let card;
138+
let desaturate;
139+
140+
window.onload = () => {
141+
overlay = document.getElementById("overlay");
142+
button = document.getElementById("toggle");
143+
desaturate = document.getElementsByClassName("desaturate");
144+
145+
takeOff(); // Make sure everything is set up correctly.
146+
};
147+
148+
149+
function takeOff() {
150+
overlay.classList.add("blurred");
151+
button.innerHTML = "Put on glasses";
152+
153+
for (let img of desaturate) {
154+
img.style.filter = "saturate(10%)";
155+
}
156+
}
157+
158+
function putOn() {
159+
overlay.classList.remove("blurred");
160+
button.innerHTML = "Take off glasses";
161+
162+
for (let img of desaturate) {
163+
img.style.filter = "none";
164+
}
165+
}
166+
167+
function toggle() {
168+
if (on) {
169+
takeOff();
170+
171+
on = false;
172+
} else {
173+
putOn();
174+
175+
on = true;
176+
}
177+
}
178+
</script>
179+
<p><button id="toggle" style="font-size: 1.5rem;" onclick="toggle()">Put on glasses</button></p>
180+
<div id="overlay" class="blurred"></div>
181+
<img src="text-card.svg"
182+
class="desaturate"style="max-height: 50em;"
183+
>
184+
<h1 id="what-am-i-looking-at">What am I looking at?</h1>
185+
<p>Recently I got a new pair of glasses. Can you see these red/yellow and blue/turquoise edges? This is what I see when there's a high contrast between two blobs of colors, but only when I look at them at an angle. Which side is red and which is blue depends on where the object is in my field of view. The effect is especially strong in direct sunlight. It is called <a href="https://en.wikipedia.org/wiki/Chromatic_aberration">chromatic aberration</a>.</p>
186+
<p>While building this site I observed a really cool thing I didn't expect - when I rotate my head
187+
at a certain angle I can almost make the colors on the screen disappear. It's like the colors
188+
and the chromatic aberration cancel out.</p>
189+
<p>Here's a painting depicting the effect by <a href="https://culture.pl/en/artist/wojciech-fangor">Wojciech Fangor</a>, a Polish artist.</p>
190+
<img src="wojciech-fangor-sm-34-1974.jpg" class="desaturate" style="max-height: 30em;" />
191+
<p><small>SM 34 by Wojciech Fangor</small></p>
192+
<p>And here's a beautiful artwork from <a href="https://www.grif.studio/">Grif Studio</a>. They also put up a <a href="https://www.grif.studio/chromatic">gallery</a> and a <a href="https://www.grif.studio/chromaticfilm">short film</a> capturing a similar phenomenon.</p>
193+
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/15381756555015.59b2ef09aaaf2.jpg" class="desaturate" style="max-height: 30em;" />
194+
<p><small>Chromatic Black from Grif Studio</small></p>
195+
196+
197+
<script
198+
src="https://utteranc.es/client.js"
199+
repo="micouy/micouy.github.io"
200+
issue-term="pathname"
201+
theme="github-light"
202+
crossorigin="anonymous"
203+
async
204+
></script>
205+
</main>
206+
</body>
207+
</html>

0 commit comments

Comments
 (0)