Yaratıcı Kodlama: JavaScript ile Görseller Oluşturma

Görsel Tasarımcılar İçin Kodlamaya Giriş

“Merhaba ve bu Domestika kursunun sonuna hoş geldiniz. Bu son derste şu ana kadar gördüklerimizin bir özetini yapacağız ve yaratıcı kodlama yolculuğunuzda size yardımcı olacak bazı ipuçları ekleyeceğim. Kod bir dildir. Konuşma diliyle bir metafor kullanırsak, bir şeyi ifade etmek istediğimizde önemli olan kaç kelime kullandığımız değil, bildiğimiz kelimeleri nasıl bir araya getirmeyi seçtiğimizdir. Uzun bir yoldan geldik. Boş bir dosyadan, değişkenler ve işlevler gibi temel kavramlardan başladık. Bunları her yerde kullanacağımızı söyledim ve kullandık. Öğrenmenin en iyi yolu her zaman örnek vermektir ve bunlardan pek çoğunu gördük. Ayrıca dizileri, döngüleri, koşullu ifadeleri ve rastgele sayıları da gördük. Ve sadece bu birkaç konseptle ne kadar çok şey yapabileceğimizi gördük. Kodumuzu çalıştırmak için seçtiğimiz ortam, oldukça erişilebilir ve tanıdık olan tarayıcıydı. Artık bunu görseller oluşturmak için de kullanabileceğimizi biliyoruz. Bir HTML sayfasının nasıl oluşturulacağını ve içine JavaScript yazılacağını gördük. Daha sonra canvas-sketch'in kullanıldığı daha ayrıntılı bir kurulum gördük. Taslağımızın boyutlarını değiştirmeyi kolaylaştırmak ve kod kaydedilir kaydedilmez otomatik olarak yeniden yüklemek gibi bize sıfırdan başlamaya göre bazı avantajlar sağlayan bir ortam sağladı. Kanvas taslağında kursta gördüklerimizden daha fazlası var, bu yüzden Github'daki belgelere göz atmanızı tavsiye ederim. Taslağınızı büyük formatlarda baskıya hazırlamak, GIF'leri nasıl dışa aktaracağınız ve ayrıca resmin kalem çiziciler için nasıl hazırlanacağı hakkında bazı bilgiler var. Birlikte yaptığımız ilk eskiz basit bir ızgaraydı. 5 satırımız ve 5 sütunumuz vardı. Bu sayıyı değiştirmeye çalıştıysanız, deneme yaptığınız için tebrikler. Sabit kodlanmış değerler kullandığımız için ızgaranın artık ortalanmayacağını fark etmiş olabilirsiniz. Daha sonra işleri yapmanın daha esnek bir yolunu gördük. Bu yüzden eskiz 01'e geri dönmekten ve onu şimdi bildiklerinizle geliştirmekten çekinmeyin, bu iyi bir alıştırmadır.

İkinci taslağımızda biraz trigonometri kullandık. Keşke okuldayken Matematik öğretmenim bana trigonometri ile nasıl yaratıcı şeyler yapılacağını gösterseydi. Bu, yaratıcı kodlamanın bir başka ilginç yanıdır; basit matematik çok işe yarar. Sonunda bazı matematik kavramlarının işe yaradığını görebilirsiniz, bu kesinlikle benim başıma geldi. Üçüncü taslağımızda Pisagor ile ilgili daha fazla matematik gördük ve onu nasıl canlandıracağımızı da öğrendik. Tarayıcı her zaman tuvali yeniden boyuyor, bu nedenle tek yapmamız gereken değerleri zaman içinde değiştirmek. Yine tuval çizimi belgelerine göz atmanızı ve değerlerinizin değiştiğinden ve sonunda orijinal noktalarına geri döndüğünden emin olarak nasıl animasyonlu bir döngü oluşturabileceğinizi görmenizi öneririm. Dördüncü taslağımızda size bir değeri nasıl normalleştireceğinizi, yani orijinal aralığını 0 ile 1 arasında bir sayıya değiştireceğinizi gösterdim. Bu çok faydalıdır ve programlamanın tüm alanlarında görülür. Bir gün, örneğin bir rengi bir açıya veya bir ses örneğinin desibelini bir arazinin yüksekliğine dönüştürmeniz gerekirse, değerleri normalleştirirseniz bunu yapabileceğinizi biliyorsunuz. Son taslakta size tipografiyi yaratıcı bir şekilde nasıl kullanacağınızı göstermek istedim ama belki de orada öğrendiğimiz en ilginç şey tuvalimizdeki piksellerden renk değerlerinin nasıl okunacağıydı. Büyük harf kullandık ama hiçbir şey bizi başka bir resim kullanmaktan alıkoyamaz. Bir emoji, bir simge, bir logo, bunların hepsi pikseldir ve efekt de aynı şekilde işe yarayacaktır. Gerçekten görsellerini görmeyi çok isterim. Her şeyi denemekten korkmayın. Sana bazı ipuçları verdim ama aslında mesele keşfetmekle ilgili. Değeri 5 olarak belirlersek 500'ü deneyin. Nesneleri yanlara döndürmeyi deneyin, ölçekleri yukarı veya aşağı kaydırmayı deneyin, kareler yerine daireleri veya karelerin üstünde daireleri deneyin. Ve belki daha da önemlisi, bir şeyleri karıştırmayı deneyin, eskiz 02'den bir şeyi eskiz 05'e kullanın veya tam tersi. Yukarıdaki "Projenizi oluşturun" butonuna tıklayarak eskizlerinizi forumda paylaşın. Böylece hepimiz birbirimizden öğreneceğiz. Soruları yanıtlamak ve rehberlik etmek için orada olacağım. İçgörülerimi ve tutkularımı sizinle paylaşmak harikaydı. Teşekkürler ve hoşçakal. ”

Videonun kısmi transkripsiyonu

“Bu son derste şimdiye kadar gördüklerimizi gözden geçireceğiz ve yaratıcı kodlama yolculuğunuzda size yardımcı olacak bazı ipuçları ekleyeceğim. Kod bir dildir. Konuşulan dille bir metafor kullanacak olursak. ne kadar çok kelime kullandığımız değil. bildiğimiz kelimeleri nasıl bir araya getirdiğimizdir. Uzun bir yol katettik. Boş bir dosyadan başladık. değişkenler ve fonksiyonlar gibi temel kavramlardan. Onları her yerde kullanacağımızı söyledim ve kullandık. Öğrenmenin en iyi yolu örneklemektir ve bir hayli örnek gördük. Ayrıca diziler. döngüler. koşul yapıları ve rastgele sayıları gördük....”

Bu transkript otomatik olarak oluşturulduğundan hatalar içerebilir.

Şunun için kurs özeti: Yaratıcı Kodlama: JavaScript ile Görseller Oluşturma

• Seviye: Acemi
• 97% olumlu yorumlar ( 1209 )
• 1 öğrenci
• 1 ünite
• 1 ders ( 2h 42m )
• 1 indirme

• Kategori

  3D ve Animasyon, Web & App Tasarımi

• Alanlar

  Hareketli Grafikler, JavaScript, Multimedya, Programlama