/**
 * "Perfect Lines"
 * By Raphael Rouvinov-Kats
 * 
 * Creates alternating black and white dots
 * With their radii depending on the time
 * As time goes on, their opacity goes from 254 to 0 (logistic decay)
 * 
 * The effect it seems to have is to create so-called perfect lines,
 * Known in pixel art for having slopes with 1 on the top or bottom and an integer
 * on the alternate part. E.g. 1 up : 1 over, 2 up: 1 over.
 * 
 * It's not really much of an effect
 * You can make out the 1:1, 2:1, and 3:1 lines and their reciprocals
 * If anyone knows how to make the other lines more visible leave a tip/make a spinoff!
 * */

var drawTiles = function(tileW, tileH) {
    tileW = floor(tileW);
    tileH = floor(tileH);
    noStroke();
    
    // logistic decay for opacity
    var opacity = 255/(1+(255/254.9-1)*pow(Math.E,255*0.00005*frameCount));
    
    for(var x = 0; x <= 400; x+= tileW) {
        var c = x / tileW;
        for(var y = 0; y <= 400; y+= tileH) {
            var r = y / tileH;
            var colour = ((r+c)%2 === 0) ? 255 : 0;
            
            fill(colour, colour, colour, opacity);
            rect(x, y, tileW, tileH);
            //ellipse(x, y, tileW, tileH);
        }
    }
};

var speed=0.1;

var draw = function() {
    
    // getting random numbers for tile width and height
    // initial noiseVal var is between 0 and 1, usually around 0.5
    var noiseVal = noise(frameCount*speed, 200*speed);
    
    // takes noiseVal's dist from .5 (between 0 and 0.5) and multiplies and shifts it
    // range from 5 to 105
    noiseVal = abs(0.5 - noiseVal)*200 + 5;
    
    // drawing the tiles
    drawTiles(noiseVal, noiseVal);
};