I have got a brick and now I want to add some lightning to it!

Bricks

Here is a brick wall from yesterday

Lets pass a vector from mouse to the brick center and calculate the dot product. Dot product of two vectors V1 (x1, y1) · V2 (x2, y2) = x1x2 + y1y2

var brickPoints = [
    new Point(-brick.width/2, -brick.height/2), // top-left
    new Point(brick.width/2, -brick.height/2), // top-right
    new Point(brick.width/2, brick.height/2), // bottom-right
    new Point(-brick.width/2, brick.height/2) // bottom-left
];

var brickSides = brickPoints.map((p, n)=>{
    var p2 = brickPoints[(n+1)%brickPoints.length];
    return new Point(p.x + p2.x, p.y + p2.y).div(2);
});

var drawBrick = function(x, y, w, h, deltaRat){
    rect(x, y, w, h, function(localX, localY){
        var dot = deltaRat.x*(-w/2+localX) + deltaRat.y*(-h/2+localY);
        var isLight = dot > 25; 
        return dot;
    });
}

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 ) {
            var pos = new Point(x+brick.width/2,y+brick.height/2)
            drawBrick( x, y, brick.width, brick.height, pos.sub(mouse) );
        }
    }
    stop();
};
move = function(){}

Shade the border

var drawBrick = function(x, y, w, h, deltaRat){
    rect(x, y, w, h, brickColors[3]);

    rect(x+1, y+1, w-1, h-1, function(localX, localY){
        var dot = deltaRat.x*(-w/2+localX) + deltaRat.y*(-h/2+localY);
        var isLight = dot > 25;

        // side      
        if(localX === 0 || localY === 0 || localX === w-2 || localY === h-2)
            return isLight ? brickColors[2] : brickColors[0];

        
        return brickColors[1];
    });
}

Shade the inner part of the brick

const bound = n => (n<0?0:n>1?1:n);

var drawBrick = function(x, y, w, h, deltaRat){
    rect(x, y, w, h, brickColors[3]);

    rect(x+1, y+1, w-1, h-1, function(localX, localY){
        var dot = deltaRat.x*(-w/2+localX) + deltaRat.y*(-h/2+localY);

        var isDark= dot > 25;
            // side      
        if(localX === 0 || localY === 0 || localX === w-2 || localY === h-2) 
            return isDark ? brickColors[2] : brickColors[0];


        if(dot < 85)
            return 0x009955

        return isDark ? 
          dither(bound(1/(dot-64)*36), brickColors[1], brickColors[2])
          : 0x009955;
    });
}

And the light part

const bound = n => (n<0?0:n>1?1:n);

var drawBrick = function( x, y, w, h, deltaRat ) {
  rect( x, y, w, h, brickColors[ 3 ] );

  rect( x + 1, y + 1, w - 1, h - 1, function( localX, localY ) {
    var dot = deltaRat.x * ( -w / 2 + localX ) + deltaRat.y * ( -h / 2 + localY );

    var isDark = dot > 25;
    // side      
    if( localX === 0 || localY === 0 || localX === w - 2 || localY === h - 2 )
      return isDark ? brickColors[ 2 ] : brickColors[ 0 ];


    if( dot < 65 ) {
      var coeff = 1;
      var dot2 = deltaRat.x *coeff* ( -w / 2 + localX ) + deltaRat.y *coeff* ( -h / 2 + localY );
      return dither( bound(  ((deltaRat.x**2 + deltaRat.y**2)/1500) )**2, brickColors[ 1 ], brickColors[ 0 ] )
    }

    return isDark ?
      dither( bound( 1 / ( dot - 64 ) * 36 ), brickColors[ 1 ], brickColors[ 2 ] )
      : 0x009955;
  } );
};

Try it on the bigger wall. I do not like the result too much, would try do something better later.