İçeriğe geç
SignalRGB

Renk Döngüsü

Bu eğitim, “Canvas ile Tanışın” bölümündeki renk döngüsü örneğinin bazı varyasyonlarını keşfedecektir. Animasyon ve bazı temel kullanıcı kontrolleri hakkında talimatlar içermektedir.

Temel Renk Döngüsü

Section titled “Temel Renk Döngüsü”

Bu efekt, tüm canvas’ı dolduran ve zamanla renk değiştiren bir dikdörtgenden oluşur. Kullanıcı renk geçişinin hızını düzenleyebilir.

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
  <!-- 1. Animasyon hızını düzenlemek için sayısal kaydırıcı oluştur -->
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
</head>


<body style="margin: 0; padding: 0;">
  <!-- 2. Body etiketi içinde canvas öğesi oluştur -->
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // 3. Canvas öğesini DOM'dan al
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    // 4. Script değişkenlerini bildir
    var width = 320;
    var height = 200;
    var hue = 0;


    // 5. Her kareyi işlemek için update fonksiyonunu yaz
    function update() {
    // 6. fillstyle'ı ayarla, hue zamanla değişken
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
    // 7. Yolu oluşturmak ve aynı komutta çizmek için fillRect yöntemini kullan
      ctx.fillRect(0, 0, width , height);
    // 8. Kullanıcının ayarladığı hıza göre hue'yu yinele. Daha iyi kullanıcı kaydırıcısı için küçük ayarlama yapıldı.
      hue+=(speed / 4);
    // 9. hsl ile kullanım için hue'yu 0-360 aralığıyla sınırla
      if (hue > 360) { hue = hue % 360; }
    // 10. Her güncellemenin sonunda update fonksiyonunu tekrar çağır
      window.requestAnimationFrame(update);
    }


    // 11. İlk update çağrısı
    window.requestAnimationFrame(update);
</script>

Sonuç renkli ama temel. Canvas ile çok daha fazlasını yapabiliriz!

Degradeli Renk Döngüsü

Section titled “Degradeli Renk Döngüsü”

Burada tek rengi zamanla değişen bir degrade ile değiştirdim. Kullanıcı renk geçişinin hızını ve her degrade noktasının diğerlerinden uzaklığını düzenleyebilir.

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
  <!-- 1. Degradenin renk genişliğini düzenlemek için sayısal kaydırıcı oluştur -->
    <meta property="distance" label="Color Distance" type="number" min="1" max="160" default="50">
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>


    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    var width = 320;
    var height = 200;


    // 2. Başlangıç hue değeri 0 olarak ayarlanır
    var hue1 = 0;


    function update() {


      // 3. Kullanıcının renk genişliğini ekleyerek degrade ile kullanmak üzere iki renk daha oluştur.
      hue1+=(speed / 4);
      hue2 = hue1 + distance;
      hue3 = hue2 + distance;
      // 4. Her hue değerini 0-360 aralığıyla sınırla
      if (hue1 > 360) { hue1 = hue1 % 360; }
      if (hue2 > 360) { hue2 = hue2 % 360; }
      if (hue3 > 360) { hue3 = hue3 % 360; }


      // 5. Doğrusal degrade oluştur. Benim degradem (0, 0)'dan başlıyor ve genişlik boyunca yatay olarak çevriliyor. Son 0'ı bir tam sayıyla değiştirmek degradeye dikey bir bileşen ekler.
      var grd = ctx.createLinearGradient(0, 0, width, 0);
      //6. Degrade renk duraklarını hue değerleriyle ayarla. En solda, ortada ve en sağda birer tane var.
      grd.addColorStop(0, `hsl(${hue1}, 100%, 50%)`);
      grd.addColorStop(.5, `hsl(${hue2}, 100%, 50%)`);
      grd.addColorStop(1, `hsl(${hue3}, 100%, 50%)`);


      // 7. fillstyle'ı ayarla ve dikdörtgeni çiz
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, width , height);




      window.requestAnimationFrame(update);
    }


    window.requestAnimationFrame(update);


</script>

Piksel Renk Döngüsü

Section titled “Piksel Renk Döngüsü”

Bu biraz karmaşıklaştı, bu yüzden matematik konusunda benimle sabırlı olun. Son renk döngümüz pikselleştirilmiş, yılan gibi ilerleyen bir renk taramasıdır.

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
    <meta property="distance" label="Color Distance" type="number" min="1" max="10" default="2">
  <!-- 1. Döngünün piksel yoğunluğunu düzenlemek için sayısal kaydırıcı oluştur -->
    <meta property="density" label="Pixel Density" type="number" min="0" max="2" default="1">
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>


    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    var width = 320;
    var height = 200;
    var hue = 0;


    function update() {


      // 2. Önceki karelerin üzerine yazmak için beyaz arka plan çiz
      ctx.fillStyle = "white"
      ctx.fillRect(0, 0, width, height)


      hue += (speed/4);
      if(hue > 360) {
        hue = hue % 360;
      }


      // 3. Kare boyutunu kullanıcı girdisinden hesapla. 320x200 ekran oranımıza göre 4 olası değerim 5px, 10px, 20px ve 40px karelerdir. Boyutu 10 * 2 ^ density denklemle hesaplayabilirsiniz.
      var size = 10 * Math.pow(2, density);
      // 4. Ekran piksel alanını (320 * 200) kare piksel alanına bölerek toplam kare sayısını hesapla.
      var goal = 64000 / (size * size);


      // 5. While döngüsü belirtilen kare sayısına ulaşana kadar çalışır
      var i = 0;
      while(i < goal){
        // 6. HTML5+JS'deki ızgara örneğiyle aynı şekilde satır ve sütun çarpanını hesapla
        var iRow = Math.floor(i / (width / size));
        var iCol = i % (width / size);
        // 7. Satır ve sütun çarpanına göre her kare için (x ,y) hesapla
        var ix = iCol * size;
        var iy = iRow * size;
        // 8. Her karenin değişken rengini kullanıcı girdisine göre hesapla. Her karenin bir sonrakinden farklı olması için hesaplamanıza indeksi eklediğinizden emin olun.
        var iHue = hue + (i * distance);
        if(iHue > 360){
          iHue = iHue % 360;
        }


        // 9. iRow hesaplaması tek sayıysa yatay çizim yönünü ters çevir.
        if(iRow % 2 != 0){
          ix = (width - size) - iCol * size;
        }


        ctx.beginPath();
        ctx.rect(ix, iy, size, size);


        ctx.fillStyle = `hsl(${iHue}, 100%, 50%)`;
        ctx.fill();
        i++;
      }


      window.requestAnimationFrame(update);
    }


    window.requestAnimationFrame(update);


</script>

Renk döngüleri üzerinde çalışmaktan keyif aldığınızı umuyorum! Sınıf tabanlı davranış ve bazı temel fizik içeren bir eğitim için Top Sınıfı sayfasına göz atın.