tarayıcıda ilk üretken sanat çizimin: kırk satırdan az javascript

yaratıcı kodlama (creative coding), kodu bir araç olmaktan çıkarıp bir malzeme olarak kullanmak demek; ortaya çıkan işe de üretken sanat (generative art) diyoruz. bu yazıda, hiçbir kütüphane kurmadan, tek bir html dosyasında ilk üretken sanat çizimini yapacağız: kırk satıra yakın javascript.

ne yapacağız?

georg nees’in schotter’i ve vera molnár’ın çalışmalarından ilham alan bir çizim: bir kare ızgarası, üst satırlar düzgün; aşağı indikçe her kare biraz daha dönüyor ve kayıyor. (vera molnár ve kodla çizmenin ilk günleri yazısında bu fikrin hikâyesi var.)

1. tuvali hazırlayın

bir klasörde index.html adlı dosya oluşturun ve içine şunu yazın:

<canvas id="tuval" width="800" height="800"></canvas>
<script>
  const tuval = document.getElementById('tuval');
  const ctx = tuval.getContext('2d');

  const hucre = 10;                     // 10 x 10 hücre
  const boyut = tuval.width / hucre;    // her hücrenin piksel boyutu
  ctx.lineWidth = 2;

  for (let satir = 0; satir < hucre; satir++) {
    for (let sutun = 0; sutun < hucre; sutun++) {
      const bozulma = satir / (hucre - 1);                    // üstte 0, altta 1
      const aci = (Math.random() - 0.5) * bozulma * 0.9;      // radyan
      const kayma = (Math.random() - 0.5) * bozulma * boyut * 0.3;

      ctx.save();
      ctx.translate(sutun * boyut + boyut / 2 + kayma, satir * boyut + boyut / 2 + kayma);
      ctx.rotate(aci);
      ctx.strokeRect(-boyut * 0.35, -boyut * 0.35, boyut * 0.7, boyut * 0.7);
      ctx.restore();
    }
  }
</script>

dosyayı tarayıcıda açın. üst satırlarda düzgün kareler, aşağı indikçe giderek dağılan bir ızgara görmelisiniz.

2. ne oluyor?

• bozulma, satır numarasından üretilen 0 ile 1 arasında bir sayı. üstte sıfır, altta bir.
• aci ve kayma, bu sayıyla çarpılan rastgele değerler: bozulma ne kadar büyükse, kare o kadar sapıyor.
• ctx.save() ve ctx.restore(), her karenin kendi dönüşümünü diğerlerinden izole ediyor.

3. tekrar üretilebilir yapın: tohum

sayfayı her yenilediğinizde farklı bir çizim çıkıyor. beğendiğiniz bir sonucu tekrar üretmek için Math.random() yerine, tohum alan küçük bir rastgele sayı üreticisi kullanın:

function tohum(a) {
  return function () {
    a |= 0; a = (a + 0x6D2B79F5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}
const rastgele = tohum(1968);   // aynı sayı, aynı çizim

sonra Math.random() yerine rastgele() yazın. artık 1968 yerine başka bir sayı vererek farklı “baskılar” alabilirsiniz; aynı sayıyı verdiğinizde aynı çizimi yeniden üretirsiniz. bu, üretken sanatın temel alışkanlığı.

4. kendiniz deneyin

1. kareleri daire ya da çizgi yapın.
2. bozulma değerini satır yerine sütuna bağlayın.
3. rengi ekleyin: ctx.strokeStyle = 'hsl(' + satir * 20 + ', 60%, 40%)'.
4. çizimi png olarak kaydedin: tuval.toDataURL('image/png').

sık sorulan sorular

yaratıcı kodlama için hangi dili öğrenmeliyim?

javascript (tarayıcıda hemen sonuç görmek için) ve processing/p5.js, başlamak için ideal. ileride python (pillow, numpy) ya da shader yazmaya geçebilirsiniz.

matematik bilmem gerekiyor mu?

ilk çizimler için hayır; sinüs, kosinüs ve rastgele sayılar yeterli. matematik, merak ettikçe geliyor.

bu yazıdaki çizimi nerede kullanabilirim?

istediğiniz yerde. çizimi kendi tohumunuzla üretip adınızla paylaşabilirsiniz.

kodla çizmenin “neden”ine dair daha fazlası için sol lewitt’ten algoritmalara yazısına bakın.