{"id":289666,"date":"2023-11-30T16:03:50","date_gmt":"2023-11-30T09:03:50","guid":{"rendered":"https:\/\/hoanghamobile.com\/tin-tuc\/?p=289666"},"modified":"2023-11-30T16:03:50","modified_gmt":"2023-11-30T09:03:50","slug":"code-trai-tim","status":"publish","type":"post","link":"https:\/\/hoanghamobile.com\/tin-tuc\/code-trai-tim\/","title":{"rendered":"3 c\u00e1ch t\u1ea1o code tr\u00e1i tim \u0111\u01a1n gi\u1ea3n t\u1eb7ng m\u1ed9t n\u1eeda y\u00eau th\u01b0\u01a1ng"},"content":{"rendered":"

Code tr\u00e1i tim<\/b> l\u00e0 m\u1ed9t trend b\u1eaft ngu\u1ed3n t\u1eeb b\u1ed9 phim \u201cTh\u1eafp s\u00e1ng anh, s\u01b0\u1edfi \u1ea5m em\u201d. Theo \u0111\u00f3, m\u1ecdi ng\u01b0\u1eddi ch\u1ec9 c\u1ea7n l\u00e0m theo \u0111o\u1ea1n code n\u00e0y \u0111\u1ec3 t\u1ea1o n\u00ean t\u00e1c ph\u1ea9m tr\u00e1i tim d\u00e0nh t\u1eb7ng n\u1eeda y\u00eau th\u01b0\u01a1ng. B\u00e0i vi\u1ebft d\u01b0\u1edbi \u0111\u00e2y, Ho\u00e0ng H\u00e0 Mobile s\u1ebd t\u1ed5ng h\u1ee3p nh\u1eefng c\u00e1ch vi\u1ebft code t\u1ea1o h\u00ecnh tr\u00e1i tim cho c\u00e1c b\u1ea1n tham kh\u1ea3o nh\u00e9!\u00a0<\/span><\/p>\n

Code tr\u00e1i tim l\u00e0 g\u00ec?<\/span>\u00a0<\/span><\/h2>\n

Code h\u00ecnh tr\u00e1i tim c\u00f3 ngu\u1ed3n g\u1ed1c t\u1eeb b\u1ed9 phim Trung Qu\u1ed1c mang t\u00ean \u201cTh\u1eafp s\u00e1ng anh, s\u01b0\u1edfi \u1ea5m em\u201d. C\u1ee5 th\u1ec3 trong t\u1eadp 5 c\u1ee7a b\u1ed9 phim, m\u1ed9t ch\u00e0ng trai th\u1ee7 khoa L\u00fd (L\u00fd Tu\u00e2n) \u0111\u00e3 vi\u1ebft code \u0111\u1ec3 t\u1ea1o ra h\u00ecnh tr\u00e1i tim l\u00e3ng m\u1ea1n g\u1eedi t\u1edbi crush. Ngay sau t\u1eadp phim, gi\u1edbi tr\u1ebb \u0111\u00e3 \u201c\u0111u trend\u201d v\u00e0 nhanh ch\u00f3ng \u0111\u01b0\u1ee3c lan truy\u1ec1n tr\u00ean n\u1ec1n t\u1ea3ng m\u1ea1ng x\u00e3 h\u1ed9i Facebook, Tiktok. So v\u1edbi b\u1ea3n g\u1ed1c, code h\u00ecnh tr\u00e1i tim \u0111\u01b0\u1ee3c bi\u1ebfn t\u1ea5u nh\u01b0 code k\u00e8m ch\u1eef, k\u00e8m h\u00ecnh \u1ea3nh,… Nh\u00ecn chung \u0111\u00e2y l\u00e0 m\u1ed9t th\u1ee7 thu\u1eadt kh\u00e1 ph\u1ee9c t\u1ea1p \u0111\u00f2i h\u1ecfi m\u1ecdi ng\u01b0\u1eddi c\u1ea7n t\u1eadp trung khi vi\u1ebft code.\u00a0<\/span><\/p>\n

\"code-trai-tim-2\"<\/picture><\/p>\n

H\u01b0\u1edbng d\u1eabn nh\u1eefng c\u00e1ch vi\u1ebft code tr\u00e1i tim \u0111\u01a1n gi\u1ea3n\u00a0<\/span><\/h2>\n

Sau khi trend vi\u1ebft code t\u1ea1o h\u00ecnh tr\u00e1i tim \u0111\u01b0\u1ee3c lan truy\u1ec1n tr\u00ean m\u1ea1ng, c\u00e1ch vi\u1ebft code \u0111\u01b0\u1ee3c bi\u1ebfn t\u1ea5u, thay \u0111\u1ed5i. Sau \u0111\u00e2y, ch\u00fang t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1ch vi\u1ebft code t\u1ea1o h\u00ecnh tr\u00e1i tim \u0111a d\u1ea1ng cho c\u00e1c b\u1ea1n tham kh\u1ea3o:\u00a0<\/span><\/p>\n

T\u1ea1o code tr\u00e1i tim ch\u00e8n ch\u1eef\u00a0<\/span><\/h3>\n

C\u00e1ch vi\u1ebft code h\u00ecnh tr\u00e1i tim ch\u00e8n ch\u1eef t\u1eb7ng m\u1ed9t n\u1eeda y\u00eau th\u01b0\u01a1ng kh\u00e1 \u0111\u01a1n gi\u1ea3n, m\u1ecdi ng\u01b0\u1eddi h\u00e3y d\u00f9ng \u0111o\u1ea1n m\u00e3 d\u01b0\u1edbi \u0111\u00e2y. L\u01b0u \u00fd, ng\u01b0\u1eddi d\u00f9ng h\u00e3y copy ch\u00ednh x\u00e1c \u0111o\u1ea1n m\u00e3 n\u00e0y v\u00e0 c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh n\u1ed9i dung theo \u00fd mu\u1ed1n.\u00a0<\/span><\/p>\n

\"code-trai-tim-3\"<\/picture><\/p>\n

<!DOCTYPE HTML PUBLIC \u201c-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\u201d><\/span><\/p>\n

<HTML><\/span><\/p>\n

\u00a0<HEAD><\/span><\/p>\n

\u00a0\u00a0<TITLE> Heart <\/TITLE><\/span><\/p>\n

\u00a0\u00a0<META NAME=\u201dGenerator\u201d CONTENT=\u201dEditPlus\u201d><\/span><\/p>\n

\u00a0\u00a0<META NAME=\u201dAuthor\u201d CONTENT=\u201d\u201d><\/span><\/p>\n

\u00a0\u00a0<META NAME=\u201dKeywords\u201d CONTENT=\u201d\u201d><\/span><\/p>\n

\u00a0\u00a0<META NAME=\u201dDescription\u201d CONTENT=\u201d\u201d><\/span><\/p>\n

\u00a0\u00a0<style><\/span><\/p>\n

\u00a0\u00a0html, body {<\/span><\/p>\n

\u00a0\u00a0height: 100%;<\/span><\/p>\n

\u00a0\u00a0padding: 0;<\/span><\/p>\n

\u00a0\u00a0margin: 0;<\/span><\/p>\n

\u00a0\u00a0background: #000;<\/span><\/p>\n

\u00a0\u00a0display: flex;<\/span><\/p>\n

\u00a0\u00a0justify-content: center;<\/span><\/p>\n

\u00a0\u00a0align-items: center;<\/span><\/p>\n

}<\/span><\/p>\n

.box {<\/span><\/p>\n

\u00a0\u00a0width: 100%;<\/span><\/p>\n

\u00a0\u00a0position: absolute;<\/span><\/p>\n

\u00a0\u00a0top: 50%;<\/span><\/p>\n

\u00a0\u00a0left: 50%;<\/span><\/p>\n

\u00a0\u00a0transform: translate(-50%, -50%);<\/span><\/p>\n

\u00a0\u00a0display: flex;<\/span><\/p>\n

\u00a0\u00a0flex-direction: column;<\/span><\/p>\n

}<\/span><\/p>\n

canvas {<\/span><\/p>\n

\u00a0\u00a0position: absolute;<\/span><\/p>\n

\u00a0\u00a0width: 100%;<\/span><\/p>\n

\u00a0\u00a0height: 100%;<\/span><\/p>\n

}<\/span><\/p>\n

#pinkboard {<\/span><\/p>\n

\u00a0\u00a0position: relative;<\/span><\/p>\n

\u00a0\u00a0margin: auto;<\/span><\/p>\n

\u00a0\u00a0height: 500px;<\/span><\/p>\n

\u00a0\u00a0width: 500px;<\/span><\/p>\n

\u00a0\u00a0animation: animate 1.3s infinite;<\/span><\/p>\n

}<\/span><\/p>\n

#pinkboard:before, #pinkboard:after {<\/span><\/p>\n

\u00a0\u00a0content: \u201d;<\/span><\/p>\n

\u00a0\u00a0position: absolute;<\/span><\/p>\n

\u00a0\u00a0background: #FF5CA4;<\/span><\/p>\n

\u00a0\u00a0width: 100px;<\/span><\/p>\n

\u00a0\u00a0height: 160px;<\/span><\/p>\n

\u00a0\u00a0border-top-left-radius: 50px;<\/span><\/p>\n

\u00a0\u00a0border-top-right-radius: 50px;<\/span><\/p>\n

}<\/span><\/p>\n

