Sphere detail

Developer
Darby Rathbone
Size
2,558 Kb
Views
30,360
  1. Sphere detail Previews
  2. Sphere detail HTML Codes
  3. Sphere detail CSS Codes
  4. Sphere detail JS Codes

How do I make an sphere detail?

What is a sphere detail? How do you make a sphere detail? This script and codes were developed by Darby Rathbone on 03 October 2022, Monday.

Sphere detail Previews
IQ Test

Sphere detail - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>sphere detail</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> sphere Detail
<input type="range" id='sphereDetail' name="points" min="2" max="200" value='5' style="width:300px;position:fixed;z-index:1;"></input> <script src="js/index.js"></script>
</body>
</html>

Sphere detail - Script Codes CSS Codes

canvas { position:fixed;
}

Sphere detail - Script Codes JS Codes

function Point3d(a, c, b) { this.x = (a === undefined) ? 0 : a; this.y = (c === undefined) ? 0 : c; this.z = (b === undefined) ? 0 : b; this.fl = 400; this.vpX = 0; this.vpY = 0; this.cX = 0; this.cY = 0; this.cZ = 0
}
Point3d.prototype = { setVanishingPoint: function (b, a) { this.vpX = b; this.vpY = a }, setCenter: function (c, b, a) { this.cX = c; this.cY = b; this.cZ = a }, rotateX: function (a) { var d = Math.cos(a), b = Math.sin(a), c = this.y * d - this.z * b, e = this.z * d + this.y * b; this.y = c; this.z = e; return this }, rotateY: function (a) { var d = Math.cos(a), c = Math.sin(a), b = this.x * d - this.z * c, e = this.z * d + this.x * c; this.x = b; this.z = e; return this }, rotateZ: function (a) { var d = Math.cos(a), b = Math.sin(a), c = this.x * d - this.y * b, e = this.y * d + this.x * b; this.x = c; this.y = e; return this }, getScreenX: function () { var a = this.fl / (this.fl + this.z + this.cZ); return this.vpX + (this.cX + this.x) * a }, getScreenY: function () { var a = this.fl / (this.fl + this.z + this.cZ); return this.vpY + (this.cY + this.y) * a }
};
var points = [];
var sd = document.getElementById('sphereDetail');
/*//////////////////////////////////////////////////////////////////*/
///*this is where it calculates all of the point information*////
/*//////////////////////////////////////////////////////////////////*/
function makepoints() { var sphereDetail = sd.value; points = []; points.push(new Point3d(0, 0, -1)); var change = Math.PI / sphereDetail; for (var j = 0; j < sphereDetail; j++) { for (var i = 0; i < sphereDetail; i++) { points.push(new Point3d(Math.sin(change * j) * Math.cos((2 * i * Math.PI / sphereDetail) + (j * Math.PI / sphereDetail)), Math.sin(change * j) * Math.sin((2 * i * Math.PI / sphereDetail) + (j * Math.PI / sphereDetail)), Math.cos(change * j))); } } points.push(new Point3d(0, 0, 1)); points = points.map(function (e) { return new Point3d(e.x * 400, e.y * 400, e.z * 400) });
}
/*//////////////////////////////////////////////////////////////////*/
///*ends here*////
/*//////////////////////////////////////////////////////////////////*/
sd.addEventListener('change', makepoints);
sd.addEventListener('mousedown', function () { makepoints(); sd.addEventListener('mousemove', makepoints); sd.addEventListener('mouseup', function () { sd.removeEventListener('mousemove', makepoints); sd.removeEventListener('mouseup', makepoints); makepoints(); });
});
function displaypoints(b) { context.fillRect(b.getScreenX(), b.getScreenY(), 3, 3);
}
var can = document.createElement("canvas");
can.width = 500;
can.height = 500;
var context = can.getContext("2d");
document.body.appendChild(can);
var mousex = 250, mousey = 250;
function displayer() { context.clearRect(0, 0, can.width, can.height); points.forEach(function (a) { a.rotateX((mousey - a.vpY) * 0.0001).rotateY((mousex - a.vpX) * 0.0001); a.setVanishingPoint(250, 250); a.setCenter(a.x, a.y, 1000) }); points.forEach(displaypoints); requestAnimationFrame(displayer);
}
requestAnimationFrame(displayer);
document.body.onmousemove = function (a) { mousex = a.pageX; mousey = a.pageY
};
makepoints();
Sphere detail - Script Codes
Sphere detail - Script Codes
Home Page Home
Developer Darby Rathbone
Username blackkbot
Uploaded October 03, 2022
Rating 3
Size 2,558 Kb
Views 30,360
Do you need developer help for Sphere detail?

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!

Darby Rathbone (blackkbot) Script Codes
Name
3d pure javascript 2d canvas
3d hand
Graphing equations
Pendulum
Ball physics
Slow Delaunay triangulation
JQuery Number Counter Plugin
Java style console
Webworker with an editable textbox
Balls
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!