Coding as a Tool: Generating Patterns for the Siding of a new House

Posted 4 months ago in Design · Code · Projects

I always wanted to build a house and had a life long fascination with architecture. When the opportunity finally came to build our own home, I found myself facing an interesting challenge: I wanted to create something more interesting than the traditional board and batten siding pattern, while still using the cost-effective fiber cement panels that are standard in modern construction. The goal was to create a pattern that would look natural and random while meeting the specific structural requirements of these practical, durable materials.

Generated Siding Pattern

The Challenge

As anyone who’s ever worked on a building project knows, achieving balance between aesthetics and function is no easy task. I had a vision for the siding—something that looked natural, yet fit within the constraints of structural requirements. Specifically, I needed to:

  1. Create a genuinely random pattern that didn’t feel forced or artificial.
  2. Place battens in specific locations where large fiber cement panels meet.
  3. Avoid odd-looking combinations that would be noticeable or out of place.
  4. Communicate the final pattern clearly to the builders.

The task seemed simple at first, but quickly became clear that the devil was in the details.

The Solution

I turned to code to solve this problem. Using CodePen, I created a tool that could generate random patterns while respecting certain constraints.

Here’s a live version of what I came up with:

The Process

I experimented with various random seeds and pattern generation algorithms until I found a combination that produced results that looked natural while avoiding any awkward patterns. The key was to:

  1. Define fixed points where battens must appear (panel joints)
  2. Generate random positions for additional battens
  3. Apply rules to ensure minimum and maximum spacing
  4. Visualize the result in real-time

After many iterations, the code was starting to show results that satisfied both my design sensibility and the technical requirements.

The Result: Bringing the Vision to Life

The photos below show the siding implementation, which was a direct result of those hours spent in front of the screen, tweaking code and testing patterns.

Siding Pattern Implementation 1
Siding Pattern Implementation 2
Siding Pattern Implementation 3
Siding Pattern Implementation 4
Siding Pattern Implementation 5
Siding Pattern Implementation 6

Code and Generative Architecture

This project is a perfect example of how coding can be a powerful tool in unexpected places. By using code to generate and visualize the pattern, I was able to:

  1. Quickly iterate through different possibilities
  2. Ensure consistency in the pattern
  3. Provide clear, unambiguous instructions to the builders
  4. Save time that would have been spent manually drawing patterns

The result is a siding pattern that looks natural and random, but was actually carefully designed and controlled through code.

You can explore the code and try different seeds in the CodePen above. Each seed will generate a different pattern while maintaining the required constraints.

This project demonstrates how coding can be applied to solve real-world problems in unexpected ways. We were able to achieve a result that looks natural while meeting all structural requirements. I am reall happy with the outcome and had a blast working on this.

More posts

About this Site

I asked AI to tell me what Not So Common Thoughts is all about.