Orbitals

Size
3,148 Kb
Views
38,456

How do I make an orbitals?

What is a orbitals? How do you make a orbitals? This script and codes were developed by Truman Heberle on 30 September 2022, Friday.

Orbitals Previews

Orbitals - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Orbitals</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas" width="100" height="100"></canvas>
<div id="text">Orbitals</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Orbitals - Script Codes CSS Codes

body { background-color: black;
}
#myCanvas { position: absolute; left: 0; top: 0; z-index: 100;
}
#text { position: absolute; left: 0; top: 0; width: auto; height: auto; color: purple; font-size: 100px; text-align: center; text-shadow: 0px 0px 30px purple; z-index: 0;
}

Orbitals - Script Codes JS Codes

var h,w,th,tw; //Appearance
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var positions,realPositions,vels,accs,colors,rads,realRads,forces,masses; //Physics
var d,G=6.674*Math.pow(10,-11), updateTime=100, PDR=(2.44*Math.pow(10,5)), radInit = 10, realRadInit = 2.44*Math.pow(10,6),//(Radius of Mercury) massInit = 3.285*Math.pow(10,23);//(Mass of Mercury) //Constants
function resize(){ h = $(window).height(); w = $(window).width(); th = $(text).height(); tw = $(text).width(); $(myCanvas).attr("width",w); $(myCanvas).attr("height",h); $(text).css("top",(h-th)/2); $(text).css("left",(w-tw)/2);
}
function init(){ positions = []; realPositions = []; colors = []; rads = []; realRads = []; vels = []; accs = []; forces = []; masses = [];
}
function click(event) { x = event.x; y = event.y; canvas = document.getElementById("myCanvas"); x -= canvas.offsetLeft; y -= canvas.offsetTop; positions.push([x,y]); realPositions.push([x*PDR,y*PDR]); vels.push([0,0]); accs.push([0,0]); rads.push(radInit); realRads.push(realRadInit);//radius of Mercury forces.push([0,0]); masses.push(massInit);//Mass of Mercury
}
function draw(){ ctx.clearRect(0,0,w,h); for(var x=0; x<positions.length; x++){ ctx.beginPath(); ctx.arc(positions[x][0], positions[x][1],rads[x], 0, 2 * Math.PI); ctx.fillStyle = 'red'; ctx.fill(); ctx.strokeStyle = 'red'; ctx.shadowBlur = rads[x]; ctx.shadowColor = 'red'; ctx.stroke(); }
}
function forceCalc(index){ //fg=G*m1*m2/(d^2) forceX = 0; forceY = 0; for(var x=0; x<positions.length; x++){ if(x!=index){ d = Math.sqrt(Math.pow(realPositions[x][0]-realPositions[index][0],2)+Math.pow(realPositions[x][1]-realPositions[index][1],2)); localF = 0; localFX = 0; localFY = 0; if(d>0){ localF = G*masses[index]*masses[x]/Math.pow(d,2); angle = Math.acos(Math.abs(realPositions[x][0]-realPositions[index][0])/d); if(positions[index][0]>positions[x][0]){ localFX = -1*localF*Math.cos(angle); } else{ localFX = localF*Math.cos(angle); } if(positions[index][1]<positions[x][1]){ localFY = localF*Math.sin(angle); } else{ localFY = -1*localF*Math.sin(angle); } } console.log(localFX,localFY); forceX += localFX; forceY += localFY; } } forces[index][0] = forceX; forces[index][1] = forceY;
}
function accelCalc(index){ //f=ma accs[index][0] = forces[index][0]/masses[index]; accs[index][1] = forces[index][1]/masses[index];
}
function velocityCalc(index){ //(a*dt)+vi=vf vels[index][0] += accs[index][0]*(updateTime/1000); vels[index][1] += accs[index][1]*(updateTime/1000);
}
function positionCalc(index){ //(v*dt)+xi=xf positions[index][0] += vels[index][0]*(updateTime/1000); positions[index][1] += vels[index][1]*(updateTime/1000);
}
function update(){ if(positions.length>1){ for(var x=0; x<positions.length;x++){ forceCalc(x); } for(var x=0; x<positions.length;x++){ accelCalc(x); velocityCalc(x); positionCalc(x); } }
}
resize();
init();
console.log(positions);
setInterval(function(){ draw(); update();
}, 100);
$(window).on('resize', function() { resize();
});
canvas.addEventListener("mousedown", click, false);
Orbitals - Script Codes
Orbitals - Script Codes
Home Page Home
Developer Truman Heberle
Username trumanheberle
Uploaded September 30, 2022
Rating 3
Size 3,148 Kb
Views 38,456
Do you need developer help for Orbitals?

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!

Truman Heberle (trumanheberle) Script Codes
Create amazing marketing copy 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!