Multiple Radial Point Interpolated Animation

Developer
Admiral Potato
Size
2,923 Kb
Views
6,072
  1. Multiple Radial Point Interpolated Animation Previews
  2. Multiple Radial Point Interpolated Animation HTML Codes
  3. Multiple Radial Point Interpolated Animation CSS Codes
  4. Multiple Radial Point Interpolated Animation JS Codes

How do I make an multiple radial point interpolated animation?

What is a multiple radial point interpolated animation? How do you make a multiple radial point interpolated animation? This script and codes were developed by Admiral Potato on 10 December 2022, Saturday.

Multiple Radial Point Interpolated Animation Previews
IQ Test

Multiple Radial Point Interpolated Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multiple Radial Point Interpolated Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<button id="add">+</button>
<button id="sub">-</button> <script src='https://admiralpotato.github.io/js/npos3d/build/npos3d.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Multiple Radial Point Interpolated Animation - Script Codes CSS Codes

*{ margin: 0; padding: 0; font-size: 24px;
}
html, body{ height: 100%;
}
button{	margin: 32px 0 32px 32px;	position: relative;	z-index: 10;	line-height: 32px;	text-align: center;	width: 32px;
}
canvas{ position: absolute;	z-index: 0; top: 0; left: 0;
}

Multiple Radial Point Interpolated Animation - Script Codes JS Codes

var n = NPos3d, m = n.Maths, s = new n.Scene({	backgroundColor: 'transparent'	});
var MultiPoint = function(args) {	var t = this, type = 'MultiPoint';	if(t.type !== type){throw type + ' must be invoked using the `new` keyword.';}	args = args || {};	t.radius = args.radius || 100;	t.currentAngle = args.currentAngle || 0;	t.destinationAngle = args.destinationAngle || 0;	t.axies = args.axies || [0,1];	t.point = [0,0,0];	t.point[t.axies[0]] = t.radius; // because the cos of 0 deg is always 1 this is 1 * radius	return t;
};
MultiPoint.prototype = {	type: 'MultiPoint',	drag: 0.1,	update: function() {	var t = this, diff;	if(t.currentAngle !== t.destinationAngle) {	diff = t.currentAngle - t.destinationAngle;	if(Math.abs(diff) < tau / 360 * 0.01 ) {	t.currentAngle = t.destinationAngle;	} else {	t.currentAngle -= (diff * t.drag);	}	t.point[t.axies[0]] = cos(t.currentAngle) * t.radius;	t.point[t.axies[1]] = sin(t.currentAngle) * t.radius;	return false; //not complete	}	return true; //complete	}
};
var MultiPointHolder = function(args) {	var t = this, type = 'MultiPointHolder';	if(t.type !== type){throw type + ' must be invoked using the `new` keyword.';}	args = args || {};	n.blessWith3DBase(t,args);	t.radius = args.radius || 100;	t.shape = {	points: [],	lines: []	};	t.multiPoints = [];	return t;
};
MultiPointHolder.prototype = {	type: 'MultiPointHolder',	renderAlways: true,	renderStyle: 'both',	pointStyle: 'stroke',	pointScale: 4,	update: function() {	var t = this, i, count = t.multiPoints.length, mPoint, complete;	t.lastRotString = false; //regen transformedPointCache	t.rot[0] += deg;	t.rot[1] += deg;	for(i = 0; i < count; i += 1){	mPoint = t.multiPoints[i];	complete = mPoint.update();	}	if(complete) {	t.color = '#0f0';	} else {	t.color = '#f00';	}	},	updateAllMultiPointAngles: function() {	var t = this,	count = t.multiPoints.length,	i, mPoint, angle = tau / count;	for(i = 0; i < count; i += 1){	mPoint = t.multiPoints[i];	mPoint.destinationAngle = angle * i;	}	},	addPoint: function() {	var t = this,	count = t.multiPoints.length,	mPoint = new MultiPoint({	currentAngle: tau,	radius: t.radius	});	t.multiPoints.push(mPoint);	t.shape.points.push(mPoint.point);	t.updateAllMultiPointAngles();	if(count > 0) {	t.shape.lines.push([count - 1, count]); //add line to last point	if(count > 1) {	t.shape.lines.push([0, count]); //add completing line	if(count > 2) {	t.shape.lines.splice(-3,1); // take off the last completing line	}	}	}	},	subPoint: function() {	var t = this,	count = t.multiPoints.length;	if(count > 0) {	t.multiPoints.pop();	t.shape.points.pop();	t.updateAllMultiPointAngles();	if(count > 1) {	t.shape.lines.pop();	if(count > 2) {	t.shape.lines.pop(); // take off the last completing line	if(count > 3) {	t.shape.lines.push([0, count -2]);	}	}	}	}	}
};
var mphList = [], mph, i, num = 20, rotOffset = 5;
for(i = 1; i <= num; i += 1){	mph = new MultiPointHolder({	rot: [(i * rotOffset) * deg,(i * rotOffset) * deg,(i * rotOffset) * deg],	radius: 50 + (i * 10)	});	mphList.push(mph);	s.add(mph);
}
var addOneToAll = function(item){item.addPoint();};
var subOneToAll = function(item){item.subPoint();};
var addHandler = function(){	mphList.forEach(addOneToAll);
};
var subHandler = function(){	mphList.forEach(subOneToAll);
};
for(i = 0; i < 6; i += 1){ //add 6 to start	addHandler();
}
document.getElementById('add').addEventListener('mouseup',addHandler,false);
document.getElementById('sub').addEventListener('mouseup',subHandler,false);
Multiple Radial Point Interpolated Animation - Script Codes
Multiple Radial Point Interpolated Animation - Script Codes
Home Page Home
Developer Admiral Potato
Username AdmiralPotato
Uploaded December 10, 2022
Rating 4
Size 2,923 Kb
Views 6,072
Do you need developer help for Multiple Radial Point Interpolated Animation?

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!

Admiral Potato (AdmiralPotato) Script Codes
Name
Spiralator 9000
Basic 3D Webkit Frequency Analyser
A Pen by Admiral Potato
Black Hole
Vertical Positioning
Empty NPos3D template
Create amazing blog posts 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!