02

The Happy Grid

Code

let palette = ["#7b4800", "#002185", "#003c32", "#fcd300", "#ff2702", "#6b9404"]

function setup () {
C.createCanvas()
angleMode(DEGREES)
background("#fffceb")

translate(-width/2,-height/2)

// We create a grid here
let num_cols = 12
let num_rows = 6

let col_size = (width - border) / num_cols
let row_size = (height - border) / num_rows
let border = 300;

// We define the brushes for the hatches, and the brushes for the strokes
let hatch_brushes = ["marker", "marker2"]
let stroke_brushes = ["2H", "HB", "charcoal"]

// Test Different Flowfields here:
// "zigzag", "seabed", "curved", "truncated"
// You can also disable field completely with brush.noField()
brush.field("truncated")

// We create the grid here
for (let i = 0; i < num_rows; i++) {
for (let j = 0; j < num_cols; j++) {

// We fill 10% of the cells
if (random() < 0.1) {
// Set Fill
brush.fill(random(palette), random(80,140))
brush.bleed(random(0.05,0.4))
brush.fillTexture(0.55,0.5)
}

// We stroke + hatch the remaining
else {
// Set Stroke
brush.set(random(stroke_brushes), random(palette))

// Set Hatch
// You set color and brush with .setHatch(brush_name, color)
brush.setHatch(random(hatch_brushes), random(palette))
// You set hatch params with .hatch(distance, angle, options)
// See reference
brush.hatch(
random(10,60), // This is distance between lines
random(0,180), // This is angle in degrees
{rand: 0, continuous: false, gradient: false}) // Optional
}

// We draw the rectangular grid here
brush.rect(
border/2 + col_size * j, // x top left corner
border/2 + row_size * i, // y top left corner
col_size, // width
row_size // height
)

// Reset states for next cell
brush.noStroke()
brush.noFill()
brush.noHatch()
}
}
}

link to p5 editor

Results

Change the params and try yourself!