"Enter"a basıp içeriğe geçin

p5.js Nedir?

Merhaba Arkadaşlar,bu yazımda yeni keşfettiğim ama çok işime yarayan bir javascript kütüphanesinden bahsedeceğim.

Javascript kullanıyorsanız bu kütüphane işinizi oldukça kolaylaştıracaktır.p5.js  çizim,animasyon gibi birçok şeyi daha kolay yapmanızı sağlayacak.p5.js temel olarak iki kısımdan oluşuyor.

function setup(){

}

function draw(){

}

function setup kısmında programa bir kere yapılması gereken şeyleri yazıyoruz.Site yenilendiğinde setup kısmı bir kere çalışıyor ve siteyi yenilemediğimiz sürece bir daha çalışmıyor.function draw kısmı ise program çalıştığı sürece çalışır.

Örnek:

function setup() {
 createCanvas(640, 360);
 background(0);
}

function draw() {
 fill(255,0,0);
 ellipse(100,100,25,25);
}

Şimdi bu kodlarla ne yaptığımıza bakalım.setup fonksiyonunu açtık ve bir canvas oluşturduk.Canvas’ın ilk parametresi genişlik ikincisi ise yükseklik yani biz burda genişliği 640 yüksekliği de 360 px olan bir canvas oluşturduk.Daha sonra background(0); yazarak canvas’ın arka planı siyah olsun dedik.Site yenilendiğinde bu işlemler bir kere gerçekleşecek.

Sonrasında draw fonksiyonunu açtık ve fill(255,0,0); diyerek alttaki elemanın rengi kırmızı olsun dedik.Bu 3 parametre rgb renk kodları ilk parametre kırmızı,ikinci parametre yeşil ve son parametre ise mavi rengin değerini ayarlıyor.

Son işlem olarak ellipse(100,100,25,25); yazarak bir daire oluşturduk.Bu parametreler ise sırasıyla daire’nin x koordinati,y koordinatı,genişliği ve yüksekliği oluyor.

p5.js işlerinizi bu şekilde daha kolay bir hale getiriyor.p5.js’yi kendi sitesi olan p5js.org adresinden indirebilirsiniz ayrıca p5.js’yi sitesinden öğrenip örneklere bakabilirsiniz.Bu yazım bu kadardı bir sonraki yazımda görüşmek dileğiyle iyi kodlamalar.

İlk Yorumu Siz Yapın

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir