Sam McBroom

Configure it? I barely node it!

2026-04-04T00:00:00+00:00

It works on my machine</h2>
For a while now, I've wanted to set up a small home server</a> (more commonly referred to as homelabs) to run some basic services and give me a place to play around with a personal Kubernetes</a> cluster. I decided to start by setting up a simple single-node cluster using a VM</a> running on one machine. I've flip-flopped back-and-forth on getting a machine, because I really only wanted to host some Minecraft servers and maybe my website instead of using GitHub pages. However, recently I learned about Codeberg</a> and love their mission. I decided to migrate my repos from GitHub to Codeberg, but ran into some issues with their provided runner sizes for CI jobs. I use Nix</a> for my projects, and while I love many aspects about Nix, it can lead to heavy/slow initial installations when using `flake</code> dependencies. Codeberg urges users to use their provided runners responsibly, and in that spirit I decided this would be a great time to finally set up a homelab and also use it as a self-hosted runner. So I purchased a machine and finally committed to the project!</p>`

Network configuration</h2>
I wanted to provide some basic network security for my home network. Disclaimer: I am not</em> a network security professional and am still learning more about best practices, so this isn't meant to be a definitive guide!</strong></p>

First, I created a separate VLAN</a> for future homelab nodes. I set up the homelab VLAN to be isolated from any other VLAN networks using firewall rules to block network traffic from crossing VLAN boundaries. I then created a new Wi-Fi SSID for machines on the network (for now, I plan to have machines use Wi-Fi instead of Ethernet).</p>
Because I wanted to manage my machines remotely from devices on my main VLAN, I needed to allow some traffic communication between the VLANs. I was able to add a firewall rule that would allow devices on the homelab VLAN to respond to TCP requests initiated from the main VLAN. This allowed connectivity for VNC, SSH, etc., without allowing devices on the homelab VLAN to initiate connections to devices in other VLANs.</p>
With these basic security firewalls in place, I was ready to set up my first (and for now, only) node!</p>
Conditioning</h2>
Next, it was time to set up my machine so that I could manage it remotely and reduce the amount of processes running to a bare minimum to minimize idle energy usage. I purchased a refurbished Mac mini due to the hardware offering a good balance of power, energy efficiency, and cost. Unfortunately, the default macOS software isn't designed to run headless/as a dedicated server, so there were a lot of settings I needed to configure to turn off unnecessary features. Once M4 chips are supported, I would love to install Asahi Linux</a> instead of macOS.</p>
The first step was to boot the machine, create a user, connect the device to the homelab VLAN, and enable Screen Sharing. Setting up the Mac mini required using an external display and keyboard initially, so I wanted to do as little as possible and just get the machine to a point where I could manage it via the Screen Sharing app from my macOS laptop. While I expected that just using a keyboard would be sufficient to get through the initial setup, I was annoyed to find that tabbing through fields in the setup forms did not always work as expected. Notably, on the form prompting to sign in with an Apple Account, I was unable to skip the sign in by tabbing through. I ended up needing to bring up the accessibility options and enable Mouse Keys</a> on the keyboard.</p>
Aside: I do not normally interact with macOS this way, so maybe I was just unaware of other ways to do keyboard-only navigation, but overall I was really disappointed in the default keyboard-only accessibility on the system. Trying to navigate through System Settings without Mouse Keys almost always had issues, where I just couldn't navigate to some fields and others wouldn't let me tab out.</p>
Anyways, I finally enabled Screen Sharing with the following configuration:</p>
General > Sharing > Screen Sharing (i)</span></span>
</span>
- Screen Sharing: Enabled</span></span>
- Anyone may request permission to control screen: disabled</span></span>
- VNC viewers may control screen with password: disabled</span></span>
- Allow access for: Only these users</span></span>
	- <List only contains user created during setup></span></span></code></pre>
It was difficult to find information about what some of the options would do if enabled or disabled. I discovered that Anyone may request permission to control screen</code> being enabled would allow someone to use the credentials of any Mac mini user to log in, but would also require approving requests from the Mac mini. Neither of these things are desirable to me, so I left that disabled. Enabling the VNC viewers may control screen with password</code> would effectively allow logins through a "guest" account with the password specified. However, logging in using the credentials of the allowed users would also work. Again, I left this disabled as I just planned to log in with the user credentials.</p>
Before continuing Mac mini configuration remotely, I configured my router to give the Mac mini MAC address</a> a fixed IP</a> so I could consistently connect to it in the future. I added a connection using the fixed IP in the Screen Sharing app on my laptop. Finally, I logged in as the user I created, unplugged the device from the keyboard and monitor, and finished setting up all the options.</p>
Lightning round: settings!</h2>
To be honest, the rest of this post is not super interesting and I'm mostly including the full-ish (I might have missed some) list of options I changed as a reference in case I need to wipe the machine and set it up again. Generally, the options I set focused on a few goals: making sure I could log back in remotely even after the machine restarted (which required disabling FileVault and setting some other options) and minimizing unnecessary background processes to improve power efficiency and performance. Thank you so much for reading!</p>
Sign in with your Apple Account</span></span>
</span>
- <Not signed in></span></span></code></pre>Wi-Fi</span></span>
</span>
- Wi-Fi: enabled</span></span>
- <Connected to homelab SSID></span></span></code></pre>Bluetooth</span></span>
</span>
- Bluetooth: disabled</span></span></code></pre>Network > Firewall</span></span>
</span>
- Firewall: enabled</span></span>
</span>
> Options...</span></span>
</span>
- Block all incoming connections: disabled</span></span>
- Automatically allow built-in software to receive incoming connections: enabled</span></span>
- Automatically allow downloaded signed software to receive incoming connections: enabled</span></span>
- Enable stealth mode: enabled</span></span>
- Process list</span></span>
	- screensharingd.bundle: Allow incoming connections</span></span>
	- QEMULauncher: Allow incoming connections</span></span></code></pre>Energy</span></span>
