A visualiser for how a struct sits in memory.

About Structure


Well packed structs allow us to fit more data into the cache, letting us process more data, faster. This project aims to take a struct definition and visually present it so you can see how many bits are directly in use, and how many are being wasted.

Screenshot 2024-07-22 at 2.00.20 PM.png

JAM RESULTS

I got as far as being able to draw out a (relatively) arbitrary struct in such a way that padding was prepended to align any variable to its natural alignment/size, and added at the end to pad the struct out to its full alignment.

What Went Right?

  • Choosing a palette from lospec.org! It's a little thing, but I liked having a relatively constrained palette to work with. It made me consider how few colours I could get away with and still communicate what I was trying to get across. While there's room for improvement, I was happy with where I got to.

  • Relatively Constrained Target. I tried to keep the scope very small for this, knowing my time was limited through the jam. In terms of 'visualizing' something, I feel I got what I wanted to see relatively quickly.

What Went Wrong?

  • Platform Choice
  • Scope

I made this as a native macos program in jai, and had a blast doing so. But, my goal is to make it into a toy that you can play with and get a feel for what actually is happening under the hood with your memory layouts, rather than making a hard-core tool for getting in and optimizing things. To that end, perhaps making this a web-based tool that people could use like godbolt would have a larger impact for the community.

In terms of scope, I didn't hit what I wanted to in terms of interactivity - being able to drag the variables around, add and remove different ones of different sizes and playing to get that intuitive feel for memory layout I completely missed. I managed to start down that path, with some simple mouse over highlighting, but in terms of what I got done for the jam, it's absolutely bare bones.

LOOKING AHEAD

I solidified my understanding of structs and their eventual layouts a lot in the process of making this, and I feel there's further I can go down this path. At the very least, I want to:

  • Add drag/drop reordering
  • Add & Remove variables
  • Be able to paste in a struct so you can take parts of your program and see if you can optimize them visually.

The other thing I'd like to display is how well a given struct fits into cache lines. 'If you had a flat array of these, how many could you process before you had to hit a higher cache?' kind of thing.

Read more
Filters

Recent Activity

Making some more progress on my visibility jam entry &structure. We can drag things now. Can't reorder them yet, but that's a problem for tomorrow khrob.

View original message on Discord

&structure continues slowly... mouseover working. Calling for tonight. If I can drag to rearrange variables by the end of jam, I'll be happy!

View original message on Discord

&structure visualisation continues... Under the hood it's rendering each variable as one block, and adding the pre-padding where the alignment is required. Next up is some mouse interaction. My target for the jam is to be able to drag the different vars around so you can feel the best & worst case scenarios. Stretch goal is to be able to add/remove variables at runtime. (Currently, it's just working on the hard-coded string on the right)

View original message on Discord

something visual starting to come together for the jam. &structure

View original message on Discord

showing the struct's fields. &structure

View original message on Discord