Skip to content

Commit 91c44c9

Browse files
MistOfJudgementMistOfJudgement
authored
Merge pull request #2 from MistOfJudgement/site-gen
Site gen
2 parents d3b07a0 + 2e8911f commit 91c44c9

31 files changed

Lines changed: 2302 additions & 422 deletions

‎build/bad_apple_terminal.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,11 @@ <h2>Problem & Purpose</h2>
3232
<p>I was bored in my highschool homeroom and I wanted to mess with the web terminal I had access to for a webdev class. I just wanted to render the Bad Apple animation in a terminal, but this project enables any video or image to be displayed.</p>
3333

3434
<h2>Technical</h2>
35-
<p>Certain terminals can output in color with escape characters. <a href="https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit">link</a>. For images, the task is fairly trivial where all I need to do get the raw image data using the library JIMP, scale the image, then map each pixel to a character with an escape code.</p>
36-
<img alt="Terminal rendering" />
35+
<p>Certain terminals can output in color with
36+
<a href="https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit">escape characters.</a>.
37+
For images, the task is fairly trivial where all I need to do get the raw image data using the
38+
library JIMP, scale the image, then map each pixel to a character with an escape code.</p>
39+
<img src="img/bad_apple_terminal.png" alt="Terminal rendering"/>
3740

3841
<p>For bad apple specifically, I had actually done similar work for the BadAppleCeleste project. That one contains a C++ program I wrote to convert a video into a file with RunLengthEncoding for White and Black. I reused the RLE file generated from there to reconstruct images that can be rendered to the terminal.</p>
3942

‎build/index.html‎

Lines changed: 131 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@ <h4><a href="./website.html">Personal Website</a></h4>
4646
<li>HTML, CSS, JavaScript</li>
4747
<li>Hosted on GitHub Pages</li>
4848
<li><a href="https://github.com/MistOfJudgement/MistOfJudgement.github.io">Github Repo</a></li>
49-
<li><div class="container">
50-
<iframe src="./index.html" title="Personal Website" ></iframe>
51-
</div></li>
5249
</ul>
50+
<div class="container">
51+
<iframe src="./index.html" title="Personal Website" ></iframe>
52+
</div>
5353
</li>
5454

5555
<li>
@@ -60,140 +60,147 @@ <h4><a href="./bad_apple_terminal.html">Bad Apple in Terminal</a></h4>
6060
<li>Video-to-ASCII conversion</li>
6161
<li><a href="https://github.com/MistOfJudgement/BadAppleTerminal">GitHub Repo</a></li>
6262
</ul>
63-
</li>
64-
65-
<li>
66-
<h4><a href="./bad_apple_celeste.html">Bad Apple in Celeste</a></h4>
67-
<ul>
68-
<li>C++</li>
69-
<li>Game Engine Modding</li>
70-
<li>Video Processing</li>
71-
<li><a href="https://github.com/MistOfJudgement/BadAppleCeleste">GitHub Repo</a></li>
72-
<li><div class="container"><a href="https://www.youtube.com/watch?v=fIX6B69wnek" target="_blank" rel="noopener noreferrer" class="youtube-thumbnail-link"><figure class="youtube-thumbnail-figure">
73-
<figcaption class="youtube-thumbnail-caption">Watch on YouTube</figcaption>
74-
<img src="https://img.youtube.com/vi/fIX6B69wnek/maxresdefault.jpg" alt="Bad Apple in Celeste Video" width="320" height="180" loading="lazy" class="youtube-thumbnail-img">
75-
</figure></a></div></li>
76-
</ul>
63+
<img src="static/img/bad_apple_terminal.png" alt="Terminal rendering" loading="lazy" width="400" height="250" class="responsive-img" style="max-width: 100%; height: auto;">
7764
</li>
7865

