Modifying an existing CodePen Galaxy affect (Zoom out to Zoom In)

so recently I have found this awesome galaxy effect on codepen: https://codepen.io/zeztron/pen/MPNxxR

I tried to modify the JavaScript and couldn’t figure out a way to change it so instead of it feeling like Zooming out, making it to feel like Zooming in.

Can anyone help? Thank you!!

Here are the codes:

<body>
  <canvas id="canvas"></canvas>
</body>

JavaScript
​x
 
<body>
  <canvas id="canvas"></canvas>
</body>
​

body {
    background: black;
    height: 100%;
    min-height: 100%;
}


#canvas {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
}

JavaScript
 
body {
    background: black;
    height: 100%;
    min-height: 100%;
}
​
​
#canvas {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
}
​

var Space = {
  init: function(){
    var self = this;
    this.config = {
      perspective: 3,
      star_color: '255, 255, 255',
      speed: 1,
      stars_count: 2
    };
    this.canvas = document.getElementById('canvas');
    this.context = canvas.getContext('2d');
    this.start();
    window.onresize = function(){
      self.start();
    };
  },

  start: function(){
    var self = this;

    this.canvas.width  = this.canvas.offsetWidth;
    this.canvas.height = this.canvas.offsetHeight;
    this.canvas_center_x = this.canvas.width / 2;
    this.canvas_center_y = this.canvas.height / 2;

    this.stars_count = this.canvas.width / this.config.stars_count;
    this.focal_length = this.canvas.width / this.config.perspective;
    this.speed = this.config.speed * this.canvas.width / 2000;

    this.stars = [];

    for(i = 0; i < this.stars_count; i++){
      this.stars.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        z: Math.random() * this.canvas.width,
      });
    }

    window.cancelAnimationFrame(this.animation_frame);
    this.canvas.style.opacity = 1;

    this.cow = new Image();
    this.cow.src = 'https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Fast-Food-PNG-Clipart/Hamburger_PNG_Vector_Picture.png?m=1507172108';
    this.cow.onload = function(){
      self.render();
    }
  },

  render: function(){
    var self = this;
    this.animation_frame = window.requestAnimationFrame(function(){
      self.render();
    });
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    for(var i = 0, length = this.stars.length; i < length; i += 1){
      var star = this.stars[i];
      star.z -= this.speed;
      if(star.z <= 0) {
        this.stars[i] = {
          x: Math.random() * this.canvas.width,
          y: Math.random() * this.canvas.height,
          z: this.canvas.width,
        };
      }

      var star_x = (star.x - this.canvas_center_x) * (this.focal_length / star.z) + this.canvas_center_x;
      var star_y = (star.y - this.canvas_center_y) * (this.focal_length / star.z) + this.canvas_center_y;
      var star_radius  = Math.max(0, 1.4 * (this.focal_length / star.z) / 2);
      var star_opacity = 1.2 - star.z / this.canvas.width;
      var cow_width = Math.max(0.1, 100 * (this.focal_length / star.z) / 2);

      if(star.cow){
        this.context.save();
        this.context.translate((star_x-cow_width)+(cow_width/2), (star_y-cow_width)+(cow_width/2));
        this.context.rotate(star.z/star.rotation_speed);
        this.context.translate(-((star_x-cow_width)+(cow_width/2)), -((star_y-cow_width)+(cow_width/2)));
        this.context.globalAlpha = star_opacity;
        this.context.drawImage(this.cow, 0, 0, this.cow.width, this.cow.width, star_x-cow_width, star_y-cow_width, cow_width, cow_width);
        this.context.restore();
      } else {
        this.context.fillStyle = 'rgba(' + this.config.star_color + ',' + star_opacity + ')';
        this.context.beginPath();
        this.context.arc(star_x, star_y, star_radius, 0, Math.PI * 2);
        this.context.fill();
      }
    }
  }
};

window.onload = function(){
  Space.init();
};

JavaScript
 
var Space = {
  init: function(){
    var self = this;
    this.config = {
      perspective: 3,
      star_color: '255, 255, 255',
      speed: 1,
      stars_count: 2
    };
    this.canvas = document.getElementById('canvas');
    this.context = canvas.getContext('2d');
    this.start();
    window.onresize = function(){
      self.start();
    };
  },
​
  start: function(){
    var self = this;
​
    this.canvas.width  = this.canvas.offsetWidth;
    this.canvas.height = this.canvas.offsetHeight;
    this.canvas_center_x = this.canvas.width / 2;
    this.canvas_center_y = this.canvas.height / 2;
​
    this.stars_count = this.canvas.width / this.config.stars_count;
    this.focal_length = this.canvas.width / this.config.perspective;
    this.speed = this.config.speed * this.canvas.width / 2000;
​
    this.stars = [];
​
    for(i = 0; i < this.stars_count; i++){
      this.stars.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        z: Math.random() * this.canvas.width,
      });
    }
​
    window.cancelAnimationFrame(this.animation_frame);
    this.canvas.style.opacity = 1;