</span>
- Prevent automatic sleeping when the display is off: enabled</span></span>
- Wake for network access: enabled</span></span>
- Start up automatically after a power failure: enabled</span></span></code></pre>General > AirDrop & Handoff</span></span>
</span>
- Allow Handoff between this Mac and your iCloud devices: disabled</span></span>
- AirDrop: No One</span></span>
- AirPlay Receiver: disabled</span></span></code></pre>General > AutoFill & Passwords</span></span>
</span>
- AutoFill Passwords and Passkeys: disabled</span></span>
</span>
Verification codes</span></span>
</span>
- Delete after use: enabled</span></span></code></pre>General > Date & Time</span></span>
</span>
- Set time and date automatically: enabled</span></span>
- Set time zone automatically using your current location: true</span></span></code></pre>General > Language & Region</span></span>
</span>
- Live Text: disabled</span></span></code></pre>General > Login Items & Extensions</span></span>
</span>
- Open at Login: <empty list></span></span>
</span>
Extensions</span></span>
</span>
- <All extensions for all apps disabled></span></span></code></pre>Appearance</span></span>
</span>
- Appearance: Auto</span></span>
- Icon & widget style: Dark (Auto)</span></span></code></pre>Apple Intelligence & Siri</span></span>
</span>
- Apple Intelligence: disabled</span></span>
</span>
Siri Requests</span></span>
</span>
- Siri: disabled</span></span></code></pre>Desktop & Dock</span></span>
</span>
Dock</span></span>
</span>
- Show suggested and recent apps in Dock: disabled</span></span>
</span>
Widgets</span></span>
</span>
- Show Widgets: <disabled for all options></span></span>
- iPhone Widgets: disabled</span></span>
</span>
Windows</span></span>
</span>
- Drag windows to left or right edge of screen to tile: disabled</span></span>
- Drag windows to menu bar to fill screen: disabled</span></span>
- Hold ⌥ key while dragging windows to tile: disabled</span></span>
- Tiled windows have margins: disabled</span></span>
</span>
Mission Control</span></span>
</span>
- Automatically rearrange Spaces based on most recent use: disabled</span></span>
- When switching to an application, switch to a Space with open windows for the application: disabled</span></span>
- Group windows by application: disabled</span></span>
- Displays have separate Spaces: disabled</span></span>
- Drag windows to top of screen to enter Mission Control: disabled</span></span></code></pre>Displays</span></span>
</span>
- Color profile: Screen Sharing Virtual Display</span></span>
</span>
> Advanced...</span></span>
</span>
Link to Mac or iPad</span></span>
</span>
- Allow your pointer and keyboard to move between any nearby Mac or iPad: disabled</span></span>
</span>
> Night Shift...</span></span>
</span>
- Schedule: Sunset to Sunrise</span></span></code></pre>Menu Bar</span></span>
</span>
- Recent documents, applications, and servers: None</span></span>
</span>
Menu Bar Controls</span></span>
</span>
- <Only Wi-Fi enabled></span></span>
</span>
Allow in the Menu Bar</span></span>
</span>
- SSMenuAgent: enabled</span></span>
- <All other apps disabled></span></span></code></pre>Spotlight</span></span>
</span>
- Show related content: disabled</span></span>
- Help Apple improve Search: disabled</span></span>
</span>
Results from Apps</span></span>
</span>
- <All disabled></span></span>
</span>
Results from System</span></span>
</span>
- <All disabled></span></span>
</span>
Results from Clipboard: disabled</span></span></code></pre>Wallpaper</span></span>
</span>
- Black</span></span>
- Show on all Spaces: enabled</span></span>
</span>
> Screen Saver...</span></span>
</span>
- Start Screen Saver...: Never</span></span></code></pre>Notifications</span></span>
</span>
Notification Center</span></span>
</span>
- Show previews: Never</span></span>
- Show notifications</span></span>
	- when display is sleeping: disabled</span></span>
	- when screen is locked: disabled</span></span>
	- when mirroring or sharing the display: Notifications Off</span></span>
</span>
Application Notifications</span></span>
</span>
- <All Off></span></span></code></pre>Sound</span></span>
</span>
Sound Effects</span></span>
</span>
- Play sound on startup: disabled</span></span>
- Play user interface sound effects: disabled</span></span>
- Play feedback when volume is changed: disabled</span></span>
</span>
Output & Input</span></span>
</span>
- Output volume: Mute</span></span></code></pre>Lock Screen</span></span>
</span>
- Turn display off when inactive: For 10 minutes</span></span>
- Require password after screen saver begins or display is turned off: Never</span></span></code></pre>Privacy & Security</span></span>
</span>
> Location Services</span></span>
</span>
- Location Services: enabled</span></span>
- Siri: disabled</span></span>
- > System Services > Details...</span></span>
	- Alerts & Shortcuts Automations: disabled</span></span>
	- Suggestions & Search: disabled</span></span>
	- Setting time zone: enabled</span></span>
	- System customization: enabled</span></span>
	- Signification locations & routes: disabled</span></span>
	- Find My Mac: enabled</span></span>
	- Home: disabled</span></span>
	- Networking and wireless: enabled</span></span>
	- Mac Analytics: disabled</span></span>
	- Show location in Control Center when System Services request your location: disabled</span></span>
</span>
> <Data, like Calendars, Contacts, etc.></span></span>
</span>
- <All set to None></span></span>
</span>
> <System capabilities, like Accessibility, App Management, etc.></span></span>
</span>
- <All set to 0></span></span>
</span>
> Analytics & Improvements</span></span>
</span>
- Share Mac Analytics: disabled</span></span>
- Improve Siri & Dictation: disabled</span></span>
- Improve Assistive Voice Features: disabled</span></span>
- Share with app developers: disabled</span></span>
</span>
> Apple Intelligence Report</span></span>
</span>
- Report duration: Off</span></span>
</span>
Security</span></span>
</span>
- Allow applications from: App Store & Known Developers</span></span>
</span>
> FileVault</span></span>
</span>
- FileValut: disabled</span></span></code></pre>Login Password</span></span>
</span>
- Automatically log in after a restart: enabled</span></span></code></pre>Users & Groups</span></span>
</span>
- Automatically log in as: <user created during setup></span></span></code></pre>
Wow, you made it all the way down here!? I guess you should get some kind of reward. How about a fun fact! Did you know, back in 2012 Voyager I</a> crossed the heliopause and became the first human-made object to leave the solar system and enter interstellar space? Pretty neat stuff!</p>



