Pengodean Kreatif: Membuat Visual dengan JavaScript

Pengantar Coding untuk Desainer Visual

“Halo, selamat datang di akhir kursus Domestika ini. Di pelajaran terakhir ini, kita akan merangkum apa yang telah kita pelajari sejauh ini, dan saya akan menambahkan beberapa tips untuk membantu Anda dalam perjalanan menuju coding kreatif. Kode adalah sebuah bahasa. Jika kita menggunakan metafora dalam bahasa lisan, ketika kita ingin mengungkapkan sesuatu, yang penting bukanlah berapa banyak kata yang kita gunakan, melainkan bagaimana kita memilih untuk merangkai kata-kata yang kita ketahui. Kami telah menempuh perjalanan panjang. Kami mulai dari berkas kosong, dari konsep-konsep dasar seperti variabel dan fungsi. Saya sudah bilang akan menggunakannya di mana-mana, dan kami pun melakukannya. Cara terbaik untuk belajar selalu melalui contoh, dan kami melihat banyak contoh. Kami juga mempelajari array, loop, kondisional, dan bilangan acak. Dan kami melihat betapa banyak hal yang bisa kami lakukan hanya dengan beberapa konsep tersebut. Lingkungan yang kami pilih untuk menjalankan kode kami adalah peramban, yang sangat mudah diakses dan familiar. Sekarang kami tahu kami juga bisa menggunakannya untuk membuat visual. Kami melihat cara membuat halaman HTML dan menulis JavaScript di dalamnya. Kemudian, kami melihat pengaturan yang lebih rumit menggunakan canvas-sketch. Hal ini memberi kami lingkungan dengan beberapa keuntungan dibandingkan memulai dari awal, seperti memudahkan perubahan dimensi sketsa dan juga memuat ulang secara otomatis segera setelah kode disimpan. Ada lebih banyak hal tentang sketsa kanvas daripada yang kita lihat di kursus ini, jadi saya sarankan Anda melihat dokumentasinya di Github. Ada beberapa informasi tentang cara mempersiapkan sketsa Anda untuk dicetak dalam format besar, cara mengekspor GIF, dan juga cara mempersiapkan karya seni untuk plotter pena. Sketsa pertama yang kita buat bersama adalah grid sederhana. Kita punya 5 baris dan 5 kolom. Kalau kamu coba ubah angka itu, selamat bereksperimen. Kamu mungkin menyadari grid-nya tidak lagi terpusat, karena kita menggunakan nilai-nilai yang sudah dikodekan. Kemudian, kita melihat cara yang lebih fleksibel. Jadi, silakan kembali ke sketsa 01 dan perbaiki dengan apa yang kamu ketahui sekarang, ini latihan yang bagus.

Pada sketsa kedua kami, kami menggunakan sedikit trigonometri. Saya berharap guru Matematika saya pernah menunjukkan cara berkreasi dengan trigonometri saat saya masih sekolah. Ini hal menarik lainnya tentang pengkodean kreatif, matematika sederhana sangat bermanfaat. Anda mungkin akhirnya menemukan beberapa konsep matematika yang berhasil, dan itu benar-benar terjadi pada saya. Pada sketsa ketiga, kita melihat lebih banyak matematika dengan Pythagoras dan juga belajar cara menganimasikannya. Peramban selalu mengecat ulang kanvas, jadi yang perlu kita lakukan hanyalah mengubah nilai seiring waktu. Sekali lagi, saya sarankan Anda untuk melihat dokumentasi sketsa kanvas dan melihat cara membuat loop animasi, dengan memastikan nilai Anda berubah dan akhirnya kembali ke titik semula. Di sketsa keempat, saya menunjukkan cara menormalkan suatu nilai, yaitu mengubah rentang aslinya menjadi angka antara 0 dan 1. Hal ini sangat berguna dan terlihat di semua bidang pemrograman. Jika suatu hari Anda perlu, misalnya, mengubah warna menjadi sudut atau desibel sampel audio menjadi ketinggian medan, Anda tahu Anda bisa melakukannya jika Anda menormalkan nilainya. Untuk sketsa terakhir, saya ingin menunjukkan cara menggunakan tipografi secara kreatif, tetapi mungkin hal paling menarik yang kami pelajari di sana adalah cara membaca nilai warna dari piksel di kanvas kami. Kami menggunakan huruf besar, tetapi tidak ada yang menghalangi kami untuk menggunakan gambar lain. Emoji, ikon, logo, semuanya adalah piksel dan efeknya akan berfungsi dengan baik. Saya sangat ingin melihat visual Anda. Jangan takut bereksperimen dengan segala hal. Saya sudah memberi Anda beberapa petunjuk, tetapi intinya adalah eksplorasi. Jika kita menetapkan nilai ke 5, coba 500. Cobalah memutar objek ke samping, coba skalakan ke atas atau ke bawah, coba gunakan lingkaran alih-alih kotak, atau lingkaran di atas kotak. Dan mungkin yang lebih penting, cobalah mencampur objek, gunakan sesuatu dari sketsa 02 pada sketsa 05 atau sebaliknya. Bagikan sketsa Anda di forum dengan mengeklik tombol "Buat proyek Anda" di atas. Dengan begitu, kita semua akan saling belajar. Saya akan hadir untuk menjawab pertanyaan dan memberikan panduan. Senang sekali bisa berbagi wawasan dan semangat saya dengan Anda. Terima kasih dan selamat tinggal. ”

Ringkasan kursus untuk: Pengodean Kreatif: Membuat Visual dengan JavaScript

• Tingkat: Pemula
• 97% ulasan positif ( 1224 )
• 1 siswa
• 1 satuan
• 1 pelajaran ( 1 jam 1m )
• 1 unduhan

• Kategori

  3D & Animasi, Desain Web & Aplikasi

• Daerah

  Grafik Gerak, JavaScript, Multimedia, Pemrograman