Membuat Gambar Berefek Catur (Pengolahan Citra)

[ms] - Sudah beberapa hari yang lalu mengobrak abrik algoritma akhirnya resolved juga. Membuat efek catur pada citra gambar memang membutuhkan sedikit waktu luang untuk memikirkanya. Tidak hanya merubah citra menjadi efek grayscale namun mampu memberikan efek grayscale yang dapat dibagi sesuai dengan jumlah kotak yang diinginkan.

Itulah tugas yang diberikan oleh dosen. Dengan memberikan numericdropdown pada interface, sehingga jumlah kotak dapat berubah sesuai nilai dengan nilai yang ada pada numericdropdown.

Kali ini saya akan mencoba berbagi algoritma dengan menggunakan bahasa pemrograman C# (C Sharp). Seperti kita ketahui bahwa citra memiliki satuan pixel, jadi sebelumnya kita harus membagi pixel tersebut dan memprosesnya. Sedikit penjelasan mengenai logika efek tersebut.

1. Logika pertama adalah membagi kotak menjadi sesuai dengan keinginan.
2. Mencari titik dari jarak lebar pixel.
3. Tandai bahwa area tersebut dengan nomor urut, ini digunakan untuk mempermudah menyeleksi efek. Yaitu efek grayscale ditandai nomor yang genap, sedangkan efek berwarna ditandai dengan nomor genap.

Mari kita,  rincikan satu satu.

• Buat objek baru dari citra.
  
  

  gambar2 = new Bitmap(gambar1);
  

  
  
• Membagi kotak berdasarkan lebar dan tinggi gambar buat 2 variabel untuk menyimpan jumlah piksel setiap kotak.
  
  

  int a = 4;
  double jum_w = gambar2.Width / a;
  double jum_h = gambar2.Height / a;
  

  
  
• Mencari titik dari jarak lebar piksel
  Logikanya adalah, lakukan perulangan sebanyak lebar dan tinggi gambar.
  Berikan kondisi dimana jika nilai perulangan itu dibagi dengan jum_w dan jum_h memiliki sisa bagi 0.
  
  

  for (int z = 0; z < gambar2.Height; z++) {
     if (z % jum_h == 0) {
        ......
     }
  }
  

  
  
• Tandai area tersebut dengan nomor urut, maka dibutuhkan variabel baru untuk memberikan tanda.
  
  

  int loop = 0;
  for (int z = 0; z < gambar2.Height; z++) {
     if (z % jum_h == 0) {
        loop++;
     }
  }
  

  
  Ambil area genap untuk dijadikan grayscale.
  
  

  int loop = 0;
  for (int z = 0; z < gambar2.Height; z++) {
     if (z % jum_h == 0) {
        loop++;
        if (loop % 2 == 0) {
           .......
        }
     }
  }
  

  
  Kondisi tersebut masih berlaku untuk perulangan tinggi gambar, gunakan logika tersebut unutk lebar gambar, sehingga menjadi seperti ini.
  
  

  for (int z = 0; z < gambar2.Height; z++) {
     if (z % jum_h == 0) {
        loop++;
        if (loop % 2 == 0) {
           for (i = 0; i < gambar2.Width; i++) {
              if (i % jum_w == 0) {
                  loop2++;
                  if (loop2 % 2 == 0) {
                     ..........
                  } 
              }
           } 
        }
     } 
  }
  

  
  
• Kita barusaja selesai memilah area efek gambar. Sekarang memberi efek gryscale terhadap pixel-pixel yan sudah diproses diatas.
  Ingat kita menggunakan sisa bagi 0 untuk genap dan sisa bagi 1 untuk ganjil.
  Sedangkan dalam pemberian efek, akan dilakukan perulangan dari nilai z dan i yang sudah di tandai.
  
  

  for (int z = 0; z < gambar2.Height; z++) {
     if (z % jum_h == 0) {
        loop++;
        if (loop % 2 == 0) {
           for (i = 0; i < gambar2.Width; i++) {
              if (i % jum_w == 0) {
                  loop2++;
                  if (loop2 % 2 == 0) {
  
                     for (int ii = i; ii < i+jum_w; ii++) {
                        if(ii >= i && ii < gambar2.Width) {
                           for (j = z; j < z + jum_h; j++) {
                              if(j >= z && j < gambar2.Height) {
                                 Color warna = gambar2.GetPixel(ii, j);
                                 rata = (warna.R + warna.G + warna.B) / 3;
                                 gambar2.SetPixel(ii, j, Color.FromArgb(rata, rata, rata));
                              } 
                           }
                        } 
                     }
  
                  } 
              }
           } 
        }
     } 
  }
  
  

  
  
