Tag:particle

  • Canvas realizes custom Chinese lantern particle effect

    Time:2020-11-17

    If you don’t talk much, see the effect firstVideo effectsHands on experienceThere are two small points to consider in implementing this function How to convert Chinese to dot matrix How to achieve particle effect How to convert Chinese to dot matrixParticle effect requires that every character is composed of dots. As we all know, it […]

  • Step by step realization of nest particle effect

    Time:2020-10-13

    This article first appeared on my blog. This is my GitHub. Welcome to star.   this blog is imitation nest.js Implement ademoFrom simple to complex, step by step. Here is the preview of the effect. There are many other front-end ones in my GitHubdemoYou can order it if you likestarYour support is my motivation. Start […]

  • Canvas for dazzling particle motion (particle generated text)

    Time:2020-9-11

    There’s no best, only better. As the title shows, this article just wants to share a particle motion effect realized by canvas. It’s a bit of a title party, but from another angle, it’s gorgeous to be diligent. Although the color has nothing to do with the gorgeous, the sports effect is still a little […]

  • Programmer’s little romance — word particle effect

    Time:2020-9-2

    preview Full project Preview – Preview address; Principle of particle effect In canvas, you can use thegetImageData()Method to obtain pixel data. ctx.fillStyle = ‘#ff0000’; ctx.fillRect(0, 0, 1, 1); const imageData = ctx.getImageData(0, 0, 1, 1); imageDataThere are three attributes: data: array containing pixel information, each pixel has four lengths, such as[255,0,0,255, … ,255,127,0,255], representing the […]

  • Canvas implementation of Tangram pattern and particle clock

    Time:2020-7-27

      Canvas realizes Tangram <span style=”background-color: #f5f5f5; color: #0000ff;”>var</span><span style=”background-color: #f5f5f5; color: #000000;”> rangram </span><span style=”background-color: #f5f5f5; color: #000000;”>=</span><span style=”background-color: #f5f5f5; color: #000000;”> [ { p: [{ x: </span><span style=”background-color: #f5f5f5; color: #000000;”>0</span><span style=”background-color: #f5f5f5; color: #000000;”>, y: </span><span style=”background-color: #f5f5f5; color: #000000;”>0</span><span style=”background-color: #f5f5f5; color: #000000;”> }, { x: </span><span style=”background-color: #f5f5f5; color: #000000;”>800</span><span […]

  • Realization of particle animation background in react

    Time:2020-7-23

    cause Recently, I want to find a good-looking and atmospheric resume template on GitHub, and accidentally sent this database. https://github.com/nordicgiant2/react-nice-resume Online demo is here https://nordicgiant2.github.io/react-nice-resume-page/index.html 。 It looks very cool and the technology stack just happens to be react. It’s just perfect. I’m going to use this as my home page website ❤️ ‍。 Particle […]

  • WPF: (5-3) 3D particle loop animation example

    Time:2020-7-1

    Source project address: https://github.com/Microsoft/…The following is a brief description of the example, and gives the actual operation effect and key code analysis: Particle demo particle swarm 3D animation loop example Document organization Particle.cs Particle classParticleSystem.cs Particle system classP articleSystemManager.cs Particle system management classWPF MainWindow.xaml And. CS files, etc Implementation function Every second, 3D particles of […]

  • I haven’t eaten Oreo for a long time

    Time:2020-6-18

    Let’s take a look at two special effects first, and feel if there is any motivation for learning?        ========================================================================================================================== Core API: texture2d. SetPixel (int x, int y, color color), texture2d. Apply() Implementation principle: object pool Ideas: Before the first frame is drawn: traverse all the living Particle objects on the tile and […]

  • The magical effect of caemitterlayer particle emitter

    Time:2020-3-3

    I think we all know the effect of “like” in QQ space before. After “like”, there will be a circle of popping dots around the button; there will also be wechat’s red envelope rain expression animation, fireworks and flame effect. These seemingly cool animations may make us stay away from each other, but in fact, […]

  • CSS implementation of a particle action button

    Time:2020-3-1

    Original linkhttps://github.com/XboxYan/no… Button is probably one of the most common components in the web page. Most of them are ordinary. If you come across a button like this, can’t you help clicking more? Usually, the first reaction to this kind of effect may be throughcanvasFor example, in the following case (it is recommended to go […]

  • It’s boring. The particle effect background implemented by Vue is a guide to getting into and out of the pit

    Time:2020-2-2

    The points and lines similar to the constellation are generated by Vue particles, which can not only move themselves, but also interact with user mouse events. Use the tutorial: npm install vue-particles –save-dev Add the following code to main.js: import VueParticles from ‘vue-particles’ Vue.use(VueParticles) App.vue file – a complete example: <template> <div id=”app”> <vue-particles color=”#fff” […]