​
    this.cow = new Image();
    this.cow.src = 'https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Fast-Food-PNG-Clipart/Hamburger_PNG_Vector_Picture.png?m=1507172108';
    this.cow.onload = function(){
      self.render();
    }
  },
​
  render: function(){
    var self = this;
    this.animation_frame = window.requestAnimationFrame(function(){
      self.render();
    });
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    for(var i = 0, length = this.stars.length; i < length; i += 1){
      var star = this.stars[i];
      star.z -= this.speed;
      if(star.z <= 0) {
        this.stars[i] = {
          x: Math.random() * this.canvas.width,
          y: Math.random() * this.canvas.height,
          z: this.canvas.width,
        };
      }
​
      var star_x = (star.x - this.canvas_center_x) * (this.focal_length / star.z) + this.canvas_center_x;
      var star_y = (star.y - this.canvas_center_y) * (this.focal_length / star.z) + this.canvas_center_y;
      var star_radius  = Math.max(0, 1.4 * (this.focal_length / star.z) / 2);
      var star_opacity = 1.2 - star.z / this.canvas.width;
      var cow_width = Math.max(0.1, 100 * (this.focal_length / star.z) / 2);
​
      if(star.cow){
        this.context.save();
        this.context.translate((star_x-cow_width)+(cow_width/2), (star_y-cow_width)+(cow_width/2));
        this.context.rotate(star.z/star.rotation_speed);
        this.context.translate(-((star_x-cow_width)+(cow_width/2)), -((star_y-cow_width)+(cow_width/2)));
        this.context.globalAlpha = star_opacity;
        this.context.drawImage(this.cow, 0, 0, this.cow.width, this.cow.width, star_x-cow_width, star_y-cow_width, cow_width, cow_width);
        this.context.restore();
      } else {
        this.context.fillStyle = 'rgba(' + this.config.star_color + ',' + star_opacity + ')';
        this.context.beginPath();
        this.context.arc(star_x, star_y, star_radius, 0, Math.PI * 2);
        this.context.fill();
      }
    }
  }
};
​
window.onload = function(){
  Space.init();
};
​

Answer

The z-axis of each star is decreasing from a random point inside the canvas to 0 to create a zooming-out effect. To reverse it, simply increase the z-axis, not the speed.

This is the zooming-out:

var star = this.stars[i];
star.z -= this.speed; // decreasing
if(star.z <= 0) {
    this.stars[i] = {
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        z: this.canvas.width, // reset the z-axis
    };
}

JavaScript
 
var star = this.stars[i];
star.z -= this.speed; // decreasing
if(star.z <= 0) {
    this.stars[i] = {
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        z: this.canvas.width, // reset the z-axis
    };
}
​

And this is the zooming-in:

star.z += this.speed; // increasing
if(star.z > this.canvas.width){
    this.stars[i] = {
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        z: Math.random() * this.canvas.width, // reset to a random point
    };
}

JavaScript
 
star.z += this.speed; // increasing
if(star.z > this.canvas.width){
    this.stars[i] = {
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        z: Math.random() * this.canvas.width, // reset to a random point
    };
}
​

You need to reset the z-axis when it reaches a certain point so that it could run infinitely.

var Space = {
  init: function(){
    var self = this;
    this.config = {
      perspective: 3,
      star_color: '255, 255, 255',
      speed: 1,
      stars_count: 2
    };
    this.canvas = document.getElementById('canvas');
    this.context = canvas.getContext('2d');
    this.start();
    window.onresize = function(){
      self.start();
    };
  },

  start: function(){
    var self = this;

    this.canvas.width  = this.canvas.offsetWidth;
    this.canvas.height = this.canvas.offsetHeight;
    this.canvas_center_x = this.canvas.width / 2;
    this.canvas_center_y = this.canvas.height / 2;

    this.stars_count = this.canvas.width / this.config.stars_count;
    this.focal_length = this.canvas.width / this.config.perspective;
    this.speed = this.config.speed * this.canvas.width / 2000;

    this.stars = [];

    for(i = 0; i < this.stars_count; i++){
      this.stars.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        z: Math.random() * this.canvas.width,
      });
    }

    window.cancelAnimationFrame(this.animation_frame);
    this.canvas.style.opacity = 1;

    this.cow = new Image();
    this.cow.src = 'https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Fast-Food-PNG-Clipart/Hamburger_PNG_Vector_Picture.png?m=1507172108';
    this.cow.onload = function(){
      self.render();
    }
  },

  render: function(){
    var self = this;
    this.animation_frame = window.requestAnimationFrame(function(){
      self.render();
    });
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    for(var i = 0, length = this.stars.length; i < length; i += 1){
      var star = this.stars[i];
      star.z += this.speed;
      if(star.z > this.canvas.width) {
        this.stars[i] = {
          x: Math.random() * this.canvas.width,
          y: Math.random() * this.canvas.height,
          z: Math.random() * this.canvas.width,
        };
      }

      var star_x = (star.x - this.canvas_center_x) * (this.focal_length / star.z) + this.canvas_center_x;
      var star_y = (star.y - this.canvas_center_y) * (this.focal_length / star.z) + this.canvas_center_y;
      var star_radius  = Math.max(0, 1.4 * (this.focal_length / star.z) / 2);
      var star_opacity = 1.2 - star.z / this.canvas.width;
      var cow_width = Math.max(0.1, 100 * (this.focal_length / star.z) / 2);

      if(star.cow){
        this.context.save();
        this.context.translate((star_x-cow_width)+(cow_width/2), (star_y-cow_width)+(cow_width/2));
        this.context.rotate(star.z/star.rotation_speed);
        this.context.translate(-((star_x-cow_width)+(cow_width/2)), -((star_y-cow_width)+(cow_width/2)));
        this.context.globalAlpha = star_opacity;
        this.context.drawImage(this.cow, 0, 0, this.cow.width, this.cow.width, star_x-cow_width, star_y-cow_width, cow_width, cow_width);
        this.context.restore();
      } else {
        this.context.fillStyle = 'rgba(' + this.config.star_color + ',' + star_opacity + ')';
        this.context.beginPath();
        this.context.arc(star_x, star_y, star_radius, 0, Math.PI * 2);
        this.context.fill();
      }
    }
  }
};