• Bagaimana sekarang, ngertikan logikanya......
  Sekarang kita buat interfacenya :

Buat interfacenya seperti ini :

 toolbox-nya :
- button
- numericdropdown
- picturebox
- openfiledialog

Setelah itu klik 2x button maka keluar editor untuk menulis programnya. Berikut kode program secara lengkap :

public Bitmap gambar1, gambar2;
private void button1_Click(object sender, EventArgs e) {
   if (openFileDialog1.ShowDialog() == DialogResult.OK) {
      gambar1 = new Bitmap(openFileDialog1.FileName);
      pictureBox1.Image = Image.FromFile(openFileDialog1.FileName);
      pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
      pictureBox2.SizeMode = PictureBoxSizeMode.StretchImage;
      efek_catur();
   }
}

private void numericUpDown1_ValueChanged(object sender, EventArgs e) {
   efek_catur();
}

private void efek_catur() {
   int i, j, rata;
   int a = (int)numericUpDown1.Value;
   if (gambar1 != null) {
      gambar2 = new Bitmap(gambar1);
      double jum_w = gambar2.Width / a;
      double jum_h = gambar2.Height / a;
      int loop = 0;
      int loop2 = 0; 

      // GENAP 
      for (int z = 0; z < gambar2.Height; z++) {
         if (z % jum_h == 0) {
            loop++;
            if (loop % 2 == 0) { 
               for (i = 0; i < gambar2.Width; i++) {
                  if (i % jum_w == 0) {
                     loop2++;
                     if (loop2 % 2 == 0) { 
                        for (int ii = i; ii < i + jum_w; ii++) {
                           if (ii >= i && ii < gambar2.Width) {
                              for (j = z; j < z + jum_h; j++) {
                                 if (j >= z && j < gambar2.Height) {
                                    Color warna = gambar2.GetPixel(ii, j);
                                    rata = (warna.R + warna.G + warna.B) / 3;
                                    gambar2.SetPixel(ii, j, Color.FromArgb(rata, rata, rata));
                                 }
                              }
                           }
                        }
                     }
                  }
               } 
            }
         }
      }

      loop = 0;
      loop2 = 0;

      // GANJIL 
      for (int z = 0; z < gambar2.Height; z++) {
         if (z % jum_h == 0) {
            loop++;
            if (loop % 2 == 1) { 
               for (i = 0; i < gambar2.Width; i++) {
                  if (i % jum_w == 0) {
                     loop2++;
                     if (loop2 % 2 == 1) { 
                        for (int ii = i; ii < i + jum_w; ii++) {
                           if (ii >= i && ii < gambar2.Width) {
                              for (j = z; j < z + jum_h; j++) {
                                 if (j >= z && j < gambar2.Height) {
                                    Color warna = gambar2.GetPixel(ii, j);
                                    rata = (warna.R + warna.G + warna.B) / 3;
                                    gambar2.SetPixel(ii, j, Color.FromArgb(rata, rata, rata));
                                 }
                              }
                           }
                        }
                     }
                  }
               } 
            }
         }
      }
      pictureBox2.Image = gambar2;
   } else {
      MessageBox.Show("Pilih File terlebih dahulu!!");
   }
}

Gambar jadinya :

Saya sarankan untuk contoh gambar yang ingin diberi efek, usahakan memiliki piksel dibawah 200px. Dikarenakan dalam program masih menggunkaan perulangan. Hal ini menghindari agar komputer sobat tidak hang, karena memproses gambar yang besar.

Logika ini adalah hasil dari logika sendiri, jika masih ada yang kurang tepat, saya harapkan dari sahabat bloger untuk bisa memberikan saranya melalui komentar dibawah.

Salam sneyum dariku :)

Judul : Membuat Gambar Berefek Catur (Pengolahan Citra)
Rating : 4.5
Ditulis Oleh : sy@ms

Jika mengutip harap berikan link yang menuju ke artikel Membuat Gambar Berefek Catur (Pengolahan Citra) ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya