Glittering particle
How do I make an glittering particle?
What is a glittering particle? How do you make a glittering particle? This script and codes were developed by Takashi on 20 October 2022, Thursday.
Glittering particle - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>glittering particle</title>
</head>
<body> <style> body {padding: 0; margin: 0;} </style> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.21/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Glittering particle - Script Codes JS Codes
var scketch = function(p){ var Particle = function(pos,v,d){ this.p = pos; this.v = v; this.a = 0; this.d = d; this.r = d/2; this.col_r = p.floor(p.random(255)); this.col_g = p.floor(p.random(255)); this.col_b = p.floor(p.random(255)); } Particle.prototype.addForce = function(){ } Particle.prototype.update = function(){ this.v.add(this.a); this.p.add(this.v); } Particle.prototype.draw = function(){ //p.translate(p.windowWidth/2,p.windowHeight/2); p.noStroke(); //gradation var grad = p.drawingContext.createRadialGradient(this.p.x,this.p.y,0,this.p.x,this.p.y,this.r); grad.addColorStop(0.1,'rgba(' + this.col_r + ',' + this.col_g + ',' + this.col_b + ', 1)'); grad.addColorStop(1,'rgba(0, 0, 0, 0)'); p.drawingContext.fillStyle = grad; p.ellipse(this.p.x,this.p.y,this.d,this.d); } Particle.prototype.through = function(){ if(this.p.x - this.r > p.windowWidth){ this.p.x = 0; }else if(this.p.x + this.r < 0){ this.p.x = p.windowWidth+this.r; } if(this.p.y - this.r > p.windowHeight){ this.p.y = 0; }else if(this.p.y + this.r < 0){ this.p.y = p.windowHeight+this.r; } } var particle; var particles = []; var particlesNum = 100; var px = 0; /*-- p5 framwork ------------------------------------*/ p.setup = function(){ p.createCanvas(p.windowWidth, p.windowHeight); p.blendMode(p.ADD); p.background(0); for(var i = 0; i<particlesNum; i++){ var pos = p.createVector(p.random(p.windowWidth), p.random(p.windowHeight)); var vec = p.createVector(p.random(-2,2), p.random(-2,2)); particles.push( new Particle(pos,vec,p.random(4,300)) ) } } p.draw = function(){ p.clear(); p.background(0,0,0,255); for(var i = 0; i<particlesNum; i++){ particles[i].update(); particles[i].through(); particles[i].draw(); } } p.mousePressed = function(event) { }; p.windowResized = function() { }
}
new p5(scketch);
Developer | Takashi |
Username | tksiiii |
Uploaded | October 20, 2022 |
Rating | 3 |
Size | 2,058 Kb |
Views | 10,120 |
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!
Name | Size |
Rose curve animation | 2,083 Kb |
Magic circle1 | 3,558 Kb |
Basic practice of three.js | 4,128 Kb |
Noise curve 2D | 3,551 Kb |
Colorful smoke | 2,247 Kb |
Mosaic Pixel Effect | 358,869 Kb |
Lines circle | 1,959 Kb |
Polar Rose Generator | 5,055 Kb |
Magic circle6 | 3,665 Kb |
Magic circle5 | 3,614 Kb |
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!
Name | Username | Size |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Guidepopup | Wooljs | 3,747 Kb |
Testing Code Pen | Jduprey | 1,468 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!