Этот эффект не так красиво смотрится в блоке, что показан в примере, но его можно отлично использовать на всей странице или фоном на всю ширину экрана.
Пример:
HTML:
1 |
<div id="show"></div> |
JS:
Подключаем библиотеку p5.min.js и скрипт самой графики:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
var canbg = '#FFF'; var canheight = 500; var canwidth = document.getElementById('show').offsetWidth; function setup() { var myCanvas = createCanvas(canwidth, canheight); myCanvas.parent("show"); background(canbg); noStroke(); } function draw() { var c = [ceil(random(7)) * 0.1, ceil(random(7)) * 0.1, ceil(random(97)) + 3, ceil(random(20)), ceil(random(100)), ceil(random(100)) ]; fill(color( 'hsla('+ ceil(random(360)) +','+ (ceil(random(50)) + 50) +'%,'+ ceil(random(50)) +'%,'+ (ceil(random(90))*0.01) +')')); translate(ceil(random(width)), ceil(random(height))); beginShape(); for( var theta=0; theta < 2*PI ; theta +=0.01){ var rad = r(theta, c[0], c[1], c[2], c[3], c[4], c[5]); var x = rad * cos(theta) * 50; var y = rad * sin(theta) * 50; vertex(x,y); } endShape(); } function r(theta, a, b, m, n1, n2, n3){ return pow(pow(abs(cos(m * theta / 4.0) / a), n2) + pow(abs(sin(m * theta / 4.0) / b), n3), -1.0 / n1); } |
Где:
canbg
- Цвет фона
canheight
- Высота блока
canwidth
- Ширина блока.
Найдено на codepen.io у пользователя André Canilho
Добавить комментарий: