Budokan

Budokan is a simple algorithm that can produce complex and nuanced outputs.

Budokan is a battle between two different patterns with two different color palettes (one acting as a shader, the other as the base palette) mixed together in different ways. Additionally, each pattern/palette combination undergoes a color shift by one at evenly set intervals, which creates a tiled appearance, or when the patterns overlap, as determined by the style of each output.

Palette colors are shifted either along the x-axis, y-axis or both the x/y-axis.

The shaders are either simple black and white, or a gradient from black to white and may be mixed at different strengths (Shader Mix Power) with the base palette.

The patterns, based on noise fields, are interpreted at different scales (tiny, small, medium, large, jumbo) which affects how granular the patterns that the noise field generates are.

The artwork is fully responsive and scales to whatever size your gpu can handle. By default the browser window's height is used to inform the canvas height and the width is based off of one of three aspect ratios (1:1, 16:9, 3:4).

Styles

Contrast - The shader is a different pattern and mixed with the base palette.
Harmony - The shader is the same pattern and mixed with the base palette.
Overlay - The shader is a different pattern and is used to determine color shifts in the base palette. The shader palette is also mixed with the base palette.
Alternating - The shader is the same pattern, and palettes alternate tiles.

Shaders

Gradient vs B & W/W & B - Gradient shading will have a more textured, painted look as opposed to the flatter look of the single color black and white palettes.

W & B vs B & W - W & B shaders are heavier in whites. Same with white gradient shader. Black is heavier in blacks.

Controls

[mouse click] - start/stop the sketch
[r] - redraw the sketch
[s] - save a 4k hi res .png

URL Params

?size=xxxx where xxxx is a size in pixels you'd like to render
?res=x where x is a resolution between 2 and 4 (higher is finer detail)
Ex: ?size=8000&res=4 will save a very finely detailed 8k version.

Made with: p5.js
License: Budokan © 2024 by 6ixty is licensed under CC BY-NC-SA 4.0. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/