Sphere

Developer
Dmitriy Karpov
Size
2,432 Kb
Views
54,648
  1. Sphere Previews
  2. Sphere HTML Codes
  3. Sphere CSS Codes
  4. Sphere JS Codes

How do I make an sphere?

What is a sphere? How do you make a sphere? This script and codes were developed by Dmitriy Karpov on 27 August 2022, Saturday.

Sphere Previews
IQ Test

Sphere - Script Codes HTML Codes

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

Sphere - Script Codes CSS Codes

body, html {height: 100%; width: 100%;}
body {margin: 0;}
canvas {display: block;}
body { background-color: #111; background-image: -webkit-radial-gradient(circle cover, #222, #000); background-image: -moz-radial-gradient(circle cover, #222, #000); background-image: radial-gradient(circle cover, #222, #000);
}

Sphere - Script Codes JS Codes

var D = { data: new Array(15), points: 200, radius: 80, speed: 0.05, circle: 65, Fill: function(x, y) { D.ctx.fillStyle = 'rgba(255,255,255,0.2)'; D.ctx.fillRect(D.canvas.width / 2 + x, D.canvas.height / 2 - y, 1, 1); }, Factor: function(i) { return (i - D.data.length / 2) * 2 * D.radius / D.data.length; }, Increase: function(i) { D.data[i] += D.speed; if (D.data[i] > D.data.length) { D.data[i] = 0; } }, Add: function(i, e) { var a1 = i * Math.PI / D.points - Math.PI / 2; var x1 = Math.cos(a1) * e.x; var y1 = Math.sin(a1) * D.radius; var a2 = i * Math.PI / D.points; var x2 = Math.cos(a2) * D.radius; var y2 = Math.sin(a2) * e.y; D.Fill(x1, y1); D.Fill(x2, y2); }, Sphere: function() { for (var i = 0; i < D.data.length; i++) { var factor = { x: D.Factor(D.data[i]), y: D.Factor(i) }; for (var j = 0; j < D.points; j++) { D.Add(j, factor); } D.Increase(i); } }, Clear: function() { D.ctx.clearRect(0, 0, D.canvas.width, D.canvas.height); }, Circle: function() { D.ctx.beginPath(); D.ctx.arc(D.canvas.width / 2, D.canvas.height / 2, D.circle, 0, 2 * Math.PI, false); D.ctx.fillStyle = D.gradient; D.ctx.fill(); }, Stroke: function() { D.ctx.beginPath(); D.ctx.arc(D.canvas.width / 2, D.canvas.height / 2, D.radius, 0, 2 * Math.PI, false); D.ctx.strokeStyle = 'rgba(255,255,255,0.4)'; D.ctx.stroke(); }, Update: function() { D.Clear(); D.Stroke(); D.Circle(); D.Sphere(); }, Draw: function() { D.Update(); requestAnimationFrame(D.Draw, D.canvas); }, Gradient: function() { var x1 = D.canvas.width / 2 - D.circle / 2; var y1 = D.canvas.height / 2 + D.circle / 2; var x2 = D.canvas.width / 2 + D.circle / 2; var y2 = D.canvas.height/2 - D.circle / 2; D.gradient = D.ctx.createLinearGradient(x1, y1, x2, y2); D.gradient.addColorStop(0,'rgba(200,200,200,1)'); D.gradient.addColorStop(1,'rgba(70,70,70,1)'); }, Set: function() { for (var i = 0; i < D.data.length; i++) { D.data[i] = i; } D.Gradient(); }, Size: function() { D.canvas.width = window.innerWidth; D.canvas.height = window.innerHeight; }, Run: function() { D.canvas = document.querySelector('canvas'); D.ctx = D.canvas.getContext('2d'); window.addEventListener('resize', D.Size, false); D.Size(); }, Init: function() { D.Run(); D.Set(); D.Draw(); }
};
D.Init();
Sphere - Script Codes
Sphere - Script Codes
Home Page Home
Developer Dmitriy Karpov
Username karpovsystems
Uploaded August 27, 2022
Rating 4.5
Size 2,432 Kb
Views 54,648
Do you need developer help for Sphere?

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!

Dmitriy Karpov (karpovsystems) Script Codes
Name
Curve Bezier
CSS 3D Panorama
Gradients
Icosahedron
Spin
Javascript Pagination
Metro style icons
CSS3 text transitions
Larvaes
Eye of Sauron
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!