Phân cảnh tạo một trái tim bằng Code Trái Tim của Thủ khoa Lý thả thính crush Chu Vận trong phim Chiếu sáng anh, sưởi ấm em đang được nitizen xứ Trung Hoa bắt trend cực nhiệt tình. Nhờ đó, trong vài hôm nay cũng đang gây bão trên mạng xã hội Việt Nam. Trong bài viết này, NgonAZ sẽ dướng dẫn các bạn tạo bằng 2 phiên bản: Code trái tim đập không có chữ và Code trái tim có chữ ở giữa đập thình thịch vô cùng độc đáo nhé. Hiện nay có rất nhiều phiên bản khác nhau, tuy nhiên bản thân mình thấy code như trong phim là đẹp đơn giản nhất rồi.
Cụ thể hơn trong tập 5 của bộ phim “Thắp sáng anh, sưởi ấm em” trong đó có một phân cảnh mà Lý Tuân (Nam Chính) đã vẽ một trái tim màu hồng lấp lánh đập được 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ấn đề này và đi tìm thắp sáng anh sưởi ấm em cho đoạn Code Trái Tim đó.
Cách làm Code Trái Tim của Thủ Khoa Lý
Đầu tiêu, các bạn tạo thư mục mới và đặt tên cho thư mục này là codetraitim hoặc bạn cũng có thể đặt tên khác tuỳ theo sở thích của bạn. Tuy nhiên, cũng không cần tạo thư mục đâu, các bạn lưu luôn ở màn hình chính cũng được, mở cho nhanh.
Bước 1: Các bạn tạo file có tên là index.html và copy đoạn code dưới đây vào file đó.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Trái tim </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
background: #CCE46B;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</HEAD>
<BODY>
<canvas id="pinkboard"></canvas>
<script>
/*
* 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
},
};
(function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}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)}}}());
/*
* 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 = '#000000';
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 đó Lưu Lại fie. Các bạn mở bằng máy tính file index.html bên trên sẽ thấy hiệu ứng code trái tim y chang trong phim nhé.
Ngoài ra các bạn cũng có thể sử dụng code trái tim này để gửi cho bạn gái, người yêu của bạn qua địa chỉ web online qua các bước sau:
Bước 1: Truy cập vào: https://onecompiler.com/html/3ynbgj86s
Bước 2: Các bạn sẽ thấy 1 bảng Code trái tim bằng HTML (bên trái) và Bảng hiện thị Code (bên phải)
Bước 3: Các bạn bấm RUN để hưởng thành quả nhé!
Cách đổi màu Code Trái Tim thế nào?
Bên cạnh việc copy đoạn code html trên để tạo trái tim tỏ tình theo trends, bạn còn có thể làm mới thay trái tim bằng cách đổi màu của trái tim và phông nền. Cách làm cực kỳ đơn giản:
Đổi màu nền: Tìm đến đoạn code background: #CCE46B;”. Sau đó đổi mã màu. Bạn có thể vào google tìm kiếm mã màu hoặc bảng màu html để tìm mã màu muốn đổi.
Đổi màu trái tim: Ở dòng code “context.fillStyle = ‘#000000’;”, Chọn màu ưng ý rồi thay thế là xong! Ngoài ra còn rất nhiều chủ đề hay mà bạn có thể tham khảo:
- CMND Trung Quốc Free 2022 đủ Tên và ID đăng ký Game Online
- Số điện thoại Trung Quốc ảo nhận SMS miễn phí, Cách tạo nhanh
- Tên tiếng Trung Quốc hay cho nữ ĐẸP, Ý NGHĨA nhất
- Thúy Kiều Họ Gì? Nhân vật Thuý Kiều mang họ gì?
Code Trái tim Đập có tên ở giữa
Bước 1: Các bạn tải File .txt sẵn code tại đây
Bước 2: Sau đó chúng ta sẽ mở đoạn code này rồi tiến hành chỉnh sửa lại nội dung trong code. Bạn kéo xuống bên dưới cùng sẽ có tùy chọn thay đổi lại nội dung chữ Mãi Yêu NGONAZ thành nội dung bạn muốn hiển thị trong hình trái tim. Chúng ta điền nội dung nào mà mình muốn vào trong dòng code này đều được nhé. Bạn cũng có thể đổi cỡ chữ tại dòng font-size theo ý mình nhé.
Bước 3: Lưu tên file code .html là được. Rồi xem thành quả nhé!
Download Source Code Trái Tim
Nếu bạn nào quá lười không muốn copy mình đã làm sẵn 2 file html nén zip lại rồi nhé. Các bạn tải về rồi mở ra là sẽ thấy.
>> Link Code không chữ: Tải Source Code Trái Tim
>> Link Code có chứ ở giữa: Tải về tại đây
Lời kết
Các bạn thấy đó, bắt trend Code Trái Tim Đập của Thủ Khoa Lý đang hot hiện nay quá đơn giản phải không nào. ngoài ra, các bạn có thể biến đổi rất nhiều loại trái tim khác nhau, màu sắc và hiệu ứng mới, bạn có thể gửi cho người yêu để tỏ tình cũng quá hợp lý rồi. Nếu các bạn muốn nhiều màu hơn có thể Zalo cho mình qua phần liên hệ nhé. Chúc các bạn thành công!