7966
<li>
80-
<h4>Analog Frequency Detector</h4>
67+
<h4><a href="./bad_apple_celeste.html">Bad Apple in Celeste</a></h4>
8168
<ul>
82-
<li>For a high school analog electronics class</li>
83-
<li><div class="container"><a href="https://www.youtube.com/watch?v=t7b9YMaFg1c" target="_blank" rel="noopener noreferrer" class="youtube-thumbnail-link"><figure class="youtube-thumbnail-figure">
84-
<figcaption class="youtube-thumbnail-caption">Watch on YouTube</figcaption>
85-
<img src="https://img.youtube.com/vi/t7b9YMaFg1c/maxresdefault.jpg" alt="Analog Frequency Detector Video" width="320" height="180" loading="lazy" class="youtube-thumbnail-img">
86-
</figure></a></div></li>
87-
</ul>
88-
</li>
89-
90-
<li>
91-
<h4>Web Dev Project</h4>
92-
<ul>
93-
<li>Partial recreation of Keep Talking and Nobody Explodes</li>
94-
<li>HTML, CSS, JavaScript, Custom HTML Elements, SVG</li>
95-
<li><a href="./bombs.html">Play here</a></li>
96-
<li><a href="https://github.com/MistOfJudgement/MistOfJudgement.github.io/blob/main/bombs.html">GitHub Repo</a></li>
97-
</ul>
98-
</li>
99-
100-
<li>
101-
<h4>Android Development</h4>
102-
<ul>
103-
<li>Partial recreation of specific modules from Keep Talking and Nobody Explodes</li>
104-
<li>Android Studio, Java</li>
105-
<li><a href="https://github.com/MistOfJudgement/KTANE">Github Repo</a></li>
106-
</ul>
69+
<li>C++</li>
70+
<li>Game Engine Modding</li>
71+
<li>Video Processing</li>
72+
<li><a href="https://github.com/MistOfJudgement/BadAppleCeleste">GitHub Repo</a></li>
73+
</ul>
74+
<div class="container"><a href="https://www.youtube.com/watch?v=fIX6B69wnek" target="_blank" rel="noopener noreferrer" class="youtube-thumbnail-link"><figure class="youtube-thumbnail-figure">
75+
<figcaption class="youtube-thumbnail-caption">Watch on YouTube</figcaption>
76+
<img src="https://img.youtube.com/vi/fIX6B69wnek/maxresdefault.jpg" alt="Bad Apple in Celeste Video" width="320" height="180" loading="lazy" class="youtube-thumbnail-img">
77+
</figure></a></div>
10778
</li>
10879

10980
<li>
110-
<h4>High School Senior Research</h4>
81+
<h4>Analog Frequency Detector</h4>
11182
<ul>
112-
<li>Teaching an AI to play like a person</li>
113-
<li>Python, Tensorflow</li>
114-
<li><a href="https://github.com/MistOfJudgement/SeniorResearch">Github Repo</a></li>
83+
<li>For a high school analog electronics class</li>
11584
</ul>
116-
</li>
117-
118-
<li>
119-
<h4>Arduino Midi Drum</h4>
120-
<ul>
121-
<li>Uses an Arduino Micro and piezoelectric sensors</li>
122-
<li><a href="https://github.com/evankale/ArduinoMidiDrums">Code adapted from this repository</a></li>
123-
<li><div class="container"><a href="https://www.youtube.com/watch?v=G3fzKPomjSg" target="_blank" rel="noopener noreferrer" class="youtube-thumbnail-link"><figure class="youtube-thumbnail-figure">
124-
<figcaption class="youtube-thumbnail-caption">Watch on YouTube</figcaption>
125-
<img src="https://img.youtube.com/vi/G3fzKPomjSg/maxresdefault.jpg" alt="Arduino Midi Drum Video" width="320" height="180" loading="lazy" class="youtube-thumbnail-img">
126-
</figure></a></div></li>
127-
</ul>
128-
</li>
129-
130-
<li>
131-
<h4>Python Text to Speech</h4>
132-
<ul>
133-
<li>For when I didn't want to speak in voice chat</li>
134-
<li>Python</li>
135-
<li><a href="https://github.com/MistOfJudgement/SpeechStuff">Github Repo</a></li>
136-
</ul>
137-
</li>
138-
139-
<li>
140-
<h4>Video Games</h4>
141-
<ul>
142-
<li>Games I made, typically within a short timeframe</li>
143-
<li><a href="https://mistofjudgement.itch.io/">Itch.io Page</a></li>
144-
</ul>
85+
<div class="container"><a href="https://www.youtube.com/watch?v=t7b9YMaFg1c" target="_blank" rel="noopener noreferrer" class="youtube-thumbnail-link"><figure class="youtube-thumbnail-figure">
86+
<figcaption class="youtube-thumbnail-caption">Watch on YouTube</figcaption>
87+
<img src="https://img.youtube.com/vi/t7b9YMaFg1c/maxresdefault.jpg" alt="Analog Frequency Detector Video" width="320" height="180" loading="lazy" class="youtube-thumbnail-img">
88+
</figure></a></div>
14589
</li>
14690

