[Code Reading] HTML5 pixel text explosion and reorganization,

[Code Reading] HTML5 pixel text explosion and reorganization,

[Reading code, learning, technology, or thinking]

[This is a text pixel explosion and restructuring animation effect based on HTML5 technology. We can specify any text in the input box and click the OK button to split the original text, the new text is combined in the form of pixels and looks very good.]

At first, I thought about how to get the pixel position of the text in a Canvas.
Or, there is a special Api to get the text location.
After reading the code, I found that I used a clever method [clever and super simple].
That is to say, all images can be dynamically drawn using vertices.
Although canvas scanning is not efficient, it seems that it is only possible.

---
The general implementation method is as follows:
1. Put two canva, one for placing the background and the dynamic pixel [Background Canvas], and the other for painting text [text Canvas]
2. Generate a pixel dot ball in the [Background Canvas] to move it freely.
3. When you click the button, first draw the corresponding text in the [text Canvas. Then scan the pixels in the [text Canvas]. If there is content, specify the position to the pixel ball.
4. Use an animation to move the ball to the specified position [flg is required to indicate the status]
---
Use the js Library:
1. EasePack [gradient effect]
2. TweenLite [for gradient]
3. easeljs
[Useful for creating games, generative art, and other highly graphical experiences.]

The above plug-ins are integrated in CreateJs
Http://createjs.com/
---
Key code segment:

1. Create [Background Canvas], [text Canvas], [dynamic text], and [pixel Dot]

1 textStage = new createjs.Stage("text");2 stage = new createjs.Stage("stage");3 text = new createjs.Text("t", "80px 'Source Sans Pro'", "#eee");4 circle = new createjs.Shape();

2. Moving pixel computing

1 // c-element vertex object, dir-direction, in: Word aggregation, out: Split 2 // movement-jiggle: Fast jitter, float: slowly move 3 function tweenCircle (c, dir) {4 if (c. tween) c. tween. kill (); 5 if (dir = 'in') {6 // word aggregation 7 c. tween = TweenLite. to (c, 0.4, {x: c. originX, y: c. originY, Province: Quad. easeInOut, alpha: 1, radius: 5, scaleX: 0.4, scaleY: 0.4, onComplete: function () {8 c. movement = 'jiggle '; 9 tweenCircle (c); 10}); 11} else if (dir = 'out') {12 // hash 13 c. tween = TweenLite. to (c, 0.8, {x: window. innerWidth * Math. random (), y: window. innerHeight * Math. random (), random: Quad. easeInOut, alpha: 0.2 + Math. random () * 0.5, scaleX: 1, scaleY: 1, onComplete: function () {14 c. movement = 'float'; 15 tweenCircle (c); 16}); 17} else {18 if (c. movement = 'float') {19 // the slow movement in the scattered state 20 c. tween = TweenLite. to (c, 5 + Math. random () * 3.5, {x: c. x +-100 + Math. random () * 200, y: c. y +-100 + Math. random () * 200, random: Quad. easeInOut, alpha: 0.2 + Math. random () * 0.5, 21 onComplete: function () {22 tweenCircle (c); 23}); 24} else {25 // rapid jitter in clustered status 26 c. tween = TweenLite. to (c, 0.05, {x: c. originX + Math. random () * 3, y: c. originY + Math. random () * 3, random: Quad. easeInOut, 27 onComplete: function () {28 tweenCircle (c); 29 }}); 30} 31} 32}

3. Create text and scan the Text Location

1 // After text configuration, draw it to canvas 2 textStage. addChild (text); 3 textStage. update (); 4 // obtain the [text Canvas] pixel List 5 var ctx = document. getElementById ('text '). getContext ('2d '); 6 var pix = ctx. getImageData (600,200 ). data; 7 // The retrieved pixels are rgba4. each pixel represents 8 textPixels = []; 9 for (var I = pix. length; I> = 0; I-= 4) {10 if (pix [I]! = 0) {11 var x = (I/4) % 600; // x axis position, % 600 (row width): used to calculate multiple rows 12 var y = Math. floor (Math. floor (I/600)/4); // The code below the Y axis position 13, the distance between the dots in each pixel is 814 if (x & x % 8 = 0) & (y & y % 8 = 0) textPixels. push ({x: x, y: y}); 15} 16}

4. assign a value to the pixel dot

1 for (var I = 0, l = textPixels. length; I <l; I ++) {2 circles [I]. origels = offsetX + textPixels [I]. x; 3 circles [I]. originY = offsetY + textPixels [I]. y; 4 tweenCircle (circles [I], 'in'); 5} 6 textFormed = true; // whether the text Flg 7 has been formed // process unnecessary pixel dots, however, if the text requires too many pixel dots, how can we get only half of the text... 8 if (textPixels. length <circles. length) {9 for (var j = textPixels. length; j <circles. length; j ++) {10 circles [j]. tween = TweenLite. to (circles [j], 0.4, {alpha: 0.1}); 11} 12}

5. Text explosion effect

1 for(var i= 0, l=textPixels.length; i<l; i++) {2     tweenCircle(circles[i], 'out');3 }4 if(textPixels.length < circles.length) {5     for(var j = textPixels.length; j<circles.length; j++) {6     circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 1});7     }8 }

----

Source Code address:
Http://www.html5tricks.com/download/html5-text-pixel.rar

Demo address:
Http://www.html5tricks.com/demo/html5-text-pixel/index.html

---

If this effect is used to display images, it is not more fun...
It seems like I can make an image of the Post. Try it someday.