Фрактальные круги

Случайно генерируемые круги

HTML

<canvas id="canvas"></canvas>

CSS

body{
  background: #232323;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}

#canvas{
    width: 100%;
    height: 100%;
}

#info{
    font-size: 20px;
    position: absolute;
    top: 5px;
    left: 5px;
    background: #000;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}

JS

Подключаем jQuery:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

скрипт

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

pCW = ctx.canvas.width / 100;
pCWmin = Math.floor(pCW * 45);
pCWmax = Math.floor(pCW * 55);

pCH = ctx.canvas.height / 100;
pCHmin = Math.floor(pCH * 45);
pCHmax = Math.floor(pCH * 55);

$(window).on("resize", function() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
});

// Circle Sizes
maxRadiusNano = 3;
minRadiusNano = 1;

maxRadiusSmall = 20;
minRadiusSmall = 5;

maxRadiusBig = 150;
minRadiusBig = 100;

// Amount of Circles
maxCirclesNano = 5000;
maxCirclesSmall = 300;
maxCirclesBig = 5;

// Offset for Lightness (HSL)
colOffset = 50;

H = Math.floor(Math.random() * 361) + 0;
S = Math.floor(Math.random() * 60) + 20;
L = Math.floor(Math.random() * 60) + 20;

$("#canvas").css({background: `hsl(${H}, ${S}%, ${L}%)`});

function drawCircleBig() {
    radius = Math.floor((Math.random() * maxRadiusBig) + minRadiusBig);
    xPos = Math.floor((Math.random() * pCWmax) + pCWmin) - radius/2;
    yPos = Math.floor((Math.random() * pCHmax) + pCHmin) - radius/2;
    
    var Lo = Math.floor((Math.random() * colOffset) + 1);
    if(L < 50){L = L + Lo} else {L = L - Lo};
    var HSL = `hsl(${H}, ${S}%, ${L}%)`;
    
    ctx.beginPath();
    ctx.fillStyle = HSL;
    ctx.arc(xPos, yPos, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
};

function drawCircleSmall() {
    radius = Math.floor((Math.random() * maxRadiusSmall) + minRadiusSmall);
    xPos = Math.floor((Math.random() * window.innerWidth) + radius);
    yPos = Math.floor((Math.random() * window.innerHeight) + radius);
    
    var Lo = Math.floor((Math.random() * colOffset) + 1);
    if(L < 50){L = L + Lo} else {L = L - Lo};
    var HSL = `hsl(${H}, ${S}%, ${L}%)`;
    
    ctx.beginPath();
    ctx.fillStyle = HSL;
    ctx.arc(xPos, yPos, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
};

function drawCircleNano() {
    radius = Math.floor((Math.random() * maxRadiusNano) + minRadiusNano);
    xPos = Math.floor((Math.random() * window.innerWidth) + radius);
    yPos = Math.floor((Math.random() * window.innerHeight) + radius);
    
    var Lo = Math.floor((Math.random() * colOffset) + 1);
    if(L < 50){L = L + Lo} else {L = L - Lo};
    var HSL = `hsl(${H}, ${S}%, ${L}%)`;
    
    ctx.beginPath();
    ctx.fillStyle = HSL;
    ctx.arc(xPos, yPos, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
};


$("#canvas").on("click", function(){
    H = Math.floor((Math.random() * 361) + 0);
    S = Math.floor((Math.random() * 40) + 30);
    L = Math.floor((Math.random() * 40) + 30);
    
    $("#canvas").css({background: `hsl(${H}, ${S}%, ${L}%)`});
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
    
    for(i = 0; i < maxCirclesBig; i++){drawCircleBig();}
    for(i = 0; i < maxCirclesSmall; i++){drawCircleSmall();}
    for(i = 0; i < maxCirclesNano; i++){drawCircleNano();}
});

for(i = 0; i < maxCirclesBig; i++){drawCircleBig();}
for(i = 0; i < maxCirclesSmall; i++){drawCircleSmall();}
for(i = 0; i < maxCirclesNano; i++){drawCircleNano();}