Процедурно генерируемые геометрические узоры на HTML5
Интересное решение. Процедурно-генерируемые серые заплатки. После каждого обновления страницы будет генерироваться абсолютно разный узор
Для начала посмотрите ДЕМО
Установка:
На странице, где хотите видеть такой эффект, после открывающего тега <body> поместите:
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> /* Grayscale Bytes by Frank Force Tiny code monochrome composition study. Code is based on my 140 byte dweet. https://www.dwitter.net/d/24449 https://www.fxhash.xyz/generative/2370 */ document.body.appendChild(t=document.createElement`canvas`);t.width=window.innerWidth,t.height=window.innerHeight,t.style="position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;winth:100%;height:100%",document.body.style="background:#111;margin:0;overflow:hidden";e=Math.random,a=document.createElement`canvas`;a.width=t.width,a.height=t.height;i=0,h=0,n=0,l=a.getContext`2d`,o=Math.sin,d=((t,e,a,i=1)=>`rgba(${0|t},${0|e},${0|a},${i})`),r=e=>{if(requestAnimationFrame(r),e<n-2)return;n=Math.max(n+1e3/60,e);for(let t=3;t--;)i=h++/60,60*i|0==h-2&&(i+=1e-6),C(i);t.width|=0;let l=t.getContext`2d`;l.save(),l.fillStyle=g?m:w,l.fillRect(0,0,t.width,t.height),l.rect(x,x,t.width-2*x,t.height-2*x),l.clip(),l.drawImage(a,0,0),l.restore(),l.globalAlpha=p?.2:.1,l.drawImage(v,0,0,t.width,t.height);const o=1920/1080>innerWidth/innerHeight?innerWidth:innerHeight*(1920/1080);t.style.width=o+"px"},c=(t=1)=>e()*t|0,g=e()<.5,s=e()<.5,f=s&&e()<.4,m=s?d(99*e(),99*e(),99*e()):"#000",w=s?d(255-99*e(),255-99*e(),255-99*e()):"#fff",u=e()<.8,M=u&&e()<.4,p=e()<.2,y=e()<.3,b=e()<.8,I=e()<.5;I&&e();const v=document.createElement`canvas`;{let e=b?2:4;v.width=t.width/e,v.height=t.height/e;let a=new ImageData(v.width,v.height);for(let t=0;t<a.data.length;t+=4){let e=255*Math.random();for(let i=4;i--;)a.data[t+i]=3==i?255:y?255*Math.random():e}v.getContext`2d`.putImageData(a,0,0)}let x=I?50:0;const C=a=>{if(a>10)return;if(a||(l.fillStyle=g?m:w,l.fillRect(0,0,t.width,t.height),u&&l.rotate(c(2e3))),f&&(e()<.05||0==a)){let t=d(255*e(),255*e(),255*e());g?w=t:m=t}l.fillStyle=g?w:m;let i=(c(6e3)-3e3)/2|0,n=(c(6e3)-3e3)/2|0,r=c(350),s=c(350),p=c(s),y=c(1e6);M&&h%120==0&&l.rotate(c(1)*Math.PI/2+Math.PI/4);for(let t=s*r;t--;)l.fillRect(i+t%s,n+t/s,o(a),o((t*y|0)%p)/a/a)};r() </script> |
