Code Trái Tim của Thủ Khoa lý

Code Trái Tim của Thủ Khoa Lý của phim Thắp sáng anh, sưởi ấm em đang gây bão CĐM tuy nhiên việc đú trend Code Trái Tim của Thủ Khoa Lý như thế nào vẫn còn các bạn hỏi rất nhiều thì beefdaily.com.vn xin hướng dẫn chi tiết dưới đây nhé !

Code Trái Tim của Thủ Khoa Lý là gì ?

NETIZEN Trung ruốc đang đua nhau đú TREND Trái tim của THỦ KHOA LÝ trong bộ phim “THẮP SÁNG ANH, SƯỞI ẤM EM .

Cụ thể là trong tập 5 của phim Thắp sáng anh, sưởi ấm em trong đó có một cảnh mà Lý Tuân đã vẽ một trái tim màu hồng lấp lánh chuyển động nở hoa rất đẹp và ý nghĩa bằng một đoạn code cho Chu Vân rồi bắt cô tự giải mã đã khiến dân tình cong kéo về vấn đề này và rất nhiều người đang đi tìm thắp sáng anh sưởi ấm em code trái tim.

Trend tạo trái tim bằng code này đãng được rất nhiều các bạn trẻ bên trung quốc đú theo bên Douyinvà ở Việ Nam cũng thế vậy hãy theo dõi hướng dẫn bên dưới đây nhé .

Hướng dẫn làm Source Code Trái Tim của Thủ Khoa Lý

Bước 1 : Đầu tiên các bạn phải có mã Code và dưới đây là mã :

Nếu các bạn không copy được code thì để lại cmt dưới mình gửi code

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style>

html, body {

height: 100%;

padding: 0;

margin: 0;

background: #000;

}

canvas {

position: absolute;

width: 100%;

height: 100%;

}

</style>

</HEAD>

<BODY>

* Settings

