Canvas Text Vortex

Developer
Chad Scira
Size
3,252 Kb
Views
34,408
  1. Canvas Text Vortex Previews
  2. Canvas Text Vortex HTML Codes
  3. Canvas Text Vortex CSS Codes
  4. Canvas Text Vortex JS Codes

How do I make an canvas text vortex?

What is a canvas text vortex? How do you make a canvas text vortex? This script and codes were developed by Chad Scira on 27 August 2022, Saturday.

Canvas Text Vortex Previews
IQ Test

Canvas Text Vortex - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Text Vortex</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Canvas Text Vortex - Script Codes CSS Codes

body { margin: 0;
}

Canvas Text Vortex - Script Codes JS Codes

var Easing = {	// t: current time, b: begInnIng value, c: change In value, d: duration	swing: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return Easing.easeOutQuad(x, t, b, c, d);	},	easeInQuad: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return c*(t/=d)*t + b;	},	easeOutQuad: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return -c *(t/=d)*(t-2) + b;	},	easeInOutQuad: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if ((t/=d/2) < 1) return c/2*t*t + b;	return -c/2 * ((--t)*(t-2) - 1) + b;	},	easeInCubic: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return c*(t/=d)*t*t + b;	},	easeOutCubic: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return c*((t=t/d-1)*t*t + 1) + b;	},	easeInOutCubic: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if ((t/=d/2) < 1) return c/2*t*t*t + b;	return c/2*((t-=2)*t*t + 2) + b;	},	easeInQuart: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return c*(t/=d)*t*t*t + b;	},	easeOutQuart: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return -c * ((t=t/d-1)*t*t*t - 1) + b;	},	easeInOutQuart: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if ((t/=d/2) < 1) return c/2*t*t*t*t + b;	return -c/2 * ((t-=2)*t*t*t - 2) + b;	},	easeInQuint: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return c*(t/=d)*t*t*t*t + b;	},	easeOutQuint: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return c*((t=t/d-1)*t*t*t*t + 1) + b;	},	easeInOutQuint: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;	return c/2*((t-=2)*t*t*t*t + 2) + b;	},	easeInSine: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return -c * Math.cos(t/d * (Math.PI/2)) + c + b;	},	easeOutSine: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return c * Math.sin(t/d * (Math.PI/2)) + b;	},	easeInOutSine: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;	},	easeInExpo: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;	},	easeOutExpo: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;	},	easeInOutExpo: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if (t==0) return b;	if (t==d) return b+c;	if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;	return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;	},	easeInCirc: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;	},	easeOutCirc: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return c * Math.sqrt(1 - (t=t/d-1)*t) + b;	},	easeInOutCirc: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;	return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;	},	easeInElastic: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	var s=1.70158;var p=0;var a=c;	if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;	if (a < Math.abs(c)) { a=c; var s=p/4; }	else var s = p/(2*Math.PI) * Math.asin (c/a);	return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;	},	easeOutElastic: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	var s=1.70158;var p=0;var a=c;	if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;	if (a < Math.abs(c)) { a=c; var s=p/4; }	else var s = p/(2*Math.PI) * Math.asin (c/a);	return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;	},	easeInOutElastic: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	var s=1.70158;var p=0;var a=c;	if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);	if (a < Math.abs(c)) { a=c; var s=p/4; }	else var s = p/(2*Math.PI) * Math.asin (c/a);	if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;	return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;	},	easeInBack: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if (s == undefined) s = 1.70158;	return c*(t/=d)*t*((s+1)*t - s) + b;	},	easeOutBack: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if (s == undefined) s = 1.70158;	return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;	},	easeInOutBack: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if (s == undefined) s = 1.70158;	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;	},	easeInBounce: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	return c - Easing.easeOutBounce (x, d-t, 0, c, d) + b;	},	easeOutBounce: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if ((t/=d) < (1/2.75)) {	return c*(7.5625*t*t) + b;	} else if (t < (2/2.75)) {	return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;	} else if (t < (2.5/2.75)) {	return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;	} else {	return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;	}	},	easeInOutBounce: function (x, t, b, c, d) {	if (arguments.length === 1) {	t = arguments[0]; x = 0; b = 0; c = 1; d = 1;	}	if (t < d/2) return Easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;	return Easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;	}
};
function getRandomInt(min, max) {	return Math.floor(Math.random() * (max - min + 1)) + min;
}
function Tween ($config) {	this.start = Date.now();	this.duration = $config.duration;	this.data = $config.data;
}
Tween.prototype.isFinished = function () {	return Date.now() > this.start + this.duration;
};
Tween.prototype.getPercent = function () {	return ((this.start + this.duration) - Date.now()) / this.duration;
};
var canvas = document.createElement('canvas'),	context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var tweens = [];
function draw () {	requestAnimationFrame(draw);	context.clearRect(0, 0, canvas.width, canvas.height);	tweens.forEach(function (tween, index, array) {	if (tween.isFinished()) {	tweens.splice(tweens.indexOf(tween), 1);	} else {	var percent = Easing.easeInOutQuad(tween.getPercent()).toFixed(3),	size = Math.floor((16 * tween.data.scale) * percent);	if (size < .5) return;	context.font = size + 'px Arial';	var text = tween.data.text; context.fillStyle = '#ff4742';	context.fillText(text, (canvas.width/2 + ((percent) * tween.data.x) - (context.measureText(text).width/2)).toFixed(3), (canvas.height/2 + ((percent) * tween.data.y) - (size/2)).toFixed(3));	//context.fillRect((canvas.width/2 + ((percent) * tween.data.x) - (size/2)), (canvas.height/2 + ((percent) * tween.data.y) - (size/2)), size, size);	}	});
}
function addParticle () { var x, y, scale = 1 + Math.random() * 3, side = getRandomInt(0, 3);	if (side === 0) {	// left	x = -window.innerWidth/2 - 50;	y = getRandomInt(-window.innerHeight/2 - 1, window.innerHeight/2 - 1);	} else if (side === 1) {	// top	x = getRandomInt(-window.innerWidth/2 - 1, window.innerWidth/2 - 1);	y = -window.innerHeight/2 - 50;	} else if (side === 2) {	// right	x = window.innerWidth/2 + 50;	y = getRandomInt(-window.innerHeight/2 - 1, window.innerHeight/2 - 1);	} else if (side === 3) {	// bottom	x = getRandomInt(-window.innerWidth/2 - 1, window.innerWidth/2 - 1);	y = window.innerHeight/2 + 50;	} tweens.push(new Tween({ duration: 800 + (Math.random() * 500), data: {x: x, y: y, scale: scale, text: 'hello'} }));
}
setInterval(function () { for (var i = 0; i < 10; i++) addParticle();
}, 200);
//addParticle();
draw();
Canvas Text Vortex - Script Codes
Canvas Text Vortex - Script Codes
Home Page Home
Developer Chad Scira
Username icodeforlove
Uploaded August 27, 2022
Rating 4
Size 3,252 Kb
Views 34,408
Do you need developer help for Canvas Text Vortex?

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
FizzBuzz CAPTCHA
Ripple Words
Animated 3D Text
Curl Request to Node Request
CSS Voxel Animation
Live example of core distribution
Animated rainbow wave on canvas
Dippin Dots
Text Vortex
Faces
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!