Фон с разноцветными существами

Пример:

Нажать для обновления

HTML:

<div id="furziez">
	<canvas></canvas>
</div>

</div>

CSS:

#furziez {
	height: 500px;
}

#furziez {

height: 500px;

}

JS:

!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();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

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

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: