Skip to content

Commit b755f76

Browse files
shiffmanshiffman
committed
updating the testing file for p5 versions
1 parent 285087e commit b755f76

1 file changed

Lines changed: 6 additions & 167 deletions

File tree

‎content/examples_p5/testing.html‎

Lines changed: 6 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -1,175 +1,14 @@
11
<html>
22
<head>
3-
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script>
4-
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/addons/p5.dom.min.js"></script>
5-
<!--<script language="javascript" type="text/javascript" src="Topics/Simulate/MultipleParticleSystems/Particle.js"></script>
6-
<script language="javascript" type="text/javascript" src="Topics/Simulate/MultipleParticleSystems/CrazyParticle.js"></script>
7-
<script language="javascript" type="text/javascript" src="Topics/Simulate/MultipleParticleSystems/ParticleSystem.js"></script>
8-
<script language="javascript" type="text/javascript" src="Topics/Simulate/MultipleParticleSystems/MultipleParticleSystems.js"></script>-->
9-
<script type="text/javascript">
10-
11-
// function setup() {
12-
// var cnv = createCanvas(100, 100);
13-
// cnv.parent('boop');
14-
// }
15-
16-
// function draw() {
17-
// background(200, 0, 0);
18-
// }
19-
20-
</script>
3+
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
4+
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.min.js"></script>
5+
<script language="javascript" type="text/javascript" src="Topics/Motion/Reflection2/Ground.js"></script>
6+
<script language="javascript" type="text/javascript" src="Topics/Motion/Reflection2/Orb.js"></script>
7+
<script language="javascript" type="text/javascript" src="Topics/Motion/Reflection2/Reflection2.js"></script>
218
</head>
229
<body>
23-
24-
<div id="p5container"></div><div id="p5container"></div><script type="text/javascript">/**
25-
* Multiple Particle Systems
26-
* by Daniel Shiffman.
27-
*
28-
* Click the mouse to generate a burst of particles
29-
* at mouse location.
30-
*
31-
* Each burst is one instance of a particle system
32-
* with Particles and CrazyParticles (a subclass of Particle)
33-
* Note use of Inheritance and Polymorphism here.
34-
*/
35-
36-
var systems = [];
37-
38-
function setup() {
39-
var canvas = createCanvas(640, 360);
40-
canvas.parent("p5container");
41-
}
42-
43-
function draw() {
44-
background(51);
45-
for(var i = 0; i < systems.length; i++){
46-
systems[i].addParticle();
47-
systems[i].run();
48-
}
49-
if (systems.length === 0) {
50-
fill(255);
51-
noStroke();
52-
textAlign(CENTER);
53-
text("click mouse to add particle systems", width/2, height/2);
54-
}
55-
}
56-
57-
function mousePressed() {
58-
systems.push(new ParticleSystem(1, createVector(mouseX, mouseY)));
59-
}
60-
61-
62-
63-
var Particle = function(position) {
64-
this.acceleration = createVector(0, 0.05);
65-
this.velocity = createVector(random(-1, 1), random(-2, 0));
66-
this.position = position.copy();
67-
this.lifespan = 255.0;
68-
69-
this.run = function() {
70-
this.update();
71-
this.display();
72-
};
73-
74-
// Method to update position
75-
this.update = function(){
76-
this.velocity.add(this.acceleration);
77-
this.position.add(this.velocity);
78-
this.lifespan -= 2;
79-
};
80-
81-
// Method to display
82-
this.display = function() {
83-
stroke(255,this.lifespan);
84-
fill(255,this.lifespan);
85-
ellipse(this.position.x,this.position.y,8,8);
86-
};
87-
88-
// Is the particle still useful?
89-
this.isDead = function(){
90-
if (this.lifespan < 0.0) {
91-
return true;
92-
} else {
93-
return false;
94-
}
95-
};
96-
}
97-
98-
function CrazyParticle(position) {
99-
this.theta = 0;
100-
101-
Particle.call(this, position);
102-
103-
// Method to update position
104-
this.update = function(){
105-
this.velocity.add(this.acceleration);
106-
this.position.add(this.velocity);
107-
this.lifespan -= 2;
108-
var theta_vel = (this.velocity.x * this.velocity.mag()) / 10;
109-
this.theta += theta_vel;
110-
};
111-
112-
// Override the display method
113-
this.display = function(){
114-
stroke(255,this.lifespan);
115-
fill(255,this.lifespan);
116-
ellipse(this.position.x,this.position.y,8,8);
117-
// Then add a rotating line
118-
push();
119-
translate(this.position.x,this.position.y);
120-
rotate(this.theta);
121-
stroke(255,this.lifespan);
122-
line(0,0,25,0);
123-
pop();
124-
}
125-
}
126-
127-
// Inherit from the parent class
128-
CrazyParticle.prototype = Object.create(Particle.prototype);
129-
this.constructor = CrazyParticle;
130-
131-
132-
133-
134-
135-
var ParticleSystem = function(num, position) {
136-
this.origin = position.copy();
137-
this.particles = [];
138-
for (var i = 0; i < num; i++) {
139-
this.particles.push(new Particle(this.origin)); // Add "num" amount of particles to the arraylist
140-
}
141-
142-
this.addParticle = function() {
143-
var p;
144-
// Add either a Particle or CrazyParticle to the system
145-
if (int(random(0, 2)) == 0) {
146-
p = new Particle(this.origin);
147-
}
148-
else {
149-
p = new CrazyParticle(this.origin);
150-
}
151-
this.particles.push(p);
152-
};
153-
154-
this.run = function() {
155-
for (var i = this.particles.length-1; i >= 0; i--) {
156-
var p = this.particles[i];
157-
p.run();
158-
if (p.isDead()) {
159-
this.particles.splice(i, 1);
160-
}
161-
}
162-
};
163-
164-
// A method to test if the particle system still has particles
165-
this.dead = function() {
166-
return particles.length === 0;
167-
}
168-
}
10+
<div id="p5container"></div>
16911
</script>
17012

17113
</body>
17214
</html>
173-
174-
175-

0 commit comments

Comments
 (0)