p5.js
Başlangıç için
Özet Bilgiler!
Program Yapısı
//program başladığında bir kez çalışır
function setup(){
createCanvas(800,600);
//piksel olarak genişlik, yükseklik
}
//setup() tamamlandıktan sonra sürekli çalışır
function draw(){
//bir döngü içinde yürütülen kod
}
Sistem Değişkenleri
windowWidth / windowHeight
//pencere genişliği / yüksekliği
width / height
//kanvasın genişliği / yüksekliği
mouseX / mouseY
//anlık yatay / dikey fare konumu
Konsol
print();
//değerleri konsola yazdırır
//çift eğik çizgi (//) yorum satırıdır
//program yorum satırlarını çalıştırmaz
Renk
fill(120); //gri: 0-255
fill(100,125,255); //kırmızı, yeşil, mavi: 0-255
fill(255, 0, 0, 50); //kırmızı, yeşil, mavi, alfa
fill('red'); //CSS-SVG renk adı
fill('#ccc'); //3 haneli hex renk kodu
fill('#222222'); //6 haneli hex renk kodu
color(0, 0, 255); //p5.Color nesnesi
Matematiksel İşlevler
+ - / * //temel matematik operatörleri
random(minimum, maksimum);
//belirtilen aralıkta rastgele sayı üretir
map(değer, girişMin, girişMaks, çıkışMin, çıkışMaks);
//bir değeri aralıklar arasında doğrusal eşler
2 Boyutlu Şekiller
line(x1, y1, x2, y2); //çizgi
ellipse(x, y, genişlik, yükseklik); //elips
rect(x, y, genişlik, yükseklik); //dikdörtgen
arc(x, y, genişlik, yükseklik, başlamaAçısı, bitirmeAçısı); //yay
beginShape(); //köşe noktalarıyla özel şekil oluşturmaya başlar
vertex(x1, y1); //köşe noktası
vertex(x2, y2);
vertex(x3, y3);
//bu yapı içine daha fazla köşe noktası eklenebilir
endShape(CLOSE);
text("yazı", x, y, kutuGenişliği, kutuYüksekliği);
//yazıyı verilen konuma ve kutu boyutuna göre çizer
-
koordinatlar
-
line()
-
ellipse()
-
rect()
-
arc()
-
vertex()
Özellikler
background(renk);
//arka plan rengi
fill(renk);
//dolgu rengi
noFill();
//dolgu rengini kaldırır
stroke(renk);
//kontur rengi
strokeWeight(kalınlık);
//piksel olarak kontur kalınlığı
noStroke();
//kontur rengini kaldırır
ellipseMode(MODE);
rectMode(MODE);
//CENTER veya CORNER
textSize(boyut);
//piksel olarak yazı boyutu
Koşullu Mantık
if(koşul){
//yürütülecek kod
}
=== //değer ve tür eşittir
!== //değer veya tür eşit değildir
> //büyüktür
< //küçüktür
>= //büyük veya eşittir
<= //küçük veya eşittir