Pseudo Fluids
How do I make an pseudo fluids?
Coded with love, some mathemagics, and about 2 coffees.Check a self-fork: Pseudo Fluids + Gravity here: http://codepen.io/everblind/pen/EevLC. What is a pseudo fluids? How do you make a pseudo fluids? This script and codes were developed by Jeff Ibacache on 23 June 2022, Thursday.
Pseudo Fluids - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pseudo Fluids</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>
Pseudo Fluids - Script Codes CSS Codes
* { margin: 0px;
}
canvas { display: block;
}
Pseudo Fluids - Script Codes JS Codes
/*
By: @everblind
Use it!, for FREE ;D
Help?, Questions?, Message me!
Do you want to use the Mouse?, Fork it and make your mod!
Cheers :)
*/
var canvas;
var context;
var width;
var height;
var particles = [];
var doublePI = Math.PI * 2;
var influencerCurrentPos;
var influencerPrevPos;
var mouseForce;
var forceRadius = 80;
var tickStep = 0;
window.onload = function()
{ canvas = document.getElementById('canvas'); canvas.style.width = window.innerWidth + "px"; setTimeout(function() { canvas.style.height = window.innerHeight + "px";
}, 0); context = canvas.getContext('2d'); width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight;
mouseSetup();
generateParticles(); loop();
};
function mouseSetup()
{ influencerCurrentPos = vec2d.create(0, 0); influencerPrevPos = vec2d.create(0, 0); mouseForce = vec2d.create(0, 0);
}
function generateParticles()
{ var i = 499; for(i; i > -1; --i) { var p = particle.create((Math.random() * 12 + 2) >> 0); p.getPos().setXY(Math.random() * width, Math.random() * height); p.getVel().setXY(1 - Math.random() * 2, 1 - Math.random() * 2); particles[particles.length] = p; }
}
function loop()
{ updateInfluencer(); updateMouseForce(); updateParticles(); renderParticles(); renderForce(); tickStep += 0.01; requestAnimationFrame(loop);
}
function updateInfluencer()
{ forceRadius = Math.cos(tickStep) * 40 + 80; influencerPrevPos.setXY(influencerCurrentPos.getX(), influencerCurrentPos.getY()); influencerCurrentPos.setXY(Math.cos(tickStep) * (Math.sin(tickStep * 2) * (width * 0.4)) + (width >> 1), Math.sin(tickStep) * (Math.sin(tickStep * 2) * (height * 0.4)) + (height >> 1));
}
function updateMouseForce()
{ var vx = influencerCurrentPos.getX() - influencerPrevPos.getX(); var vy = influencerCurrentPos.getY() - influencerPrevPos.getY(); mouseForce.setLength(1); mouseForce.setAngle(Math.atan2(vy, vx));
}
function updateParticles()
{ var i = particles.length - 1; for(i; i > -1; --i) { var p = particles[i]; var vx = p.getPos().getX() - influencerCurrentPos.getX(); var vy = p.getPos().getY() - influencerCurrentPos.getY(); var distVec = vec2d.create(vx, vy); if(distVec.getLength() < forceRadius) { p.getPos().setXY(influencerCurrentPos.getX() + Math.cos(distVec.getAngle()) * forceRadius, influencerCurrentPos.getY() + Math.sin(distVec.getAngle()) * forceRadius); p.getVel().add(mouseForce); } p.update(); }
}
function renderParticles()
{ context.globalAlpha = 0.3; context.fillStyle = '#233239'; context.fillRect(0, 0, canvas.width, canvas.height); context.globalAlpha = 0.4; var i = particles.length - 1; for(i; i > -1; --i) { var p = particles[i]; context.strokeStyle = '#85B0BD'; context.beginPath(); context.arc(p.getPos().getX(), p.getPos().getY(), p.getRadius(), 0, doublePI); context.stroke(); context.closePath(); } context.globalAlpha = 1;
}
function renderForce()
{ context.fillStyle = '#9CCFDE'; context.beginPath(); context.arc(influencerCurrentPos.getX(), influencerCurrentPos.getY(), forceRadius, 0, doublePI); context.fill(); context.closePath();
}
//vec2d definition:
var vec2d =
{ _x: 1, _y: 0, create: function(x, y) { var obj = Object.create(this); obj.setX(x); obj.setY(y); return obj; }, getX: function() { return this._x; }, setX: function(value) { this._x = value; }, getY: function() { return this._y; }, setY: function(value) { this._y = value; }, setXY: function(x, y) { this._x = x; this._y = y; }, getLength: function() { return Math.sqrt(this._x * this._x + this._y * this._y); }, setLength: function(length) { var angle = this.getAngle(); this._x = Math.cos(angle) * length; this._y = Math.sin(angle) * length; }, getAngle: function() { return Math.atan2(this._y, this._x); }, setAngle: function(angle) { var length = this.getLength(); this._x = Math.cos(angle) * length; this._y = Math.sin(angle) * length; }, add: function(vector) { this._x += vector.getX(); this._y += vector.getY(); }, substract: function(vector) { this._x -= vector.getX(); this._y -= vector.getY(); }, multiply: function(value) { this._x *= value; this._y *= value; }, divide: function(value) { this._x *= value; this._y *= value; }
};
//particle definition:
var particle =
{ _pos: null, _vel: null, _radius: null, _mouseForce: null, create: function(radius) { var obj = Object.create(this); obj.setPos(vec2d.create(0, 0)); obj.setVel(vec2d.create(0, 0)); obj.setMouseForce(vec2d.create(0, 0)); obj.setRadius(radius); return obj; }, update: function() { this._pos.add(this._vel); this.checkBounds(); this._vel.multiply(0.98); if(this._vel.getLength() < 0.3) this._vel.setLength(0.3); }, checkBounds: function() { if(this._pos.getX() > width) { this._pos.setX(width); this._vel.setX(this._vel.getX() * -1); } else if(this._pos.getX() < 0) { this._pos.setX(0); this._vel.setX(this._vel.getX() * -1); } if(this._pos.getY() > height) { this._pos.setY(height); this._vel.setY(this._vel.getY() * -1); } else if(this._pos.getY() < 0) { this._pos.setY(0); this._vel.setY(this._vel.getY() * -1); } }, getPos: function() { return this._pos; }, setPos: function(vector) { this._pos = vector; }, getVel: function() { return this._vel; }, setVel: function(vector) { this._vel = vector; }, getRadius: function() { return this._radius; }, setRadius: function(radius) { this._radius = radius; }, setMouseForce: function(vector) { this._mouseForce = vector; }
};
Developer | Jeff Ibacache |
Username | jeffibacache |
Uploaded | June 23, 2022 |
Rating | 4.5 |
Size | 3,266 Kb |
Views | 52,624 |
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 |
Wave | 1,997 Kb |
Electric worm | 2,377 Kb |
Bezier Fun | 3,319 Kb |
Wave Physics Playground | 3,267 Kb |
Playable Canvas Asteroids | 5,711 Kb |
Astral Spiral Playground | 2,764 Kb |
Stardust | 2,629 Kb |
A Pen by Jeff Ibacache | 2,359 Kb |
Pseudo 3D Particles | 2,548 Kb |
Trippy Pac-Man | 2,552 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 |
Scroll to top button | DominicFrancois | 3,743 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
STIKHOI | Denmch | 7,122 Kb |
Responsive slide | Thorien | 2,400 Kb |
Social buttons | Flacu | 2,022 Kb |
Animated skewed panes | NyX | 4,462 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!