Vector Based Movement
How do I make an vector based movement?
These particles use a ridiciously simple Vector Object: http://trashnet.de/js/Vector.jsIf you want to learn more, this eBook is awesome. (Actually for Processing). What is a vector based movement? How do you make a vector based movement? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.
Vector Based Movement - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vector Based Movement</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas" width="640" height="480"></canvas>
<!-- Awesomely simple vector movement, based on
http://natureofcode.com/book/chapter-1-vectors/
--> <script src='https://trashnet.de/js/Vector.js'></script> <script src="js/index.js"></script>
</body>
</html>
Vector Based Movement - Script Codes CSS Codes
body { margin: 0; background: black;
}
canvas { display: block;
}
Vector Based Movement - Script Codes JS Codes
Math.randMinMax=function(t,n,a){var r=t+Math.random()*(n-t)
return a&&(r=Math.round(r)),r}
var canvas = document.querySelector('#canvas'), ctx = canvas.getContext('2d'), mousePos, myObj = [], amount = 16, color = 0, isMousePressed = false;
function Obj( x, y, colorOffset ) { this.pos = new Vector(x, y); this.velocity = new Vector(0,0); this.acceleration = new Vector(0,0); this.colorOffset = colorOffset;
};
Obj.prototype = { update : function() { var dir = mousePos.get(); dir.sub( this.pos ); dir.normalize(); dir.mult( 0.5 ); if( isMousePressed ) { dir.mult( -1 ); } this.acceleration = dir; this.velocity.add( this.acceleration ); this.velocity.limit( 10 ); this.pos.add( this.velocity ); this.checkEdges(); }, checkEdges : function() { if( this.pos.x > canvas.width ) this.pos.x = 0; if( this.pos.x < 0 ) this.pos.x = canvas.width; if( this.pos.y > canvas.height ) this.pos.y = 0; if( this.pos.y < 0 ) this.pos.y = canvas.height; }, draw : function( ctx ) { ctx.fillStyle = 'hsl(' + (color+this.colorOffset) + ', 100%, 60%)'; ctx.fillRect( this.pos.x, this.pos.y, 3, 3 ); }
};
function setup() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; for( var i=0;i<amount;i++) { myObj[i] = new Obj( Math.randMinMax(0,canvas.width), Math.randMinMax(0,canvas.height), i*15 ); } mousePos = new Vector( canvas.width/2, canvas.height/2 ); canvas.addEventListener('mousemove', function(e) { mousePos.x = e.offsetX || e.layerX, mousePos.y = e.offsetY || e.layerY; }); canvas.addEventListener('mousedown', function(e) { isMousePressed = true; }); canvas.addEventListener('mouseup', function(e) { isMousePressed = false; });
}
function loop() { ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fillRect(0, 0, canvas.width, canvas.height ); color += 1; for( var i=0;i<amount;i++) { myObj[i].update(); myObj[i].draw( ctx ); } window.requestAnimationFrame( loop );
}
window.setTimeout(function() { setup(); loop();
}, 100);
![Vector Based Movement - Script Codes](http://shots.codepen.io/timohausmann/pen/vJidq-512.jpg)
Developer | Timo Hausmann |
Username | timohausmann |
Uploaded | October 16, 2022 |
Rating | 4 |
Size | 2,568 Kb |
Views | 10,120 |
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!
Name | Size |
Single Element Spinner | 2,540 Kb |
Valentines Day | 3,118 Kb |
IPad Page Flip | 4,054 Kb |
Tekken Particles | 3,560 Kb |
CSS3 3D Particles | 2,859 Kb |
Stream of Cables | 2,488 Kb |
Color Wheel. Literally. | 6,392 Kb |
CSS3 Butterfly | 3,430 Kb |
Scharinteract | 3,392 Kb |
Bloody Thursday | 3,081 Kb |
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!
Name | Username | Size |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
Konami Code Easter Egg | Teolitto | 3,051 Kb |
Out of the blue | Giaco | 2,537 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Ghost | Mghayour | 11,738 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!