Stream of Cables

Developer
Timo Hausmann
Size
2,488 Kb
Views
12,144
  1. Stream of Cables Previews
  2. Stream of Cables HTML Codes
  3. Stream of Cables CSS Codes
  4. Stream of Cables JS Codes

How do I make an stream of cables?

Some cables, shuffling their way through life.. What is a stream of cables? How do you make a stream of cables? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.

Stream of Cables Previews
IQ Test

Stream of Cables - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stream of Cables</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas" width="640" height="480"></canvas> <script src='https://trashnet.de/js/Vector_codepen_cables.js'></script> <script src="js/index.js"></script>
</body>
</html>

Stream of Cables - Script Codes CSS Codes

body { margin: 0;	background: black; overflow: hidden;
}
canvas { display: block;
}

Stream of Cables - Script Codes JS Codes

(function() {	var	canvas = document.querySelector('#canvas'),	ctx = canvas.getContext('2d'),	myObj = [],	loopCount = 0; Math.randMinMax=function(t,n,a){var r=t+Math.random()*(n-t)
return a&&(r=Math.round(r)),r}	function Obj( x, y, index ) {	this.index	= index;	this.pos	= new Vector(x, y);	this.size	= 3;	this.velocity	= new Vector(0,0);	this.acceleration	= new Vector(0,0);	this.direction	= Vector.random();	this.hue	= Math.randMinMax(240, 360, true);	(function(that) {	window.setInterval(function() {	that.direction = Vector.random();	that.direction.mult( Math.randMinMax(0.5,2) );	}, Math.randMinMax(750,1250));	})(this);	};	Obj.prototype = {	update : function() {	var currDistance;	for( var i=0;i<myObj.length;i++) {	if( this.index === i ) continue;	currDistance = myObj[i].pos.get();	currDistance.sub(this.pos);	currDistance.div(500);	this.acceleration.add(currDistance);	}	this.acceleration.add( this.direction );	this.velocity.add( this.acceleration );	this.velocity.limit( 4 );	this.pos.add( this.velocity );	this.checkEdges();	this.velocity.mult(0.9);	this.acceleration.mult(0);	},	draw : function( ctx ) {	ctx.fillStyle = 'hsl(' + this.hue + ', 100%, 60%)';	ctx.strokeStyle = 'rgba(0,0,0,0.5)';	ctx.beginPath();	ctx.arc(this.pos.x, this.pos.y, this.size, 0, Math.PI*2, true);	ctx.closePath();	ctx.fill();	ctx.stroke();	},	checkEdges : function() {	if( this.pos.x < 0 ) this.pos.x = canvas.width;	if( this.pos.x > canvas.width ) this.pos.x = 0;	if( this.pos.y > canvas.height ) this.pos.y = 0;	if( this.pos.y < 0 ) this.pos.y = canvas.height;	}	};	function setup() {	canvas.width = window.innerWidth;	canvas.height = window.innerHeight;	for( var i=0;i<16;i++) {	myObj.push( new Obj(	canvas.width/2,	canvas.height/2 ) );	}	}	function loop() {	loopCount++;	if( loopCount % 100 === 0 ) {	ctx.fillStyle = 'rgba(0,0,0,0.1)';	ctx.fillRect(0, 0, canvas.width, canvas.height );	}	for( var i=0;i<myObj.length;i++) {	myObj[i].update();	myObj[i].draw( ctx );	}	window.requestAnimationFrame( loop );	}	setup();	loop();	})();
Stream of Cables - Script Codes
Stream of Cables - Script Codes
Home Page Home
Developer Timo Hausmann
Username timohausmann
Uploaded October 16, 2022
Rating 3
Size 2,488 Kb
Views 12,144
Do you need developer help for Stream of Cables?

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
Another Particle Demo
Single Element Spinner
CSS3 Butterfly
The final countup
Spring Physics
Depth First Search Maze
Scharinteract
Tekken Particles
Particle Button
Use your mousewheel
Create amazing web content 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!