CODEWITHSUNDEEP
javascriptanimationhtml5-canvas
Fasih Sajid
Fasih Sajid

Reputation: 69

changing the shape in animation in canvas

i already have the code set but enter code here i want to change the rectangles to circles, but as I change the rect() to arc() the code does not work . i added the method c.arc(this.x, this.y,10,0,2*Math.PI) and then the stroke () method but then the result output disappears . if you could change the shape and customize the code that would be really helpful

<!DOCTYPE html5>
<html>

<head>
  <title>GLOOMY</title>

  <script>
    window.onload = function() {
      // create the canvas
      var canvas = document.createElement("canvas"),
        c = canvas.getContext("2d");
      var particles = {};
      var particleIndex = 0;
      var particleNum = 15;

      // set canvas size
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // add canvas to body
      document.body.appendChild(canvas);

      // style the canvas
      c.fillStyle = "black";
      c.fillRect(0, 0, canvas.width, canvas.height);

      function Particle() {
        this.x = canvas.width / 2;
        this.y = canvas.height / 2;
        this.vx = Math.random() * 10 - 5;
        this.vy = Math.random() * 10 - 5;
        this.gravity = 0.3;
        particleIndex++;
        particles[particleIndex] = this;
        this.id = particleIndex;
        this.life = 0;
       

        this.maxLife = Math.random() * 30 + 60;
       

        this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
      }

      Particle.prototype.draw = function() {
        this.x += this.vx;
        this.y += this.vy;

      
        if (Math.random() < 0.1) {
          this.vx = Math.random() * 10 - 5;
          this.vy = Math.random() * 10 - 5;
        }

        this.life++;
        if (this.life >= this.maxLife) {
          delete particles[this.id];
        }

        c.fillStyle = this.color;
        c.fillRect(this.x, this.y, 5, 10);
      };

      setInterval(function() {
        //normal setting before drawing over canvas w/ black background
        c.globalCompositeOperation = "source-over";
        c.fillStyle = "rgba(0,0,0,0.5)";
        c.fillRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < particleNum; i++) {
          new Particle();
        }

        // c.globalCompositeOperation = "darken";

        for (var i in particles) {
          particles[i].draw();
        }
      }, 30);
    };
  </script>


</head>

<body>
  <canvas>
  
  </canvas>
</body>

</html>

Upvotes: 0

Views: 99

Answers (1)

enxaneta
enxaneta

Reputation: 33044

First: you don't need a canvas element in the HTML since the canvas is created dynamicaly in the JS.

Second: you added the method arc but maybe you forgot to add c.fill(); 

 window.onload = function() {
      // create the canvas
      var canvas = document.createElement("canvas"),
        c = canvas.getContext("2d");
      var particles = {};
      var particleIndex = 0;
      var particleNum = 15;

      // set canvas size
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // add canvas to body
      document.body.appendChild(canvas);

      // style the canvas
      c.fillStyle = "black";
      c.fillRect(0, 0, canvas.width, canvas.height);

      function Particle() {
        this.x = canvas.width / 2;
        this.y = canvas.height / 2;
        this.vx = Math.random() * 10 - 5;
        this.vy = Math.random() * 10 - 5;
        this.gravity = 0.3;
        particleIndex++;
        particles[particleIndex] = this;
        this.id = particleIndex;
        this.life = 0;
       

        this.maxLife = Math.random() * 30 + 60;
       

        this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
      }

      Particle.prototype.draw = function() {
        this.x += this.vx;
        this.y += this.vy;

      
        if (Math.random() < 0.1) {
          this.vx = Math.random() * 10 - 5;
          this.vy = Math.random() * 10 - 5;
        }

        this.life++;
        if (this.life >= this.maxLife) {
          delete particles[this.id];
        }

        c.fillStyle = this.color;
        //c.fillRect(this.x, this.y, 5, 10);
        c.beginPath();
        c.arc(this.x,this.y,2.5,0,2*Math.PI);
        c.fill();
      };

      setInterval(function() {
        //normal setting before drawing over canvas w/ black background
        c.globalCompositeOperation = "source-over";
        c.fillStyle = "rgba(0,0,0,0.5)";
        c.fillRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < particleNum; i++) {
          new Particle();
        }

        // c.globalCompositeOperation = "darken";

        for (var i in particles) {
          particles[i].draw();
        }
      }, 30);
    };
body{margin:0; padding:0}

I hope this helps.

Upvotes: 1

Related Questions