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