Segments mouse following

Developer
Max Huang
Size
2,909 Kb
Views
10,120
  1. Segments mouse following Previews
  2. Segments mouse following HTML Codes
  3. Segments mouse following CSS Codes
  4. Segments mouse following JS Codes

How do I make an segments mouse following?

What is a segments mouse following? How do you make a segments mouse following? This script and codes were developed by Max Huang on 26 December 2022, Monday.

Segments mouse following Previews
IQ Test

Segments mouse following - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Segments mouse following</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script>
<canvas id="canvas"></canvas>
<div class="title">move your mouse</div> <script src="js/index.js"></script>
</body>
</html>

Segments mouse following - Script Codes CSS Codes

html, body {	margin: 0px;	background: #F09819; /* fallback for old browsers */	background: -webkit-radial-gradient(#00d2ff, #3a7bd5); /* Chrome 10-25, Safari 5.1-6 */	background: radial-gradient(#00d2ff, #3a7bd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */	}	canvas {	display: block;	}	.title {	color: #FFF;	position: absolute;	top: 8px;	left: 12px;	font-family: verdana;	text-transform: uppercase;	font-size: 10px;	font-weight: bold;	}

Segments mouse following - Script Codes JS Codes

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
var rAF;
var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), width = canvas.width = window.innerWidth, height = canvas.height = window.innerHeight, particles = [], mouseX = 0, mouseY = 0, total = 15, followSpeed = 0.1, size = 25;
document.body.addEventListener("mousemove", function (event) { mouseX = event.clientX; mouseY = event.clientY;
});
window.addEventListener('resize', function () { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight;
});
function init() { cancelAnimationFrame(rAF); particles = []; for (var i = 0; i < total; i += 1) { particles.push(new Particle(i)); } draw();
}
function draw() { context.clearRect(0, 0, width, height); for (var i = 0; i < total; i += 1) { particles[i].update(); } rAF = requestAnimationFrame(draw);
}
/** * Particle */
var Particle, p;
Particle = function (index) { this.initialize(index);
};
p = Particle.prototype;
p.initialize = function (index) { this.x = -50; this.y = height; this.id = index + 1; this.angleX = Math.PI * 2 * Math.random(); this.angleY = Math.PI * 2 * Math.random(); this.speedX = .03 * Math.random() + .03; this.speedY = .03 * Math.random() + .03; this.radius = 150; return this;
};
p.update = function () { var aim, dx, dy, scale, angle; if (this.id > 1) { aim = particles[this.id - 1 - 1]; dx = aim.x - this.x; dy = aim.y - this.y; this.x += dx * con.speed; this.y += dy * con.speed; } else { if (mouseX === 0 && mouseY === 0) { dx = width / 2 + Math.cos(this.angleX) * this.radius - this.x; dy = height / 2 + Math.sin(this.angleY) * this.radius - this.y; this.x = width / 2 + Math.cos(this.angleX) * this.radius; this.y = height / 2 + Math.sin(this.angleY) * this.radius; this.angleX += this.speedX; this.angleY += this.speedY; } else { dx = mouseX - this.x; dy = mouseY - this.y; this.x += dx * con.speed; this.y += dy * con.speed; } } angle = Math.atan2(dy, dx); scale = Math.cos(Math.PI / 2 * (this.id / total)); context.save(); context.translate(this.x, this.y); context.rotate(angle); context.scale(scale, scale); context.beginPath(); context.moveTo(-size / 2 * 1.732, -size / 2); context.lineTo(0, 0); context.lineTo(-size / 2 * 1.732, size / 2); context.lineTo(-size / 2 * 1.2, 0); context.fillStyle = 'white'; context.fill(); context.restore();
};
// control bar
var ControlBar = function () { this.num = total; this.speed = followSpeed;
};
var con = new ControlBar();
var gui = new dat.GUI();
var conSpeed = gui.add(con, 'speed', 0.05, 0.25).step(0.05);
var conNum = gui.add(con, 'num', 10, 30).step(1);
conNum.onFinishChange(function (value) { total = value; init();
});
init();
Segments mouse following - Script Codes
Segments mouse following - Script Codes
Home Page Home
Developer Max Huang
Username nosir
Uploaded December 26, 2022
Rating 4
Size 2,909 Kb
Views 10,120
Do you need developer help for Segments mouse following?

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!

Max Huang (nosir) Script Codes
Name
Obelisk Test Case
Lissajous Particles
Pixel Isometric Input Text Rendering
Pixel Isometric Cube Generator
Pixel Isometric Flappy Bird
Fireworks fountain
Build Monument Valley by Obelisk.js
Obelisk Test Case - Depth Sorting
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!