Zum Inhalt springen
SignalRGB

Ball-Klasse

Dieses Tutorial erklärt die Verwendung von JavaScript-Klassen in canvas-Animationen und richtet sich nicht an Anfänger. Ich empfehle, zuerst unseren Abschnitt zur Lighting Engine durchzugehen und das Color Cycle-Tutorial auszuprobieren.

Das gesagt, werde ich hier keine strikte Klassensyntax verwenden, da es sich lediglich um “syntaktischen Zucker” in JavaScript handelt und die zugrunde liegenden Konzepte dieselben bleiben. Wenn du dich für komplexere Animationen interessierst, empfehle ich, diese Seite für eine umfassende Einführung zu besuchen. Andernfalls bleiben wir bei den Grundlagen.

Zunächst ist eine Klasse einfach eine reguläre JavaScript-Funktion. Sie funktioniert auf dieselbe Weise, aber wir fügen die Möglichkeit hinzu, Werte an eine bestimmte Instanz der Funktion zu binden. In diesem Beispiel habe ich einen Ball erstellt, der sich gemäß der grundlegenden Physik verhält. Er verfolgt seine Position und Geschwindigkeit sowie die auf ihn wirkende “Schwerkraft”.

Einfacher Abpraller

Abschnitt betitelt „Einfacher Abpraller“
<head>
    <title>Simple Ball Bounce</title>
    <meta description="Ball bounce"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    // Canvas variables
    var width = 320;
    var height = 200;
    // X-component of ball position
    let ballX = 160;
    // Y-component of ball position
    let ballY = 100;
    // Change in ballY over time. Positive values move down, negative move up
    let velocityY = 0;
    // Change in velocityY over time.
    let accelerationY = 1;
    // Effects array
    let effects = [];


    function update() {
      // 1. Overwrite the previous frame
      ctx.fillStyle = background;
      ctx.fillRect(0, 0, 320,200);


      // 2. Make sure there is one instance of the Ball class in the effects array
      if (effects.length < 1){
        effects.push(new Ball());
      }


      // 3. Iterate through the effects array and call each element's draw function
      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }


    // 4. Declare the Ball class
    function Ball(){
      // 5. Set instance variables
      this.bx = ballX;
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      this.impact = false;
      // 6. Define draw function
      this.draw = function(){
        // 7. Change the y-velocity by the y-acceleration
        this.vy += this.ay;


        // 8. If an impact with the ground has been detected, set the velocity upwards and set the impact boolean to false. This check happens before the next function so that we draw the impact frame instead of skipping it.
        if (this.impact){
          this.vy = -10;
          this.impact = false;
        }


        // 9. Detect a future impact. If the ball position plus its radius plus its velocity would put it under the floor, we run a few operations -
        if (this.by + this.radius + this.vy > 200){
          // Set the velocity to 0 so the ball stays where we put it this frame.
          this.vy = 0;
          // Set impact to true so the next run-through draws the up-bounce
          this.impact = true;
          // Next frame draws the up-bounce. This frame detected a future collision. If we want to see the impact itself we have to force it. While the ball's outer radius is below the floor, we move the ball up.
          while (this.by + this.radius < 200){
            this.by++;
          }
        }
        // 10. Change the y-component by the y-velocity.
        this.by += this.vy;
        // Draw shape.
        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
<head>
    <title>Simple Ball Bounce</title>
    <meta description="Ball bounce"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    // Canvas variables
    var width = 320;
    var height = 200;
    // X-component of ball position
    let ballX = 160;
    // Y-component of ball position
    let ballY = 100;
    // Change in ballY over time. Positive values move down, negative move up
    let velocityY = 0;
    // Change in velocityY over time.
    let accelerationY = 1;
    // Effects array
    let effects = [];


    function update() {
      // 1. Overwrite the previous frame
      ctx.fillStyle = background;
      ctx.fillRect(0, 0, 320,200);


      // 2. Make sure there is one instance of the Ball class in the effects array
      if (effects.length < 1){
        effects.push(new Ball());
      }


      // 3. Iterate through the effects array and call each element's draw function
      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }


    // 4. Declare the Ball class
    function Ball(){
      // 5. Set instance variables
      this.bx = ballX;
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      this.impact = false;
      // 6. Define draw function
      this.draw = function(){
        // 7. Change the y-velocity by the y-acceleration
        this.vy += this.ay;


        // 8. If an impact with the ground has been detected, set the velocity upwards and set the impact boolean to false. This check happens before the next function so that we draw the impact frame instead of skipping it.
        if (this.impact){
          this.vy = -10;
          this.impact = false;
        }


        // 9. Detect a future impact. If the ball position plus its radius plus its velocity would put it under the floor, we run a few operations -
        if (this.by + this.radius + this.vy > 200){
          // Set the velocity to 0 so the ball stays where we put it this frame.
          this.vy = 0;
          // Set impact to true so the next run-through draws the up-bounce
          this.impact = true;
          // Next frame draws the up-bounce. This frame detected a future collision. If we want to see the impact itself we have to force it. While the ball's outer radius is below the floor, we move the ball up.
          while (this.by + this.radius < 200){
            this.by++;
          }
        }
        // 10. Change the y-component by the y-velocity.
        this.by += this.vy;
        // Draw shape.
        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
function update() {
      // 1. Overwrite the previous frame
      ctx.fillStyle = background;
      ctx.fillRect(0, 0, 320,200);


      // 2. Make sure there is one instance of the Ball class in the effects array
      if (effects.length < 1){
        effects.push(new Ball());
      }


      // 3. Iterate through the effects array and call each element's draw function
      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }
// 4. Declare the Ball class
    function Ball(){
      // 5. Set instance variables
      this.bx = ballX;
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      this.impact = false;
      // 6. Define draw function
      this.draw = function(){
        // 7. Change the y-velocity by the y-acceleration
        this.vy += this.ay;


        // 8. If an impact with the ground has been detected, set the velocity upwards and set the impact boolean to false. This check happens before the next function so that we draw the impact frame instead of skipping it.
        if (this.impact){
          this.vy = -10;
          this.impact = false;
        }


        // 9. Detect a future impact. If the ball position plus its radius plus its velocity would put it under the floor, we run a few operations -
        if (this.by + this.radius + this.vy > 200){
          // Set the velocity to 0 so the ball stays where we put it this frame.
          this.vy = 0;
          // Set impact to true so the next run-through draws the up-bounce
          this.impact = true;
          // Next frame draws the up-bounce. This frame detected a future collision. If we want to see the impact itself we have to force it. While the ball's outer radius is below the floor, we move the ball up.
          while (this.by + this.radius < 200){
            this.by++;
          }
        }
        // 10. Change the y-component by the y-velocity.
        this.by += this.vy;
        // Draw shape.
        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }

Vollständiger Abpraller

Abschnitt betitelt „Vollständiger Abpraller“

Sobald wir die anfängliche Komplexität gemeistert haben, ist es einfacher, fortgeschritteneres Verhalten hinzuzufügen. Im nächsten Beispiel habe ich Wandkollisionen eingebaut und einige zufällige Variationen in der x-Richtung eingeführt, um den Ball in Bewegung zu halten.

<head>
    <title>Full Bounce</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;
    let ballX = 160;
  // 1. Added velocityX
    let velocityX = 0;
    let ballY = 100;
    let velocityY = 0;
    let accelerationY = 1;
    let effects = [];


    function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      if (effects.length < 1){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })




      window.requestAnimationFrame(update);
    }




    function Ball(){
      this.bx = ballX;
      // 2. Give x a random initial velocity
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 3. Add x and y-components to the impact boolean for horizontal contact
      this.impactX = false;
      this.impactY = false;


      this.draw = function(){
        this.vy += this.ay;


        // 4. Each frame, add a small amount of random velocity in the x-direction to keep momentum going
        this.vx += Math.sin(Date.now());


        if (this.impactY){
          this.vy = -10;
          this.impactY = false;
        }
        // 5. If a horizontal impact is detected, reverse the x-velocity and subtract a small amount of force to prevent an out-of-control ball. Mirroring or adding to the force here can have interesting consequences.
        if (this.impactX){
          this.vx *= -.9;
          this.impactX = false;
        }


        if (this.by + this.radius + this.vy > height){
          this.vy = 0;
          this.impactY = true;
          while (this.by + this.radius < height){
            this.by++;
          }
        }
        // 6. Detect a horizontal impact left or right and adjust like we did the y-component.
        if (this.bx + this.radius + this.vx > width){
          this.vx = 0;
          this.impactX = true;
          while (this.bx + this.radius > width){
            this.bx--;
          }
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = 0;
          this.impactX = true;
          while (this.bx - this.radius < 0){
            this.bx++;
          }
        }
        // 7. Change the x- and y-components by their velocity.
        this.by += this.vy;
        this.bx += this.vx;


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
<head>
    <title>Full Bounce</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;
    let ballX = 160;
  // 1. Added velocityX
    let velocityX = 0;
    let ballY = 100;
    let velocityY = 0;
    let accelerationY = 1;
    let effects = [];


    function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      if (effects.length < 1){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })




      window.requestAnimationFrame(update);
    }




    function Ball(){
      this.bx = ballX;
      // 2. Give x a random initial velocity
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 3. Add x and y-compnents to the impact boolean for horizontal contact
      this.impactX = false;
      this.impactY = false;


      this.draw = function(){
        this.vy += this.ay;


        // 4. Each frame, add a small amount of random velocity in the x-direction to keep momentum going
        this.vx += Math.sin(Date.now());


        if (this.impactY){
          this.vy = -10;
          this.impactY = false;
        }
        // 5. If a horizontal impact is detected, reverse the x-velocity and subtract a small amount of force to prevent an out-of-control ball. Mirroring or adding to the force here can have interesting consequences.
        if (this.impactX){
          this.vx *= -.9;
          this.impactX = false;
        }


        if (this.by + this.radius + this.vy > height){
          this.vy = 0;
          this.impactY = true;
          while (this.by + this.radius < height){
            this.by++;
          }
        }
        // 6. Detect a horizontal impact left or right and adjust like we did the y-component.
        if (this.bx + this.radius + this.vx > width){
          this.vx = 0;
          this.impactX = true;
          while (this.bx + this.radius > width){
            this.bx--;
          }
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = 0;
          this.impactX = true;
          while (this.bx - this.radius < 0){
            this.bx++;
          }
        }
        // 7. Change the x- and y-components by their velocity.
        this.by += this.vy;
        this.bx += this.vx;


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      if (effects.length < 1){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })




      window.requestAnimationFrame(update);
    }
function Ball(){
      this.bx = ballX;
      // 2. Give x a random initial velocity
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 3. Add x and y-compnents to the impact boolean for horizontal contact
      this.impactX = false;
      this.impactY = false;


      this.draw = function(){
        this.vy += this.ay;


        // 4. Each frame, add a small amount of random velocity in the x-direction to keep momentum going
        this.vx += Math.sin(Date.now());


        if (this.impactY){
          this.vy = -10;
          this.impactY = false;
        }
        // 5. If a horizontal impact is detected, reverse the x-velocity and subtract a small amount of force to prevent an out-of-control ball. Mirroring or adding to the force here can have interesting consequences.
        if (this.impactX){
          this.vx *= -.9;
          this.impactX = false;
        }


        if (this.by + this.radius + this.vy > height){
          this.vy = 0;
          this.impactY = true;
          while (this.by + this.radius < height){
            this.by++;
          }
        }
        // 6. Detect a horizontal impact left or right and adjust like we did the y-component.
        if (this.bx + this.radius + this.vx > width){
          this.vx = 0;
          this.impactX = true;
          while (this.bx + this.radius > width){
            this.bx--;
          }
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = 0;
          this.impactX = true;
          while (this.bx - this.radius < 0){
            this.bx++;
          }
        }
        // 7. Change the x- and y-components by their velocity.
        this.by += this.vy;
        this.bx += this.vx;


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }

Mehrere Bälle

Abschnitt betitelt „Mehrere Bälle“

Ich möchte ehrlich sein: Dieses Beispiel ist Kompliziert mit großem K und erfordert wahrscheinlich mehr Aufwand, als du für die meisten grundlegenden Effekte benötigst. Um nicht zu viele Kommentare in den Code einfügen zu müssen, gehen wir hier einige knifflige Konzepte durch.

Erstens: Wie weiß ein Ball, dass er mit einem anderen kollidieren wird? Jedes Frame muss jede Instanz der Ball-Klasse die Position jeder anderen Ball-Instanz prüfen. Durch den Vergleich ihrer Positionen können wir feststellen, ob zwei Bälle sich gegenseitig in ihrem Radius befinden, und dann ihre x- und y-Geschwindigkeiten entsprechend umkehren.

Manchmal kann ein Ball genug Geschwindigkeit gewinnen, um durch einen anderen Ball hindurchzugehen und fast denselben Raum zu belegen. Die Mathematik, um beide Ballpositionen anzupassen, wäre zu komplex, daher entferne ich einfach die Ball-Instanz, die wir gerade prüfen. Da die update-Funktion eine Mindestanzahl von Bällen sicherstellt, wird eine neue Ball-Instanz erstellt und die Simulation läuft weiter.

Schließlich: Wann sollen wir die Änderung in Geschwindigkeit und Position für jeden Ball berechnen? Spielt es eine Rolle, ob der Ball vor oder nach der Aktualisierung der Variablen gezeichnet wird? Das Problem in der Programmierung ist, dass es auf beide Fragen mehrere Antworten gibt. Um damit umzugehen, habe ich eine etwas andere Methode zur Verfolgung von Kollisionen eingeführt. Es liegt an dir, die bevorzugte zu wählen, aber beide Methoden können und funktionieren.

<head>
    <title>Multiple Balls</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;
    let ballX = 160;
    let velocityX = 0;
    let ballY = 100;
    let velocityY = 0;
    let accelerationY = 1;
    let effects = [];


    function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      // 1. Increase the number of balls present in the effects array
      if (effects.length < 3){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }


    function Ball(){
      this.bx = ballX;
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 2. Add a unique ID to each ball so we can compare them to each other and not themselves. We have also removed "impactX" and "impactY" in favor of a better solution for more balls.
      this.id = Math.random();


      this.draw = function(){
        this.vy += this.ay;
        this.vx += Math.sin(Date.now());


        if (this.by + this.radius + this.vy > height){
          this.vy = -10;
        } else if (this.by - this.radius + this.vy < 0){
          // 3. Add a "ceiling" to the canvas in case a ball collision causes the height to exceed 0y.
          this.vy = 1;
        }
        if (this.bx + this.radius + this.vx > width){
          this.vx = -.9;
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = -.9;
        }
        // 4. Iterate through each ball in the effects array to check for collisions
        for (let i = 0; i < effects.length; i++){
          let ele = effects[i];
          // If the ball we are checking against is this ball, skip this cycle
          if (this.id == ele.id){
            continue;
          }
          // If the balls are clipping too much, remove this ball from the canvas
          if (Math.abs(this.bx - ele.bx) < this.radius && Math.abs(this.by - ele.by) < this.radius){
            effects.splice(i, 1);
          }
          // If the balls will collide, reverse their velocities and subtract some force to account for elasticity
          if (Math.abs(this.bx + this.vx - ele.bx) < (this.radius * 2) && Math.abs(this.by + this.vy - ele.by) < (this.radius * 2)){
            this.vx *= -.9;
            this.vy *= -.9;
          }
        }


        this.by += this.vy;
        this.bx += this.vx;


        // 5. Because complicated calcualtions for the velocities happen before this point, finalize the x- and y-coordinates by making sure they are bounded within the canvas.
        while (this.bx - this.radius < 0){
          this.bx++
        }
        while (this.bx + this.radius > width){
          this.bx--
        }
        while (this.by - this.radius < 0){
          this.by++
        }
        while (this.by + this.radius > height){
          this.by--
        }


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
<head>
    <title>Multiple Balls</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;
    let ballX = 160;
    let velocityX = 0;
    let ballY = 100;
    let velocityY = 0;
    let accelerationY = 1;
    let effects = [];


    function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      // 1. Increase the number of balls present in the effects array
      if (effects.length < 3){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }


    function Ball(){
      this.bx = ballX;
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 2. Add a unique ID to each ball so we can compare them to each other and not themselves. We have also removed "impactX" and "impactY" in favor of a better solution for more balls.
      this.id = Math.random();


      this.draw = function(){
        this.vy += this.ay;
        this.vx += Math.sin(Date.now());


        if (this.by + this.radius + this.vy > height){
          this.vy = -10;
        } else if (this.by - this.radius + this.vy < 0){
          // 3. Add a "ceiling" to the canvas in case a ball collision causes the height to exceed 0y.
          this.vy = 1;
        }
        if (this.bx + this.radius + this.vx > width){
          this.vx = -.9;
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = -.9;
        }
        // 4. Iterate through each ball in the effects array to check for collisions
        for (let i = 0; i < effects.length; i++){
          let ele = effects[i];
          // If the ball we are checking against is this ball, skip this cycle
          if (this.id == ele.id){
            continue;
          }
          // If the balls are clipping too much, remove this ball from the canvas
          if (Math.abs(this.bx - ele.bx) < this.radius && Math.abs(this.by - ele.by) < this.radius){
            effects.splice(i, 1);
          }
          // If the balls will collide, reverse their velocities and subtract some force to account for elasticity
          if (Math.abs(this.bx + this.vx - ele.bx) < (this.radius * 2) && Math.abs(this.by + this.vy - ele.by) < (this.radius * 2)){
            this.vx *= -.9;
            this.vy *= -.9;
          }
        }


        this.by += this.vy;
        this.bx += this.vx;


        // 5. Because complicated calcualtions for the velocities happen before this point, finalize the x- and y-coordinates by making sure they are bounded within the canvas.
        while (this.bx - this.radius < 0){
          this.bx++
        }
        while (this.bx + this.radius > width){
          this.bx--
        }
        while (this.by - this.radius < 0){
          this.by++
        }
        while (this.by + this.radius > height){
          this.by--
        }


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      // 1. Increase the number of balls present in the effects array
      if (effects.length < 3){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }
function Ball(){
      this.bx = ballX;
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 2. Add a unique ID to each ball so we can compare them to each other and not themselves. We have also removed "impactX" and "impactY" in favor of a better solution for more balls.
      this.id = Math.random();


      this.draw = function(){
        this.vy += this.ay;
        this.vx += Math.sin(Date.now());


        if (this.by + this.radius + this.vy > height){
          this.vy = -10;
        } else if (this.by - this.radius + this.vy < 0){
          // 3. Add a "ceiling" to the canvas in case a ball collision causes the height to exceed 0y.
          this.vy = 1;
        }
        if (this.bx + this.radius + this.vx > width){
          this.vx = -.9;
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = -.9;
        }
        // 4. Iterate through each ball in the effects array to check for collisions
        for (let i = 0; i < effects.length; i++){
          let ele = effects[i];
          // If the ball we are checking against is this ball, skip this cycle
          if (this.id == ele.id){
            continue;
          }
          // If the balls are clipping too much, remove this ball from the canvas
          if (Math.abs(this.bx - ele.bx) < this.radius && Math.abs(this.by - ele.by) < this.radius){
            effects.splice(i, 1);
          }
          // If the balls will collide, reverse their velocities and subtract some force to account for elasticity
          if (Math.abs(this.bx + this.vx - ele.bx) < (this.radius * 2) &&
              Math.abs(this.by + this.vy - ele.by) < (this.radius * 2)){
            this.vx *= -.9;
            this.vy *= -.9;
          }
        }


        this.by += this.vy;
        this.bx += this.vx;


        // 5. Because complicated calculations for the velocities happen before this point, finalize the x- and y-coordinates by making sure they are bounded within the canvas.
        while (this.bx - this.radius < 0){
          this.bx++
        }
        while (this.bx + this.radius > width){
          this.bx--
        }
        while (this.by - this.radius < 0){
          this.by++
        }
        while (this.by + this.radius > height){
          this.by--
        }


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }

Benutzersteuerung

Abschnitt betitelt „Benutzersteuerung“

Abschließend fügen wir einige grundlegende Benutzersteuerungen hinzu, um die Sache interessanter zu machen. Ich habe Farbtonänderungen bereits ausführlich besprochen, daher werden wir uns zur Vereinfachung des Codes auf die Anpassung der Anzahl und des Radius der Bälle konzentrieren. Dies erfordert nur einige wenige Änderungen an den vorhandenen Funktionen.

<head>
    <title>User Controls</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
  <!-- Add two numerical sliders: radius and amount --->
    <meta property="radius" label="Size" type="number" min="5" max="100" default="20">
    <meta property="amount" label="Amount" type="number" min="1" max="50" default="2">
</head>
function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      // Set the minimum effects to be the user-controlled amount. If the length of effects is greater than amount, pop an element off the end.
      if (effects.length < amount){
        effects.push(new Ball());
      } else if (effects.length > amount){
        effects.pop();
      }


      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }
this.draw = function(){
        // Finally, set the radius to be the user-controlled radius inside of the draw function each frame.
        this.radius = radius;
        this.vy += this.ay;
        this.vx += Math.sin(Date.now());


  // . . . rest of function . . .
}

Ich hoffe, du hast unser JavaScript-Klassen-Animations-Tutorial genossen! Selbst auf dieser Komplexitätsstufe ist dieser Effekt nur die Spitze des Eisbergs, was mit dem HTML canvas erreichbar ist. Außerdem würde ich ihn noch nicht als fertig betrachten. Wenn wir nach Perfektion streben, wirst du feststellen, dass Ballkollisionen einen Frame vor dem tatsächlichen Aufprall erkannt werden, was bedeutet, dass sie oft gar nicht kollidieren. Die Kollisionen sind auch vereinfacht in Bezug auf den Energietransfer, da die resultierende Geschwindigkeit nur die aktuelle Geschwindigkeit des Balls berücksichtigt und nicht die Energie des anderen Balls. Schließlich ist das mehrfache Prüfen der Position jedes Balls pro Schleife ineffizient hinsichtlich der Zeitkomplexität und könnte mit grundlegender Memoization optimiert werden.

Sei am Ende immer kritisch gegenüber deinen Effekten. Sie können meist auf die eine oder andere Weise verbessert werden, und der Unterschied zwischen einem mittelmäßigen und einem großartigen Effekt kommt oft einfach davon, ihn anzustarren und es sich mindestens einmal zu erlauben, ihn nicht zu mögen.

Für ein letztes Schritt-für-Schritt-Tutorial, schaue in unseren Callbacks-Abschnitt, wo ich den Prozess durchgehe, Meter-Daten zu erfassen, um Effekte zu aktivieren und zu deaktivieren.