Hello everyone, I am Han Cao 😈, a grass code ape 🐒. Intermittent warm blood 🔥, continuous sand sculpture 🌟 if you like my article, you can pay attention to ➕ like, and grow with me ~

Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

preface

There are two reasons for this article:

The first one is my “Canvas” National Day will come to 🇨🇳, “hand-painted” a picture of the rabbit, and talk about my dream to make an egg, the title of the egg is: dedicated to the future love of cold grass, plus I recently saw a lot of code to write three market books, like this:

# If you look back at me
ifyou.turn_round_aguang():
# I will always be behind you
I.behind(you).forever()
# Keeping an eye on you
see(you)
Copy the code

So I came up with an idea to talk about how programmers express their feelings. Later, I realized that old programmers don’t have such experience, so I’ll tell you how. And when I searched for how to express my feelings with programs, I found many people replied:

It’s for straight men

I’m an instant autistic, and I’m about to drop the subject.

Another thing IS that I wrote a little sun for my own amusement a while ago:

But I have a regret, is the sun’s light is too monotonous, hope he added some dynamic.

So my heart gave birth to a plan, the two themes combined for one, quick, call me a little genius!

The road to bad design

In fact, the theme of this demo is already clear:

  • Have the ability to express oneself
  • The little sun with movement

So how to make a dynamic little sun, I first think of is the dynamic effect of music player, just like the dong times da times effect of netease Cloud

I’ll just make it more like the sun.

That has the ability to express how to do ah, I also not quite will design this aspect of things, I first made a heart ❤️ (in fact, before the test of web-components do), code to write, even if again short I also want to reuse once! So how do the heart and the sun join? I fell into pain, often after the exam, the heart of a plan:

Use that heart to make a button and start playing music.

Implement 📖

Music processing 🎵

Refer to MDN: developer.mozilla.org/zh-CN/docs/…

let audio = new Audio("dijia.mp3");
let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let source = audioCtx.createMediaElementSource(audio)
let analyser = audioCtx.createAnalyser();
source.connect(analyser);
analyser.connect(audioCtx.destination)
analyser.fftSize = 1024;
let bufferLength = analyser.frequencyBinCount;
let dataArray = new Uint8Array(bufferLength);
audio.play();
setInterval(() = > {
  analyser.getByteTimeDomainData(dataArray);
  // dataArray is the information I need
  dataArray.slice(0.360).forEach((item, index) = > {
    rays[index].style.height = `${item / 2}px`; })},1000)
Copy the code

Jumping heart ❤️

The Web-Component used here

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>web-component</title>
</head>

<body>
  <my-heart></my-heart>
  <template id="my-heart">
    <style>
      :host {
        position: absolute;
        top: 100px;
        left: 100px;
        animation: tiaodong .8s linear infinite;
      }

      .left {
        position: absolute;
        width: 80px;
        height: 120px;
        background-color: red;
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
      }

      .right {
        width: 80px;
        position: absolute;
        height: 120px;
        background-color: red;
        border-radius: 50px 50px 0 0;
        left: 28px;
        transform: rotate(45deg)}@keyframes tiaodong {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.05);
        }

        100% {
          transform: scale(1); }}</style>
    <div class="left"></div>
    <div class="right"></div>
  </template>
  <script>
    class MyHeart extends HTMLElement {
      constructor() {
        super(a);const templateElem = document.getElementById('my-heart');
        const content = templateElem.content.cloneNode(true);

        this.attachShadow({ mode: 'closed' }).appendChild(content);
      };
    }
    window.customElements.define('my-heart', MyHeart);
  </script>
</body>

</html>
Copy the code

360 degrees around the sun ☀️

html:

<div class="sun"></div>
Copy the code

css:

