I like using Golden Ratio grids in my designs. However, it became very annoying to constantly recreate or refine grids for different layouts. So, for my ‘Creative Coding’ project, I decided to create a Golden Ratio Grid Generator.
The project was completed using the programming language Java in Processing and is designed for computers only.
Elisabeth Schenk
WiSe2025/2026
Design
The name is derived from a combination of ‘Golden Grid’ and ‘phi’, the constant of the golden ratio. This led to the name ‘GoldPhi’, which later evolved into ‘GoldFish’.
The colour scheme is based on a simple monochrome palette, with neon green as the primary accent colour.
The app’s layout is intentionally minimal.
The menu, which contains all control and interaction options, is placed on the left side, while the canvas and grid function as a visual aid for layout and composition.
Funktions
The canvas is created using adjustable size inputs and appears once a valid size has been entered. Values can be edited manually by clicking to place the cursor at the desired position or adjusted using the arrow keys. Pressing Ctrl + A selects the entire input field for quick editing, while the delete and backspace keys allow precise correction of individual values. This provides accurate control over the canvas dimensions. The input values are converted into a visual canvas either by clicking the canvas button or by pressing Enter. The canvas can be resized at any time to adapt to changing layout requirements.
The grid is defined by selecting the number of rows and columns via dropdown menus. These values can be adjusted at any time, making the grid flexible and resistant to input errors. The grid always adopts the current canvas dimensions and remains perfectly aligned, even when the canvas is resized. This allows it to function as a responsive visual guide for composition, proportion, and layout planning.
The grid can be exported as either a PNG or an SVG file using the format toggle. When exporting as SVG, the grid lines are saved as vector paths, enabling lossless scaling and further editing. When exporting as PNG, the background remains transparent, allowing seamless integration into other design workflows. Exports can be triggered via both a button and a keyboard shortcut, but only when a valid canvas exists, ensuring clean and reliable output.
The visual workspace supports pan and zoom interactions, allowing the canvas to be freely moved and scaled using the mouse. The shortcuts S and C can be used to reset or recenter the view to its default state. These view transformations do not affect the export, creating a flexible and dynamic working environment while preserving accurate output results.
Coding
The application has a modular class structure that separates rendering, interaction and interface logic. Core components such as the canvas, grid, menu and export system are handled by independent classes, which makes the codebase organised and easy to maintain or extend.
A custom view system enables the workspace to be panned and zoomed independently of the user interface. This is achieved using transformation matrices that scale and translate the drawing space while keeping the menu fixed. Keyboard shortcuts and mouse input provide fast navigation and precise control over the view.
The grid itself is procedurally generated based on the golden ratio and recalculated in real time whenever the canvas size, rows or columns change. This ensures that the grid always stays synchronised with the canvas and adapts instantly to user input.
Exporting is handled by an isolated export module that redraws the grid into an off-screen buffer. This guarantees that all PNG and SVG exports are generated at the true canvas resolution, remaining unaffected by zooming or panning in the editor view.
