Bu yazımda kısa süre önce adını duymuş olduğum ve öğrenmeye başlamış olduğum p5js’in ne olduğunu ve nasıl kullanıldığını anlatacağım.

p5.js Nedir ?

p5.js, Javascript ile kodlanmış olsada aslında Processing’i(https://processing.org/) temel alarak hazırlanmıştır. Processing, bilgisayar üzerinde görsel tasarım yapmak isteyenler için hazırlanmış tasarım kısmını belki elle yazsanız uzun uzun yazacağınız satırları tek bir işlem ile yapmamızı sağlamaya amaçlıyan bir kodlama aracıdır.

p5.js ise Javascript DOM İşlemleri ile birlikte kullanabileceğimiz bir araçtır.


p5.js Nasıl Kullanılır ?

Şimdi nasıl kullanıldığından bahsederken basit bir animasyon yapmaya çalışalım.

1. Adım : HTML Dosyamızı Oluşturalım

<!DOCTYPE html>

<html lang=”tr”>

<head>

<meta charset=”utf-8″>

<title>P5.JS Nedir ? Nasıl Kullanılır – Aydın Can Altun</title>

</head>

<body>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js”></script>

<script src=”sketch.js”></script>

</body>

</html>

Adım 2 : Çember Oluşturalım

Bu adımda createCanvas(Genişlik,Uzunluk) adında bir fonksiyon kullanacağız bu fonksiyon kanvasımızın boyutlarını belirtecek.

background() fonksiyonu arka planın rengini seçmemizi sağlıyor

noStroke() fonksiyonu elipsin dış hatlarının olmayacağını belirtir.

ellipse(x,y,genişlik,uzunluk) fonksiyonu ise oluşturacağımız elipsin x ve y koordinatları ile boyutunu belirtmemizi sağlar.

function setup(){

createCanvas(500,450);

background(‘darkblue’);

noStroke();

ellipse(width/2, height/2, 50, 50);

}

Şu ana kadar yaptıklarımız böyle gözüküyor

Adım 3: Elipsi Hareket Ettirelim

draw() fonksiyonu sonsuz bir döngüdür. Yapacağımız şey y noktasını dışarıda 0 olarak tanımlayıp daha sonra draw() fonksiyonun içinde y değerini arttırmak. Böylece elipsimiz kanvasımızın içinde yukarıdan aşağıya doğru ilerleyecektir.

var y = 0;

function setup(){

noStroke();

createCanvas(500,450);

}

function draw(){

background(‘darkblue’);

ellipse(width/2, y, 50,50);

y++;

}

Adım 4 : Sonsuz Nokta Oluşturalım

Şimdi son adımızı yapmaya başlayalım.

random() fonksiyonu rastgele bir gerçek sayı oluşturacaktır.

Benim yazacağım kodumda random(width) şeklinde olucak yani 0 ve 500 arasında bir sayı seçicektir.

var x, y, r;

function setup(){

createCanvas(500, 450);

noStroke();

background(‘darkblue’);

y = 0;

}

function draw(){

x = random(width);

if(random() > 0.7){

r = random(6,10);

}else{

r = random(1,5);

}

ellipse(x,y,r,r);

y = y + 4;

if(y > 450){

y = 0;

}

}