body {
      display: flex;
      padding: 0;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #f3eeea;
      margin: 0;
    }

    .sun {
      position: relative;
      left: 300px;
      width: 40vmin;
      height: 40vmin;
      border-radius: 100%;
      background-color: #fdf4ae;
    }

    .ray {
      position: absolute;
      top: 40vmin;
      left: 20vmin;
      width: 1vmin;
      height: 6.25 vmin;
      transform-origin: 0 -20vmin;
      transform: translateY(25vmin);
      transition: all 1s linear;
    }

    .ray:after {
      content: ' ';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-radius: 50%;
      background: linear-gradient(to bottom, #fcec71.#edc353);
    }

    .ray:after {
      height: 100%;
      transform-origin: 50% 100%;
    }
Copy the code

js:

// Dynamically generate 360 lights
const sun = document.getElementsByClassName('sun') [0];
let html = ' ';
(new Array(360)).fill('hancao-design').forEach((item, index) = > {
  html += `<div class="ray" style="transform: rotate(${index * 1}deg);" ></div>`;
})
sun.innerHTML = html;
Copy the code

The dancing sunshine 🌞

I feel that I have recorded the GIF has not been good, I must try to make a good GIF recording software

I simply use:

transition: all 1s linear;

Mating timer

setInterval(() = > {
  analyser.getByteTimeDomainData(dataArray);
  dataArray.slice(0.360).forEach((item, index) = > {
    rays[index].style.height = `${item / 2}px`; })},1000)
Copy the code

Clever use of the heart ❤️

I made an interface that was like a terminal, and at the end of it came out a heart that I could click on to play music and make the sun dance

// There is no such thing as a rabbit
hancao-design
for my feature lover
sun loading
...
retry
...
loaded
I wanna to be your sun
pleading enjoy the sunshine
click my-heart to start
Copy the code
window.customElements.define('my-heart', MyHeart);
    const list = ['hancao-design'.'for my feature lover'.'sun loading'.'... '.'retry'.'... '.'loaded'.'I wanna to be your sun'.'pleading enjoy the sunshine'.'click my-heart to start'.'⬇ ️']
    const editor = document.getElementsByClassName('editor') [0];
    let i = 0;
    let len = list.length;
    const timer = setInterval(() = > {
      if(i < len){
        editor.innerHTML += `<div>${list[i]}</div>`
      }else{
        clearInterval(timer);
        editor.innerHTML += `<my-heart></my-heart>`
      }
      i++;
    }, 500);
Copy the code

Full code 🌲

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>music</title>
  <style>
    body {
      display: flex;
      padding: 0;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #f3eeea;
      margin: 0;
    }

    .sun {
      position: relative;
      left: 300px;
      width: 40vmin;
      height: 40vmin;
      border-radius: 100%;
      background-color: #fdf4ae;
    }

    .ray {
      position: absolute;
      top: 40vmin;
      left: 20vmin;
      width: 1vmin;
      height: 6.25 vmin;
      transform-origin: 0 -20vmin;
      transform: translateY(25vmin);
      transition: all 1s linear;
    }

    .ray:after {
      content: ' ';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border-radius: 50%;
      background: linear-gradient(to bottom, #fcec71.#edc353);
    }

    .ray:after {
      height: 100%;
      transform-origin: 50% 100%;
    }

    .editor {
      width: 600px;
      height: 100vh;
      position: fixed;
      background-color: #1c1d21;
      left: 0px;
      color: #c1c5cd;
      padding-left: 32px;
      padding-top: 64px;
      font-size: 32px;
    }
  </style>
</head>

<body>
  <div class="sun"></div>
  <div class="editor"></div>
  <template id="my-heart">
    <style>
      :host {
        position: absolute;
        animation: tiaodong .8s linear infinite;
        cursor: pointer;
      }

      .left {
        position: absolute;
        width: 80px;
        height: 120px;
        background-color: red;
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
      }

      .right {
        width: 80px;
        position: absolute;
        height: 120px;
        background-color: red;
        border-radius: 50px 50px 0 0;
        left: 28px;
        transform: rotate(45deg)}@keyframes tiaodong {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.05);
        }

        100% {
          transform: scale(1); }}</style>
    <div class="left"></div>
    <div class="right"></div>
  </template>
  <script>
    const sun = document.getElementsByClassName('sun') [0];
    let html = ' ';
    (new Array(360)).fill('hancao-design').forEach((item, index) = > {
      html += `<div class="ray" style="transform: rotate(${index * 1}deg);" ></div>`;
    })
    sun.innerHTML = html;
    const rays = sun.childNodes;
    class MyHeart extends HTMLElement {
      constructor() {
        super(a);const templateElem = document.getElementById('my-heart');
        const content = templateElem.content.cloneNode(true);
        this.onclick =() = > {
            this.onclick = null;
            let audio = new Audio("dijia.mp3");
            let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            let source = audioCtx.createMediaElementSource(audio)
            let analyser = audioCtx.createAnalyser();
            source.connect(analyser);
            analyser.connect(audioCtx.destination)
            analyser.fftSize = 1024;
            let bufferLength = analyser.frequencyBinCount;
            let dataArray = new Uint8Array(bufferLength);
            audio.play();
            setInterval(() = > {
              analyser.getByteTimeDomainData(dataArray);
              dataArray.slice(0.360).forEach((item, index) = > {
                rays[index].style.height = `${item / 2}px`; })},1000)}this.attachShadow({ mode: 'closed' }).appendChild(content);
      };
    }
    window.customElements.define('my-heart', MyHeart);
    const list = ['hancao-design'.'for my feature lover'.'sun loading'.'... '.'retry'.'... '.'loaded'.'I wanna to be your sun'.'pleading enjoy the sunshine'.'click my-heart to start'.'⬇ ️']
    const editor = document.getElementsByClassName('editor') [0];
    let i = 0;
    let len = list.length;
    const timer = setInterval(() = > {
      if(i < len){
        editor.innerHTML += `<div>${list[i]}</div>`
      }else{
        clearInterval(timer);
        editor.innerHTML += `<my-heart></my-heart>`
      }
      i++;
    }, 500);

  </script>
</body>
</html>
Copy the code

conclusion

Life should have a sense of ritual oh ~ WISH everyone’s life full of sunshine ☀️

Why is there a miracle in the title? Because the music I quoted is the theme song of this childhood classic, and the title of this paper is also a tribute to the title of the last sentence "To the Brilliant Man".

I’ll end with the classic line from “Life Remains” :

Trying to live a short life and pass on the results to future generations is what humans do over and over again. It’s amazing!

If you like my articles or ideas 📖, you can support me with likes + follow ~ thanks ✨

Add our wechat: Hancao97, invite you to join the group, learn the front end of communication together, and become a better engineer ~ (because the group number is more than 200, can not scan code into the group, can only add wechat ha)