Faces

Developer
Chad Scira
Size
3,526 Kb
Views
30,360
  1. Faces Previews
  2. Faces HTML Codes
  3. Faces CSS Codes
  4. Faces JS Codes

How do I make an faces?

Was bored and wanted to make something a little odd.. What is a faces? How do you make a faces? This script and codes were developed by Chad Scira on 27 August 2022, Saturday.

Faces Previews
IQ Test

Faces - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Faces</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Faces - Script Codes CSS Codes

body {	margin: 0; cursor: pointer;
}

Faces - Script Codes JS Codes

function PositionBacking ($config) { this.value = {}; this.current = {}; this.decay = {}; this.set($config);
}
PositionBacking.prototype._set = function (values) { if (typeof arguments[1] === 'object') { for (var name in arguments[1]) { this._set(values, name, arguments[1][name]); } } else { values[arguments[1]] = arguments[2]; }
};
PositionBacking.prototype.set = function () { this._set.apply(this, [this.value].concat(Array.prototype.slice.call(arguments))); this._set.apply(this, [this.current].concat(Array.prototype.slice.call(arguments))); this._set.apply(this, [this.decay, arguments[1], 0]);
};
PositionBacking.prototype.updateDecay = function (rate) { for (var name in this.decay) { if (!(typeof this.decay[name] === 'number')) { continue; } var decay = this.decay[name] - (this.decay[name] * rate); this.decay[name] *= rate; this.current[name] = this.current[name] + decay; }
};
PositionBacking.prototype.random = function (min, max) { return Math.random()*(max-min+1)+min;
};
function Scene () {	this.canvas = null;	this.context = null;	this.faces = null;	this.angle = 0;	this.mouse = {x: window.innerWidth/2, y: window.innerHeight/2};	this.clicked = false;	this.render = this.render.bind(this);	this.onMouseMove = this.onMouseMove.bind(this);	this.onClick = this.onClick.bind(this);	this.timeline = new TimelineMax({});	this.initializeCanvas();	this.initializeObjects(Math.floor(window.innerWidth / 6));	this.render();	window.addEventListener('mousemove', this.onMouseMove);	window.addEventListener('click', this.onClick);
}
Scene.prototype = {	pixelRatio: window.devicePixelRatio || 1,	initializeCanvas: function () {	this.canvas = document.createElement('canvas');	this.context = this.canvas.getContext('2d');	this.canvas.width = window.innerWidth * this.pixelRatio;	this.canvas.height = window.innerHeight * this.pixelRatio;	this.canvas.style.width = window.innerWidth + 'px';	this.canvas.style.height = window.innerHeight + 'px';	this.context.scale(this.pixelRatio, this.pixelRatio);	document.body.appendChild(this.canvas);	},	initializeObjects: function (faceSize) {	this.faces = [];	var w = faceSize,	h = w,	size = Math.floor(w * .9),	columns = Math.floor(window.innerWidth/w),	rows = Math.floor(window.innerHeight/h),	xOffset = (window.innerWidth - (columns * w))/2,	yOffset = (window.innerHeight - (rows * h))/2;	for (var x = 0; x < columns; x++) {	for (var y = 0; y < rows; y++) {	var face = new Face({x: (w*x) + (w/2) + xOffset, y: (h*y) + (h/2) + yOffset, w: w, h: h, size: size});	face.backing.current.x = window.innerWidth / 2;	face.backing.current.y = window.innerHeight / 2;	this.faces.push(face);	}	}	},	onMouseMove: function (event) {	this.mouse = {x: event.x, y: event.y};	},	onClick: function () {	this.clicked = true;	this.initializeObjects(Math.random() * 100 + 150)	this.faces.forEach(function (face) {	if (face.backing.value.x !== face.backing.current.x || face.backing.value.y !== face.backing.current.y) {	this.timeline.fromTo(face.backing.current, 1/2, {}, {x: face.backing.value.x, y: face.backing.value.y, ease: Quad.easeOut}, this.timeline.time() + 0);	} else {	this.timeline.fromTo(face.backing.current, 1/2, {}, {x: window.innerWidth/2, y: window.innerHeight/2, ease: Quad.easeOut}, this.timeline.time() + 0);	}	}, this);	},	getAngle: function (x1, y1, x2, y2) {	return (Math.atan2(y2 - y1, x2 - x1)) * 57.2957795;	},	getDistance: function (x1, y1, x2, y2) {	return Math.sqrt((x2-=x1)*x2 + (y2-=y1)*y2);	},	render: function () {	requestAnimationFrame(this.render);	this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);	this.faces.forEach(function (face) {	var currentAngle = face.backing.current.eyeAngle + (face.backing.decay.eyeAngle || 0),	angle = -this.getAngle(this.mouse.x, this.mouse.y, face.backing.current.x, face.backing.current.y) + 180,	diff = angle - (face.backing.current.eyeAngle + (face.backing.decay.eyeAngle || 0));	if (diff > 180) {	face.backing.decay.eyeAngle = diff - 360;	} else if (diff < -180) {	face.backing.decay.eyeAngle = diff + 360;	} else {	face.backing.decay.eyeAngle = diff;	}	face.backing.current.eyeRadius = (Math.abs(this.getDistance(this.mouse.x, this.mouse.y, face.backing.current.x, face.backing.current.y)) / (Math.sqrt(Math.pow(window.innerWidth,2)+Math.pow(window.innerHeight,2))/2)) * (face.backing.current.size * .08);	if (face.backing.current.eyeRadius < face.backing.current.size * .01) {	face.backing.current.eyeRadius = face.backing.current.size * .01;	} else if (face.backing.current.eyeRadius > face.backing.current.size * .08) {	face.backing.current.eyeRadius = face.backing.current.size * .08;	}	face.draw(this.context);	}, this);	var firstFace = this.faces[0];	if (!this.clicked) {	this.context.textAlign = 'center';	this.context.textBaseline = 'middle';	this.context.fillStyle = '#e43e3e';	this.context.font = '60px Helvetica';	this.context.fillText('touch', firstFace.backing.current.x, firstFace.backing.current.y + firstFace.backing.current.size / 2 + 40)	}	}
};
function Face ($config) {	this.size = $config.size;	this.eyeRadius = 0;	this.backing = new PositionBacking({	eyeAngle: 0,	eyeRadius: 0,	x: $config.x,	y: $config.y,	size: $config.size	});	this.decaySpeed = .9;
}
Face.prototype = {	getPointAtAngle: function (radius, angle) {	return {	x: radius * Math.cos(angle * Math.PI / 180),	y: radius * Math.sin(angle * Math.PI / 180)	};	},	draw: function (context) {	this.backing.updateDecay(this.decaySpeed);	// Body	context.fillStyle = '#e43e3e';	context.beginPath();	context.arc(this.backing.current.x, this.backing.current.y, this.backing.current.size/2, 0, 2 * Math.PI, false);	context.fill();	var eyePosition = this.getPointAtAngle(this.backing.current.eyeRadius, this.backing.current.eyeAngle);	// Left Eye	context.fillStyle = '#c00024';	context.beginPath();	context.arc(this.backing.current.x - (this.backing.current.size * .2), this.backing.current.y - (this.backing.current.size * .125), (this.backing.current.size * .125), 0, 2 * Math.PI, false);	context.fill();	// Right Eye	context.fillStyle = '#c00024';	context.beginPath();	context.arc(this.backing.current.x + (this.backing.current.size * .2), this.backing.current.y - (this.backing.current.size * .125), (this.backing.current.size * .125), 0, 2 * Math.PI, false);	context.fill();	// Right Eye Ball	context.fillStyle = '#fff';	context.beginPath();	context.arc(this.backing.current.x - (this.backing.current.size * .2) + eyePosition.x, this.backing.current.y - (this.backing.current.size * .125) - eyePosition.y, (this.backing.current.size * .035), 0, 2 * Math.PI, false);	context.fill();	// Left Eye Ball	context.fillStyle = '#fff';	context.beginPath();	context.arc(this.backing.current.x + (this.backing.current.size * .2) + eyePosition.x, this.backing.current.y - (this.backing.current.size * .125) - eyePosition.y, (this.backing.current.size * .035), 0, 2 * Math.PI, false);	context.fill();	// Mouth	context.fillStyle = '#a1001e';	context.beginPath();	context.arc(this.backing.current.x, this.backing.current.y + (this.backing.current.size * .2), this.backing.current.size * .075, 0, 2 * Math.PI, false);	context.fill();	}
};
new Scene();
Faces - Script Codes
Faces - Script Codes
Home Page Home
Developer Chad Scira
Username icodeforlove
Uploaded August 27, 2022
Rating 3
Size 3,526 Kb
Views 30,360
Do you need developer help for Faces?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chad Scira (icodeforlove) Script Codes
Name
Live example of core distribution
Animated rainbow wave on canvas
FizzBuzz CAPTCHA
FontAwesome
Raw Request to Requester Request
CSS Voxel Animation
A Pen by Chad Scira
Ripple Words
Client-side nudity detection
Canvas Text Vortex
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!