html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<footer><button class="btn btn-danger" id="add_ball" onclick="add()">Add Ball</button></footer>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
body {
}
footer{
position:absolute;
bottom:10%;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
function setup(){
createCanvas(innerWidth, innerHeight)
background(0)
}
// not sure why using an object constructor not needed in this case
// but if you do use it must create an instance of Ball to use its properties
function Ball(){
this.r=15;
this.speed=random(0,8);
this.w=30;
this.h=30;
this.x=random(0,400);
//this.y=random(0.400)//<-need coma not period
this.y=random(0,400);
}
// don't need draw() in this case because ellipse will draw
//function draw(){
// add()
//}
function add(){
fill(random(100), random(255), random(300))
//ellipse(Ball.x, Ball.h, Ball.w,Ball.h)//<- can't use Ball must create new instance of ball
let ball = new Ball();
ellipse(ball.x, ball.y, ball.w, ball.h)
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run