It is a new year holidays and I want to draw some bricks

Bricks

Let's define a small palette:

var brickColors = [ 0xFF5D12, // light 0xAC3232, // dark 0x7B3232, // main 0xA37272 // concrete ]; brickColors.forEach((color, x) => point(x, 0, color));

Just draw some bricks. Each row is moved by 1\3 of a brick size

var brick = {width: 18, height: 10}; var fillBrick = function(x, y, w, h){ rect(x, y, w, h, brickColors[1]); } var drawBrick = function(x, y, w, h){ rect(x, y, w, h, brickColors[3]); line(x+1, y+1, x+1, y+h-1, brickColors[2]); line(x+1, y+h-1, x+w-1, y+h-1, brickColors[2]); line(x+2, y+1, x+w-2, y+1, brickColors[0]); line(x+w-1, y+1, x+w-1, y+h-2, brickColors[0]); fillBrick(x+2, y+2, w-3, h-3); } update = function() { for( var y = 0; y < h; y += brick.height ) { for( var x = -y / brick.height * brick.width / 3 | 0; x < w; x += brick.width ) { drawBrick( x, y, brick.width, brick.height ); } } stop(); }

Add some dithering dirt from the bottom

var fillBrick = function(x, y, w, h){ rect(x, y, w, h, function(x, y){ return dither(y/h, brickColors[2], brickColors[1]) }); }

And a bit of grain from the top side

var fillBrick = function(x, y, w, h){ rect(x, y, w, h, function(x, y){ return dither((1-y/h)*2, 0, 1) === 0 ? dither(1-y/h*6, brickColors[0], brickColors[1]) : brickColors[2]; }); }

Try using darker concrete mixture

brickColors[3] = 0x2E2922