CSS

CSS { Gerçek Hayatta }

karşılaştım George Francis’in son zamanlarda çalışıyorum ve üretken SVG karakterlerine, özellikle de pörtlek gözlerine tamamen aşığım! Bunlarla ilgili özellikle sevdiğim şey, üretken sanatın ciddi olmak zorunda olmadığının altını çizmeleri – eğlenceli, tuhaf ve eğlenceli olabilir.

George’un da bir yepyeni web sitesi, üretken SVG sanatına nasıl başlayabileceğinize dair son derece iyi yazılmış bazı öğreticiler içerir. Okuma bu, üretken SVG blob karakterlerindeaklımdaki küçük, üretken bir proje için ideal bir yaklaşım gibi geldi bana.

Proje

Geçenlerde 5 yaşındaki oğluma bazı karakter kartları oluşturması için bir zanaat projesinde yardım ettim. Özellikle çizim yapmaya hevesli değil, bu yüzden onu yaratıcı aktivitelere dahil etmek biraz düşünmeyi gerektiriyor. Renkli kart seçeneklerimiz vardı (beş veya altı renkten oluşan bir palet). Şekiller (daireler, kareler veya üçgenler) çizdim ve o onları kesip her karakterin başı ve gövdesi için bir arka plana yapıştırdı. Sonra keçeli kalemle gözleri, ağzı ve uzuvları çizerdi.

Altı çok renkli kağıt insandan oluşan bir ızgara

Önerme basitti ve üretken sanata mükemmel bir şekilde uyuyor. Bazı sabit parametreleri (sınırlı bir renk paleti, sabit bir arka plan boyutu, küçük bir şekil kümesi) alın ve birkaç rastgele öğe ekleyin – bu durumda 5 yaşındaki bir çocuğun kesme, yapıştırma ve çizim becerileri! Üretken bir şekilde denemenin ve üretmenin gerçekten eğlenceli olacağını düşündüğüm güzel bir sanat eseri seti ile sonuçlandı.

üretken sürüm

George’un öğreticisini hazırlayana kadar, üretken karakterleri oluşturmak için SVG kullanacağım konusunda belirsiz bir fikrim vardı. George’un sanatı, başlamam için bana ilham verdi ve öğretici, süreci oluşturan birçok faydalı ipucu sağladı. böyle Kendi başıma denemiş olmamdan çok daha kolay.

SVG.js

SVG.js daireler, dikdörtgenler, çizgiler ve çokgenler gibi SVG öğelerini oluşturmak ve konumlandırmak için kullanışlı bir JS kitaplığıdır. Bir öğe oluşturmaya ve onu DOM’ye manuel olarak eklemeye kıyasla tonlarca zaman kazandırır. Gelecekte kesinlikle buna tekrar ulaşacağım.

Kullanışlı bir rastgele işlev

George’un random() işlevi, bir tamsayı mı yoksa kayan nokta değeri mi istediğinizi belirtmenize izin verdiği için çok kullanışlıdır:

function random(min, max, float = false) {
const val = Math.random() * (max - min) + min

if (float) {
return val
}

return Math.floor(val)
}

Karakterlerin rastgele özelliklerini oluşturmak için bunu her yerde kullandım.

çokgen çizimi

Karakterlerin başları ve gövdeleri (belli belirsiz) daireseldir. Almak için x ve y yol koordinatları bazı trigonometrik fonksiyonları kullanabiliriz (Math.cos() ve Math.sin()) bunları planlamak için. George’un kodunu kullanarak, 16 noktalı normal bir çokgeni şu şekilde çizebiliriz:

const size = 300
const xPosition = 100
const yPosition = 100
const numPoints = 16


const angleStep = (Math.PI * 2) / numPoints


const points = []

for (let i = 1; i <= numPoints; i++) {
const x = xPosition + Math.cos(i * angleStep) * size
const y = xPosition + Math.sin(i * angleStep) * size


points.push({ x, y })
}

Çokgenin konumunu, boyutunu ve nokta sayısını değiştirmek için aşağıdaki demodaki değişkenleri değiştirmeyi deneyin.

Kalemi Gör
SVG poligonu
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Öğreticide George, random() düzensiz şekillerle sonuçlanan çokgen noktalarına bir varyasyon öğesi ekleme işlevi.

Bir sınıfla örnekleme

kullanırım sınıflar JS’mde istendiğinde başlatılabilen yeniden kullanılabilir bileşen davranışları oluşturmak için iş yerinde çok şey var. Ama yaratıcı kodlama projelerimde pek değil. George’un bu öğreticide yaptığı gibi bir sınıf oluşturmak, burada harika bir yaklaşımdır. Üretken karakterlerimizden birini eklemek istediğimiz her yerde somutlaştırabiliriz.

Uyarlamalar

George’un kodu çalışmak için harika bir temel sağlarken, ihtiyaçlarım için birkaç uyarlama yaptım.

Renkler

Kodumda, renkleri tamamen rastgele sıralamak yerine, aralarından seçim yapabileceğim sınırlı bir palete sahip olmak istedim – tıpkı bir dizi renkli karta sahip olmak gibi. Bu yüzden renkleri rastgele oluşturmak yerine, renk dizisini karıştırmak ve ilk üçünü seçmek için bir işlev kullandım. Bu, her karakterde aynı rengi iki kez kullanmak yerine üç farklı renk elde etmemizi sağlar.

şekiller

George kullanır spline() çokgen şekillerini düz bir çizgi çizme işlevi. Bu, George’un kullandığı “blob” şekillerini oluşturmak için harika, ancak karakterlerim için tırtıklı kenarların gerçek hayattaki kesik figürleri anımsatmasını istedim, bu yüzden bu işlevi kullanmadım.

Ayrıca, karışıma bir yamuk şekli ekleyerek gerçek hayattaki varyasyonları daha iyi yansıtmak için şekilleri biraz karıştırdım – böylece her karakterin normal bir çokgen veya yamuk temelli bir vücut şekli olacak.

İşte tam demo:

Kalemi Gör
Üretken SVG kağıt insanlar
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

tabiki okuyabilirsiniz Tam makalekendi üretken SVG projenize başlamak istiyorsanız kesinlikle tavsiye ederim.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu