开始使用javascript中的动画排版/粒子（将粒子映射到单词）？ [英] Get started with animated typography/particles in javascript (mapping particles to a word)?

问题描述

好的，所以我有很多的HTML和CSS的经验，以及一些Javascript的经验（我可以编写基本的功能，并用类似的语言编码）。

Alright, so I have a good deal of experience with HTML and CSS, and some experience with Javascript (I can write basic functions and have coded in similar languages).

我想开始一些视觉项目，特别想进入粒子系统。我有一个类似Codecademy的名称生成器的想法在这里（ https：// www.codecademy.com/courses/animate-your-name/0/1 ），其中粒子被映射到一个词并且当悬停在其上时移动。看起来好像alphabet.js是Codecademy的演示真正的背后，但我不能明白他们如何映射粒子到一个单词等。

I'm looking to start some visual projects and am specifically interested in getting into particle systems. I have an idea for something similar to Codecademy's name generator here (https://www.codecademy.com/courses/animate-your-name/0/1) where particles are mapped to a word and move if hovered over. It seems as though alphabet.js is what's really behind Codecademy's demo however I can't understand exactly how they mapped the particles to a word, etc.

我做了一些基本的教程只是在画布上创建基本的粒子，但我不确定画布是最好的方式 - 演示使用许多库中的一个（例如 http://soulwire.github.io/sketch.js/examples/particles.html ）不使用画布。

I've done some basic tutorials just creating rudimentary particles in a canvas but I'm not sure a canvas is the best way to go - demos that utilize one of the many libraries available (such as http://soulwire.github.io/sketch.js/examples/particles.html) don't use a canvas.

所以我的问题是，什么是初学者/中间人在Javascript中的最佳方式开始与粒子系统？特别要完成Codecademy名称效果或类似的？

So my question is - what is the best way for a beginner/intermediate in Javascript to start with particle systems? Specifically to accomplish the Codecademy name effect or similar? Should I try to use canvas or which library would be best to start with and how would you recommend starting?

推荐答案

代码应该是这个项目是可以实现的你的中间JS程序员状态。

The code for this project is achievable for your intermediate JS programmer status.

CodeAcademy计划的运作原理...

• 首先从圆圈中创建每个字母，然后将每个圆圈的中心点保存在数组中。

• Start by building each letter out of circles and saving each circle's centerpoint in an array. The alphabet.js script holds that array of circle centerpoints.

在 mousemove 活动中，测试哪些社交圈在鼠标位置的指定半径内。

On mousemove events, test which circles are within a specified radius of the mouse position. Then animate each of those discovered circles radially outward from the mouse position using simple trigonometry.

当鼠标再次移动时，测试哪些圆圈不在指定的范围内当前鼠标位置的半径。

When the mouse moves again, test which circles are no longer within the specified radius of the current mouse position. Then animate each of those "outside" circles back towards their original positions.

您也可以使用原生html5画布任何库...

You can also use native html5 canvas without any libraries...

另一种允许任何文本解散并重新组合的方法

• 通过在画布上绘制文本开始。

• Start by drawing the text on the canvas. BTW, this approach will "dissolve" any drawing, not just text.

使用 context.getImageData 以获取画布上每个像素的不透明度值。确定画布上的哪些像素包含文本的部分。

Use context.getImageData to fetch the opacity value of every pixel on the canvas. Determine which pixels on the canvas contain parts of the text. You can tell if a pixel is part of the text because it will be opaque rather than transparent.

现在做一个像素是文本的一部分，与CodeAcademy与其圈子相同的过程 - 但使用您的像素：

Now do the same procedure that CodeAcademy did with their circles -- but use your pixels:

• 在 mousemove 事件，测试哪些像素在鼠标位置的指定半径内。

• On mousemove events, test which pixels are within a specified radius of the mouse position. Then animate each of those discovered pixels radially outward from the mouse position using simple trigonometry.

当鼠标再次移动时，测试哪些像素不在指定的范围内当前鼠标位置的半径。

When the mouse moves again, test which pixels are no longer within the specified radius of the current mouse position. Then animate each of those "outside" pixels back towards their original positions.

[增加：mousemove事件测试圆圈是否在鼠标距离内]

注意：您可能想要保持动画帧运行，

Note: You probably want to keep an animation frame running that moves circles closer or further from their original positions based on a flag (isInside) for each circle.

function handleMouseMove(e){
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // calc the current mouse position
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);

    // test each circle to see if it's inside or outside
    // radius of 40px to current mouse position
    // circles[] is an array of circle objects shaped like this
    //      {x:,y:,r:,originalX:,originalY:,isInside:}
    var radius=40;
    for(var i=0;i<circles.length;i++){
        var c=circles[i];
        var dx=c.x-mouseX;
        var dy=c.y-mouseY;
        if(dx*dx+dy*dy<radius*radius){
            c.isInside=true;
            // move c.x & c.y away from its originalX & originalY
        }else{
            c.isInside=false;
            // if the circle is not already back at it's originalX, originalY
            // then move c.x & c.y back towards its originalX, originalY
        }
    }
}

这篇关于开始使用javascript中的动画排版/粒子（将粒子映射到单词）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！