Gravity simulation

Developer
Mirjamsk
Size
4,699 Kb
Views
2,024
  1. Gravity simulation Previews
  2. Gravity simulation HTML Codes
  3. Gravity simulation CSS Codes
  4. Gravity simulation JS Codes

How do I make an gravity simulation?

<\svg> and js exercise: gravity simulationby clicking on screen new ball is rendered in free-fall. What is a gravity simulation? How do you make a gravity simulation? This script and codes were developed by Mirjamsk on 26 January 2023, Thursday.

Gravity simulation Previews
IQ Test

Gravity simulation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>gravity simulation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="svg1"> </svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Gravity simulation - Script Codes CSS Codes

body{	margin: 0;	padding: 0;	font-size: 12px;
}
svg {	width:	100vw;	height:	100vh;	z-index: -10;	overflow: hidden;	position: absolute;
}
text{	font-size: 2.5em;	font-family: 'Raleway', 'Verdana', serif;
}
text tspan{ font-size: 0.6em; }
.random_color:hover { opacity :1 !important; }

Gravity simulation - Script Codes JS Codes

// a lot of javaScript
// https://github.com/alojzije/svgGravitySimulation_js/tree/master/scripts
// it's much better if you view it full page, but you know... your call
// try resizing the window ^^
//the minified code
function Vector2D(a,b){this.x=isFinite(a)?a:0;this.y=isFinite(b)?b:0}Vector2D.prototype.add=function(a){this.x+=a.x;this.y+=a.y};Vector2D.prototype.sub=function(a){this.x-=a.x;this.y-=a.y};Vector2D.prototype.mult=function(a){isFinite(a)||(a=0);this.x*=a;this.y*=a};Vector2D.prototype.getMagnitude=function(){return Math.sqrt(this.x*this.x+this.y*this.y)};Vector2D.prototype.normalize=function(){var a=this.getMagnitude();this.mult(1/a)};
Vector2D.prototype.getCopy=function(){return new Vector2D(this.x,this.y)};Vector2D.add=function(a,b){return new Vector2D(a.x+b.x,a.y+b.y)};Vector2D.sub=function(a,b){return new Vector2D(a.x-b.x,a.y-b.y)};Vector2D.mult=function(a,b){isFinite(b)||(b=0);return new Vector2D(a.x*b,a.y*b)};Vector2D.getNormalized=function(a){var b=a.getMagnitude();return Vector2D.mult(a,1/b)};Vector2D.copy=function(a){return new Vector2D(a.x,a.y)};
function Mover(a,b,c,d,e){this.mass=isFinite(e)&&0<e?e:1;this.position=b instanceof Vector2D?b:new Vector2D;this.velocity=c instanceof Vector2D?c:new Vector2D;this.acceleration=d instanceof Vector2D?d:new Vector2D;this.domId=a instanceof String||"string"==typeof a?a:"";this.isMoving=!1;this.rx=this.getRadiusX();this.ry=this.getRadiusY()}Mover.prototype.applyForce=function(a){a=Vector2D.mult(a,1/this.mass);this.acceleration.add(a)};
Mover.prototype.update=function(){this.isMoving=!0;this.velocity.add(this.acceleration);this.position.add(this.velocity);this.acceleration.mult(0)};Mover.prototype.show=function(){0<$(this.domId).length&&($(this.domId).attr("cx",this.position.x),$(this.domId).attr("cy",this.position.y))};
Mover.prototype.checkEdges=function(){this.position.x<this.rx?(this.position.x=this.rx,this.velocity.x*=-1):this.position.x+this.rx>$(window).width()&&(this.position.x=$(window).width()-this.rx,this.velocity.x*=-1);this.position.y<this.ry?(this.position.y=this.ry,this.velocity.y*=-1):this.position.y+this.ry>$(window).height()&&(this.position.y=$(window).height()-this.ry,this.velocity.y*=-1)};
Mover.prototype.checkIfFinished=function(a){.1>Math.abs(this.position.y+this.ry-$(window).height())&&.1>this.velocity.getMagnitude()&&(clearInterval(a),this.isMoving=!1,console.log("fin "+this.domId))};Mover.prototype.setPosition=function(a,b){a instanceof Vector2D?this.position=a:(isFinite(a)&&(this.position.x=a),isFinite(b)&&(this.position.y=b))};Mover.prototype.setVelocity=function(a,b){a instanceof Vector2D?this.velocity=a:(isFinite(a)&&(this.velocity.x=a),isFinite(b)&&(this.velocity.y=b))};
Mover.prototype.getRadiusX=function(){if(0<$(this.domId).length){if($(this.domId).attr("rx"))return parseInt($(this.domId).attr("rx"));if($(this.domId).attr("r"))return parseInt($(this.domId).attr("r"))}return 0};Mover.prototype.getRadiusY=function(){if(0<$(this.domId).length){if($(this.domId).attr("ry"))return parseInt($(this.domId).attr("ry"));if($(this.domId).attr("r"))return parseInt($(this.domId).attr("r"))}return 0};
function Circle(a,b,c,d,e){this.mass=isFinite(e)&&0<e?e:1;this.position=b instanceof Vector2D?b:new Vector2D;this.velocity=c instanceof Vector2D?c:new Vector2D;this.acceleration=d instanceof Vector2D?d:new Vector2D;this.domId=a instanceof String||"string"==typeof a?a:"";this.ry=this.rx=this.getRadius()}Circle.prototype=new Mover;Circle.prototype.getRadius=function(){if(0<$(this.domId).length)return $(this.domId).attr("r")?parseInt($(this.domId).attr("r")):0};
Circle.prototype.setDimensions=function(a){0<$(this.domId).length&&isFinite(a)&&($(this.domId).attr("r",a),this.ry=this.rx=a)};function Ellipse(a,b,c,d,e){this.mass=isFinite(e)&&0<e?e:1;this.position=b instanceof Vector2D?b:new Vector2D;this.velocity=c instanceof Vector2D?c:new Vector2D;this.acceleration=d instanceof Vector2D?d:new Vector2D;this.domId=a instanceof String||"string"==typeof a?a:"";this.rx=this.getRadiusX();this.ry=this.getRadiusY()}Ellipse.prototype=new Mover;
Ellipse.prototype.getRadiusX=function(){if(0<$(this.domId).length)return $(this.domId).attr("rx")?parseInt($(this.domId).attr("rx")):0};Ellipse.prototype.getRadiusY=function(){if(0<$(this.domId).length)return $(this.domId).attr("ry")?parseInt($(this.domId).attr("ry")):0};Ellipse.prototype.setDimensions=function(a,b){0<$(this.domId).length&&(isFinite(a)&&($(this.domId).attr("rx",a),this.rx=a),isFinite(a)&&($(this.domId).attr("ry",b),this.ry=b))};
function Rect(a,b,c,d,e){this.mass=isFinite(e)&&0<e?e:1;this.position=b instanceof Vector2D?b:new Vector2D;this.velocity=c instanceof Vector2D?c:new Vector2D;this.acceleration=d instanceof Vector2D?d:new Vector2D;this.domId=a instanceof String||"string"==typeof a?a:"";this.rx=this.getHeight();this.ry=this.getWidth()}Rect.prototype=new Mover;Rect.prototype.getHeight=function(){if(0<$(this.domId).length)return $(this.domId).attr("height")?parseInt($(this.domId).attr("height")):0};
Rect.prototype.getWidth=function(){if(0<$(this.domId).length)return $(this.domId).attr("width")?parseInt($(this.domId).attr("width")):0};Rect.prototype.show=function(){0<$(this.domId).length&&($(this.domId).attr("x",this.position.x),$(this.domId).attr("y",this.position.y))};Rect.prototype.setDimensions=function(a,b){0<$(this.domId).length&&(isFinite(a)&&($(this.domId).attr("width",a),this.rx=a),isFinite(b)&&($(this.domId).attr("height",b),this.ry=b))};
function moverFactory(a,b,c,d,e){-1==$.inArray(a,["circle","ellipse","rect"])&&(a="circle");b=b instanceof Vector2D?b:new Vector2D;var f="";if("circle"==a)return f="circle"+$("circle").length,$(SVG(a)).attr("id",f).attr("cx",b.x).attr("cy",b.y).attr("r",40).attr("fill","#000").appendTo($("#svg1")),new Circle("#"+f,b,c,d,e);if("ellipse"==a)return f="ellipse"+$("ellipse").length,$(SVG(a)).attr("id",f).attr("cx",b.x).attr("cy",b.y).attr("rx",20).attr("ry",30).attr("fill","#000").appendTo($("#svg1")),
new Ellipse("#"+f,b,c,d,e);if("rect"==a)return f="rect"+$("rect").length,$(SVG(a)).attr("id",f).attr("x",b.x).attr("y",b.y).attr("width",50).attr("height",50).attr("fill","#000").attr("rx",4).attr("ry",4).appendTo($("#svg1")),new Rect("#"+f,b,c,d,e)}function SVG(a){return document.createElementNS("http://www.w3.org/2000/svg",a)}
function animateGravity(a){var b=new Vector2D(0,.1*a.mass),c=window.setInterval(function(){friction=Vector2D.getNormalized(a.velocity);friction.mult(-.03);a.applyForce(friction);a.applyForce(b);a.update();a.show();a.checkEdges();a.checkIfFinished(c)},10)}
function addPredefinedMovers(){var a=moverFactory("circle",new Vector2D(0,$(window).height()-10),new Vector2D(11*$(window).height()/window.screen.height,-7*$(window).width()/window.screen.width));a.mass=2;animateGravity(a);var b=moverFactory("circle");b.setPosition($(window).width()-50,$(window).height()-50);b.setVelocity(-11*$(window).height()/window.screen.height,-13*$(window).width()/window.screen.width);animateGravity(b);var c=moverFactory("circle");c.setPosition($(window).width()/2,$(window).height()-50);c.setVelocity(-15*$(window).height()/window.screen.heigh,-9*$(window).width()/window.screen.width);animateGravity(c);return[a,b,c]}
function addText(a,b,c){var d="text"+$("text").length;a=$(SVG("text")).attr("id",d).text(a).appendTo($("#svg1"));b=isFinite(b)?b:0;c=isFinite(c)?c:0;var e=document.getElementById(d).getBoundingClientRect().width,d=document.getElementById(d).getBoundingClientRect().height;a.attr("x",b-e/2);a.attr("y",c-d/2)}
function addDescription(a){a=$(SVG("text")).attr("id","text_description").text(a).appendTo($("#svg1"));var b=document.getElementById("text_description").getBoundingClientRect().width,c=document.getElementById("text_description").getBoundingClientRect().height;a.attr("x",$(window).width()/2-b/2);a.attr("y",$(window).height()/2-c/2)}
function recalibrateDescription(){var a=$("#text_description"),b=document.getElementById("text_description").getBoundingClientRect().width,c=document.getElementById("text_description").getBoundingClientRect().height;a.attr("x",$(window).width()/2-b/2);a.attr("y",$(window).height()/2-c/2)}
function displaySVGState(){var a=$(SVG("text")).attr("id","svg_state").attr("x",0).attr("y",0).appendTo($("#svg1")),b="<svg>;<rect/> ;<circle/> ;<ellipse/> ;<text> ... </text>;</svg>".split(";"),c;for(c in b){var d=b[c].match(/\<([a-z]+)[\>\/]{1}/i),d=d&&d[1]?d[1]:"",e=$(SVG("tspan")).attr("dy",25).attr("id","txt_"+d);"svg"==d||""==d?e.attr("x",15).text(b[c]).appendTo(a):$(d).length&&e.attr("x",40).text(b[c]+" x "+$(d).length).appendTo(a)}}
function updateStateTxt(a){if(0==$("#txt_"+a).length){var b=$(SVG("tspan")).attr("x",40).attr("dy",25).attr("id","txt_"+a);$("#txt_svg").after(b)}$("#txt_"+a).text("<"+a+"/> x "+$(a).length)}function makeRandomMover(a,b){var c=moverFactory("circle",new Vector2D(a.pageX,a.pageY));c.setDimensions(35*Math.random()+5,35*Math.random()+5);c.mass=.1*c.rx;animateGravity(c);b&&randomizeColor(c);updateStateTxt("circle");return c}
function randomizeColor(a){var b=parseInt(255*Math.random()),c=parseInt(255*Math.random()),d=parseInt(255*Math.random()),b="fill:rgb("+b+","+c+","+d+");";$(a.domId).attr("style",b)}function hideMover(a){$(a.domId).attr("style","display:none;")}
function addRandomColorPossibility(){var a=document.getElementById("text_description").getBoundingClientRect().width/2,b=document.getElementById("text_description").getBoundingClientRect().height,a=$(window).width()/2+1.01*a,c=$(window).height()/2-1.5*b,d=13*Math.sin(Math.PI/3),b=[[a,c+d],[a+6.5,c],[a+6.5+13,c],[a+26,c+d],[a+6.5+13,c+2*d],[a+6.5,c+2*d]],a=[a+6.5+6.5,c+d];$(".random_color").length?($("#polygon0").attr("points",b[0]+" "+b[1]+" "+a),$("#polygon1").attr("points",b[1]+" "+b[2]+" "+a),
$("#polygon2").attr("points",b[2]+" "+b[3]+" "+a),$("#polygon3").attr("points",b[3]+" "+b[4]+" "+a),$("#polygon4").attr("points",b[4]+" "+b[5]+" "+a),$("#polygon5").attr("points",b[5]+" "+b[0]+" "+a)):($(SVG("polygon")).attr("fill","#23239D").attr("id","polygon0").attr("class","random_color").attr("style","stroke:#fff; stroke-width: 1; opacity:0.5").attr("points",b[0]+" "+b[1]+" "+a).appendTo($("#svg1")),$(SVG("polygon")).attr("fill","#AB210F").attr("id","polygon1").attr("class","random_color").attr("style",
"stroke:#fff; stroke-width: 1; opacity:0.5").attr("points",b[1]+" "+b[2]+" "+a).appendTo($("#svg1")),$(SVG("polygon")).attr("fill","#681496").attr("id","polygon2").attr("class","random_color").attr("style","stroke:#fff; stroke-width: 1; opacity:0.5").attr("points",b[2]+" "+b[3]+" "+a).appendTo($("#svg1")),$(SVG("polygon")).attr("fill","#0C8787").attr("id","polygon3").attr("class","random_color").attr("style","stroke:#fff; stroke-width: 1; opacity:0.5").attr("points",b[3]+" "+b[4]+" "+a).appendTo($("#svg1")),
$(SVG("polygon")).attr("fill","#cccc33").attr("id","polygon4").attr("class","random_color").attr("style","stroke:#fff; stroke-width: 1; opacity:0.5").attr("points",b[4]+" "+b[5]+" "+a).appendTo($("#svg1")),$(SVG("polygon")).attr("fill","#ddd").attr("id","polygon5").attr("class","random_color").attr("style","stroke:#fff; stroke-width: 1; opacity:0.5").attr("points",b[5]+" "+b[0]+" "+a).appendTo($("#svg1")))}
function changePolygonColor(a){a?($("#polygon0").attr("fill","#555555"),$("#polygon1").attr("fill","#666666"),$("#polygon2").attr("fill","#777777"),$("#polygon3").attr("fill","#999999"),$("#polygon4").attr("fill","#bbbbbb")):($("#polygon0").attr("fill","#23239D"),$("#polygon1").attr("fill","#AB210F"),$("#polygon2").attr("fill","#681496"),$("#polygon3").attr("fill","#0C8787"),$("#polygon4").attr("fill","#cccc33"));$("#polygon5").attr("fill","#dddddd")}var randomColor=!1,movers=[];
$(document).ready(function(){addDescription("click anywhere and see what happens");addRandomColorPossibility();movers=addPredefinedMovers();displaySVGState();$("#text_description").change(function(){alert("bok")});$(".random_color").click(function(){randomColor=!randomColor;changePolygonColor(randomColor)});$(window).click(function(a){100<movers.length&&(hideMover(movers[0]),movers.splice(0,1));movers.push(makeRandomMover(a,randomColor))})});$(window).load(function(){$(window).trigger("resize")});
$(window).resize(function(){recalibrateDescription();addRandomColorPossibility();for(var a in movers)movers[a].isMoving||animateGravity(movers[a])});
Gravity simulation - Script Codes
Gravity simulation - Script Codes
Home Page Home
Developer Mirjamsk
Username alojzije
Uploaded January 26, 2023
Rating 3
Size 4,699 Kb
Views 2,024
Do you need developer help for Gravity simulation?

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!

Mirjamsk (alojzije) Script Codes
Name
Horizontal slider on scroll
Connect html elements with SVG path
Horizontal slider
Materialize pagination
Visualize DNA using chaos game
Search it
Create amazing love letters 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!