Lennon Stolk - Code Snippets
Neon flower shader
Deze GLSL-shader, die ik "Neon flower shader" heb genoemd, maakt een patroon dat constant in beweging is dankzij de tijdsvariabele (iTime). Het gebruikt coördinaten om afstanden en hoeken te berekenen en voegt golvende vervormingen toe om een wervelend effect te krijgen.
De kleuren passen zich aan de beweging aan, wat een smooth blauw-wit patroon oplevert dat continu verandert.
Je kunt de shader bekijken op ShaderToy.
Ik heb deze gemaakt om te oefenen met shadertalen en meer grip te krijgen op realtime animaties en shaders in Unity.
Wave function collapse
Deze code is een implementatie van het Wave Function Collapse (WFC)-algoritme,
dat vaak wordt gebruikt voor procedurële generatie van patronen of kaarten. Het werkt door een
raster van tiles te vullen op basis van vooraf gedefinieerde regels. Elke tile begint met
meerdere mogelijke opties, en deze worden tijdens het proces gereduceerd totdat elke tile een enkele optie heeft.
Dit gebeurt door telkens de tegel met de minste mogelijkheden te kiezen, een definitieve waarde toe te wijzen,
en vervolgens de opties van naburige tiles te beperken op basis van de gekozen waarde.
Dit proces herhaalt zich totdat het raster volledig is ingevuld.
Ik heb deze code zelf geschreven zonder een tutorial te volgen, dus de implementatie
kan afwijken van hoe anderen het aanpakken. Mijn versie van het Wave Function Collapse
algoritme is overigens een webpagina gemaakt met JavaScript
die een kaart voor een pixel art game genereert. Wanneer je op de knop met het pijltje klikt laad je de regels in en maak je een nieuwe kaart.
Dijkstra's algoritme
Ik heb deze code geschreven om Dijkstra’s algoritme te begrijpen en toe te passen.
Het doel is om de kortste route in een graph te berekenen, bijvoorbeeld van punt A naar punt B.
Het algoritme werkt door vanuit een startpunt stap voor stap de snelste paden naar andere punten te berekenen,
totdat het eindpunt is bereikt. Onderweg houdt het ook het pad bij,
zodat de volledige route uiteindelijk terug te vinden is.
Bij het maken van deze code heb ik wel een video bekeken over hoe het algoritme werkt,
maar ik heb alles zelf geschreven zonder iets letterlijk over te nemen.
Het was vooral een oefening om het idee in mijn eigen woorden (of in dit geval, code)
om te zetten en beter te begrijpen hoe alles in elkaar steekt.
Dat betekent wel dat het hier en daar kan afwijken van hoe anderen het misschien zouden schrijven,
maar dat maakt het juist een beetje eigen.
A* algoritme
A* is een snellere versie van Dijkstra’s algoritme, dat een "heuristic" voorspelling gebruikt om de
kortste route in een graph te vinden. De heuristic schat de afstand van elk punt naar het eindpunt,
wat ervoor zorgt dat het algoritme efficiënter werkt.
Deze implementatie lijkt sterk op mijn Dijkstra-code, omdat ik die als basis heb gebruikt.
Het grootste verschil zit in de toevoeging van de heuristic-berekening, die gebruikmaakt van de coördinaten van de nodes.
Dit vond ik wel een leuk algoritme om te schrijven.
Deflect bullets
Deze methode DeflectBullets zorgt ervoor dat vijandelijke kogels worden afgebogen wanneer een schild actief is.
Het controleert de afstand tussen de kogels en het schild. Als een kogel binnen de straal van het schild komt,
wordt de richting aangepast aan de normale vector van het raakpunt.
De snelheid en het type van de kogel worden daarna gewijzigd. Dit is geschreven in C# en gebruikt voor Solar Hell.
Shader loader
De klasse PlanetShader beheert een shader die gebruikt wordt voor het renderen van planeten in Solar Hell.
Het maakt gebruik van aanpasbare shaderinstellingen en ondersteunt camera-interactie. Hier is een korte uitleg:
Shaderconfiguratie Bij het aanmaken van een PlanetShader wordt een specifieke shader geladen, en de instellingen (zoals floats, integers en vectoren) worden toegepast via een instellingenbeheerder.
Schalen en resolutie: De schaal en schermresolutie worden ingesteld zodat de shader correct weergegeven wordt, afhankelijk van de viewport.
Rendering: Tijdens het tekenen wordt een SpriteBatch gestart met de shader als effect. Indien nodig worden dynamische parameters, zoals tijd en camera-instellingen, aangepast.
Camera-interactie: De positie van de camera wordt verwerkt om het effect van beweging op de planeetweergave te simuleren.
Technologie: C#, MonoGame, en shaders (HLSL).
Parallax effect background
De methode UpdateCameraPosition past de positie van meerdere achtergronden aan op basis van de camerabeweging.
De achtergrondlagen bewegen met verschillende snelheden, afhankelijk van hun diepte, om een parallax-effect te creëren.
De marges worden berekend met de afbeeldingsgrootte en de schermgrootte, zodat de achtergronden correct worden uitgelijnd.
Geschreven in C# en bedoeld voor een 2D-gameomgeving. Deze code is gebruikt om de achtergrond een dynamisch gevoel te geven in Solar Hell.
Wavy text effect
De methode WavyTextEffect past een golvend effect toe op de tekst van een label door de verticale positie van elk karakter te verplaatsen op basis van een sinusgolf.
Het effect maakt gebruik van de tijd (Time.time), frequentie en amplitude om de beweging te berekenen.
Elke iteratie van de coroutine past de offset van de karakters aan en update de tekst van het label.
Het resultaat is een doorlopende animatie van de tekst, wat vaak gebruikt wordt voor visuele effecten in bijvoorbeeld gebruikersinterfaces.
De code is geschreven in C# en gebruikt in Unity voor World Eater.
Dialog system
In de CallDialog-klasse laat ik zien hoe ik een flexibele en herbruikbare dialoogstructuur heb opgebouwd door
verschillende ondersteunende klassen te schrijven. Al het noodzakelijke, zoals dialoogopties, visuele effecten
en geluidseffecten, wordt mogelijk gemaakt door de klassen die ik zelf heb ontwikkeld. Door deze klassen te creëren,
heb ik een systeem opgebouwd waarin ik de dialooglogica en -opties eenvoudig kan definiëren en uitbreiden,
zonder me bezig te hoeven houden met herhalende code of ingewikkelde implementatiedetails.
Met de BaseDialog-klasse kan ik snel nieuwe dialoogvensters opzetten door simpelweg de juiste parameters in te vullen.
Dit zorgt voor een efficiëntere ontwikkelingservaring, omdat ik de complexiteit van de onderliggende logica heb
abstract gemaakt. Ik kan nieuwe dialoogscenario's creëren door alleen tekst, keuzes, effecten en geluiden te definiëren,
terwijl de infrastructuur die ik heb gebouwd de rest van de dialoogafhandeling automatisch regelt.
Deze code is geschreven in C# en gemaakt voor World Eater.
Log in
De LogIn functie in de AuthService struct wordt gebruikt om een gebruiker in te loggen.
Het accepteert de email en password, haalt de gebruikersgegevens op, en vergelijkt
het wachtwoord met de opgeslagen hash via bcrypt. Als de wachtwoorden overeenkomen,
wordt een JWT-token gegenereerd met de gebruikers-ID als claim en ondertekend met een geheime sleutel.
Dit token wordt vervolgens in een HTTP-only cookie opgeslagen voor beveiligde toegang.
De functie retourneert het token of een fout bij een mislukking.
De technologieën die gebruikt worden zijn Go, Fiber, bcrypt, en JWT.
Add playlist entry
De functie addPlaylistEntry voegt een nummer toe aan een afspeellijst in de database en retourneert de
details van het toegevoegde nummer. Eerst wordt de gebruikers-ID opgehaald op basis van de gebruikersnaam
door de functie getIdFromUserName aan te roepen. Vervolgens wordt er een nieuwe invoer toegevoegd aan de tabel
fspot_playlist_entries met de playlistId, userId, en songId. Daarna wordt een tweede SQL-query uitgevoerd
om de gegevens van het net toegevoegde nummer op te halen, inclusief de naam, artiest, album en de bron van het nummer.
Ten slotte wordt het resultaat als een JSON-gecodeerd object teruggestuurd naar de client.
De technologieën die in deze functie worden gebruikt zijn PHP voor de server-side scripting,
SQL voor de database-interacties via PDO, en JSON om gestructureerde gegevens naar de client te sturen.
De functie maakt het mogelijk om eenvoudig een nummer toe te voegen aan een afspeellijst en de details
van dat nummer op te halen en terug te sturen.
Tab switcher
De EditorMenuNavigation-component, geschreven in React, toont een navigatiemenu voor het bewerken van een avatar.
Het maakt gebruik van React hooks, zoals useState, om de geselecteerde tab op te slaan. Elke tab heeft een knop die,
wanneer geselecteerd, de naam van de tab doorgeeft aan de oudercomponent via de passSelectedTab-prop.
De geselecteerde tab bepaalt welke knop visueel geselecteerd is. Als een afbeelding is opgegeven,
wordt deze naast de naam van de tab weergegeven. Bij het klikken wordt de geselecteerde tab bijgewerkt
en doorgestuurd naar de oudercomponent. De stijlen worden toegepast via een aparte CSS-bestand (editor-menu-navigation.css).
