Реагирующие на курсор глаза

Решение выполнено на движке Matter

Matter.js - это двумерный движок на JavaScript, который позволяет создавать твердые тела и присваивать им физические свойства, такие как масса, площадь или плотность.

Пример:

HTML:

<div class="eyes">
	<div class="eyeball-physics"></div>
	<div class="eyeball-sprites"></div>	
</div>

</div>

CSS:

.eyes {
	height: 600px;
	background: #337AB7;
	position: relative;
	background: url(mario.jpg);
	background-size: contain;
}		
.eyeball-physics {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
}
.eyeball-sprites {
	pointer-events: none;
}
.eyeball {
	background: #FFFFFF;
	border-radius: 100%;
	overflow: hidden;
	position: absolute;
}
.eyeball > div {
	background: url(eyeball.png);
	background-size: contain;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 1;
}
.eyeball::after {
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0, rgba(0,0,0,0) 30%,rgba(0,0,0,2.5) 100%);
	border-radius: 100%;
	box-shadow: inset -10px -10px 15px rgba(0,0,0,0.9);
	content: '';
	display: block;
	height: 140%;
	left: -30%;
	position: absolute;
	top: -30%;
	width: 140%;
	z-index: 2;
}
.eyeball--1 > div {
	filter: hue-rotate(45deg);
}
.eyeball--2 > div {
	filter: hue-rotate(90deg);
}
.eyeball--3 > div {
	filter: hue-rotate(195deg);
}
.eyeball--4 > div {
	filter: hue-rotate(255deg);
}

.eyes {

height: 600px;

background: #337AB7;

position: relative;

background: url(mario.jpg);

background-size: contain;

}

.eyeball-physics {

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

overflow: hidden;

}

.eyeball-sprites {

pointer-events: none;

}

.eyeball {

background: #FFFFFF;

border-radius: 100%;

overflow: hidden;

position: absolute;

}

.eyeball > div {

background: url(eyeball.png);

background-size: contain;

height: 100%;

position: absolute;

width: 100%;

z-index: 1;

}

.eyeball::after {

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0, rgba(0,0,0,0) 30%,rgba(0,0,0,2.5) 100%);

border-radius: 100%;

box-shadow: inset -10px -10px 15px rgba(0,0,0,0.9);

content: '';

display: block;

height: 140%;

left: -30%;

position: absolute;

top: -30%;

width: 140%;

z-index: 2;

}

.eyeball--1 > div {

filter: hue-rotate(45deg);

}

.eyeball--2 > div {

filter: hue-rotate(90deg);

}

.eyeball--3 > div {

filter: hue-rotate(195deg);

}

.eyeball--4 > div {

filter: hue-rotate(255deg);

}

JS:

Подключаем библиотеку matter.min.js
Подключаем скрипт ниже, в котором numCircles - кол-во глаз

let container = document.querySelector('.eyes');	
let w = container.offsetWidth;
let h = container.offsetHeight;
const numCircles = 40;
let ground;
let wall1;
let wall2;
const content = document.querySelector('.eyeball-physics');
let elements = [];
let eyeballs = [];
window.addEventListener('resize', (e) => {
	w = container.offsetWidth;
	h = container.offsetHeight;
	engine.render.canvas.width = w;
	engine.render.canvas.height = h;
	Matter.Body.setPosition(wall2, Matter.Vector.create(w + 30, h * .5));
	Matter.Body.setPosition(ground, Matter.Vector.create(w * .5, h + 30));
});
var engine = Matter.Engine.create(content, {
	render: {
		options: {
			width: w,
			height: h,
			wireframes: false,
			background: "transparent"
		}
	}
});
window.engine = engine;
var mouseConstraint = Matter.MouseConstraint.create(engine, {
	constraint: {
		render: {
			visible: false
		},
		stiffness:0.1
	}
});
let spritesArea = document.querySelector('.eyeball-sprites');
class Eyeball {
	constructor() {
		var x = Math.random() * w;
		var y = Math.random() * - h;
		var base = w / 30;
		if(base < 5) base = 5;
		if(base > 10) base = 10;
		var multiplier = w / 10;
		if(multiplier < 30) multiplier = 30;
		if(multiplier > 60) multiplier = 60;
		this.radius = base + (Math.random() * multiplier);
		this.body = Matter.Bodies.circle(x, y, this.radius,
			{render: {
				fillStyle: 'transparent'
			}});
			this.element = document.createElement('div');
			this.element.className = 'eyeball ' + 'eyeball--' + Math.floor(Math.random() * 5);
			this.element.style.width = this.radius * 2 + 'px';
			this.element.style.height = this.radius * 2 + 'px';
			this.cornea = document.createElement('div');
			this.element.appendChild(this.cornea)
			spritesArea.appendChild(this.element);
	}
	update() {
		this.pos = {x: this.body.position.x, y: this.body.position.y}
		this.element.style.transform = `translate(${this.pos.x - this.radius}px, ${this.pos.y - this.radius}px)`;
	}
	lookAt(pos) {
		let diff = { x: pos.x - this.pos.x, y: pos.y - this.pos.y };
		let polar = [
			Math.sqrt(
				diff.x * diff.x + diff.y * diff.y
			),
			Math.atan2(diff.y, diff.x)
		];
		let dist = polar[0] < this.radius * .5 ? polar[0] : this.radius * .5;
		this.cornea.style.transform = `translate(${Math.cos(polar[1]) * dist}px, ${Math.sin(polar[1]) * dist}px)`;
		window.cornea = `translate(${Math.cos(polar[1]) * dist}px, ${Math.sin(polar[1]) * dist}px)`;
		window.polar = polar
	}
}
let mousepos = {x: 0, y: 0};
window.addEventListener('pointermove', (e) => {
	mousepos = {x: e.clientX - container.getBoundingClientRect().left, y: e.clientY - container.getBoundingClientRect().top};
});
for(var i = 0; i < numCircles; i++)
{
	eyeballs.push(new Eyeball);
}
ground = Matter.Bodies.rectangle(w/2, h+30, 50000., 60, { isStatic: true });
wall1 = Matter.Bodies.rectangle(-30, h/2, 60, h*2, { isStatic: true });
wall2 = Matter.Bodies.rectangle(w+30, h/2, 60, h*2, { isStatic: true });
window.wall2 = wall2;
elements.push(ground);
elements.push(wall1);
elements.push(wall2);
Matter.World.add(engine.world, eyeballs.map(eyeball => eyeball.body).concat(elements));
Matter.World.add(engine.world, mouseConstraint);
Matter.Engine.run(engine);
Matter.Events.on(engine, "afterUpdate", () => {
	eyeballs.forEach((eye) => {
		eye.update();
		eye.lookAt(mousepos);
	});
});