#pinkboard:before {<\/span><\/p>\n

\u00a0\u00a0left: 100px;<\/span><\/p>\n

\u00a0\u00a0transform: rotate(-45deg);<\/span><\/p>\n

\u00a0\u00a0transform-origin: 0 100%;<\/span><\/p>\n

\u00a0\u00a0box-shadow: 0 14px 28px rgba(0,0,0,0.25),<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a00 10px 10px rgba(0,0,0,0.22);<\/span><\/p>\n

}<\/span><\/p>\n

#pinkboard:after {<\/span><\/p>\n

\u00a0\u00a0left: 0;<\/span><\/p>\n

\u00a0\u00a0transform: rotate(45deg);<\/span><\/p>\n

\u00a0\u00a0transform-origin: 100% 100%;<\/span><\/p>\n

}<\/span><\/p>\n

@keyframes animate {<\/span><\/p>\n

\u00a0\u00a00% {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0transform: scale(1);<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a030% {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0transform: scale(.8);<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a060% {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0transform: scale(1.2);<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

 <\/p>\n

\u00a0\u00a0100% {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0transform: scale(1);<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

}<\/span><\/p>\n

\u00a0\u00a0<\/style><\/span><\/p>\n

\u00a0<\/HEAD><\/span><\/p>\n

\u00a0<BODY><\/span><\/p>\n

\u00a0\u00a0\u00a0<div class=\u201dbox\u201d><\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<canvas id=\u201dpinkboard\u201d><\/canvas><\/span><\/p>\n

\u00a0\u00a0\u00a0<\/div><\/span><\/p>\n

\u00a0\u00a0<script><\/span><\/p>\n

\u00a0\u00a0\/*<\/span><\/p>\n

\u00a0* Settings<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

var settings = {<\/span><\/p>\n

\u00a0\u00a0particles: {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0length: \u00a0 2000, \/\/ maximum amount of particles<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0duration: \u00a0 2, \/\/ particle duration in sec<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0velocity: 100, \/\/ particle velocity in pixels\/sec<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0effect: -1.3, \/\/ play with this for a nice effect<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0size:\u00a0 \u00a0 \u00a0 13, \/\/ particle size in pixels<\/span><\/p>\n

\u00a0\u00a0},<\/span><\/p>\n

};<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* RequestAnimationFrame polyfill by Erik M\u00f6ller<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

(function(){var b=0;var c=[\u201cms\u201d,\u201dmoz\u201d,\u201dwebkit\u201d,\u201do\u201d];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+\u201dRequestAnimationFrame\u201d];window.cancelAnimationFrame=window[c[a]+\u201dCancelAnimationFrame\u201d]||window[c[a]+\u201dCancelRequestAnimationFrame\u201d]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* Point class<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

var Point = (function() {<\/span><\/p>\n

\u00a0\u00a0function Point(x, y) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.x = (typeof x !== \u2018undefined\u2019) ? x : 0;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.y = (typeof y !== \u2018undefined\u2019) ? y : 0;<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0Point.prototype.clone = function() {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0return new Point(this.x, this.y);<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0Point.prototype.length = function(length) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0if (typeof length == \u2018undefined\u2019)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Math.sqrt(this.x * this.x + this.y * this.y);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.normalize();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.x *= length;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.y *= length;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0return this;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0Point.prototype.normalize = function() {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0var length = this.length();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.x \/= length;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.y \/= length;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0return this;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0return Point;<\/span><\/p>\n

})();<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* Particle class<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

var Particle = (function() {<\/span><\/p>\n

\u00a0\u00a0function Particle() {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.position = new Point();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.velocity = new Point();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.acceleration = new Point();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.age = 0;<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0Particle.prototype.initialize = function(x, y, dx, dy) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.position.x = x;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.position.y = y;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.velocity.x = dx;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.velocity.y = dy;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.acceleration.x = dx * settings.particles.effect;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.acceleration.y = dy * settings.particles.effect;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.age = 0;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0Particle.prototype.update = function(deltaTime) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.position.x += this.velocity.x * deltaTime;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.position.y += this.velocity.y * deltaTime;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.velocity.x += this.acceleration.x * deltaTime;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.velocity.y += this.acceleration.y * deltaTime;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.age += deltaTime;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0Particle.prototype.draw = function(context, image) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0function ease(t) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return (\u2013t) * t * t + 1;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0var size = image.width * ease(this.age \/ settings.particles.duration);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0context.globalAlpha = 1 \u2013 this.age \/ settings.particles.duration;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0context.drawImage(image, this.position.x \u2013 size \/ 2, this.position.y \u2013 size \/ 2, size, size);<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0return Particle;<\/span><\/p>\n

})();<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* ParticlePool class<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

var ParticlePool = (function() {<\/span><\/p>\n

\u00a0\u00a0var particles,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0firstActive = 0,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0firstFree \u00a0 = 0,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0duration\u00a0 \u00a0 = settings.particles.duration;<\/span><\/p>\n

\u00a0\u00a0function ParticlePool(length) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ create and populate particle pool<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0particles = new Array(length);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0for (var i = 0; i < particles.length; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particles[i] = new Particle();<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0ParticlePool.prototype.add = function(x, y, dx, dy) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0particles[firstFree].initialize(x, y, dx, dy);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ handle circular queue<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0firstFree++;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0if (firstFree \u00a0 == particles.length) firstFree \u00a0 = 0;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0if (firstActive == firstFree \u00a0 \u00a0 \u00a0 ) firstActive++;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0if (firstActive == particles.length) firstActive = 0;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0ParticlePool.prototype.update = function(deltaTime) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0var i;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ update active particles<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0if (firstActive < firstFree) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (i = firstActive; i < firstFree; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particles[i].update(deltaTime);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0if (firstFree < firstActive) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (i = firstActive; i < particles.length; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particles[i].update(deltaTime);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (i = 0; i < firstFree; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particles[i].update(deltaTime);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ remove inactive particles<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0while (particles[firstActive].age >= duration && firstActive != firstFree) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0firstActive++;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (firstActive == particles.length) firstActive = 0;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0ParticlePool.prototype.draw = function(context, image) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ draw active particles<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0if (firstActive < firstFree) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (i = firstActive; i < firstFree; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particles[i].draw(context, image);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0if (firstFree < firstActive) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (i = firstActive; i < particles.length; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particles[i].draw(context, image);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (i = 0; i < firstFree; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particles[i].draw(context, image);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0return ParticlePool;<\/span><\/p>\n

})();<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* Putting it all together<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

(function(canvas) {<\/span><\/p>\n

\u00a0\u00a0var context = canvas.getContext(\u20182d\u2019),<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particles = new ParticlePool(settings.particles.length),<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particleRate = settings.particles.length \/ settings.particles.duration, \/\/ particles\/sec<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0time;<\/span><\/p>\n

\u00a0\u00a0\/\/ get point on heart with -PI <= t <= PI<\/span><\/p>\n

\u00a0\u00a0function pointOnHeart(t) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0return new Point(<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0160 * Math.pow(Math.sin(t), 3),<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0130 * Math.cos(t) \u2013 50 * Math.cos(2 * t) \u2013 20 * Math.cos(3 * t) \u2013 10 * Math.cos(4 * t) + 25<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0);<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\/\/ creating the particle image using a dummy canvas<\/span><\/p>\n

\u00a0\u00a0var image = (function() {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0var canvas\u00a0 = document.createElement(\u2018canvas\u2019),<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0context = canvas.getContext(\u20182d\u2019);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0canvas.width\u00a0 = settings.particles.size;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0canvas.height = settings.particles.size;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ helper function to create the path<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0function to(t) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var point = pointOnHeart(t);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0point.x = settings.particles.size \/ 2 + point.x * settings.particles.size \/ 350;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0point.y = settings.particles.size \/ 2 \u2013 point.y * settings.particles.size \/ 350;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return point;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ create the path<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0context.beginPath();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0var t = -Math.PI;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0var point = to(t);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0context.moveTo(point.x, point.y);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0while (t < Math.PI) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0t += 0.01; \/\/ baby steps!<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0point = to(t);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0context.lineTo(point.x, point.y);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0context.closePath();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ create the fill<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0context.fillStyle = \u2018#FF5CA4\u2019;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0context.fill();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ create the image<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0var image = new Image();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0image.src = canvas.toDataURL();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0return image;<\/span><\/p>\n

\u00a0\u00a0})();<\/span><\/p>\n

\u00a0\u00a0\/\/ render that thing!<\/span><\/p>\n

\u00a0\u00a0function render() {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ next animation frame<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0requestAnimationFrame(render);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ update time<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0var newTime \u00a0 = new Date().getTime() \/ 1000,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0deltaTime = newTime \u2013 (time || newTime);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0time = newTime;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ clear canvas<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0context.clearRect(0, 0, canvas.width, canvas.height);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ create new particles<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0var amount = particleRate * deltaTime;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0for (var i = 0; i < amount; i++) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var pos = pointOnHeart(Math.PI \u2013 2 * Math.PI * Math.random());<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var dir = pos.clone().length(settings.particles.velocity);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0particles.add(canvas.width \/ 2 + pos.x, canvas.height \/ 2 \u2013 pos.y, dir.x, -dir.y);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\/\/ update and draw particles<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0particles.update(deltaTime);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0particles.draw(context, image);<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\/\/ handle (re-)sizing of the canvas<\/span><\/p>\n

\u00a0\u00a0function onResize() {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0canvas.width\u00a0 = canvas.clientWidth;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0canvas.height = canvas.clientHeight;<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0window.onresize = onResize;<\/span><\/p>\n

\u00a0\u00a0\/\/ delay rendering bootstrap<\/span><\/p>\n

\u00a0\u00a0setTimeout(function() {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0onResize();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0render();<\/span><\/p>\n

\u00a0\u00a0}, 10);<\/span><\/p>\n

})(document.getElementById(\u2018pinkboard\u2019));<\/span><\/p>\n

\u00a0\u00a0<\/script><\/span><\/p>\n

\u00a0\u00a0<div class=\u201dcenter-text\u201d,<\/span><\/p>\n

\u00a0\u00a0style=\u201dbackground-color:rgb(0, 0, 0);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: rgb(225, 12, 168);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height:100%;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-size: 31px;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-style: italic;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0display: flex;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0align-items: center;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0justify-content: center;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin-bottom: 5px<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-align: center;\u201d>Anh Y\u00eau Em<\/div><\/span><\/p>\n

\u00a0<\/BODY><\/span><\/p>\n

<\/HTML><\/span><\/p>\n

T\u1ea1o code tr\u00e1i tim \u0111\u1eadp kh\u00f4ng c\u00f3 t\u00ean\u00a0<\/span><\/h3>\n

Ngo\u00e0i c\u00e1ch t\u1ea1o code c\u00f3 h\u00ecnh tr\u00e1i tim c\u00f3 ch\u1eef, m\u1ecdi ng\u01b0\u1eddi c\u00f3 th\u1ec3 t\u1ea1o h\u00ecnh tr\u00e1i tim kh\u00f4ng c\u00f3 ch\u1eef. \u0110\u1ec3 t\u1ea1o code h\u00ecnh tr\u00e1i tim kh\u00f4ng hi\u1ec3n th\u1ecb ch\u1eef, m\u1ecdi ng\u01b0\u1eddi h\u00e3y copy \u0111o\u1ea1n code sau \u0111\u00e2y:\u00a0<\/span><\/p>\n

\"code-trai-tim-4\"<\/picture><\/p>\n

<!DOCTYPE HTML PUBLIC \u201c-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\u201d><\/span><\/p>\n

<HTML><\/span><\/p>\n

\u00a0<HEAD><\/span><\/p>\n

\u00a0\u00a0<TITLE> New Document <\/TITLE><\/span><\/p>\n

\u00a0\u00a0<META NAME=\u201dGenerator\u201d CONTENT=\u201dEditPlus\u201d><\/span><\/p>\n

\u00a0\u00a0<META NAME=\u201dAuthor\u201d CONTENT=\u201d\u201d><\/span><\/p>\n

\u00a0\u00a0<META NAME=\u201dKeywords\u201d CONTENT=\u201d\u201d><\/span><\/p>\n

\u00a0\u00a0<META NAME=\u201dDescription\u201d CONTENT=\u201d\u201d><\/span><\/p>\n

\u00a0\u00a0<style><\/span><\/p>\n

\u00a0\u00a0html, body {<\/span><\/p>\n

\u00a0\u00a0height: 100%;<\/span><\/p>\n

\u00a0\u00a0padding: 0;<\/span><\/p>\n

\u00a0\u00a0margin: 0;<\/span><\/p>\n

\u00a0\u00a0background: #000;<\/span><\/p>\n

}<\/span><\/p>\n

canvas {<\/span><\/p>\n

\u00a0\u00a0position: absolute;<\/span><\/p>\n

\u00a0\u00a0width: 100%;<\/span><\/p>\n

\u00a0\u00a0height: 100%;<\/span><\/p>\n

}<\/span><\/p>\n

\u00a0\u00a0<\/style><\/span><\/p>\n

\u00a0<\/HEAD><\/span><\/p>\n

\u00a0<BODY><\/span><\/p>\n

\u00a0\u00a0<canvas id=\u201dpinkboard\u201d><\/canvas><\/span><\/p>\n

\u00a0\u00a0<script><\/span><\/p>\n

\u00a0\u00a0\/*<\/span><\/p>\n

\u00a0* Settings<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

var settings = {<\/span><\/p>\n

\u00a0\u00a0particles: {<\/span><\/p>\n

length: \u00a0 500, \/\/ maximum amount of particles<\/span><\/p>\n

duration: \u00a0 2, \/\/ particle duration in sec<\/span><\/p>\n

velocity: 100, \/\/ particle velocity in pixels\/sec<\/span><\/p>\n

effect: -0.75, \/\/ play with this for a nice effect<\/span><\/p>\n

size:\u00a0 <\/span> 30, \/\/ particle size in pixels<\/span><\/p>\n

\u00a0\u00a0},<\/span><\/p>\n

};<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* RequestAnimationFrame polyfill by Erik M\u00f6ller<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

(function(){var b=0;var c=[\u201cms\u201d,\u201dmoz\u201d,\u201dwebkit\u201d,\u201do\u201d];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+\u201dRequestAnimationFrame\u201d];window.cancelAnimationFrame=window[c[a]+\u201dCancelAnimationFrame\u201d]||window[c[a]+\u201dCancelRequestAnimationFrame\u201d]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* Point class<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

var Point = (function() {<\/span><\/p>\n

\u00a0\u00a0function Point(x, y) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.x = (typeof x !== \u2018undefined\u2019) ? x : 0;<\/span><\/p>\n

this.y = (typeof y !== \u2018undefined\u2019) ? y : 0;<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0Point.prototype.clone = function() {<\/span><\/p>\n

return new Point(this.x, this.y);<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0Point.prototype.length = function(length) {<\/span><\/p>\n

if (typeof length == \u2018undefined\u2019)<\/span><\/p>\n

\u00a0\u00a0<\/span> return Math.sqrt(this.x * this.x + this.y * this.y);<\/span><\/p>\n

this.normalize();<\/span><\/p>\n

this.x *= length;<\/span><\/p>\n

this.y *= length;<\/span><\/p>\n

return this;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0Point.prototype.normalize = function() {<\/span><\/p>\n

var length = this.length();<\/span><\/p>\n

this.x \/= length;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0this.y \/= length;<\/span><\/p>\n

return this;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0return Point;<\/span><\/p>\n

})();<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* Particle class<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

var Particle = (function() {<\/span><\/p>\n

\u00a0\u00a0function Particle() {<\/span><\/p>\n

this.position = new Point();<\/span><\/p>\n

this.velocity = new Point();<\/span><\/p>\n

this.acceleration = new Point();<\/span><\/p>\n

this.age = 0;<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0Particle.prototype.initialize = function(x, y, dx, dy) {<\/span><\/p>\n

this.position.x = x;<\/span><\/p>\n

this.position.y = y;<\/span><\/p>\n

this.velocity.x = dx;<\/span><\/p>\n

this.velocity.y = dy;<\/span><\/p>\n

this.acceleration.x = dx * settings.particles.effect;<\/span><\/p>\n

this.acceleration.y = dy * settings.particles.effect;<\/span><\/p>\n

this.age = 0;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0Particle.prototype.update = function(deltaTime) {<\/span><\/p>\n

this.position.x += this.velocity.x * deltaTime;<\/span><\/p>\n

this.position.y += this.velocity.y * deltaTime;<\/span><\/p>\n

this.velocity.x += this.acceleration.x * deltaTime;<\/span><\/p>\n

this.velocity.y += this.acceleration.y * deltaTime;<\/span><\/p>\n

this.age += deltaTime;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0Particle.prototype.draw = function(context, image) {<\/span><\/p>\n

function ease(t) {<\/span><\/p>\n

\u00a0\u00a0<\/span> return (\u2013t) * t * t + 1;<\/span><\/p>\n

}<\/span><\/p>\n

var size = image.width * ease(this.age \/ settings.particles.duration);<\/span><\/p>\n

context.globalAlpha = 1 \u2013 this.age \/ settings.particles.duration;<\/span><\/p>\n

context.drawImage(image, this.position.x \u2013 size \/ 2, this.position.y \u2013 size \/ 2, size, size);<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0return Particle;<\/span><\/p>\n

})();<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* ParticlePool class<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

var ParticlePool = (function() {<\/span><\/p>\n

\u00a0\u00a0var particles,<\/span><\/p>\n

\u00a0\u00a0<\/span> firstActive = 0,<\/span><\/p>\n

\u00a0\u00a0<\/span> firstFree \u00a0 = 0,<\/span><\/p>\n

\u00a0\u00a0<\/span> duration<\/span> = settings.particles.duration;<\/span><\/p>\n

\u00a0\u00a0function ParticlePool(length) {<\/span><\/p>\n

\/\/ create and populate particle pool<\/span><\/p>\n

particles = new Array(length);<\/span><\/p>\n

for (var i = 0; i < particles.length; i++)<\/span><\/p>\n

\u00a0\u00a0<\/span> particles[i] = new Particle();<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0ParticlePool.prototype.add = function(x, y, dx, dy) {<\/span><\/p>\n

particles[firstFree].initialize(x, y, dx, dy);<\/span><\/p>\n

\/\/ handle circular queue<\/span><\/p>\n

firstFree++;<\/span><\/p>\n

if (firstFree \u00a0 == particles.length) firstFree \u00a0 = 0;<\/span><\/p>\n

if (firstActive == firstFree \u00a0 <\/span> ) firstActive++;<\/span><\/p>\n

if (firstActive == particles.length) firstActive = 0;<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0ParticlePool.prototype.update = function(deltaTime) {<\/span><\/p>\n

var i;<\/span><\/p>\n

\/\/ update active particles<\/span><\/p>\n

if (firstActive < firstFree) {<\/span><\/p>\n

\u00a0\u00a0<\/span> for (i = firstActive; i < firstFree; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> particles[i].update(deltaTime);<\/span><\/p>\n

}<\/span><\/p>\n

if (firstFree < firstActive) {<\/span><\/p>\n

\u00a0\u00a0<\/span> for (i = firstActive; i < particles.length; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> particles[i].update(deltaTime);<\/span><\/p>\n

\u00a0\u00a0<\/span> for (i = 0; i < firstFree; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> particles[i].update(deltaTime);<\/span><\/p>\n

}<\/span><\/p>\n

\/\/ remove inactive particles<\/span><\/p>\n

while (particles[firstActive].age >= duration && firstActive != firstFree) {<\/span><\/p>\n

\u00a0\u00a0<\/span> firstActive++;<\/span><\/p>\n

\u00a0\u00a0<\/span> if (firstActive == particles.length) firstActive = 0;<\/span><\/p>\n

}<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0ParticlePool.prototype.draw = function(context, image) {<\/span><\/p>\n

\/\/ draw active particles<\/span><\/p>\n

if (firstActive < firstFree) {<\/span><\/p>\n

\u00a0\u00a0<\/span> for (i = firstActive; i < firstFree; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> particles[i].draw(context, image);<\/span><\/p>\n

}<\/span><\/p>\n

if (firstFree < firstActive) {<\/span><\/p>\n

\u00a0\u00a0<\/span> for (i = firstActive; i < particles.length; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> particles[i].draw(context, image);<\/span><\/p>\n

\u00a0\u00a0<\/span> for (i = 0; i < firstFree; i++)<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> particles[i].draw(context, image);<\/span><\/p>\n

}<\/span><\/p>\n

\u00a0\u00a0};<\/span><\/p>\n

\u00a0\u00a0return ParticlePool;<\/span><\/p>\n

})();<\/span><\/p>\n

\/*<\/span><\/p>\n

\u00a0* Putting it all together<\/span><\/p>\n

\u00a0*\/<\/span><\/p>\n

(function(canvas) {<\/span><\/p>\n

\u00a0\u00a0var context = canvas.getContext(\u20182d\u2019),<\/span><\/p>\n

\u00a0<\/span> particles = new ParticlePool(settings.particles.length),<\/span><\/p>\n

\u00a0\u00a0<\/span> particleRate = settings.particles.length \/ settings.particles.duration, \/\/ particles\/sec<\/span><\/p>\n

\u00a0\u00a0<\/span> time;<\/span><\/p>\n

\u00a0\u00a0\/\/ get point on heart with -PI <= t <= PI<\/span><\/p>\n

\u00a0\u00a0function pointOnHeart(t) {<\/span><\/p>\n

return new Point(<\/span><\/p>\n

\u00a0\u00a0<\/span> 160 * Math.pow(Math.sin(t), 3),<\/span><\/p>\n

\u00a0\u00a0<\/span> 130 * Math.cos(t) \u2013 50 * Math.cos(2 * t) \u2013 20 * Math.cos(3 * t) \u2013 10 * Math.cos(4 * t) + 25<\/span><\/p>\n

);<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\/\/ creating the particle image using a dummy canvas<\/span><\/p>\n

\u00a0\u00a0var image = (function() {<\/span><\/p>\n

var canvas\u00a0 = document.createElement(\u2018canvas\u2019),<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> context = canvas.getContext(\u20182d\u2019);<\/span><\/p>\n

canvas.width\u00a0 = settings.particles.size;<\/span><\/p>\n

canvas.height = settings.particles.size;<\/span><\/p>\n

\/\/ helper function to create the path<\/span><\/p>\n

function to(t) {<\/span><\/p>\n

\u00a0\u00a0<\/span> var point = pointOnHeart(t);<\/span><\/p>\n

\u00a0\u00a0<\/span> point.x = settings.particles.size \/ 2 + point.x * settings.particles.size \/ 350;<\/span><\/p>\n

\u00a0\u00a0<\/span> point.y = settings.particles.size \/ 2 \u2013 point.y * settings.particles.size \/ 350;<\/span><\/p>\n

\u00a0\u00a0<\/span> return point;<\/span><\/p>\n

}<\/span><\/p>\n

\/\/ create the path<\/span><\/p>\n

context.beginPath();<\/span><\/p>\n

var t = -Math.PI;<\/span><\/p>\n

var point = to(t);<\/span><\/p>\n

context.moveTo(point.x, point.y);<\/span><\/p>\n

while (t < Math.PI) {<\/span><\/p>\n

\u00a0\u00a0<\/span> t += 0.01; \/\/ baby steps!<\/span><\/p>\n

\u00a0\u00a0<\/span> point = to(t);<\/span><\/p>\n

\u00a0\u00a0<\/span> context.lineTo(point.x, point.y);<\/span><\/p>\n

}<\/span><\/p>\n

context.closePath();<\/span><\/p>\n

\/\/ create the fill<\/span><\/p>\n

context.fillStyle = \u2018#ea80b0\u2019;<\/span><\/p>\n

context.fill();<\/span><\/p>\n

\/\/ create the image<\/span><\/p>\n

var image = new Image();<\/span><\/p>\n

image.src = canvas.toDataURL();<\/span><\/p>\n

return image;<\/span><\/p>\n

\u00a0\u00a0})();<\/span><\/p>\n

\u00a0\u00a0\/\/ render that thing!<\/span><\/p>\n

\u00a0\u00a0function render() {<\/span><\/p>\n

\/\/ next animation frame<\/span><\/p>\n

requestAnimationFrame(render);<\/span><\/p>\n

\/\/ update time<\/span><\/p>\n

var newTime \u00a0 = new Date().getTime() \/ 1000,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> deltaTime = newTime \u2013 (time || newTime);<\/span><\/p>\n

time = newTime;<\/span><\/p>\n

\/\/ clear canvas<\/span><\/p>\n

context.clearRect(0, 0, canvas.width, canvas.height);<\/span><\/p>\n

\/\/ create new particles<\/span><\/p>\n

var amount = particleRate * deltaTime;<\/span><\/p>\n

for (var i = 0; i < amount; i++) {<\/span><\/p>\n

\u00a0\u00a0<\/span> var pos = pointOnHeart(Math.PI \u2013 2 * Math.PI * Math.random());<\/span><\/p>\n

\u00a0\u00a0<\/span> var dir = pos.clone().length(settings.particles.velocity);<\/span><\/p>\n

\u00a0\u00a0<\/span> particles.add(canvas.width \/ 2 + pos.x, canvas.height \/ 2 \u2013 pos.y, dir.x, -dir.y);<\/span><\/p>\n

}<\/span><\/p>\n

\/\/ update and draw particles<\/span><\/p>\n

particles.update(deltaTime);<\/span><\/p>\n

particles.draw(context, image);<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0\/\/ handle (re-)sizing of the canvas<\/span><\/p>\n

\u00a0\u00a0function onResize() {<\/span><\/p>\n

canvas.width\u00a0 = canvas.clientWidth;<\/span><\/p>\n

canvas.height = canvas.clientHeight;<\/span><\/p>\n

\u00a0\u00a0}<\/span><\/p>\n

\u00a0\u00a0window.onresize = onResize;<\/span><\/p>\n

\u00a0\u00a0\/\/ delay rendering bootstrap<\/span><\/p>\n

\u00a0\u00a0setTimeout(function() {<\/span><\/p>\n

onResize();<\/span><\/p>\n

render();<\/span><\/p>\n

\u00a0\u00a0}, 10);<\/span><\/p>\n

})(document.getElementById(\u2018pinkboard\u2019));<\/span><\/p>\n

\u00a0\u00a0<\/script><\/span><\/p>\n

\u00a0<\/BODY><\/span><\/p>\n

<\/HTML><\/span><\/p>\n

T\u1ea1o code tr\u00e1i tim tia s\u00e1ng ngh\u1ec7 thu\u1eadt\u00a0<\/span><\/h3>\n

N\u1ebfu m\u1ecdi ng\u01b0\u1eddi mu\u1ed1n t\u1ea1o h\u00ecnh tr\u00e1i tim c\u00f3 th\u00eam tia s\u00e1ng th\u00ec h\u00e3y vi\u1ebft code theo \u0111o\u1ea1n code d\u01b0\u1edbi \u0111\u00e2y. L\u01b0u \u00fd, m\u1ecdi ng\u01b0\u1eddi n\u00ean vi\u1ebft \u0111\u00fang m\u00e3 code \u0111\u1ec3 t\u1ea1o th\u00e0nh h\u00ecnh tr\u00e1i tim \u0111\u1eb9p nh\u00e9!\u00a0<\/span><\/p>\n

\"code-trai-tim-5\"<\/picture><\/p>\n

<!DOCTYPE html><\/span><\/p>\n

<html lang=\u201den\u201d><\/span><\/p>\n

<head><\/span><\/p>\n

<meta charset=\u201dUTF-8\u2033><\/span><\/p>\n

<meta http-equiv=\u201dX-UA-Compatible\u201d content=\u201dIE=edge\u201d><\/span><\/p>\n

<meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u2033><\/span><\/p>\n

<title>Document<\/title><\/span><\/p>\n

<style><\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> canvas {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> position: absolute;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> left: 0;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> top: 0;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> width: 100%;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> height: 100%;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> background-color: rgba(0, 0, 0, .2);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

<\/style><\/span><\/p>\n

<\/head><\/span><\/p>\n

<body><\/span><\/p>\n

<canvas id=\u201dheart\u201d><\/canvas><\/span><\/p>\n

<script><\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> window.requestAnimationFrame =<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> window.__requestAnimationFrame ||<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> window.requestAnimationFrame ||<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> window.webkitRequestAnimationFrame ||<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window.mozRequestAnimationFrame ||<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> window.oRequestAnimationFrame ||<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> window.msRequestAnimationFrame ||<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> (function () {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> return function (callback, element) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var lastTime = element.__lastTime;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> if (lastTime === undefined) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> \u00a0 lastTime = 0;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var currTime = Date.now();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var timeToCall = Math.max(1, 33 \u2013 (currTime \u2013 lastTime));<\/span><\/p>\n

\u00a0<\/span> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 window.setTimeout(callback, timeToCall);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> element.__lastTime = currTime + timeToCall;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> };<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> })();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> window.isDevice = (\/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini\/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> var loaded = false;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> var init = function () {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> if (loaded) return;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> loaded = true;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var mobile = window.isDevice;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var koef = mobile ? 0.5 : 1;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var canvas = document.getElementById(\u2018heart\u2019);<\/span><\/p>\n

\u00a0\u00a0<\/span> \u00a0 \u00a0 \u00a0 var ctx = canvas.getContext(\u20182d\u2019);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var width = canvas.width = koef * innerWidth;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var height = canvas.height = koef * innerHeight;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var rand = Math.random;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> ctx.fillStyle = \u201crgba(0,0,0,1)\u201d;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> ctx.fillRect(0, 0, width, height);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var heartPosition = function (rad) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> \/\/return [Math.sin(rad), Math.cos(rad)];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> \u00a0 \u00a0 return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) \u2013 5 * Math.cos(2 * rad) \u2013 2 * Math.cos(3 * rad) \u2013 Math.cos(4 * rad))];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> };<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var scaleAndTranslate = function (pos, sx, sy, dx, dy) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> return [dx + pos[0] * sx, dy + pos[1] * sy];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> };<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> window.addEventListener(\u2018resize\u2019, function () {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> \u00a0 \u00a0 \u00a0 \u00a0 width = canvas.width = koef * innerWidth;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> height = canvas.height = koef * innerHeight;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> ctx.fillStyle = \u201crgba(0,0,0,1)\u201d;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> ctx.fillRect(0, 0, width, height);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> });<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var traceCount = mobile ? 20 : 50;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var pointsOrigin = [];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var i;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var dr = mobile ? 0.3 : 0.1;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var heartPointsCount = pointsOrigin.length;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var targetPoints = [];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var pulse = function (kx, ky) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> for (i = 0; i < pointsOrigin.length; i++) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> targetPoints[i] = [];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> targetPoints[i][0] = kx * pointsOrigin[i][0] + width \/ 2;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> targetPoints[i][1] = ky * pointsOrigin[i][1] + height \/ 2;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> \u00a0 }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> };<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var e = [];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> for (i = 0; i < heartPointsCount; i++) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var x = rand() * width;<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var y = rand() * height;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> e[i] = {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> vx: 0,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> vy: 0,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> R: 2,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> speed: rand() + 5,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> q: ~~(rand() * heartPointsCount),<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> D: 2 * (i % 2) \u2013 1,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> force: 0.2 * rand() + 0.7,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> f: \u201chsla(0,\u201d + ~~(40 * rand() + 60) + \u201c%,\u201d + ~~(60 * rand() + 20) + \u201c%,.3)\u201d,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> trace: []<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> };<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> for (var k = 0; k < traceCount; k++) e[i].trace[k] = { x: x, y: y };<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var config = {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> traceK: 0.4,<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> timeDelta: 0.01<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> };<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var time = 0;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var loop = function () {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var n = -Math.cos(time);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> pulse((1 + n) * .5, (1 + n) * .5);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> ctx.fillStyle = \u201crgba(0,0,0,.1)\u201d;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> ctx.fillRect(0, 0, width, height);<\/span><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 for (i = e.length; i\u2013;) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var u = e[i];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var q = targetPoints[u.q];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var dx = u.trace[0].x \u2013 q[0];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var dy = u.trace[0].y \u2013 q[1];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var length = Math.sqrt(dx * dx + dy * dy);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> if (10 > length) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> if (0.95 < rand()) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.q = ~~(rand() * heartPointsCount);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> else {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> \u00a0 \u00a0 if (0.99 < rand()) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.D *= -1;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.q += u.D;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.q %= heartPointsCount;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> if (0 > u.q) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 u.q += heartPointsCount;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.vx += -dx \/ length * u.speed;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.vy += -dy \/ length * u.speed;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.trace[0].x += u.vx;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.trace[0].y += u.vy;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.vx *= u.force;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> u.vy *= u.force;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> for (k = 0; k < u.trace.length \u2013 1;) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var T = u.trace[k];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> var N = u.trace[++k];<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 N.x -= config.traceK * (N.x \u2013 T.x);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> N.y -= config.traceK * (N.y \u2013 T.y);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> ctx.fillStyle = u.f;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> for (k = 0; k < u.trace.length; k++) {<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> }<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> \/\/ctx.fillStyle = \u201crgba(255,255,255,1)\u201d;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> \/\/for (i = u.trace.length; i\u2013;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> window.requestAnimationFrame(loop, canvas);<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> };<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span> loop();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> };<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> var s = document.readyState;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> if (s === \u2018complete\u2019 || s === \u2018loaded\u2019 || s === \u2018interactive\u2019) init();<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0<\/span> else document.addEventListener(\u2018DOMContentLoaded\u2019, init, false);<\/span><\/p>\n

<\/script><\/span><\/p>\n

<\/body><\/span><\/p>\n

<\/html><\/span><\/p>\n

T\u1ea1m K\u1ebft\u00a0<\/span><\/h2>\n

Nh\u01b0 v\u1eady, ch\u00fang t\u00f4i \u0111\u00e3 h\u01b0\u1edbng d\u1eabn ba c\u00e1ch t\u1ea1o <\/span>code tr\u00e1i tim<\/b> ngh\u1ec7 thu\u1eadt cho c\u00e1c b\u1ea1n tham kh\u1ea3o. Hy v\u1ecdng h\u01b0\u1edbng d\u1eabn tr\u00ean gi\u00fap m\u1ecdi ng\u01b0\u1eddi t\u1ea1o n\u00ean m\u00f3n qu\u00e0 \u00fd ngh\u0129a d\u00e0nh t\u1eb7ng m\u1ed9t n\u1eeda y\u00eau th\u01b0\u01a1ng. H\u00e3y b\u1ea5m theo d\u00f5i fanpage <\/span>Ho\u00e0ng H\u00e0 Mobile<\/b> v\u00e0 k\u00eanh Youtube <\/span>Ho\u00e0ng H\u00e0 Channel<\/b> \u0111\u1ec3 kh\u00f4ng b\u1ecf qua th\u00f4ng tin th\u00fa v\u1ecb nh\u00e9!\u00a0<\/span><\/p>\n

XEM TH\u00caM:\u00a0<\/strong><\/p>\n