Dippin Dots

Developer
Chad Scira
Size
2,459 Kb
Views
40,480
  1. Dippin Dots Previews
  2. Dippin Dots HTML Codes
  3. Dippin Dots CSS Codes
  4. Dippin Dots JS Codes

How do I make an dippin dots?

Playing with decays. What is a dippin dots? How do you make a dippin dots? This script and codes were developed by Chad Scira on 27 August 2022, Saturday.

Dippin Dots Previews
IQ Test

Dippin Dots - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dippin Dots</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://rawgit.com/icodeforlove/4cbc3b3badd3b3d4720c/raw/027ee25afb208de28018604298c1a70ecd41ff07/decay-particle.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dippin Dots - Script Codes CSS Codes

body { margin: 0; padding: 0; background: #17293a;
}

Dippin Dots - Script Codes JS Codes

var canvas = document.createElement('canvas'), context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
Particle.prototype.getPoint = function () { return { x: (this.current.radius * Math.cos(this.current.angle * Math.PI / 180)) + this.current.x - (this.current.w/2), y: (this.current.radius * Math.sin(this.current.angle * Math.PI / 180)) + this.current.y - (this.current.h/2) };
}
var particles = [];
for (var i = 0; i < 1000; i++) { particles.push(new Particle({ x: window.innerWidth/2, y: window.innerHeight/2, w: Particle.prototype.random(1,3), h: Particle.prototype.random(1,3), radius: Particle.prototype.random(Math.random() < .4 ? 1 : 20,75), angle: Particle.prototype.random(0, 360), color: 'rgb(' + [Math.floor(Math.random() * 255),Math.floor(Math.random() * 255),Math.floor(Math.random() * 255)].join(',') + ')', minAngleDecay: Particle.prototype.random(10, 600) }));
}
var lastFrame = 0, fps = 60, start = Date.now();
function draw() { requestAnimationFrame(draw); var frame = Math.floor((Date.now() - start) / (1000/fps)); if (lastFrame === frame) { return; } context.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(function (particle) { if (Math.random() > .90 && (!particle.decay.angle || Math.floor(Math.abs(particle.decay.angle)) < particle.value.minAngleDecay)) { particle.decay.angle = particle.random(particle.value.minAngleDecay, 200); } if (Math.random() > .90 && (!particle.decay.radius || Math.floor(Math.abs(particle.decay.radius)) < 20)) { particle.decay.radius = particle.value.radius - particle.current.radius; } for (var i = 0; i < frame - lastFrame; i++) { particle.updateDecay(.97); } var point = particle.getPoint(); context.fillStyle = particle.value.color; context.beginPath(); context.arc(point.x, point.y, particle.current.w/2, 0, 2 * Math.PI, false); context.fill(); }); lastFrame = frame;
}
draw();
var mouseDownTime;
window.addEventListener('mousedown', function () { mouseDownTime = new Date();
});
window.addEventListener('mouseup', function () { particles.forEach(function (particle) { particle.decay.radius = particle.random(0, new Date() - mouseDownTime); });
});
window.addEventListener('mousemove', function (event) { particles.forEach(function (particle) { particle.decay.x = event.x - particle.current.x; particle.decay.y = event.y - particle.current.y; })
});
Dippin Dots - Script Codes
Dippin Dots - Script Codes
Home Page Home
Developer Chad Scira
Username icodeforlove
Uploaded August 27, 2022
Rating 3.5
Size 2,459 Kb
Views 40,480
Do you need developer help for Dippin Dots?

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!

Chad Scira (icodeforlove) Script Codes
Name
CSS Voxel Animation
Ripple Words
Animated 3D Text
8bit Animation
Live example of core distribution
Client-side nudity detection
Animated rainbow wave on canvas
Faces
Raw Request to Requester Request
Delayed Follow
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!