14791
<li>
148-
<h4>Cirno's Perfect Math Class</h4>
92+
<h4>Web Dev Project</h4>
14993
<ul>
150-
<li>Me trying to work with my own game engine</li>
151-
<li>Typescript</li>
152-
<li>Used Sparen's tutorials as a reference for structures</li>
153-
<li><a href="https://github.com/MistOfJudgement/touhouMath">Github Repo</a></li>
154-
<li><a href="https://mistofjudgement.github.io/touhouMath/">Play Game</a></li>
155-
<li><a href="https://sparen.github.io/ph3tutorials/ph3tutorials.html">Sparen's tutorials</a></li>
94+
<li>Partial recreation of Keep Talking and Nobody Explodes</li>
95+
<li>HTML, CSS, JavaScript, Custom HTML Elements, SVG</li>
96+
<li><a href="static/bombs.html">Play here</a></li>
97+
<li><a href="https://github.com/MistOfJudgement/MistOfJudgement.github.io/blob/main/bombs.html">GitHub Repo</a></li>
15698
</ul>
157-
</li>
158-
159-
<li>
160-
<h4>Projector board</h4>
161-
<ul>
162-
<li>Using a projector like a whiteboard</li>
163-
<li>OpenCV, Python</li>
164-
<li><a href="https://github.com/MistOfJudgement/Projectorboard">Github Repo</a></li>
165-
<li><div class="container"><a href="https://www.youtube.com/watch?v=zuSD_I9mtzo" target="_blank" rel="noopener noreferrer" class="youtube-thumbnail-link"><figure class="youtube-thumbnail-figure">
166-
<figcaption class="youtube-thumbnail-caption">Watch on YouTube</figcaption>
167-
<img src="https://img.youtube.com/vi/zuSD_I9mtzo/maxresdefault.jpg" alt="Projector board Video" width="320" height="180" loading="lazy" class="youtube-thumbnail-img">
168-
</figure></a></div></li>
99+
<img src="static/img/bomb_preview.png" alt="Web Dev Project Screenshot" loading="lazy" width="400" height="250" class="responsive-img" style="max-width: 100%; height: auto;">
100+
</li>
101+
102+
<li>
103+
<h4>Android Development</h4>
104+
<ul>
105+
<li>Partial recreation of specific modules from Keep Talking and Nobody Explodes</li>
106+
<li>Android Studio, Java</li>
107+
<li><a href="https://github.com/MistOfJudgement/KTANE">Github Repo</a></li>
169108
</ul>
109+
170110
</li>
171-
</ul>
172-
</section>
173-
174-
</main>
175-
176-
<footer>
177-
<div id="footer">
178-
<button onclick="toggleCSS()">Toggle CSS</button>
179-
</div>
180-
<script>
181-
function disableCSSStyle() {
182-
document.styleSheets[0].disabled = true;
183-
}
184-
function enableCSSStyle() {
185-
document.styleSheets[0].disabled = false;
186-
}
187-
function toggleCSS() {
188-
if (document.styleSheets[0].disabled) {
189-
enableCSSStyle();
190-
} else {
191-
disableCSSStyle();
192-
}
193-
}
194-
</script>
195-
</footer>
196-
197-
</body>
198-
199-
</html>
111+
112+
<li>
113+
<h4>High School Senior Research</h4>
114+
<ul>
115+
<li>Teaching an AI to play like a person</li>
116+
<li>Python, Tensorflow</li>
117+
<li><a href="https://github.com/MistOfJudgement/SeniorResearch">Github Repo</a></li>
118+
</ul>
119+
120+
</li>
121+
122+
<li>
123+
<h4>Arduino Midi Drum</h4>
124+
<ul>
125+
<li>Uses an Arduino Micro and piezoelectric sensors</li>
126+
<li><a href="https://github.com/evankale/ArduinoMidiDrums">Code adapted from this repository</a></li>
127+
</ul>
128+
<div class="container"><a href="https://www.youtube.com/watch?v=G3fzKPomjSg" target="_blank" rel="noopener noreferrer" class="youtube-thumbnail-link"><figure class="youtube-thumbnail-figure">
129+
<figcaption class="youtube-thumbnail-caption">Watch on YouTube</figcaption>
130+
<img src="https://img.youtube.com/vi/G3fzKPomjSg/maxresdefault.jpg" alt="Arduino Midi Drum Video" width="320" height="180" loading="lazy" class="youtube-thumbnail-img">
131+
</figure></a></div>
132+
</li>
133+
134+
<li>
135+
<h4>Python Text to Speech</h4>
136+
<ul>
137+
<li>For when I didn't want to speak in voice chat</li>
138+
<li>Python</li>
139+
<li><a href="https://github.com/MistOfJudgement/SpeechStuff">Github Repo</a></li>
140+
</ul>
141+
142+
</li>
143+
144+
<li>
145+
<h4>Video Games</h4>
146+
<ul>
147+
<li>Games I made, typically within a short timeframe</li>
148+
<li><a href="https://mistofjudgement.itch.io/">Itch.io Page</a></li>
149+
</ul>
150+
151+
</li>
152+
153+
<li>
154+
<h4>Cirno's Perfect Math Class</h4>
155+
<ul>
156+
<li>Me trying to work with my own game engine</li>
157+
<li>Typescript</li>
158+
<li>Used Sparen's tutorials as a reference for structures</li>
159+
<li><a href="https://github.com/MistOfJudgement/touhouMath">Github Repo</a></li>
160+
<li><a href="https://mistofjudgement.github.io/touhouMath/">Play Game</a></li>
161+
<li><a href="https://sparen.github.io/ph3tutorials/ph3tutorials.html">Sparen's tutorials</a></li>
162+
</ul>
163+
<img src="static/img/cirno_preview.png" alt="Cirno's Perfect Math Class Screenshot" loading="lazy" width="400" height="250" class="responsive-img" style="max-width: 100%; height: auto;">
164+
</li>
165+
166+
<li>
167+
<h4>Projector board</h4>
168+
<ul>
169+
<li>Using a projector like a whiteboard</li>
170+
<li>OpenCV, Python</li>
171+
<li><a href="https://github.com/MistOfJudgement/Projectorboard">Github Repo</a></li>
172+
</ul>
173+
<div class="container"><a href="https://www.youtube.com/watch?v=zuSD_I9mtzo" target="_blank" rel="noopener noreferrer" class="youtube-thumbnail-link"><figure class="youtube-thumbnail-figure">
174+
<figcaption class="youtube-thumbnail-caption">Watch on YouTube</figcaption>
175+
<img src="https://img.youtube.com/vi/zuSD_I9mtzo/maxresdefault.jpg" alt="Projector board Video" width="320" height="180" loading="lazy" class="youtube-thumbnail-img">
176+
</figure></a></div>
177+
</li>
178+
</ul>
179+
</section>
180+
181+
</main>
182+
183+
<footer>
184+
<div id="footer">
185+
<button onclick="toggleCSS()">Toggle CSS</button>
186+
</div>
187+
<script>
188+
function disableCSSStyle() {
189+
document.styleSheets[0].disabled = true;
190+
}
191+
function enableCSSStyle() {
192+
document.styleSheets[0].disabled = false;
193+
}
194+
function toggleCSS() {
195+
if (document.styleSheets[0].disabled) {
196+
enableCSSStyle();
197+
} else {
198+
disableCSSStyle();
199+
}
200+
}
201+
</script>
202+
</footer>
203+
204+
</body>
205+
206+
</html>

0 commit comments

Comments
 (0)