Instable Connection

Developer
André Michelle
Size
2,828 Kb
Views
18,216
  1. Instable Connection Previews
  2. Instable Connection HTML Codes
  3. Instable Connection CSS Codes
  4. Instable Connection JS Codes

How do I make an instable connection?

What is a instable connection? How do you make a instable connection? This script and codes were developed by André Michelle on 18 October 2022, Tuesday.

Instable Connection Previews
IQ Test

Instable Connection - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Instable Connection</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="demo"> <canvas id="canvas" width="512" height="512">no canvas, no shlanvas</canvas>
</div> <script src="js/index.js"></script>
</body>
</html>

Instable Connection - Script Codes CSS Codes

html, body { background:black; color: #FFCC20; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#demo { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block; width: 512px;
}

Instable Connection - Script Codes JS Codes

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
// Design
var circleFill = "rgba(255,160,30,1)";
var Particle = function (sx, sy) { this.sx = sx; this.sy = sy; this.vx = 0.0; this.vy = 0.0;
};
// create particles
var n = 255;
var particles = [];
for (var i = 0; i < n; ++i) { var sx = Math.random() * canvas.width; var sy = Math.random() * canvas.height; particles[i] = new Particle(sx, sy);
}
var drawLine = function (x0, y0, x1, y1, alpha) { context.lineWidth = "hairline"; context.strokeStyle = "rgba(255,160,30," + alpha + ")"; context.beginPath(); context.moveTo(x0, y0); context.lineTo(x1, y1); context.closePath(); context.stroke();
};
var drawCircle = function (x, y, r) { context.fillStyle = circleFill; context.beginPath(); context.arc(x, y, r, 0.0, Math.PI * 2.0); context.closePath(); context.fill();
};
var mouseX = 0.0;
var mouseY = 0.0;
// Physics Properties
var particleInfluenceRadius = 26.0;
var particleAttractionRadius = 18.0;
var partcileAttrationForce = 1.0 / 200.0;
var partcileVelocityDecay = 0.99;
var particleMouseInfluenceRadius = 48.0;
var particleMouseRejectionForce = 1.0 / 96.0;
var solveAndDraw = function () { var strength; var i = particles.length; while (--i > -1) { var particle = particles[i]; var j = i; while (--j > -1) { var neighbour = particles[j]; var dx = particle.sx - neighbour.sx; var dy = particle.sy - neighbour.sy; var dd = Math.sqrt(dx * dx + dy * dy); if (dd > particleInfluenceRadius) { //-- out of radius } else if (dd > particleAttractionRadius) { //-- attraction particle.vx -= dx * partcileAttrationForce; particle.vy -= dy * partcileAttrationForce; neighbour.vx += dx * partcileAttrationForce; neighbour.vy += dy * partcileAttrationForce; strength = 1.0 - (dd - particleAttractionRadius) / (particleInfluenceRadius - particleAttractionRadius); drawLine( particle.sx, particle.sy, neighbour.sx, neighbour.sy, strength); } else if (dd > 0.0) { //-- rejection:spring dd = 0.5 * (dd - particleAttractionRadius) / dd; dx *= dd; dy *= dd; particle.vx -= dx; particle.vy -= dy; neighbour.vx += dx; neighbour.vy += dy; drawLine( particle.sx, particle.sy, neighbour.sx, neighbour.sy, 1.0); } } }
};
var moveAndDraw = function () { for (var i = 0; i < n; ++i) { var particle = particles[i]; var sx = particle.sx; var sy = particle.sy; // mouse attraction var dx = mouseX - sx; var dy = mouseY - sy; var dd = Math.sqrt(dx * dx + dy * dy); if (dd < particleMouseInfluenceRadius) { particle.vx -= dx * particleMouseRejectionForce; particle.vy -= dy * particleMouseRejectionForce; } // damp velocity particle.vx *= partcileVelocityDecay; particle.vy *= partcileVelocityDecay; // apply velocity sx += particle.vx; sy += particle.vy; // bounds if (sx < 0) { sx = 0; particle.vx = -particle.vx; } else if (sx > width) { sx = width; particle.vx = -particle.vx; } if (sy < 0) { sy = 0; particle.vy = -particle.vy; } else if (sy > height) { sy = height; particle.vy = -particle.vy; } // draw drawCircle(sx, sy, 2.0); // write back particle.sx = sx; particle.sy = sy; }
};
var enterFrame = function () { context.clearRect(0, 0, width, height); solveAndDraw(); moveAndDraw(); window.requestAnimationFrame(enterFrame);
};
var mouseMove = function (e) { mouseX = e.offsetX; mouseY = e.offsetY;
};
window.requestAnimationFrame(enterFrame);
canvas.addEventListener("mousemove", mouseMove);
Instable Connection - Script Codes
Instable Connection - Script Codes
Home Page Home
Developer André Michelle
Username andremichelle
Uploaded October 18, 2022
Rating 4.5
Size 2,828 Kb
Views 18,216
Do you need developer help for Instable Connection?

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!

André Michelle (andremichelle) Script Codes
Name
Stern-Brocot Sequence
Dub Techno Chords
Fourier series
Noise monotone increasing
Code 7
Web Audio Api Convolver
Geolocation Api
Time Displacement
Calculating Pi with Virtual Darts
Sonic Brain Food
Create amazing art & images 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!