修改现有的 CodePen Galaxy 影响（缩小到放大）

Question

所以最近我在 codepen 上发现了这个很棒的星系效应： https://codepen.io/zeztron/pen/MPNxxR

我尝试修改 JavaScript 但找不到更改它的方法，所以与其感觉像缩小，不如让它感觉像放大。

有人能帮忙吗？谢谢！！

代码如下：

<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;
}

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 1

每颗星的 z-axis 从 random point inside the canvas 减少到 0 以产生 zooming-out 效果。要反转它，只需增加 z-axis，而不是速度。

这是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
    };
}

这是 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
    };
}

你需要在z-axis到达某个点时重置它，这样它就可以运行无限。

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;
}

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

修改现有的 CodePen Galaxy 影响（缩小到放大）

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

javascript

css

animation

codepen