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