Float Particle

Developer
Yoichi Kobayashi
Size
2,623 Kb
Views
42,504
  1. Float Particle Previews
  2. Float Particle HTML Codes
  3. Float Particle CSS Codes
  4. Float Particle JS Codes

How do I make an float particle?

If the gravitational constant to minus, I can make floating particles.. What is a float particle? How do you make a float particle? This script and codes were developed by Yoichi Kobayashi on 26 August 2022, Friday.

Float Particle Previews
IQ Test

Float Particle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Float Particle</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Float Particle - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
html { height: 100%; background-position: center center; background-size: cover;
}
body { height: 100%; overflow: hidden; background-color: rgba(40,40,10,1);
}

Float Particle - Script Codes JS Codes

var width = document.body.clientWidth;
var height = document.body.clientHeight;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var fps = 60;
var frameTime = 1000 / fps;
var objArr = [];
var instanceNum = 0;
var lastTimeRender = +new Date();
var lastTimePushObj = +new Date();
var getRandomInt = function(min, max) { return Math.floor(Math.random() * (max - min)) + min;
};
var motionObj = function(x, y) { this.r = getRandomInt(3, 12); this.g = getRandomInt(5, 10) / -1000 / fps; this.t = 0; this.k = getRandomInt(1, 5) / 1000; this.x = x; this.px = x; this.ax = 0; this.vx = 0.5; this.hsl = getRandomInt(60, 120) + ', 45%, 80%'; this.alpha = getRandomInt(40, 90); this.y = y;
};
motionObj.prototype.move = function () { this.t += frameTime; this.ax = (this.px - this.x) * this.k; this.vx += this.ax; this.x += this.vx; this.y = 1 / 2 * this.g * this.t * this.t + height + this.r * 3;
};
motionObj.prototype.fadeAway = function () { if (this.t < 1400) return; this.alpha -= 1;
};
motionObj.prototype.render = function (){ ctx.beginPath(); ctx.shadowBlur = this.r * 3; ctx.shadowColor = 'rgba(255, 255, 255, 1)'; ctx.fillStyle = 'hsla(' + this.hsl + ', ' + (this.alpha / 100) + ')'; ctx.arc(this.x, this.y, this.r, 0, 360 * Math.PI/180, false); ctx.fill(); ctx.closePath();
};
motionObj.prototype.isLast = function (){ if (this.alpha < 0) { return true; } else { return false; }
};
var render = function() { ctx.clearRect(0, 0, width, height); instanceNum = 0; for (var i = 0; i < objArr.length; i++) { if(objArr[i]) { instanceNum++; objArr[i].move(); objArr[i].fadeAway(); objArr[i].render(); if (objArr[i].isLast()) { delete objArr[i]; } } }
};
var renderloop = function() { var now = +new Date(); requestAnimationFrame(renderloop); if (now - lastTimeRender > frameTime) { render(); lastTimeRender = +new Date(); } if (now - lastTimePushObj > 500 && instanceNum < 200) { for (var i = 0; i < 20; i++) { objArr.push(new motionObj(Math.random() * width, 0)); } lastTimePushObj = +new Date(); }
};
renderloop();
var canvasResize = function() { ctx.clearRect(0, 0, width, height); width = document.body.clientWidth; height = document.body.clientHeight; canvas.width = width; canvas.height = height;
};
canvasResize();
var debounce = function(object, eventType, callback){ var timer; object.addEventListener(eventType, function() { clearTimeout(timer); timer = setTimeout(function(){ callback(); }, 500); }, false);
};
debounce(window, 'resize', function(){ canvasResize();
});
Float Particle - Script Codes
Float Particle - Script Codes
Home Page Home
Developer Yoichi Kobayashi
Username ykob
Uploaded August 26, 2022
Rating 4.5
Size 2,623 Kb
Views 42,504
Do you need developer help for Float Particle?

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!

Yoichi Kobayashi (ykob) Script Codes
Name
Three.js Points anti-gravity is applied ver2
Typed Arrays Test
Gooey Overlay
Particles moving to the spherical ver2
Butterfly
Audio Visualizer ver2
Particles moving to the spherical
Red cloud
The wriggle sphere
Three.js blending test
Create amazing love letters 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!