ASCII art and single sources of truth
2026-02-08T00:00:00+00:00
Tiny art</h2>
Recently, I was inspired to try and make a new homepage artwork for my website. I aim for my site to be lightweight, but I was loading in a pretty large image for my homepage. I do use optimizations like decoding="async"</code> to load images asynchronously and loading="lazy"</code> to ensure images are only loaded when they need to be viewed, but it still felt like the image was adding a lot of weight to my landing page without adding much value.</p>
I've known about sites like The 512KB Club</a>, which encourage web developers to focus on cutting bloat and improving performance, and wanted to see if I could create a cool piece of art while also keeping its size as small as possible. Originally, I planned to create some pixel art as it's one of my favorite art styles, but while thinking about what to make I had another idea: I could make some ASCII art</a>!</p>
ASCII-use me?</h2>
Broadly, ASCII art is a term used to refer to art made with text. Technically, ASCII</a> only includes a specific set of printable characters, but nowadays I would label any text-based art as ASCII art. ASCII art is pretty similar to pixel art. It usually uses a small canvas with a limited "pallet" of characters, and commonly resembles 1-bit (2 color) pixel art due to a lack of color (though depending on the program displaying the art, it can be colored as well). Because it can just be text, an ASCII artwork would also be one of the smallest visuals I could load on my homepage.</p>
I'd never attempted to create any ASCII art beyond simple emoticons and a few small animations for some text-based games. I love mountain scapes. My favorite mountain (for all time and forever <3</code>) is Mt. Hood, so of course I had to draw? (paint? type?) it! I started by finding some reference images to use. Personally, I found it easiest to begin by making the outline and then filling in with shading. I chose to stick with the traditional ASCII pallet, mainly because larger character sets felt overwhelming and were hard to type due to not having dedicated keyboard keys. Overall, I was really happy with how it turned out!</p>
Probably overthinking things</h2>
My main concern with using ASCII art for my homepage was the potential for text wrapping on small width displays. This got me thinking about what fundamentally "defined" my ASCII art. As a software engineer, this issue felt very similar to single source of truth (SSOT)</a> problems I encounter when architecting systems. Should I accept that the ASCII art might not look correct if a display is too thin and just treat the SSOT as text, or should the SSOT be the way the art looked to me, using a particular monospaced font on my display?</p>
I gave this some thought, and decided that one of the aspects I love about ASCII art is</em> that it is just text and can be easily copied and displayed anywhere text input is supported. However, for my homepage I really wanted to prevent the art from "breaking" as that could be confusing to visitors. Unfortunately, there is no way currently to scale text fonts dynamically to fit their container using just CSS, though hopefully this will change soon. I could have a number of pre-defined CSS media queries to change the font size or use JavaScript to dynamically recalculate the font size based on the window width, but neither of these options felt "clean" to me (and I want to avoid requiring JavaScript for my website). I tried using SVG text elements</a>, which did scale with the SVG (yay! :)</code>), but required hardcoding vertical spacing between lines (boo :(</code>). Because I had to manually set the pixel spacing between lines, I was concerned this might break the look of the art depending on which monospace font was used to render the text. My website does not include or require a specific font, and instead simply directs the browser to use the system monospace font.</p>
Ultimately, I decided to sacrifice the extremely small size and convert the text to SVG paths and simply treat the artwork as an SVG. This ensures the artwork will look consistent regardless of rendering variables like screen width or font. The only downside was that users wouldn't be able to copy the text to use it elsewhere. I mitigated this by sharing both the plaintext and SVG versions on my Art page. The best of both worlds! I still consider the plaintext version to be the "real" source of truth, but making both available is a nice convenience.</p>
Final thoughts</h2>
I hope you enjoyed reading this! While maybe not the most riveting of posts, I found the question about what fundamentally defines an ASCII art piece (and digital art in general) interesting to mull over. I'm sure every artist has their own thoughts, and I believe the answer is unique to each individual. ASCII was definitely a fun style to work with and I encourage everyone to give it a try, even if it's just making some fun emoticons \o/</code>!</p>


Look at that view!
2022-05-03T00:00:00+00:00
Color me impressed</h2>
After the last devlog, all I needed to do to finish up an initial version of the mountain scape generator was to tweak the generation parameters and add a coloring system. I looked at some vector art and loved the look of a bluish haze over the layers of mountains. I wanted to make a flexible system that would allow me to choose between using solid colors or gradients.</p>
//</span> mountains.js</span></span>
if</span> (</span>gradient</span>)</span> {</span></span>
	const</span> gradient</span> =</span> context</span>.</span>createLinearGradient</span>(</span>0</span>,</span> 0</span>,</span> 0</span>,</span> height</span>)</span></span>
	gradient</span>.</span>addColorStop</span>(</span>0</span>,</span> colors</span>[</span>0</span>]</span>)</span></span>
	gradient</span>.</span>addColorStop</span>(</span>1</span>,</span> colors</span>[</span>1</span>]</span>)</span></span>
	context</span>.</span>fillStyle</span> =</span> gradient</span></span>
}</span> else</span> {</span></span>
	context</span>.</span>fillStyle</span> =</span> colors</span>[</span>0</span>]</span></span>
}</span></span></code></pre>
After adding this, I spent a little time tweaking generation parameters and color values and ended up with some pretty nice views 🏔️!</p>
</a></p>
Feel free to check out the code</a> or play around with the generator</a> and find your favorite mountain scape!</p>


Rough around the edges
2022-05-02T00:00:00+00:00
Fractals all around</h2>
Yes, that's a Frozen reference ❄️. While reading about different kinds of noise, I learned about a couple different options I could implement to achieve landscape-like images. The first was to add multiple octaves</a> of Perlin noise to achieve rougher textures, creating a form of fractal noise</a>. Other options were to use value noise</a> or Simplex noise</a> instead of Perlin noise. I chose to implement the fractal noise first to see what the results would look like.</p>
So at this point you're probably wondering "What the heck does fractal noise mean? How to octaves play into that? Where are the pretty pictures??". Basically, for each octave, the frequency we pass into our perlin()</code> function is doubled and the amplitude of the result is halved. Luckily this requires zero changes to our originial Perlin noise generator, and we just have to add a wrapper function to generate Perlin nose for each octave and sum across all the values.</p>
//</span> mountains.js</span></span>
function</span> fractal</span>(</span>octaves</span>,</span> wavelength</span>,</span> gradients</span>)</span> {</span></span>
	let</span> noise</span> =</span> perlin</span>(</span>wavelength</span>)</span></span>
</span>
	for</span> (</span>let</span> i</span> =</span> 1</span>;</span> i</span> <</span> octaves</span>;</span> i</span>++</span>)</span> {</span></span>
		const</span> factor</span> =</span> Math</span>.</span>pow</span>(</span>2</span>,</span> i</span>)</span></span>
		const</span> octaveNoise</span> =</span> perlin</span>(</span>wavelength</span> /</span> factor</span>)</span></span>
		noise</span> =</span> noise</span>.</span>map</span>(</span>(</span>height</span>,</span> index</span>)</span> =></span> height</span> +</span> octaveNoise</span>[</span>index</span>]</span> /</span> factor</span>)</span></span>
	}</span></span>
</span>
	return</span> noise</span></span>
}</span></span></code></pre>
Because each octave results in larger gradient arrays and smaller amplitudes, the more octaves I use the rougher the terrain generated. I found that 8 octaves produced some nice rocky terrain.</p>
Scaling the mountain</h2>
The values this new fractal()</code> returns an array of noise with generally very small values, which I think scale later for plotting on my graph.</p>
//</span> mountains.js</span></span>
function</span> scaleY</span>(</span>y</span>,</span> scale</span>,</span> shift</span>)</span> {</span></span>
	return</span> (</span>y</span> +</span> 1</span>)</span> *</span> scale</span> +</span> shift</span></span>
}</span></span></code></pre>
After getting the fractal noise working, I adjusted the scale</code> and shift</code> values so they are both relative to the height of the canvas. I also adjusted the way the values were calculated to depend on easily understandable changes.</p>
//</span> mountains.js</span></span>
const</span> flatnessFactor</span> =</span> 2</span> //</span> Larger is flatter</span></span>
const</span> scale</span> =</span> height</span> /</span> flatnessFactor</span></span>
const</span> heightSum</span> =</span> heights</span>.</span>reduce</span>(</span>(</span>first</span>,</span> second</span>)</span> =></span> first</span> +</span> second</span>)</span> +</span> heights</span>.</span>length</span></span>
const</span> averageHeight</span> =</span>  heightSum</span> /</span> heights</span>.</span>length</span> *</span> scale</span></span>
const</span> heightFactor</span> =</span> 0</span>.</span>5</span> //</span> Between 0 and 1, represents where the average height of the noise will be relative to the height</span></span>
const</span> shift</span> =</span> (</span>-</span>height</span> *</span> heightFactor</span>)</span> +</span> averageHeight</span></span></code></pre>
This system will make it easy for me to adjust the verticality and position of the mountains.</p>
The result were actual mountain-y looking mountains 🏔️!</p>
</a></p>
Blooper reel</h2>
While working on this new algorithm, I accidentally implemented it improperly (by generating a larger gradients array once and using that for all octaves) and produced some very fractal-y looking mountains.</p>
</a></p>
Honestly though, I was really happy with how the fractal noise turned out and wanted to try move forward with making some artworks before adding in the erosion system (who knows, maybe it won't be necessary?).</p>


Steep learning slope
2022-05-01T00:00:00+00:00
Prologue</h2>
Ever since I wrote my Double Pendulum</a> project, I've loved generative art. One idea I worked on a year ago was to generatively build 2D mountain scape art. I originally thought I could create realistic mountains from random combinations of various sine and cosine functions. I implemented some basic functions for generating foreground, mid ground, and background mountain ranges, but the result always ended up looking too smooth. I attempted to fix this by connecting spaced-out points along the generated curves with straight lines instead of drawing the continuous curve. This helped a little, but I wouldn't go so far as to say the mountains looked "realistic". I also created a basic "Sun", sky, and lake generator, which all ended up looking very basic and cartoony. Here is an example of one of the super-realistic landscapes generated by my script:</p>
</a></p>
This is where I left the project, since I figured I would need to try another approach and didn't want to start from scratch.</p>
Base camp</h2>
A year later, and I think I'm ready to tackle the challenge! Earlier this year, I watched some videos by Sebastian Lague</a> (love his Coding Adventure series btw) and in one of them, he created some realistic planet terrain by simulating rainfall and erosion. I thought it would be really cool to apply these concepts in a 2D context as a basis for my new mountain scape generator.</p>
I began by implementing a random number generator. In JavaScript, I like to use linear congruential generators</a> (LCGs) because they allow for seed values and are fairly simple to write. Their output is also sufficiently random for most purposes.</p>
//</span> mountains.js</span></span>
let</span> seed</span> =</span> 1</span></span>
</span>
//</span> Returns a random float in the range [0, 1]</span></span>
function</span> randomFloat</span>(</span>)</span> {</span></span>
	const</span> m</span> =</span> 4294967296</span></span>
	const</span> a</span> =</span> 1664525</span></span>
	const</span> c</span> =</span> 1</span></span>
	seed</span> =</span> (</span>a</span> *</span> seed</span> +</span> c</span>)</span> %</span> m</span></span>
	return</span> seed</span> /</span> m</span></span>
}</span></span></code></pre>
For convenience, I also wrote a function for generating a random number in a range of values utilizing my LCG.</p>
//</span> mountains.js</span></span>
</span>
//</span> Returns a random float in the range [min, max]</span></span>
function</span> randomFloatInRange</span>(</span>min</span>,</span> max</span>)</span> {</span></span>
	return</span> randomFloat</span>(</span>)</span> *</span> (</span>max</span> -</span> min</span>)</span> +</span> min</span></span>
}</span></span></code></pre>Beginning the climb</h2>
To start, I needed to build a decent height map generator upon which my "rain 💧" would fall and shape. I decided to use Perlin noise</a>, which took me down a very mathematical rabbit hole. Perlin noise can be generated in any dimensional space, but I needed a 1D implementation for my height map. Following the algorithm detail, I broke my implementation into 3 steps:</p>

Generate the gradient vectors</li>
Find the dot products for each candidate point</li>
Interpolate using those dot product values to find the height for a given candidate point on the x-axis</li>
</ul>
First, I needed to create an n</em>-dimensional grid. In my 1D space, this mean effectively choosing spacing for tick marks along a line. This spacing, or wavelength</code>, determines the frequency of potential peaks produced by the noise. In the 1D space, the process for generating the gradient vectors just requires choosing a random number in the range [-1, 1]</strong> for each tick mark.</p>
//</span> mountains.js</span></span>
function</span> generateGradients</span>(</span>wavelength</span>)</span> {</span></span>
	let</span> gradients</span> =</span> [</span>]</span></span>
	for</span> (</span>let</span> x</span> =</span> 0</span>;</span> x</span> <</span> width</span> +</span> wavelength</span>;</span> x</span> +=</span> wavelength</span>)</span> {</span></span>
		gradients</span>.</span>push</span>(</span>randomFloatInRange</span>(</span>-</span>1</span>,</span> 1</span>)</span>)</span></span>
	}</span></span>
</span>
	return</span> gradients</span></span>
}</span></span></code></pre>Onwards and upwards</h2>
To find the dot products for a given candidate point (which in my 1D case is just a random x</code> coordinate), I first, needed to find the "cell" that contains my candidate point. For my implementation, this meant finding which step contained my candidate point. Finding the cell then allowed me to easily fetch the two generated gradient values on the edges (or "corners" as I called them to stay consistent with the algorithm description) of the cell.</p>
//</span> mountains.js</span></span>
function</span> getCornerGradients</span>(</span>x</span>,</span> wavelength</span>,</span> gradients</span>)</span> {</span></span>
	const</span> cell</span> =</span> Math</span>.</span>floor</span>(</span>x</span> /</span> wavelength</span>)</span></span>
	return</span> [</span>gradients</span>[</span>cell</span>]</span>,</span> gradients</span>[</span>cell</span> +</span> 1</span>]</span>]</span></span>
}</span></span></code></pre>
Then to get the offset vectors, I just need to find the vector from my candidate point to the corners of the cell. The only thing I changed was normalizing x</code> so it was in the range [0, 1]</strong>, which makes some later parts of the algorithm easier to compute.</p>
//</span> mountains.js</span></span>
function</span> getOffsetVectors</span>(</span>x</span>,</span> wavelength</span>)</span> {</span></span>
	const</span> normalizedX</span> =</span> (</span>x</span> %</span> wavelength</span>)</span> /</span> wavelength</span></span>
	return</span> [</span>-</span>normalizedX</span>,</span> 1</span> -</span> normalizedX</span>]</span></span>
}</span></span></code></pre>
Finally I was able to compute the dot products of the gradients and the offset vectors.</p>
//</span> mountains.js</span></span>
function</span> getDotProducts</span>(</span>x</span>,</span> wavelength</span>,</span> gradients</span>)</span> {</span></span>
	const</span> cornerGradients</span> =</span> getCornerGradients</span>(</span>x</span>,</span> wavelength</span>,</span> gradients</span>)</span></span>
	const</span> offsetVectors</span> =</span> getOffsetVectors</span>(</span>x</span>,</span> wavelength</span>)</span></span>
	return</span> [</span>cornerGradients</span>[</span>0</span>]</span> *</span> offsetVectors</span>[</span>0</span>]</span>,</span> cornerGradients</span>[</span>1</span>]</span> *</span> offsetVectors</span>[</span>1</span>]</span>]</span></span>
}</span></span></code></pre>Reaching the summit</h2>
For the third and final step, I just needed to write a function to interpolate between the two dot products I computed above. I followed the algorithm on the Wikipedia page and used the smoothstep function</a>.</p>
//</span> mountains.js</span></span>
function</span> interpolate</span>(</span>x</span>,</span> wavelength</span>,</span> dotProducts</span>)</span> {</span></span>
	const</span> normalizedX</span> =</span> (</span>x</span> %</span> wavelength</span>)</span> /</span> wavelength</span></span>
	return</span> dotProducts</span>[</span>0</span>]</span> +</span> smoothstep</span>(</span>normalizedX</span>)</span> *</span> (</span>dotProducts</span>[</span>1</span>]</span> -</span> dotProducts</span>[</span>0</span>]</span>)</span></span>
}</span></span></code></pre>
Putting it all together, I was able to calculate 1D Perlin noise!</p>
//</span> mountains.js</span></span>
function</span> perlin</span>(</span>wavelength</span>)</span> {</span></span>
	const</span> gradients</span> =</span> generateGradients</span>(</span>wavelength</span>)</span></span>
	let</span> noise</span> =</span> [</span>]</span></span>
</span>
	for</span> (</span>let</span> x</span> =</span> 0</span>;</span> x</span> <</span> width</span>;</span> x</span>++</span>)</span> {</span></span>
		const</span> cornerGradients</span> =</span> getCornerGradients</span>(</span>x</span>,</span> wavelength</span>,</span> gradients</span>)</span></span>
		const</span> dotProducts</span> =</span> getDotProducts</span>(</span>x</span>,</span> wavelength</span>,</span> gradients</span>)</span></span>
		const</span> interpolated</span> =</span> interpolate</span>(</span>x</span>,</span> wavelength</span>,</span> dotProducts</span>)</span></span>
		noise</span>.</span>push</span>(</span>interpolated</span>)</span></span>
	}</span></span>
</span>
	return</span> noise</span></span>
}</span></span></code></pre>
To finish up with this initial step, I wrote a function to draw a line, where the y values would be determined using the generated Perlin noise and I got a decent-looking output!</p>
</a></p>
Whew, that was a lot of math! I promise the next devlog in the series will be better in every way: less math and more pretty pictures 😄.</p>


Happy anniversary, LÖVE Sam
2021-03-25T00:00:00+00:00
Endgame</h2>
On the day of our anniversary, I tried to quickly wrap up the project in the morning.</p>
First, I wanted to animate a fadeout for the game while having the ending cutscene text remain on screen. I tried setting the graphics draw color to black with a gradually increasing alpha value, then drawing a window-sized rectangle over the screen. I drew the rectangle after the game objects but before the text, to keep the text above the fade.</p>
--</span> main.lua</span></span>
function</span> love</span>.</span>draw</span>(</span>)</span></span>
	love</span>.</span>graphics</span>.</span>setColor</span>(</span>0</span>, </span>0</span>, </span>0</span>, </span>alpha</span>)</span></span>
	love</span>.</span>graphics</span>.</span>rectangle</span>(</span>"</span>fill</span>"</span>, </span>0</span>, </span>0</span>, </span>love</span>.</span>graphics</span>.</span>getWidth</span>(), </span>love</span>.</span>graphics</span>.</span>getHeight</span>())</span></span>
end</span></span></code></pre>
However, this approach was giving me a lot of visual issues.</p>
I took a break and went for a walk and thought over some of the possible causes for the visual bugs. I realized it might be because I wasn't resetting the draw color after rendering the rectangle. After getting back from my walk, I updated my code and the fadeout worked perfectly!</p>
--</span> main.lua</span></span>
function</span> love</span>.</span>draw</span>(</span>)</span></span>
	local</span> r</span>, </span>g</span>, </span>b</span>, </span>a</span> =</span> love</span>.</span>graphics</span>.</span>getColor</span>()</span></span>
	love</span>.</span>graphics</span>.</span>setColor</span>(</span>0</span>, </span>0</span>, </span>0</span>, </span>alpha</span>)</span></span>
	love</span>.</span>graphics</span>.</span>rectangle</span>(</span>"</span>fill</span>"</span>, </span>0</span>, </span>0</span>, </span>love</span>.</span>graphics</span>.</span>getWidth</span>(), </span>love</span>.</span>graphics</span>.</span>getHeight</span>())</span></span>
	love</span>.</span>graphics</span>.</span>setColor</span>(</span>r</span>, </span>g</span>, </span>b</span>, </span>a</span>)</span></span>
end</span></span></code></pre>
With the fadeout and camera transformations, I felt the game had a pretty smooth looking end cutscene.</p>
Music</h2>
For the final part of the project, I wanted to add a couple background music tracks. Luckily for me, I had exactly 0 experience making music. I wanted the music to fit the retro feel of the game, and found this great website called BeepBox</a>. First, I made a short background track, which I was pretty happy with given how quick I was able to create it. I exported the .wav</code> file and loaded it into LÖVE. I also configured the music to loop once played.</p>
--</span> main.lua</span></span>
local</span> music</span> =</span> love</span>.</span>audio</span>.</span>newSource</span>(</span>"</span>ambient.wav</span>"</span>, </span>"</span>stream</span>"</span>)</span></span>
</span>
function</span> love</span>.</span>load</span>(</span>)</span></span>
	music</span>:</span>setLooping</span>(</span>true</span>)</span></span>
	music</span>:</span>play</span>()</span></span>
end</span></span></code></pre>
For some reason, the looping appeared to have no effect. I looked around but couldn't find any issues with the setLoop()</code> function. I tried exporting the music to other file formates, but nothing seemed to work. Then, when exporting the music, I saw that there was a default option checked in BeepBox called "outro". After unchecking this box, and reloading the music file, the looping finally worked as expected.</p>
Final touches</h2>
With the gameplay mechanics, ending cutscene, and music done, I was almost done with the project. I felt the plain green background color needed improving, and I wanted to replace it with randomly generated grass tiles. Luckily, this was pretty easy to accomplish. I just copied the random grass terrain generation logic from my world</code> object and set the program to fill an area slightly larger than the player's viewport with the randomly generated grass. I also tweaked the grass generation so plain grass tiles were chosen more frequently than flowering grass tiles.</p>
I had a little extra time before I wanted to present the game to my partner, so I decided to quickly extend my tile system and create some animated water tiles. I followed the same process for implementing a new tile type, but every second I had the draw()</code> function switch which water tile was rendered in the water pools.</p>
I also chose an retro, arcade-style font, but chose not to include that in the version on GitHub since I'm not quite sure about the licensing (one day I would love to learn enough to make my own font).</p>
Finally, I wrapped up the project by designing a few more grass and wall tile variations. I was very happy with the final product and was excited to present it to my partner!</p>
</a></p>
Apart from thinking she was walking through a small intestine, being confused by the heart-blob character, and generally not being a fan of pixel art graphics, she loved it!</p>
Closing thoughts</h2>
Overall, I really liked working with LÖVE. I was impressed with how quickly I was able to create a working (albeit very simple) game. While I really enjoyed using it for this project, Lua's lack of objects makes me unsure if the engine would work well with larger-scale games. Additionally, the lack of sprite z-positioning adds extra complexity to the draw function, and the absence of a built in camera object surprised me.</p>
That being said, the engine was definitely easier to learn compared to a more full-featured engine like Unity. There was a lot of convenient default functionality provided, such as being able to play looping music or load in and draw a sprite in just a few lines. I definitely hope to experiment more with LÖVE and felt it was an execellent engine choice for this project.</p>
I hope you enjoyed this devlog series. I'll definitely write more in the future on projects to come! If you want to look more closely at the code or run/build off of Anniversary yourself, make sure to check out the repository</a>!</p>


Game day
2021-03-24T00:00:00+00:00
A-maze-ing design</h2>
Last night, I thought more about the design of the game. I began this project with some vague ideas, but no concrete game mechanics or story. After working on the tileset yesterday, I realized doing the artwork for the game was the most time-consuming task, and with only a couple days left to finish the game I would have to end up with a super simple product. I was inspired to try and make a maze that the player would wander through to find their missing half. I also decided, in the spirit of our anniversary, to change the character design so the player was half a heart and their goal was to search for their other half:</p>
</a></p>
(My partner thought it looked like a blob.)</p>
I couldn't help making the game a little cheesey, and decided that the plot and level design should be used to tie into the ending cutscene. To help speed up gameplay and development (and allow for alliteration in the ending cuscene), I chose to make a labyrinth rather than a maze, so there was only one path the player could follow. This helped me too, since I wouldn't need to design branching paths and dead ends, or balance the complexity of the maze. This was the design I ended up creating:</p>
</a></p>
Level editor</h2>
Originially, the image of the labyrinth I designed was just meant to help me quickly picture the game world. However, after looking at the scale of the labyrinth (each pixel represented a tile from my spritesheet), I realized it would be nearly impossible to build the level in code with my deadline (not to mention the difficulty of changing the design later). With my knowledge of Quads</code>, I decided to design the world</code> object to automatically generate the game world given an input image.</p>
I wrote a function that would check each pixel of the input image, compare it to a list of colors I defined in code, and assign a tile based on the color of the pixel.</p>
--</span> world.lua</span></span>
local</span> r</span>, </span>g</span>, </span>b</span> =</span> input_image</span>:</span>getPixel</span>(</span>x</span>, </span>y</span>)</span></span>
if</span> colors_equal</span>(</span>r</span>, </span>g</span>, </span>b</span>, </span>grass_rgb</span>) </span>then</span></span>
	tiles</span>[</span>x</span>][</span>y</span>] </span>=</span> love</span>.</span>graphics</span>.</span>newQuad</span>(</span>0</span>, </span>0</span>, </span>8</span>, </span>8</span>, </span>terrain</span>:</span>getDimensions</span>())</span></span>
end</span></span></code></pre>
I also extended this system so the world automatically chose a random grass or wall tile to give the game world a more natural feel. I had to make a 2D table of Quads</code>/tiles in love.load()</code> to use since choosing a random Quad</code> in love.draw()</code> caused the world tiles to change every frame.</p>
While this took a lot of code to get working, it allowed me to effectively use Aesprite as a level editor, which really helped me finalize the design of the labyrinth after playtesting the game.</p>
Lights, camera, action</h2>
With level generation working, to explore the generated labyrinth in-game, I needed to implement a basic camera. LÖVE doesn't have a built-in camera, so I followed a set of camera tutorials</a>.</p>
While working on the camera, I discovered a bug with my terrain generation code. After figuring out how to zoom out the camera, I saw that the last column and row of my terrain image was not generating. After a little debugging, I learned that tables in Lua start indexing at 1 rather than 0 (🤢), resulting in off-by-one errors scattered throughout my level generation code. Luckily, these weren't too difficult to fix.</p>
After fixing those errors and some trial and error with the camera, I figured out how to translate and scale the camera using graphics transformations, and programmed it to center on and follow the player as they move around the world. To center the camera on the player, I used the following code:</p>
--</span> camera.lua</span></span>
love</span>.</span>graphics</span>.</span>translate</span>(</span>-</span>camera</span>.</span>position</span>.</span>x</span> +</span> love</span>.</span>graphics</span>.</span>getWidth</span>() </span>/</span> 2</span> *</span> camera</span>.</span>scale</span>.</span>x</span>, </span>-</span>camera</span>.</span>position</span>.</span>y</span> +</span> love</span>.</span>graphics</span>.</span>getHeight</span>() </span>/</span> 2</span> *</span> camera</span>.</span>scale</span>.</span>y</span>)</span></span></code></pre>(Not) smooth moves</h2>
My next task was to tackle the movement mechanics. I wanted the player to stay on the tile grid rather than having smooth movement. Choosing this approach both helped setup the ending scene and drastically reduced the remaining work on the project. I wouldn't need to learn collision, and could instead limit the player's movements based on what tile they were trying to move to.</p>
Cutscene</h2>
With the terrain generation, camera, and movement working, I was nearing the end of the gameplay section of the project. To finish of the day's work, I started coding the ending cutscene.</p>
First, I set the window's background color to match my plain grass color as a quick and dirty way to extend the world around the player.</p>
Sadly, with very little time left to work on the project, my ending cutscene code was not as modular as I would have liked (spaghetti, anyone?). I added some code to the love.update(dt)</code> to stop player control and begin applying transforms on the camera when they reach their missing half. Then I created some simple text objects to display (with time delays between them).</p>
--</span> main.lua</span></span>
local</span> font</span> =</span> love</span>.</span>graphics</span>.</span>getFont</span>()</span></span>
local</span> cutscene_text</span> =</span> love</span>.</span>graphics</span>.</span>newText</span>(</span>font</span>, </span>"</span>Happy anniversary</span>"</span>)</span></span></code></pre>
Finally, I ended the day by animating the two heart halves leaving the labyrinth together.</p>
</a></p>


Learning to LÖVE
2021-03-23T00:00:00+00:00
Background</h2>
With my partner and I's one year anniversary coming up soon, I thought it would be a fun opportunity to make a short game for her. I love pixel art (unlike my objectively</strong> wrong partner), and while I'm not very good at making it, I thought designing a tileset for the game could be great practice. Next, I had to decide what engine to use to make the game. I had some experience with Unity, but a few weeks ago, I learned about the LÖVE</a> game engine.</p>
LÖVE is a framework for making 2D games in Lua. With only a few days ahead of me to make the project, I was worried about finishing it in time. While I already knew how to use Unity, it seemed like a lot of overhead and extra setup for such a small project. LÖVE, on the other hand, appeared quick to prototype with, and being dedicated to 2D game development seemed much more convenient to use.</p>
I had to consider the benefits of using a familiar engine that I knew would take a decent amount of work vs. learning a new game engine which might eventually allow for quicker development. I decided to dive into LÖVE, and chose to name my game Anniversary</em>. I figured a small project like Anniversary would be a great opportunity to dip my toe into the waters of LÖVE and try out the engine without committing to a larger-scale project.</p>
0th step</h2>
When working on coding projects, I like to create Docker containers to help manage different system install requirements, enhance the portability of my code, and reduce system debugging issues. Unfortunately, I have not yet figured out how to connect a Docker container application to my host computer's graphical display (definitely something I want to explore in the future). For this reason, I decided not to make a container for this project.</p>
Another part of my workflow is to create a do.sh</code> script containing a bunch of important commands and build flows so I don't have to remember or look up common actions.</p>
Hello, world</h2>
The first step of my journey was to get LÖVE installed and working. I followed the "Getting Started" guide</a> and created a main.lua</code> file.</p>
--</span> main.lua</span></span>
function</span> love</span>.</span>draw</span>(</span>)</span></span>
	love</span>.</span>graphics</span>.</span>print</span>(</span>"</span>Hello, world!</span>"</span>, </span>400</span>, </span>300</span>)</span></span>
end</span></span></code></pre>
I then ran my game by typing open -n -a love .</code> and was excited to see my super-exciting-definitely-original-game up and running in just a few minutes:</p>
</a></p>
Smart debugging: print()</code></h2>
Being new to LÖVE, and completely underestimating my familiarity with Lua (I had used it a bit when messing with the ComputerCraft</a> Minecraft mod many years ago), I decided it would be important to figure out how to print debugging information to the console.</p>
This took a bit of trial and error, but eventually I figured out that I had to launch my game using the direct path to the love.app</code> application instead of using the macOS open</code> command. During the process, however, I learned more about how to build a .love</code> file and package an executable. I updated my do.sh</code> script with these build paths, as they might be useful in the future.</p>
Basic player</h2>
The next step was to create a player sprite and figure out how to move them around the game window. For pixel art, I recently purchased Aesprite</a>, which is a wonderful drawing application dedicated to pixel art. While $20 seemed like a small price to pay to kickstart very professional pixel artist career</em>, they also have a GitHub page</a> with instructions on how to compile the application yourself for free.</p>
Still being new to pixel art and under a time crunch (who knows what would happen if I didn't finish the game in time for our anniversary 😱), I decided to go with 8x8 pixel tiles for the player and tileset. These would allow me to quickly make (hopefully) passable art for the game. At this point, I had very little idea of what the game would be. Originially, I was going to make the player a simple 8x8 dot, but this design reminded me of a game I played a few months back called Journey of the Broken Circle</a>. I love the cartoonish-yet-romanic idea of a shape looking for its other piece.</p>
Thus, I decided to make the player half a circle and have them search for their other half. I blocked out a simple player character:</p>
</a></p>
Using the following code, I was able to get the sprite to draw on screen (though there was no scaling so it was very tiny):</p>
--</span> player.lua</span></span>
local</span> sprite</span> =</span> nil</span></span>
</span>
function</span> love</span>.</span>load</span>(</span>)</span></span>
	sprite</span> =</span> love</span>.</span>graphics</span>.</span>newImage</span>(</span>"</span>player.png</span>"</span>)</span></span>
end</span></span>
</span>
function</span> love</span>.</span>draw</span>(</span>)</span></span>
	love</span>.</span>graphics</span>.</span>draw</span>(</span>sprite</span>, </span>400</span>, </span>300</span>)</span></span>
end</span></span></code></pre>
Since I was working with very low-resolution pixel art, I needed to figure out how to scale up the sprites in LÖVE without generating blurring artifacts. I learned (after more confusion than I would like to admit about object:method()</code> syntax in Lua replacing object.method()</code> on other C-based languages, and enums in Lua, unlike in Swift or Python, being just strings), that I could set a filter on the image's Texture</code> object to adjust how it was scaled up and down.</p>
--</span> player.lua</span></span>
function</span> love</span>.</span>load</span>(</span>)</span></span>
	sprite</span> =</span> love</span>.</span>graphics</span>.</span>newImage</span>(</span>"</span>player.png</span>"</span>)</span></span>
	sprite</span>:</span>setFilter</span>(</span>"</span>nearest</span>"</span>, </span>"</span>nearest</span>"</span>)</span></span>
end</span></span></code></pre>
To actually scale up the sprite, I had to set the scale values when calling the draw function:</p>
--</span> player.lua</span></span>
local</span> scale</span> =</span> 5</span></span>
</span>
function</span> love</span>.</span>draw</span>(</span>)</span></span>
	love</span>.</span>graphics</span>.</span>draw</span>(</span>sprite</span>, </span>400</span>, </span>300</span>, </span>0</span>, </span>scale</span>, </span>scale</span>)</span></span>
end</span></span></code></pre>Classic Lua</h2>
When working with Unity, I primarily relied on classes and inheritance to contruct objects. I was surprised to learn that Lua, being a very lightweight scripting language, does not include native support for classes (or a bunch of other common data structures like arrays or hash tables). Lua's approach is to provide a table</code> data structure, which can then be used as an array, dictionary, set, and many other common data structures depending on how the programmer uses it. Thus, I was forced to rethink my traditional design pattern.</p>
It took me awhile to figure out a design pattern I was happy with (and I'm still not sure if I'm completely happy with it, but it was fine for this small project). I chose to follow a factory design pattern, and created a player_factory</code> module with a single function called newPlayer()</code>. This function initialized a player</code> table object, and assigned it instance methods. I then followed the same approach for creating a player_controller</code> object to connect user inputs to player actions.</p>
Basic terrain</h2>
I decided to wrap up progress for the day by designing a simple tileset and hopefully getting some tiles drawn to the screen. This is the tileset I whipped up:</p>
</a></p>
I wrote out a world_factory</code> module to generate the world</code> object and began figuring out how to divide my spritesheet into individual tile images in LÖVE. I figured out the tool I needed was a Quad</code>. I was then able to draw the selected portion of the spritesheet to the screen using a draw()</code> call.</p>
--</span> world.lua</span></span>
local</span> terrain</span> =</span> nil</span></span>
local</span> tile</span> =</span> nil</span></span>
</span>
function</span> love</span>.</span>load</span>(</span>)</span></span>
	terrain</span> =</span> love</span>.</span>graphics</span>.</span>newImage</span>(</span>"</span>terrain.png</span>"</span>)</span></span>
	tile</span> =</span> love</span>.</span>graphics</span>.</span>newQuad</span>(</span>0</span>, </span>0</span>, </span>8</span>, </span>8</span>, </span>terrain</span>:</span>getDimensions</span>())</span></span>
end</span></span>
</span>
function</span> love</span>.</span>draw</span>(</span>)</span></span>
	love</span>.</span>graphics</span>.</span>draw</span>(</span>terrain</span>, </span>tile</span>, </span>400</span>, </span>300</span>)</span></span>
end</span></span></code></pre>
I was happy to see that the terrain was drawn to the screen, but I ran into an issue where the terrain was drawn over the player. It turns out LÖVE does not support sprite z positions, so I need to make sure I carefully manage the draw order by drawing the player after drawing the world.</p>
Wrap up</h2>
With that, I had some new knowledge of Lua and LÖVE, the ability to control a player and render tiles from a spritesheet, and was excited to continue working on my game another day!</p>

Sam McBroom

Configure it? I barely node it!

ASCII art and single sources of truth

Look at that view!

Rough around the edges

Scaling the mountain</h2> The values this new fractal()</code> returns an array of noise with generally very small values, which I think scale later for plotting on my graph.</p>

Steep learning slope

Happy anniversary, LÖVE Sam

Game day

Learning to LÖVE

Wrap up</h2> With that, I had some new knowledge of Lua and LÖVE, the ability to control a player and render tiles from a spritesheet, and was excited to continue working on my game another day!</p>

Wrap up</h2>
With that, I had some new knowledge of Lua and LÖVE, the ability to control a player and render tiles from a spritesheet, and was excited to continue working on my game another day!</p>