var settings = {

particles: {

length: 500, // maximum amount of particles

duration: 2, // particle duration in sec

velocity: 100, // particle velocity in pixels/sec

effect: -0.75, // play with this for a nice effect

size: 30, // particle size in pixels

};

* RequestAnimationFrame polyfill by Erik Möller

* Point class

var Point = (function() {

function Point(x, y) {

this.x = (typeof x !== ‘undefined’) ? x : 0;

this.y = (typeof y !== ‘undefined’) ? y : 0;

}

Point.prototype.clone = function() {

return new Point(this.x, this.y);

};

Point.prototype.length = function(length) {

if (typeof length == ‘undefined’)

return Math.sqrt(this.x * this.x + this.y * this.y);

this.normalize();

this.x *= length;

this.y *= length;

return this;

};

Point.prototype.normalize = function() {

var length = this.length();

this.x /= length;

this.y /= length;

return this;

};

return Point;

})();

* Particle class

var Particle = (function() {

function Particle() {

this.position = new Point();

this.velocity = new Point();

this.acceleration = new Point();

this.age = 0;

}

Particle.prototype.initialize = function(x, y, dx, dy) {

this.position.x = x;

this.position.y = y;

this.velocity.x = dx;

this.velocity.y = dy;

this.acceleration.x = dx * settings.particles.effect;

this.acceleration.y = dy * settings.particles.effect;

this.age = 0;

};

Particle.prototype.update = function(deltaTime) {

this.position.x += this.velocity.x * deltaTime;

this.position.y += this.velocity.y * deltaTime;

this.velocity.x += this.acceleration.x * deltaTime;

this.velocity.y += this.acceleration.y * deltaTime;

this.age += deltaTime;

};

Particle.prototype.draw = function(context, image) {

function ease(t) {

return (-t) * t * t + 1;

}

var size = image.width * ease(this.age / settings.particles.duration);

context.globalAlpha = 1 – this.age / settings.particles.duration;

context.drawImage(image, this.position.x – size / 2, this.position.y – size / 2, size, size);

};

return Particle;

})();

* ParticlePool class

var ParticlePool = (function() {

var particles,

firstActive = 0,

firstFree = 0,

duration = settings.particles.duration;

function ParticlePool(length) {

// create and populate particle pool

particles = new Array(length);

for (var i = 0; i < particles.length; i++)

particles[i] = new Particle();

}

ParticlePool.prototype.add = function(x, y, dx, dy) {

particles[firstFree].initialize(x, y, dx, dy);

// handle circular queue

firstFree++;

if (firstFree == particles.length) firstFree = 0;

if (firstActive == firstFree ) firstActive++;

if (firstActive == particles.length) firstActive = 0;

};

ParticlePool.prototype.update = function(deltaTime) {

var i;

// update active particles

if (firstActive < firstFree) {

for (i = firstActive; i < firstFree; i++)

particles[i].update(deltaTime);

}

if (firstFree < firstActive) {

for (i = firstActive; i < particles.length; i++)

particles[i].update(deltaTime);

for (i = 0; i < firstFree; i++)

particles[i].update(deltaTime);

}

// remove inactive particles

while (particles[firstActive].age >= duration && firstActive != firstFree) {

firstActive++;

if (firstActive == particles.length) firstActive = 0;

}

};

ParticlePool.prototype.draw = function(context, image) {

// draw active particles

if (firstActive < firstFree) {

for (i = firstActive; i < firstFree; i++)

particles[i].draw(context, image);

}

if (firstFree < firstActive) {

for (i = firstActive; i < particles.length; i++)

particles[i].draw(context, image);

for (i = 0; i < firstFree; i++)

particles[i].draw(context, image);

}

};

return ParticlePool;

})();

* Putting it all together

(function(canvas) {

var context = canvas.getContext(‘2d’),

particles = new ParticlePool(settings.particles.length),

particleRate = settings.particles.length / settings.particles.duration, // particles/sec

time;

// get point on heart with -PI <= t <= PI

function pointOnHeart(t) {

return new Point(

160 * Math.pow(Math.sin(t), 3),

130 * Math.cos(t) – 50 * Math.cos(2 * t) – 20 * Math.cos(3 * t) – 10 * Math.cos(4 * t) + 25

);

}

// creating the particle image using a dummy canvas

var image = (function() {

var canvas = document.createElement(‘canvas’),

context = canvas.getContext(‘2d’);

canvas.width = settings.particles.size;

canvas.height = settings.particles.size;

// helper function to create the path

function to(t) {

var point = pointOnHeart(t);

point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;

point.y = settings.particles.size / 2 – point.y * settings.particles.size / 350;

return point;

}

// create the path

context.beginPath();

var t = -Math.PI;

var point = to(t);

context.moveTo(point.x, point.y);

while (t < Math.PI) {

t += 0.01; // baby steps!

point = to(t);

context.lineTo(point.x, point.y);

}

context.closePath();

// create the fill

context.fillStyle = ‘#ea80b0’;

context.fill();

// create the image

var image = new Image();

image.src = canvas.toDataURL();

return image;

})();

// render that thing!

function render() {

// next animation frame

requestAnimationFrame(render);

// update time

var newTime = new Date().getTime() / 1000,

deltaTime = newTime – (time || newTime);

time = newTime;

// clear canvas

context.clearRect(0, 0, canvas.width, canvas.height);

// create new particles

var amount = particleRate * deltaTime;

for (var i = 0; i < amount; i++) {

var pos = pointOnHeart(Math.PI – 2 * Math.PI * Math.random());

var dir = pos.clone().length(settings.particles.velocity);

particles.add(canvas.width / 2 + pos.x, canvas.height / 2 – pos.y, dir.x, -dir.y);

}

// update and draw particles

particles.update(deltaTime);

particles.draw(context, image);

}

// handle (re-)sizing of the canvas

function onResize() {

canvas.width = canvas.clientWidth;

canvas.height = canvas.clientHeight;

}

window.onresize = onResize;

// delay rendering bootstrap

setTimeout(function() {

onResize();

render();

}, 10);

})(document.getElementById(‘pinkboard’));

</script>

</BODY>

</HTML>

Bước 2 : Sau khi có được mã code các bạn vào trang này :

https://onecompiler.com/html/3yn9usvx7

Bước 3 : Dán Code Trái Tim của Thủ Khoa lý vào bên trái

Code Trái Tim của Thủ Khoa lý

Bước 4 : Ấn Run

Code Trái Tim của Thủ Khoa lý

Và kết quả :

File code trái tim của thủ khoa lý

Để thuận tiện các bạn có thể xem file code trái tim của thủ khoa lý ở đây file đầy đủ code trái tim thủ khoa lý hiệu ứng đẹp nhất :

https://docs.google.com/document/d/1jv6PDssUzmvcxH-RKif70pSQg6juKlibPS4DT9bmW1Q/mobilebasic