Neon spring trails

Developer
Pimskie
Size
3,214 Kb
Views
40,480
  1. Neon spring trails Previews
  2. Neon spring trails HTML Codes
  3. Neon spring trails CSS Codes
  4. Neon spring trails JS Codes

How do I make an neon spring trails?

Simple springs attached to the mouse position. . What is a neon spring trails? How do you make a neon spring trails? This script and codes were developed by Pimskie on 13 June 2022, Monday.

Neon spring trails Previews
IQ Test

Neon spring trails - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Neon spring trails</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://rawgit.com/josephg/noisejs/master/perlin.js'></script> <script src="js/index.js"></script>
</body>
</html>

Neon spring trails - Script Codes CSS Codes

html,
body { margin: 0; padding: 0; overflow: hidden;
}
canvas { display: block; background: #000;
}

Neon spring trails - Script Codes JS Codes

const distanceBetween = (x1, y1, x2, y2) => Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
const randomBetween = (min, max) => ~~(Math.random() * (max - min + 1)) + min;
noise.seed(Math.random());
class Spring {	constructor(x, y, k, damp) {	this.x = x;	this.y = y;	this.k = k;	this.damp = damp;	this.velX = 0;	this.velY = 0;	this.length = 0;	this.width = 1;	}	update(destX, destY, pivotX, pivotY) {	this.velX += -this.k * (this.x - destX);	this.velX *= this.damp;	this.velY += -this.k * (this.y - destY);	this.velY *= this.damp;	let newX = this.x + this.velX;	let newY = this.y + this.velY;	this.length = ~~distanceBetween(this.x, this.y, newX, newY);	this.x = newX;	this.y = newY;	}
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// all set in `setStage`
let canvasWidth;
let canvasHeight;
let canvasMidX;
let canvasMidY;
let distanceMid;
let radiusX;
let radiusY;
let destination = {	x: 0,	y: 0
};
let rafId = null;
let tick = 0;
let autoMovement = true;
let automationAngle = 0;
let springs = [];
let spring = null;
// define all viewport related vars
// and resize canvas
const setStage = () => {	canvasWidth = window.innerWidth;	canvasHeight = window.innerHeight;	canvasMidX = canvasWidth >> 1;	canvasMidY = canvasHeight >> 1;	distanceMid = distanceBetween(0, 0, canvasMidX, canvasMidY);	radiusX = distanceMid * 0.25;	radiusY = distanceMid * 0.25;	destination.x = canvasMidX;	destination.y = canvasMidY;	canvas.width = canvasWidth;	canvas.height = canvasHeight;
}
// update destination to mouse position
const updateDestination = (e) => {	destination.x = e.offsetX;	destination.y = e.offsetY;
}
// create springs with random settings
const createSprings = () => {	const x = canvasMidX;	const y = canvasMidY;	let numSprings = 300;	while (numSprings--) {	const k = Math.random() * (0.04) + 0.08;	const damp = Math.random() * (0.04) + 0.9;	const spring = new Spring(x, y, k, damp);	springs.push(spring);	}
}
const clearStage = () => {	ctx.globalCompositeOperation = 'destination-out';	ctx.fillStyle = 'rgba(0, 0, 0, 0.02)';	ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);	ctx.globalCompositeOperation = 'lighter';
}
const loop = () => {	clearStage();	// update position automaticly, based on perlin noise	if (autoMovement) {	destination.x = canvasMidX + (Math.cos(automationAngle) * radiusX);	destination.y = canvasMidY + (Math.sin(automationAngle) * radiusY);	destination.x = clamp(destination.x, 0, canvasWidth);	destination.y = clamp(destination.y, 0, canvasHeight);	automationAngle += noise.perlin2(tick, tick) * 0.25;	radiusX += noise.perlin2(destination.x, destination.y) * 20;	radiusY += noise.perlin2(destination.x, destination.y) * 20;	}	// define the color, based on position and perlin	const mouseDistance = distanceBetween(canvasMidX, canvasMidY, destination.x, destination.y);	const r = ~~(255 * (distanceMid - mouseDistance) / distanceMid);	const g = ~~(255 * (mouseDistance / distanceMid));	const b = ~~Math.abs(255 * (noise.perlin2(tick, tick)));	const color = `rgba(${r}, ${g}, ${b}, 0.1)`;	springs.forEach((spring) => {	ctx.beginPath();	ctx.strokeStyle = color;	ctx.lineWidth = spring.width;	ctx.moveTo(spring.x, spring.y);	spring.update(destination.x, destination.y, canvasMidX, canvasMidY);	ctx.lineTo(spring.x, spring.y);	ctx.stroke();	ctx.closePath();	});	tick += 0.005;	rafId = requestAnimationFrame(loop);
}
canvas.addEventListener('mouseover', e => {	autoMovement = false;
});
canvas.addEventListener('mouseout', e => {	autoMovement = true;
});
canvas.addEventListener('mousemove', updateDestination);
window.addEventListener('resize', setStage);
document.body.appendChild(canvas);
// fire it up
setStage();
createSprings();
loop();
Neon spring trails - Script Codes
Neon spring trails - Script Codes
Home Page Home
Developer Pimskie
Username pimskie
Uploaded June 13, 2022
Rating 4.5
Size 3,214 Kb
Views 40,480
Do you need developer help for Neon spring trails?

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!

Pimskie (pimskie) Script Codes
Name
Planet attractors
Particles Clifford attractor
Color circles
Aizawa Attractor
Glitching image - USA style
Exploding hamburger - and more
A Pen by pimskie
Apollonian gasket
Duplicate geometry
Circles pattern
Create amazing captions 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!