CODEWITHSUNDEEP
javascriptanimationhtml5-canvas
Fasih Sajid
Fasih Sajid

Reputation: 69

adding custom animation in canvas html5

this might be somewhat difficult but i wil still ask, so i made a starfield ,now what i want to do is to have my stars( a pair each) connected to eachother by a line ,now this line will expand as the stars move forward and disappear when the stars move out of the canvas .any help would be appreciated here this is difficult i have the logic but i seem unable to follow the correct way to implement it 

        function randomRange(minVal, maxVal) {
            return Math.floor(Math.random() * (maxVal - minVal - 1)) + minVal;
        }

        function initStars() {
            for (var i = 0; i < stars.length; i++) {
                stars[i] = {
                    x: randomRange(-25, 25),
                    y: randomRange(-25, 25),
                    z: randomRange(1, MAX_DEPTH)
                }
            }
        }

        function degToRad(deg) {
            radians = (deg * Math.PI / 180) - Math.PI / 2;
            return radians;

        }

        function animate() {
            var halfWidth = canvas.width / 2;
            var halfHeight = canvas.height / 2;

            ctx.fillStyle = "rgb(0,0,0)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < stars.length; i++) {
                stars[i].z -= 0.2;

                if (stars[i].z <= 0) {
                    stars[i].x = randomRange(-25, 25);
                    stars[i].y = randomRange(-25, 25);
                    stars[i].z = MAX_DEPTH;
                }

                var k = 128.0 / stars[i].z;
                var px = stars[i].x * k + halfWidth;
                var py = stars[i].y * k + halfHeight;

                if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) {
                    var size = (1 - stars[i].z / 32.0) * 5;
                    var shade = parseInt((1 - stars[i].z / 32.0) * 750);
                    ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")";
                    ctx.beginPath();
                    ctx.arc(px, py, size, degToRad(0), degToRad(360));
                    ctx.fill();
                }
            }
        }

        function animate() {
            var halfWidth = canvas.width / 2;
            var halfHeight = canvas.height / 2;

            ctx.fillStyle = "rgb(0,0,0)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < stars.length; i++) {
                stars[i].z -= 0.2;

                if (stars[i].z <= 0) {
                    stars[i].x = randomRange(-25, 25);
                    stars[i].y = randomRange(-25, 25);
                    stars[i].z = MAX_DEPTH;
                }

                var k = 128.0 / stars[i].z;
                var px = stars[i].x * k + halfWidth;
                var py = stars[i].y * k + halfHeight;

                if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) {
                    var size = (1 - stars[i].z / 32.0) * 5;
                    var shade = parseInt((1 - stars[i].z / 32.0) * 750);
                    ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")";
                    ctx.beginPath();
                    ctx.arc(px, py, size, degToRad(0), degToRad(360));
                    ctx.fill();
                }
            }
        }
<!DOCTYPE html5>
<html>
<head>
  <title>stars</title>
 
    <script    src="convergis.js"></script>
    <script>
    MAX_DEPTH = 32;
 
    var canvas, ctx;
    var stars = new Array(500);
 
    window.onload = function() {
      canvas = document.getElementById("tutorial");
      if( canvas && canvas.getContext ) {
        ctx = canvas.getContext("2d");
        initStars();
        setInterval(animate,17);
       }
    }
 
  
  </script>
    </head>
<body>
  <canvas id='tutorial' width='1500' height='1500'>
  
  </canvas>
</body>

</html>

Upvotes: 0

Views: 59

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

You could just say you want a lightspeed effect!

One way very cheap way to do it is to paint the background with some transparency. You can also render a set of points close together in order to make the illusion of the effect.

The good way to do it is shaders since they will allow you to add glow and some other nice image trickery that will make it look better. Here is a good example: https://www.shadertoy.com/view/Xdl3D2

Below I used the canvas api lineTo and even with a fixed line width, it's a pretty good final result. 

var MAX_DEPTH = 64;
var LINELENGTH = 0.1;
var stars = new Array(500);
var canvas = document.getElementById("tutorial");
canvas.width = innerWidth;
canvas.height = innerHeight;
var ctx = canvas.getContext("2d");
initStars();
setInterval(animate,17);


function randomRange(minVal, maxVal) {
  return Math.floor(Math.random() * (maxVal - minVal - 1)) + minVal;
}

function initStars() {
  for (var i = 0; i < stars.length; i++) {
stars[i] = {
  x: randomRange(-25, 25),
  y: randomRange(-25, 25),
  z: randomRange(1, MAX_DEPTH)
}
  }
}

function degToRad(deg) {
  radians = (deg * Math.PI / 180) - Math.PI / 2;
  return radians;

}

function animate() {
  var halfWidth = canvas.width / 2;
  var halfHeight = canvas.height / 2;

  ctx.fillStyle = "rgba(0,0,0,1)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < stars.length; i++) {
stars[i].z -= 0.5;

if (stars[i].z <= 0) {
  stars[i].x = randomRange(-25, 25);
  stars[i].y = randomRange(-25, 25);
  stars[i].z = MAX_DEPTH;
}

var k = 254.0 / stars[i].z;
var px = stars[i].x * k + halfWidth;
var py = stars[i].y * k + halfHeight;

if (px >= 0 && px <= 1500 && py >= 0 && py <= 1500) {
  var size = (1 - stars[i].z / 32.0) * 2;
  var shade = parseInt((1 - stars[i].z / 32.0) * 750);
  ctx.strokeStyle = "rgb(" + shade + "," + shade + "," + shade + ")";
  ctx.lineWidth = size;
  ctx.beginPath();
  ctx.moveTo(px,py);
  var ox = size * (px - halfWidth) * LINELENGTH;
  var oy = size * (py - halfHeight) * LINELENGTH;
  ctx.lineTo(px + ox, py + oy);
  ctx.stroke();
}
  }
}
<canvas id='tutorial' width='1500' height='1500'></canvas>

Upvotes: 2

Related Questions