window.onload = function(){
  Space.init();
};

JavaScript
 
var Space = {
  init: function(){
    var self = this;
    this.config = {
      perspective: 3,
      star_color: '255, 255, 255',
      speed: 1,
      stars_count: 2
    };
    this.canvas = document.getElementById('canvas');
    this.context = canvas.getContext('2d');
    this.start();
    window.onresize = function(){
      self.start();
    };
  },
​
  start: function(){
    var self = this;
​
    this.canvas.width  = this.canvas.offsetWidth;
    this.canvas.height = this.canvas.offsetHeight;
    this.canvas_center_x = this.canvas.width / 2;
    this.canvas_center_y = this.canvas.height / 2;
​
    this.stars_count = this.canvas.width / this.config.stars_count;
    this.focal_length = this.canvas.width / this.config.perspective;
    this.speed = this.config.speed * this.canvas.width / 2000;
​
    this.stars = [];
​
    for(i = 0; i < this.stars_count; i++){
      this.stars.push({
        x: Math.random() * this.canvas.width,
        y: Math.random() * this.canvas.height,
        z: Math.random() * this.canvas.width,
      });
    }
​
    window.cancelAnimationFrame(this.animation_frame);
    this.canvas.style.opacity = 1;
​
    this.cow = new Image();
    this.cow.src = 'https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Fast-Food-PNG-Clipart/Hamburger_PNG_Vector_Picture.png?m=1507172108';
    this.cow.onload = function(){
      self.render();
    }
  },
​
  render: function(){
    var self = this;
    this.animation_frame = window.requestAnimationFrame(function(){
      self.render();
    });
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    for(var i = 0, length = this.stars.length; i < length; i += 1){
      var star = this.stars[i];
      star.z += this.speed;
      if(star.z > this.canvas.width) {
        this.stars[i] = {
          x: Math.random() * this.canvas.width,
          y: Math.random() * this.canvas.height,
          z: Math.random() * this.canvas.width,
        };
      }
​
      var star_x = (star.x - this.canvas_center_x) * (this.focal_length / star.z) + this.canvas_center_x;
      var star_y = (star.y - this.canvas_center_y) * (this.focal_length / star.z) + this.canvas_center_y;
      var star_radius  = Math.max(0, 1.4 * (this.focal_length / star.z) / 2);
      var star_opacity = 1.2 - star.z / this.canvas.width;
      var cow_width = Math.max(0.1, 100 * (this.focal_length / star.z) / 2);
​
      if(star.cow){
        this.context.save();
        this.context.translate((star_x-cow_width)+(cow_width/2), (star_y-cow_width)+(cow_width/2));
        this.context.rotate(star.z/star.rotation_speed);
        this.context.translate(-((star_x-cow_width)+(cow_width/2)), -((star_y-cow_width)+(cow_width/2)));
        this.context.globalAlpha = star_opacity;
        this.context.drawImage(this.cow, 0, 0, this.cow.width, this.cow.width, star_x-cow_width, star_y-cow_width, cow_width, cow_width);
        this.context.restore();
      } else {
        this.context.fillStyle = 'rgba(' + this.config.star_color + ',' + star_opacity + ')';
        this.context.beginPath();
        this.context.arc(star_x, star_y, star_radius, 0, Math.PI * 2);
        this.context.fill();
      }
    }
  }
};
​
window.onload = function(){
  Space.init();
};

body {
    background: black;
    height: 100%;
    min-height: 100%;
}


#canvas {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
}

JavaScript
 
body {
    background: black;
    height: 100%;
    min-height: 100%;
}
​
​
#canvas {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
}

<body>
  <canvas id="canvas"></canvas>
</body>

JavaScript
 
<body>
  <canvas id="canvas"></canvas>
</body>

Advertisement

Answer