Colorful smoke
How do I make an colorful smoke?
Like a smoke or fireball. What is a colorful smoke? How do you make a colorful smoke? This script and codes were developed by Takashi on 20 October 2022, Thursday.
Colorful smoke - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>colorful smoke</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>
Colorful smoke - Script Codes JS Codes
var scketch = function(p){ var particleNum = 0; var particle; var particles = []; var Particle = function(pos,v,d){ this.p = pos; this.v = v; this.a = p.createVector(0,0); this.d = d; this.r = d/2; this.mass = this.r/100; this.lifespan = 100; this.col_r = p.floor(p.random(255)); this.col_g = p.floor(p.random(255)); this.col_b = p.floor(p.random(255)); this.col_a = 0.6; } Particle.prototype.addForce = function(f){ this.a.add(f); this.a.div(this.mass); } Particle.prototype.update = function(){ this.v.add(this.a); this.p.add(this.v); this.lifespan -= 2; this.col_a -= 0.014; this.a.mult(0); } Particle.prototype.draw = function(){ 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,'rgba(' + this.col_r + ',' + this.col_g + ',' + this.col_b + ','+ this.col_a +')'); 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.isLive = function(){ if(this.lifespan<=0){ return false; }else{ return true; } } /*-- p5 framwork ------------------------------------*/ p.setup = function(){ p.createCanvas(p.windowWidth, p.windowHeight); p.blendMode(p.ADD); p.background(0); } p.draw = function(){ p.clear(); p.background(0); //add particle for(var i=0; i<3; i++){ var mpos = p.createVector(p.mouseX || p.touchX || p.windowWidth/2, p.mouseY || p.touchY || p.windowHeight/2); var vec = p.createVector(p.randomGaussian()*4,p.randomGaussian(1,3)); particle = new Particle(mpos,vec,130); particles.push(particle); } //move upward as smoke for(var i = particles.length-1; i>=0; i--){ var mpos = p.createVector(p.mouseX || p.touchX || p.windowWidth/2, p.mouseY || p.touchY || p.windowHeight/2); var toMouse = p5.Vector.sub(mpos,particles[i].p); toMouse.normalize(); toMouse.mult(0.5); var force = p.createVector(toMouse.x,-0.3); particles[i].addForce(force); particles[i].update(); particles[i].draw(); if(!particles[i].isLive()){ particles.splice(i,1); } } } p.mousePressed = function() { }; p.windowResized = function() { p.resizeCanvas(p.windowWidth, p.windowHeight); }
}
new p5(scketch);
Developer | Takashi |
Username | tksiiii |
Uploaded | October 20, 2022 |
Rating | 3.5 |
Size | 2,247 Kb |
Views | 14,168 |
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 |
Mosaic Pixel Effect | 358,869 Kb |
Magic circle5 | 3,614 Kb |
Basic practice of three.js | 4,128 Kb |
Floating circle particle | 2,698 Kb |
Magic circle1 | 3,558 Kb |
SplitShiftEffect | 6,607 Kb |
Magic circle6 | 3,665 Kb |
Lines circle | 1,959 Kb |
Noise curve 2D | 3,551 Kb |
Colorful 2D particle attractor | 2,841 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 |
Zip Button test | Lje7462 | 1,932 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Find The Penguin | Lelder | 2,212 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
Project MMetro beta | Atomicsong | 5,157 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!