HTML - Velocity Draw

Pendahuluan Velocity Draw

Halo, para pengembang web masa depan! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia HTML dan sebuah alat kecil yang handal bernama Velocity Draw. Sebagai guru komputer tetangga yang ramah, saya di sini untuk mengarahkan Anda dalam petualangan ini, langkah demi langkah. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita mulai dari nol!

Apa Itu Velocity Draw?

Velocity Draw adalah sebuah aplikasi penggambaran berbasis HTML5 canvas yang sederhana namun kuat. Itu memungkinkan pengguna untuk membuat gambar dengan memindahkan mouse atau jari (pada perangkat sentuh) di layar. Bagian yang menarik? Semakin cepat Anda bergerak, semakin nipis garisnya!

Menyiapkan Berkas HTML

Ayo mulai dengan membuat struktur HTML dasar untuk aplikasi Velocity Draw kami. Buka editor teks favorit Anda dan ketik kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
// Kita akan menempatkan kode JavaScript kami di sini
</script>
</body>
</html>

Ini membuat dokumen HTML dasar dengan elemen canvas tempat kita akan menggambar, dan tag script tempat kita akan menulis kode JavaScript.

Magia JavaScript: Membuat Canvas Interaktif

Sekarang, mari tambahkan beberapa JavaScript untuk membuat canvas kita interaktif. Kita akan memecahnya menjadi bagian kecil, mudah dimengerti:

1. Menyiapkan canvas

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Di sini, kita mengambil elemen canvas kita, mendapatkan konteks rendering 2D-nya (yang kita akan gunakan untuk menggambar), dan mengatur ukurannya agar mengisi keseluruhan jendela.

2. Melacak pergerakan mouse

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

Kita menset up beberapa variabel untuk melacak apakah kita sedang menggambar, posisi terakhir mouse, dan kecepatan saat ini. Kemudian kita menambahkan penggunaan event listener untuk aksi mouse.

3. Implementasi fungsi penggambaran

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

function draw(e) {
if (!isDrawing) return;

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}

Fungsi-fungsi ini mengatur penggambaran nyata. Fungsi draw adalah tempat magia terjadi - itu menghitung kecepatan berdasarkan seberapa jauh mouse bergerak dan menyesuaikan lebar garis sesuai kecepatan itu.

Menggabungkan Semua Bagian

Sekarang kita memiliki semua bagian, mari gabungkannya ke dalam berkas HTML kita:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

function draw(e) {
if (!isDrawing) return;

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}
</script>
</body>
</html>

Cara Kerjanya

Ketika Anda menekan tombol mouse, startDrawing dipanggil, yang menset isDrawing ke true dan merekam posisi awal.
Ketika Anda memindahkan mouse, draw dipanggil berkali-kali. Itu menggambar garis dari posisi terakhir ke posisi saat ini.
Kecepatan dihitung berdasarkan seberapa jauh mouse bergerak sejak panggilan terakhir.
Lebar garis diatur secara proporsional terbalik terhadap kecepatan - gerakan yang lebih cepat menghasilkan garis yang lebih nipis.
Ketika Anda melepaskan tombol mouse atau memindahkan mouse keluar dari canvas, stopDrawing dipanggil, yang menghentikan proses penggambaran.

Kesimpulan

Selamat! Anda baru saja menciptakan aplikasi Velocity Draw sendiri. Apakah ini menarik bagaimana beberapa baris kode dapat menciptakan sesuatu yang interaktif dan menyenangkan? Ketika Anda bermain dengan alat penggambaran baru Anda, pikirkan bagaimana Anda dapat memperluasnya. Anda bisa menambahkan opsi warna? Apa tentang gaya brush yang berbeda?

Ingat, kunci untuk menjadi seorang pemrogram yang hebat adalah eksperimen dan latihan. Jadi jangan berhenti di sini - terus mengeksplor, terus mengoding, dan terutama, terus bersenang-senang!

Metode	Deskripsi
`getElementById`	Mengambil elemen dari DOM berdasarkan ID
`getContext`	Mendapatkan konteks rendering untuk canvas
`addEventListener`	Menambahkan penggunaan event handler ke elemen
`beginPath`	Memulai path baru di canvas
`moveTo`	Memindahkan kursor gambar ke titik yang ditentukan
`lineTo`	Menggambar garis dari titik saat ini ke titik yang ditentukan
`stroke`	Menggambar path yang didefinisikan dengan gaya stroke saat ini
`Math.sqrt`	Menghitung akar kuadrat dari sebuah angka
`Math.pow`	Menghitung pangkat sebuah angka
`Math.max`	Mengembalikan angka terbesar dari nol atau lebih banyak angka

Selamat coding, para ahli web masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Slide Web Desk

Tutorial Selanjutnya:

HTML - Kode QR