-
Notifications
You must be signed in to change notification settings - Fork 0
/
bounce.html
126 lines (119 loc) · 4.4 KB
/
bounce.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>
Ball Bouncing Simulator
</title>
<script src="p5.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<main></main>
<script>
var speed;
function setup() {
describe("A ball bouncing in a box simulator");
createCanvas(windowWidth, windowHeight);
speed = createSlider(0,2,0.5,0.01);
speed.position(0,0);
}
class Ball {
constructor(ballX = 0, ballY = 0, speedX = 0, speedY = 0, drag = 0, bounciness = 1, gravity = 1) {
this.ballX = ballX;
this.ballY = ballY;
this.speedX = speedX;
this.speedY = speedY;
this.drag = drag;
this.bounciness = bounciness;
this.gravity = gravity;
}
draw() {
noStroke();
fill("white");
circle(this.ballX,this.ballY,10);
}
tick(time = 1) {
//Move Ball
this.ballX += this.speedX * time;
this.ballY += this.speedY * time;
//Air Drag Ball
if (this.speedX > 0) {
this.speedX -= this.drag * time;
}
else if (this.speedX < 0) {
this.speedX += this.drag * time;
}
if (this.speedY < 0) {
this.speedY += this.drag * time;
}
//Gravity Ball
if (this.ballY < height-1) {
this.speedY += this.gravity * time;
}
//Bounce Ball
if (this.ballX < 0) {
this.ballX = 0;
if (this.speedX < 0) {
this.speedX = -this.speedX*this.bounciness;
}
}
else if (this.ballX > width) {
this.ballX = width;
if (this.speedX > 0) {
this.speedX = -this.speedX*this.bounciness;
}
}
if (this.ballY > height) {
this.ballY = height;
if (this.speedY > 0) {
this.speedY = -this.speedY*this.bounciness;
}
}
else if (this.ballY < 0) {
this.ballY = 0;
if (this.speedY < 0) {
this.speedY = -this.speedY*this.bounciness;
}
}
}
}
var balls = [];
var originalX = -1;
var originalY = -1;
function mousePressed() {
originalX = mouseX;
originalY = mouseY;
describe("A new ball is being created.");
}
function mouseReleased() {
balls.push(new Ball(originalX,originalY,mouseX-originalX,mouseY-originalY,0.05,0.8,1));
originalX = -1;
originalY = -1;
describe("A new ball was created at (${mouseX},${mouseY})");
}
function draw() {
background("black");
if (originalX != -1 && originalY != -1) {
stroke("white");
strokeWeight(1);
line(originalX,originalY,mouseX,mouseY);
strokeWeight(5);
point(originalX,originalY);
describe("There are ${balls.length} balls bouncing in a box. A new ball is being created with a speed of (${mouseX-originalX},${mouseY-originalY}).");
}
else {
describe("There are ${balls.length} balls bouncing in a box.");
}
for (var ball in balls) {
balls[ball].draw();
balls[ball].tick(speed.value());
}
}
</script>
</body>
</html>