Пример:
Нажать для обновления
HTML:
1 2 3 |
<div id="furziez"> <canvas></canvas> </div> |
CSS:
1 2 3 |
#furziez { height: 500px; } |
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
!function(f,a,c){var s,l=256,p="random",d=c.pow(l,6),g=c.pow(2,52),y=2*g,h=l-1;function n(n,t,r){function e(){for(var n=u.g(6),t=d,r=0;n<g;)n=(n+r)*l,t*=l,r=u.g(1);for(;y<=n;)n/=2,t/=2,r>>>=1;return(n+r)/t}var o=[],i=j(function n(t,r){var e,o=[],i=typeof t;if(r&&"object"==i)for(e in t)try{o.push(n(t[e],r-1))}catch(n){}return o.length?o:"string"==i?t:t+"\0"}((t=1==t?{entropy:!0}:t||{}).entropy?[n,S(a)]:null==n?function(){try{var n;return s&&(n=s.randomBytes)?n=n(l):(n=new Uint8Array(l),(f.crypto||f.msCrypto).getRandomValues(n)),S(n)}catch(n){var t=f.navigator,r=t&&t.plugins;return[+new Date,f,r,f.screen,S(a)]}}():n,3),o),u=new m(o);return e.int32=function(){return 0|u.g(4)},e.quick=function(){return u.g(4)/4294967296},e.double=e,j(S(u.S),a),(t.pass||r||function(n,t,r,e){return e&&(e.S&&v(e,u),n.state=function(){return v(u,{})}),r?(c[p]=n,t):n})(e,i,"global"in t?t.global:this==c,t.state)}function m(n){var t,r=n.length,u=this,e=0,o=u.i=u.j=0,i=u.S=[];for(r||(n=[r++]);e<l;)i[e]=e++;for(e=0;e<l;e++)i[e]=i[o=h&o+n[e%r]+(t=i[e])],i[o]=t;(u.g=function(n){for(var t,r=0,e=u.i,o=u.j,i=u.S;n--;)t=i[e=h&e+1],r=r*l+i[h&(i[e]=i[o=h&o+t])+(i[o]=t)];return u.i=e,u.j=o,r})(l)}function v(n,t){return t.i=n.i,t.j=n.j,t.S=n.S.slice(),t}function j(n,t){for(var r,e=n+"",o=0;o<e.length;)t[h&o]=h&(r^=19*t[h&o])+e.charCodeAt(o++);return S(t)}function S(n){return String.fromCharCode.apply(0,n)}if(j(c.random(),a),"object"==typeof module&&module.exports){module.exports=n;try{s=require("crypto")}catch(n){}}else"function"==typeof define&&define.amd?define(function(){return n}):c["seed"+p]=n}("undefined"!=typeof self?self:this,[],Math); let canvas; let ctx; let w, h; let prng; class Walker { constructor(x, y) { this.x = x; this.y = y; this.angle = prng() * Math.PI * 2; this.direction = prng() * Math.PI * 2; this.baseHue = Math.round(prng() * 8) * 45; this.tick = 0; this.stepSize = prng() * 0.2 + 0.1; this.width = prng() * 80 + 20; } walk() { this.direction += (prng() -0.5) * Math.PI / 6; let deltaAngle = prng() * Math.PI / 6; this.angle += deltaAngle; this.x += Math.cos(this.direction) * this.stepSize; this.y += Math.sin(this.direction) * this.stepSize; this.tick++; } drawEyes(ctx) { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); let length = this.width * 0.3; let r = length * (prng() * 0.5 + 0.3); ctx.fillStyle = "white"; ctx.strokeStyle = "black"; ctx.beginPath(); ctx.arc(-length, 0, r, 0, Math.PI * 2); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.arc(length, 0, r, 0, Math.PI * 2); ctx.stroke(); ctx.fill(); r *= 0.5; ctx.fillStyle = "black"; ctx.beginPath(); let xOffset = (prng() - 0.5) * r; let yOffset = (prng() - 0.5) * r; ctx.arc(-length + xOffset, yOffset, r, 0, Math.PI * 2); ctx.stroke(); ctx.fill(); ctx.beginPath(); xOffset = (prng() - 0.5) * r; yOffset = (prng() - 0.5) * r; ctx.arc(length + xOffset, yOffset, r, 0, Math.PI * 2); ctx.stroke(); ctx.fill(); let angleOffset = Math.PI; ctx.beginPath(); ctx.arc(0, -length * 0.5, r, angleOffset, Math.PI + angleOffset); ctx.stroke(); ctx.restore(); } draw(ctx) { let length = this.width; let angle1 = this.angle - Math.PI / 2; let x1 = Math.cos(angle1) * length + this.x; let y1 = Math.sin(angle1) * length + this.y; let angle2 = this.angle + Math.PI / 2; let x2 = Math.cos(angle2) * length + this.x; let y2 = Math.sin(angle2) * length + this.y; let hue = (Math.sin(this.tick / 1000) + 1) * 20 + this.baseHue; ctx.strokeStyle = `hsla(${hue}, 80%, 60%, 0.3)`; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } update(ctx) { this.walk(); this.draw(ctx); } } function setup() { canvas = document.querySelector("#furziez canvas"); ctx = canvas.getContext("2d"); resize(); window.addEventListener("resize", () => { resize(); draw(); }); } function resize() { furziez = document.querySelector("#furziez"); w = canvas.width = furziez.offsetWidth; h = canvas.height = furziez.offsetHeight; } function draw() { let urlString = window.location.href; let url = new URL(urlString); let seed = url.searchParams.get("seed"); prng = new Math.seedrandom(seed); ctx.fillStyle = "white"; ctx.fillRect(0, 0, w, h); let nrOfWalkers = Math.round(prng() * 16 + 2); let walkers = []; for(let i = 0; i < nrOfWalkers; i++) { let x = prng() * w; let y = prng() * h; let walker = new Walker(x, y); walkers.push(walker); } walkers.forEach(walker => { let nrOfSteps = prng() * 4000 + 1000; for(let i = 0; i < nrOfSteps; i++) { walker.update(ctx); } walker.drawEyes(ctx); }); } setup(); draw(); |
Перерисовать этих пипидастров (если кто не знает, то это метёлка для смахивания пыли) можно вызовом функции draw
, например:
<span onclick="draw();">Нажать для обновления</span>
Найдено на codepen.io у пользователя Johan Karlsson
Добавить комментарий: