Skip to content

Commit f875994

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1138 from mccoli/ParticleSystem-mccoli
a simple particle system demo
2 parents fa6ec7e + a61b510 commit f875994

File tree

3 files changed

+178
-0
lines changed

3 files changed

+178
-0
lines changed

‎ParticleSystem/mccoli/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Particle System Sketch
2+
3+
This project is a particle system simulation created using the p5.js library. Users can interact with the system by creating particles with mouse clicks, applying wind with the 'w' key, and resetting the system with the 'r' key.
4+
5+
### Features
6+
- **Create Particles**: Click anywhere on the canvas to create a burst of particles.
7+
- **Apply Wind**: Press the 'w' key to apply a wind force to all particles.
8+
- **Reset**: Press the 'r' key to reset the particle system and start fresh.
9+
10+
### Getting Started
11+
1. Clone this repository to your local machine.
12+
2. Open the provided HTML file in a web browser.
13+
3. Have fun :)
14+
15+
### Technical Info
16+
- **Framework**: None
17+
- **Library**: [p5.js](https://p5js.org/)
18+
- **Language**: JavaScript, HTML, CSS
19+
20+
![A screenshot of the sketch in a browser.](screenshot.png)

‎ParticleSystem/mccoli/particleSystem.html

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta name="author" content="Olivia McCallum">
7+
<meta name="description" content="A p5.js displaying a simple particle system with wind.">
8+
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Reddit+Mono:[email protected]&display=swap" rel="stylesheet">
12+
13+
<title>Particle System Sketch</title>
14+
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js" integrity="sha512-d6sc8kbZEtA2LwB9m/ck0FhvyUwVfdmvTeyJRprmj7Wg9wRFtHDIpr6qk4g/y3Ix3O9I6KHIv6SGu9f7RaP1Gw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
16+
<style>
17+
#instructions {
18+
position: absolute;
19+
top: 10px;
20+
left: 10px;
21+
font-family: "Reddit Mono", monospace;
22+
font-size: 16px;
23+
color: rgb(0, 60, 150);
24+
background-color: rgba(255, 255, 255, 0.8);
25+
padding: 10px;
26+
border-radius: 5px;
27+
}
28+
</style>
29+
<script>
30+
let gravity, wind;
31+
let systems = [];
32+
33+
function setup() {
34+
createCanvas(windowWidth, windowHeight);
35+
36+
gravity = createVector(0, 0.05);
37+
wind = createVector(2, 0);
38+
39+
systems = [];
40+
}
41+
42+
function draw() {
43+
background(255);
44+
45+
for (let ps of systems) {
46+
ps.addForce(gravity);
47+
ps.update();
48+
ps.display();
49+
}
50+
}
51+
52+
function mousePressed() {
53+
systems.push(new System(mouseX, mouseY, 60));
54+
}
55+
56+
function keyPressed() {
57+
if (key === 'r') {
58+
setup();
59+
}
60+
if (key === 'w') {
61+
for (let ps of systems) {
62+
ps.addForce(wind);
63+
}
64+
}
65+
}
66+
67+
class System {
68+
constructor(x, y, c) {
69+
this.origin = createVector(x, y);
70+
this.particles = [];
71+
this.count = c;
72+
}
73+
74+
addForce(f) {
75+
for (let i = 0; i < this.particles.length; i++) {
76+
this.particles[i].addForce(f);
77+
}
78+
}
79+
80+
update() {
81+
if (this.count > 0) {
82+
// update the system
83+
this.particles.push(new Particle(this.origin.x, this.origin.y));
84+
this.count--;
85+
}
86+
87+
// remove dead particles
88+
for (let i = this.particles.length - 1; i >= 0; i--) {
89+
if (this.particles[i].expired()) {
90+
this.particles.splice(i, 1);
91+
}
92+
}
93+
94+
// for every particle
95+
for (let i = 0; i < this.particles.length; i++) {
96+
let p = this.particles[i];
97+
p.update();
98+
}
99+
}
100+
101+
display() {
102+
// draw the system
103+
for (let i = 0; i < this.particles.length; i++) {
104+
let p = this.particles[i];
105+
p.display();
106+
}
107+
}
108+
}
109+
110+
class Particle {
111+
constructor(x, y) {
112+
this.position = createVector(x, y);
113+
this.velocity = createVector(random(-1, 1), random(-1, 1));
114+
this.acceleration = createVector(0, 0);
115+
this.lifespan = 255;
116+
this.decay = 2;
117+
}
118+
119+
addForce(f) {
120+
this.acceleration.add(f);
121+
}
122+
123+
expired() {
124+
return this.lifespan < 0;
125+
}
126+
127+
update() {
128+
this.lifespan -= this.decay;
129+
130+
this.velocity.add(this.acceleration);
131+
this.position.add(this.velocity);
132+
133+
if (this.position.y > height) {
134+
this.position.y = height;
135+
this.velocity.y *= -0.5;
136+
}
137+
138+
this.acceleration.mult(0);
139+
}
140+
141+
display() {
142+
push();
143+
translate(this.position.x, this.position.y);
144+
noStroke();
145+
fill(0, 60, 150, this.lifespan);
146+
ellipse(0, 0, 10);
147+
pop();
148+
}
149+
}
150+
151+
</script>
152+
</head>
153+
<body>
154+
<div id="instructions">
155+
Click to create particles. Press 'w' to apply wind. Press 'r' to reset.
156+
</div>
157+
</body>
158+
</html>

‎ParticleSystem/mccoli/screenshot.png

77.3 KB
Loading

0 commit comments

Comments
 (0)