deadlime: terminal velocity

Húsz éves volt a blog tavaly, de csak most jutottam el idáig

2025. április 7.

Nyolc év. Nagyjából nyolc éve nem változott nagyobb mértékben az oldal kinézete. Voltak itt-ott kisebb átalakítások, de semmi komoly. 2024-re terveztem egy nagyobb ráncfelvarrást az oldal 20 éves évfordulójának alkalmából, de nem jött az ihlet. Készült egy fejléc kép még 2024 januárjában, de nem voltam vele elégedett. Aztán szépen gyorsan eltelt egy év és itt is vagyunk.

A háttérkép

Amikor a háttérnek nekikezdtem, akkor még nem tudtam, hogy a többi rész is el fog készülni, csak gondoltam vicces lenne random, programozásban használatos karaktereket odadobálni. Esetleg megszínezni őket úgy, mintha kódkiemelés lenne. Ez utóbbit végül elvetettem, hogy ne vonja el annyira a figyelmet a tartalomról. Helyette először random szürke árnyalatokat próbáltam ki, de túl random volt, úgyhogy a végül a Perlin-zaj lett az alapja a karakterek színének.

Egy eldobható kis PHP scripttel generáltam ki a megfelelő HTML-t, amit aztán lementettem képként, abból lett a háttérkép. A sötét téma változata pedig csak invertálva lett.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
html, body {
  font: 24px 'DejaVu Sans Mono';
  margin: 0;
  padding: 0;
}
.bg {
  background-color: #e6e6e6;
  color: #000;
  width: 1920px;
}
.char {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 60px;
}
  </style>
</head>
<body>
<div class="bg">
<!-- PHP script helye -->
</div>
</body>
</html>

Az oldal kódszínezése nem kezeli jól a HTML-ben lévő PHP kódot, úgyhogy inkább különszedtem őket.

<?php
$chars = '\'"+!%/=(),.-?:_$\|<>#&@{}[]';

for ($y = 0; $y < 32; ++$y) {
  for ($x = 0; $x < 32; ++$x) {
    $p = round(20 + perlin($x*0.25, $y*0.25) * 80, 2);
    print('<div class="char" style="filter: opacity(' . $p . '%);">');
    print(htmlspecialchars($chars[mt_rand(0, strlen($chars) - 1)]));
    print('</div>');
  }
}
?>

A perlin() függvény PHP-s implementációját az AI-ra bíztam, nagyjából jól működött, de néha negatív értékeket adott vissza, annak ellenére, hogy 0 és 1 között kellett volna lennie a válasznak.

A fejléc kép

Az új alcím már egész régóta megvolt, tetszett a kis szójáték a végsebesség és a terminál sebessége között. Ez nagyjából meghatározta, hogy milyen irányba szeretnék elindulni az új fejléc képpel. Valami terminálra emlékeztető, valami sebességgel kapcsolatos, és természetesen legyen rajta lime.

Az alapját, a buborékos-lime szeletes képet az AI szolgáltatta. Általában ingyenes stock fotókat szoktam vadászni, de nem jött most olyan szembe, ami megihletett volna.

Kerültek rá CRT scanline-ok, ami talán ad egy kis terminálos érzetet. Az alcím is egy root terminál prompt, a végén kurzorral (# terminal velocity_). A vízszintes glitch-vonalak pedig a vizuális érdkesség mellett talán sikeresen keltik a mozgás, a sebesség érzetét. De nem mennék műelemzési mélységekbe. :)

Az elkészítéshez a Krita nevű programot használtam. Berozsdásodott Photoshop ismereteimmel is egész otthonosan mozogtam benne, nem volt olyan életidegen, mint amilyennek a GIMP-et szoktam érezni.

És a többi

A többi pedig nem változott. Nagyjából elégedett vagyok a szövegek elrendezésével, a betűméretekkel, a színekkel. Két verzió közti apróbb módosítások általában ezen a téren történnek. Egy kis padding javítás itt, egy kis betűméret igazítás ott, vagy épp a dark mode lefejlesztése.

A blog motor se változott különösebben, még mindig a saját házibarkács statikus site generátorom generálja a HTML-t az oldalhoz. Talán csak a kódszínezés lett lecserélve kliens oldaliról szerver oldalira, hogy ne kelljen JavaScript az oldal működéséhez.

Szóval nagyjából ennyi. További kellemes olvasást az elkövetkező 20 évre is.

deadlime