100

101

102

103

let container = document.querySelector('.eyes');

let w = container.offsetWidth;

let h = container.offsetHeight;

const numCircles = 40;

let ground;

let wall1;

let wall2;

const content = document.querySelector('.eyeball-physics');

let elements = [];

let eyeballs = [];

window.addEventListener('resize', (e) => {

w = container.offsetWidth;

h = container.offsetHeight;

engine.render.canvas.width = w;

engine.render.canvas.height = h;

Matter.Body.setPosition(wall2, Matter.Vector.create(w + 30, h * .5));

Matter.Body.setPosition(ground, Matter.Vector.create(w * .5, h + 30));

});

var engine = Matter.Engine.create(content, {

render: {

options: {

width: w,

height: h,

wireframes: false,

background: "transparent"

}

});

window.engine = engine;

var mouseConstraint = Matter.MouseConstraint.create(engine, {

constraint: {

render: {

visible: false

stiffness:0.1

}

});

let spritesArea = document.querySelector('.eyeball-sprites');

class Eyeball {

constructor() {

var x = Math.random() * w;

var y = Math.random() * - h;

var base = w / 30;

if(base < 5) base = 5;

if(base > 10) base = 10;

var multiplier = w / 10;

if(multiplier < 30) multiplier = 30;

if(multiplier > 60) multiplier = 60;

this.radius = base + (Math.random() * multiplier);

this.body = Matter.Bodies.circle(x, y, this.radius,

{render: {

fillStyle: 'transparent'

}});

this.element = document.createElement('div');

this.element.className = 'eyeball ' + 'eyeball--' + Math.floor(Math.random() * 5);

this.element.style.width = this.radius * 2 + 'px';

this.element.style.height = this.radius * 2 + 'px';

this.cornea = document.createElement('div');

this.element.appendChild(this.cornea)

spritesArea.appendChild(this.element);

}

update() {

this.pos = {x: this.body.position.x, y: this.body.position.y}

this.element.style.transform = `translate(${this.pos.x - this.radius}px, ${this.pos.y - this.radius}px)`;

}

lookAt(pos) {

let diff = { x: pos.x - this.pos.x, y: pos.y - this.pos.y };

let polar = [

Math.sqrt(

diff.x * diff.x + diff.y * diff.y

Math.atan2(diff.y, diff.x)

];

let dist = polar[0] < this.radius * .5 ? polar[0] : this.radius * .5;

this.cornea.style.transform = `translate(${Math.cos(polar[1]) * dist}px, ${Math.sin(polar[1]) * dist}px)`;

window.cornea = `translate(${Math.cos(polar[1]) * dist}px, ${Math.sin(polar[1]) * dist}px)`;

window.polar = polar

}

let mousepos = {x: 0, y: 0};

window.addEventListener('pointermove', (e) => {

mousepos = {x: e.clientX - container.getBoundingClientRect().left, y: e.clientY - container.getBoundingClientRect().top};

});

for(var i = 0; i < numCircles; i++)

{

eyeballs.push(new Eyeball);

}

ground = Matter.Bodies.rectangle(w/2, h+30, 50000., 60, { isStatic: true });

wall1 = Matter.Bodies.rectangle(-30, h/2, 60, h*2, { isStatic: true });

wall2 = Matter.Bodies.rectangle(w+30, h/2, 60, h*2, { isStatic: true });

window.wall2 = wall2;

elements.push(ground);

elements.push(wall1);

elements.push(wall2);

Matter.World.add(engine.world, eyeballs.map(eyeball => eyeball.body).concat(elements));

Matter.World.add(engine.world, mouseConstraint);

Matter.Engine.run(engine);

Matter.Events.on(engine, "afterUpdate", () => {

eyeballs.forEach((eye) => {

eye.update();

eye.lookAt(mousepos);

});

Найдено на codepen.io у пользователя Liam Egan
Библиотека Matter.js

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Опубликовано: 04.03.2021 / Обновлено: 05.05.2025
Рубрики: Разное
Метки: JavaScript, matter
4151 просмотр

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

Страница входа на сайтах будущего

Шуточный пример входной страницы сайта

Игра "Сапер" на JavaScript

Небольшой скрипт реализующий знаменитую игру "Сапер"

Генератор сов

Бесполезный, но интересный скрипт, генерирующий случаным образом сов

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

Ваш комментарий отправлен!