11/**
2- ** @name Shake Ball Bounce
3- ** @description Using the <a href="https://p5js.org/reference/#/p5/class" target="_blank">class</a> property, you can create a collection of
4- ** circles that move within the canvas in response to the tilt of a mobile device.
5- ** You must open this page on a mobile device to display the sketch.
6- ** /
2+ * @name Shake Ball Bounce
3+ * @description Using the <a href="https://p5js.org/reference/#/p5/class" target="_blank">class</a> property, you can create a collection of
4+ * circles that move within the canvas in response to the tilt of a mobile device.
5+ * You must open this page on a mobile device to display the sketch.
6+ */
77// Define the global variables.
8- // The balls variable will contain all the
8+ // The balls variable will contain all the
99// balls in the canvas.
1010let balls = [ ] ;
1111
1212// The threshold variable will be used to check
13- // if the mobile device has been moved enough to
13+ // if the mobile device has been moved enough to
1414// initiate a response.
1515let threshold = 30 ;
1616
@@ -24,7 +24,9 @@ let accChangeY = 0;
2424let accChangeT = 0 ;
2525
2626function setup ( ) {
27- describe ( 'Twenty circles that bounce around in the canvas whenever the mobile device is tilted.' ) ;
27+ describe (
28+ 'Twenty circles that bounce around in the canvas whenever the mobile device is tilted.'
29+ ) ;
2830
2931 // Create a canvas that fill the entire viewport display.
3032 createCanvas ( displayWidth , displayHeight ) ;
@@ -49,15 +51,14 @@ function draw() {
4951}
5052
5153function checkForShake ( ) {
52-
5354 // Calculate the total change for accelerationX and accelerationY.
5455 accChangeX = abs ( accelerationX - pAccelerationX ) ;
5556 accChangeY = abs ( accelerationY - pAccelerationY ) ;
5657
5758 // Calculate the overall change in the mobile device's acceleration.
5859 accChangeT = accChangeX + accChangeY ;
5960
60- // If the overall change meets or is greater than the threshold,
61+ // If the overall change meets or is greater than the threshold,
6162 // call the shake() and turn() methods and change the direction
6263 // and speed of each ball.
6364 if ( accChangeT >= threshold ) {
@@ -66,7 +67,7 @@ function checkForShake() {
6667 balls [ i ] . turn ( ) ;
6768 }
6869 }
69- // If the overall change doesn't meet the threshold,
70+ // If the overall change doesn't meet the threshold,
7071 // gradually slow down the ball movement.
7172 else {
7273 for ( let i = 0 ; i < balls . length ; i ++ ) {
@@ -80,8 +81,8 @@ function checkForShake() {
8081// Create the Ball class.
8182class Ball {
8283 constructor ( ) {
83- // Make each ball created have a random size, speed, and starting
84- // placement in the canvas.
84+ // Make each ball created have a random size, speed, and starting
85+ // placement in the canvas.
8586 this . x = random ( width ) ;
8687 this . y = random ( height ) ;
8788 this . diameter = random ( 10 , 30 ) ;
@@ -95,7 +96,7 @@ class Ball {
9596 this . oyspeed = this . yspeed ;
9697 }
9798
98- // Whenever the ball's move() method is called,
99+ // Whenever the ball's move() method is called,
99100 // multiply its speed and direction of movement
100101 // and have that equal its new placement in the canvas.
101102 move ( ) {
@@ -149,4 +150,4 @@ class Ball {
149150 display ( ) {
150151 ellipse ( this . x , this . y , this . diameter , this . diameter ) ;
151152 }
152- }
153+ }
0 commit comments