Spring Physics

Developer
Timo Hausmann
Size
3,272 Kb
Views
10,120
  1. Spring Physics Previews
  2. Spring Physics HTML Codes
  3. Spring Physics CSS Codes
  4. Spring Physics JS Codes

How do I make an spring physics?

Implementation of something like this: http://ghoshehsoft.wordpress.com/2013/03/02/simple-spring-physics/. What is a spring physics? How do you make a spring physics? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.

Spring Physics Previews
IQ Test

Spring Physics - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spring Physics</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src='https://trashnet.de/js/Vector.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spring Physics - Script Codes CSS Codes

* {	margin: 0;	padding: 0;
}
canvas {	display: block;
}

Spring Physics - Script Codes JS Codes

function extend(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { if (!arguments[i]) continue; for (var key in arguments[i]) { if (arguments[i].hasOwnProperty(key)) out[key] = arguments[i][key]; } } return out;
};
Math.randMinMax=function(t,n,a){var r=t+Math.random()*(n-t)
return a&&(r=Math.round(r)),r}
/** * NODE */
function Node( config ) {	var defaults = {	pos: new Vector(	Math.randMinMax( 0, canvas.width ),	Math.randMinMax( 0, canvas.height ) ),	background: 'black',	size: 30,	mass: 1,	velocity: new Vector(0,0),	acceleration: new Vector(0,0)	};	this.config	= extend({}, defaults, config);	this.size	= this.config.size;	this.pos	= this.config.pos;	this.mass	= this.config.mass;	this.velocity	= this.config.velocity;	this.acceleration	= this.config.acceleration;	this.isDragged	= false;
};
Node.prototype = {	update: function() {	if( this.isDragged ) {	this.pos.x = mousePos.x;	this.pos.y = mousePos.y;	this.acceleration.mult(0);	this.velocity.mult(0);	}	this.velocity.add( this.acceleration );	this.pos.add( this.velocity );	this.acceleration.mult(0);	this.velocity.mult(0.9);	},	draw: function( ctx ) {	ctx.save();	ctx.translate(this.pos.x, this.pos.y);	ctx.beginPath();	ctx.arc(0, 0, this.size/2, 0, Math.PI * 2, true);	ctx.closePath();	ctx.fillStyle = this.config.background;	ctx.fill();	if( this.isDragged ) {	ctx.strokeStyle = 'orange';	ctx.stroke();	}	ctx.restore();	},	checkMouse: function() {	var mouseDist = mousePos.get();	mouseDist.sub( this.pos );	if( mouseDist.mag() < this.size/2 ) {	this.isDragged = true;	return true;	}	},	releaseMouse: function() {	this.isDragged = false;	}
};
/** * SPRING */
function Spring( node1, node2, config ) {	var defaults = {	k: 0.1, //spring stiffness	b: 0.1, //spring damping factor	restDistance: node1.pos.get().sub(node2.pos)	};	this.config	= extend({}, defaults, config);	this.node1	= node1;	this.node2	= node2;	this.k	= this.config.k;	this.b	= this.config.b;	this.restDistance	= this.config.restDistance;
};
Spring.prototype = {	update : function() {	var distanceVector = this.node1.pos.get();	var relVelocity = this.node1.velocity.get();	var distance;	var directionVector;	//Berechnung der Dämpfung	relVelocity.sub( this.node2.velocity );	relVelocity.mult( this.b );	//Berechnung der Distanz	distanceVector.sub( this.node2.pos );	distance = distanceVector.mag();	//Berechnung des Richtungsvektors	directionVector = distanceVector.get();	directionVector.normalize();	//Richtungsvektor mit gewünschtem Abstand und Federstärke verrechnen	directionVector.mult( distance - this.restDistance );	directionVector.mult( -this.k );	//Dämpfung verrechnen	directionVector.sub( relVelocity );	//Masse verrechnen	directionVector.div( this.node1.mass );	//Kraft auf Node 1 anwenden	this.node1.acceleration.add( directionVector );	//Masse neu verrechnen	directionVector.mult( this.node1.mass );	directionVector.div( this.node2.mass );	//Kraft umkehren	directionVector.mult( -1 );	//Kraft auf Node 2 anwenden	this.node2.acceleration.add( directionVector );	},	draw : function( ctx ) {	ctx.beginPath();	ctx.moveTo( this.node1.pos.x, this.node1.pos.y );	ctx.lineTo( this.node2.pos.x, this.node2.pos.y );	ctx.closePath();	ctx.strokeStyle = '#999';	ctx.lineWidth = 2;	ctx.stroke();	}
};
/* * SCRIPT */
var	myNodes = [],	mySprings = [],	mousePos = new Vector(0,0);	var	canvas = document.querySelector('#canvas'),	ctx = canvas.getContext('2d');	function setup() {	canvas.width = window.innerWidth;	canvas.height = window.innerHeight;	canvas.addEventListener('mousemove', function(e) {	mousePos.x = e.offsetX || e.layerX,	mousePos.y = e.offsetY || e.layerY;	});	canvas.addEventListener('mouseenter', function(e) {	});	canvas.addEventListener('mouseleave', function(e) {	for( var i=0; i<myNodes.length; i++ ) {	myNodes[i].releaseMouse();	}	});	canvas.addEventListener('mousedown', function(e) {	for( var i=0; i<myNodes.length; i++ ) {	if( myNodes[i].checkMouse() ) break;	}	});	canvas.addEventListener('mouseup', function(e) {	for( var i=0; i<myNodes.length; i++ ) {	myNodes[i].releaseMouse();	}	});	myNodes.push( new Node({	pos: new Vector( canvas.width/2, canvas.height/2 ),	background: 'black',	mass: 20,	size: 40	}) );	for(var i=0; i<6; i++ ) {	myNodes.push( new Node({	background: '#4d941e'	}) );	mySprings.push( new Spring(myNodes[0], myNodes[i+1], {	restDistance: Math.randMinMax(80,160)	}) );	}	}	function loop() {	ctx.fillStyle = 'white';	ctx.fillRect(0, 0, canvas.width, canvas.height );	for( var i=0; i<mySprings.length; i++ ) {	mySprings[i].update();	mySprings[i].draw( ctx );	}	for( var i=0; i<myNodes.length; i++ ) {	myNodes[i].update();	myNodes[i].draw( ctx );	}	window.requestAnimationFrame( loop );	}	setup();	loop();
Spring Physics - Script Codes
Spring Physics - Script Codes
Home Page Home
Developer Timo Hausmann
Username timohausmann
Uploaded October 16, 2022
Rating 3
Size 3,272 Kb
Views 10,120
Do you need developer help for Spring Physics?

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!

Timo Hausmann (timohausmann) Script Codes
Name
Tunnel Quest
Depth First Search Maze
Simple CSS 3D Cubes
CSS3 3D Particles
Particle Button
Tekken Particles
Single Element Spinner
Bloody Thursday
Valentines Day
Simple 3d cube
Create amazing Facebook ads 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!