One, foreword

Valentine’s Day, which falls on February 14, 2022, is a day of love and romance, as well as flowers, chocolates and greeting cards, where men and women exchange gifts to express their love or friendship.

On Valentine’s Day, I don’t know if there is anyone who wants to express his love to the object of his affection. If there is, as a programmer, how can not send a cool blessing to his girlfriend.

I recently found an interesting project on Github, which I would like to introduce to you below (link: Stars blessing)

Second, effect display

1. Part 1

After entering the home page, the surrounding stars will gradually converge, and finally form a text and love blessing. The background board is a dynamic picture after analysis, and the meteor slides to the sky according to a certain track and time.

2. Part II

Click the screen with the mouse to trigger the event, and the text will gradually appear as the code has written the text in advance.

3. Part III

Because of the large size of the dynamic map file, it is divided into two parts, essentially the same process as above.

Three, code explanation

1. Initialization

 const FRAME_RATE = 60
  const PARTICLE_NUM = 2000// Number of particles
  const RADIUS = Math.PI * 2// The radius range
  const CANVASWIDTH = 500/ / width
  const CANVASHEIGHT = 150/ / height
  const CANVASID = 'canvas'// Call curtain initialization
  let texts = ['My treasure ❤'.'Look up'.'the stars'.'对着'.'a meteor'.'promise'.'Unbreakable'.'wishes'.'and you'.'就是'.'In my life'.'brightest'.'the stars'.'I LOVE YOU']// Text box, write down your own wishes
let canvas,// Curtain initialization parameters
    ctx,
    particles = [],
    quiver = true,
    text = texts[0],
    textIndex = 0,
    textSize = 70
Copy the code

2. The stars move

fadeIn () {/ / gathering
      this.fadingIn = this.opacity > this.opacityTresh ? false : true
      if (this.fadingIn) {
        this.opacity += this.fadeInRate
      }else {
        this.opacity = 1
      }
    }
    fadeOut () {/ / to flee
      this.fadingOut = this.opacity < 0 ? false : true
      if (this.fadingOut) {
        this.opacity -= this.fadeOutRate
        if (this.opacity < 0) {
          this.opacity = 0}}else {
        this.opacity = 0}}Copy the code

3. Invoke text

class Particle {
    constructor (canvas) {
      let spread = canvas.height
      let size = Math.random() * 1.2
      / / speed
      this.delta = 0.06
      // The current position
      this.x = 0
      this.y = 0
      // Last position
      this.px = Math.random() * canvas.width
      this.py = (canvas.height * 0.5A) + ((Math.random() - 0.5) * spread)
      // Record the initial position of the point
      this.mx = this.px
      this.my = this.py
      // The size of the dot
      this.size = size
      // this.origSize = size
      // Whether to display words
      this.inText = false
      // Transparency is relevant
      this.opacity = 0
      this.fadeInRate = 0.005
      this.fadeOutRate = 0.03
      this.opacityTresh = 0.98
      this.fadingOut = true
      this.fadingIn = true
    }
Copy the code

4. Start drawing

 this.draw = function() {// Draw text function module
    universe.beginPath();
    if (this.giant) {
      universe.fillStyle = 'rgba(' + giantColor + ', ' + this.opacity + ') ';
      universe.arc(this.x, this.y, 2.0.2 * Math.PI, false);
    } else if (this.comet) {
      universe.fillStyle = 'rgba(' + cometColor + ', ' + this.opacity + ') ';
      universe.arc(this.x, this.y, 1.5.0.2 * Math.PI, false);

      / / a for loop
      for (var i = 0; i < 30; i++) {
        universe.fillStyle = 'rgba(' + cometColor + ', ' + (this.opacity - (this.opacity / 20) * i) + ') ';
        universe.rect(this.x - this.dx / 4 * i, this.y - this.dy / 4 * i - 2.2.2); universe.fill(); }}else {
      universe.fillStyle = 'rgba(' + starColor + ', ' + this.opacity + ') ';
      universe.rect(this.x, this.y, this.r, this.r);
    }

    universe.closePath();// Close the path
    universe.fill();/ / fill
  };
Copy the code

5. CSS styles

body{// Theme styledisplay: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-filter: contrast(120%);
    filter: contrast(120%);
    background-color: black; // Background color blackposition: relative; / / position}.container {
    width: 100%;
    height: 99.74%;
    background-image: radial-gradient(2000px at 10% 130%.rgba(33.39.80.1) 10%.# 020409 100%); // Background image loading}.content{/ /100%According towidth: 100% auto;
    height: 100% auto;
}
#scene{/ / scenariosheight: 100%;
    position: absolute;
    left: 50%;
    margin-left: -768px;
}
.txt{// Text stylecolor: hsla(0.0%.0%.0); / / colortext-shadow: #fff 0 0 10px; // Text displaytransition: text-shadow 2s cubic-bezier(0.1.0.1);
}
#canvas{/ / curtainmargin: 0 auto;
}
Copy the code

Fourth, making Pages

Github Pages provides an exclusive domain name for each account. You can generate an executable site for your project submitted to the repository. After obtaining the source code of this project, you can deploy it to Github Pages.

1. Go to GitHub and create a new public repository named username.github. IO, where username is your GitHub username.

2. Use Git client or manually submit the source file for the Valentine’s Day project. After some time, you will be able to access the page via username.