Menggambar Segi-N Beraturan dengan SDL_RenderDrawLines ~ Pemrograman dan Teknologi

Untuk menampilkan segi-N beraturan, kita bisa menggunakan sekumpulan garis yang diatur posisinya dengan cos dan sin. Cos dan sin yang dikalikan dengan radius lingkaran yang diinginkan digunakan untuk mendapatkan koordinat x dan y yang jaraknya sama dari titik pusat lingkaran.

Kita bisa menggunakan SDL_RenderDrawLines dan array dengan tipe data SDL_Point untuk menggambar sisi-sisi segi-N ataupun poligon. Selain itu, kita sebenarnya bisa juga menggunakan SDL_RenderDrawLine (tanpa s). Tapi, kali ini kita hanya akan menggunakan SDL_RenderDrawLines.

SDL_Point adalah struct yang hanya memiliki x dan y sebagai anggotanya. Kita bisa menggunakan perulangan untuk menghubungkan tiap titik yang dihasilkan dari rumus cos dan sin. Kalian akan memerlukan nilai PI (π) yang dibagi dengan 180 karena rumus tersebut menggunakan sudut yang satuannya radian. Untuk yg belum tahu, 1π radian sama dengan 180 derajat.

#include <math.h>
#include <SDL2/SDL.h>

#define deg2rad 3.14159265/180
#define segi 5
int main(int argc, char* args[]){
    SDL_Window* window = NULL;
    SDL_Event evt;
    SDL_Point ptitik[360];
    int i, xpos, ypos;
    float derajat, putaran, radian, ukuran;

    if( SDL_Init( SDL_INIT_VIDEO ) < 0){
        printf( "Error: %s\n", SDL_GetError() );
    }else{
        window = SDL_CreateWindow( "SDLku", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 640, 480, SDL_WINDOW_SHOWN );
        if( window == NULL ){
            printf( "Error : %s", SDL_GetError() );
        }else{
            SDL_Renderer *trender = SDL_CreateRenderer( window, -1, SDL_RENDERER_ACCELERATED);

            derajat=0;
            putaran=360/segi;
            ukuran=200;
            xpos=200;
            ypos=200;
            for(i=0;i<segi;i++){
                radian=derajat*deg2rad;
                ptitik[i].x=cos(radian)*ukuran+xpos;
                ptitik[i].y=sin(radian)*ukuran+ypos;
                derajat+=putaran;
            }

            ptitik[i].x=cos(0)*ukuran+xpos;
            ptitik[i].y=sin(0)*ukuran+ypos;

            while(evt.type!=SDL_QUIT){
                while(SDL_PollEvent(&evt)){
                }
                SDL_SetRenderDrawColor(trender, 0xFF, 0xFF, 0xFF, 0xFF);
                SDL_RenderClear(trender);

                SDL_SetRenderDrawColor(trender, 0xFF, 0x00, 0xFF, 0xFF);

                SDL_RenderDrawLines(trender, ptitik, segi+1);
                SDL_RenderPresent(trender);
            }
        }
    }

    SDL_DestroyWindow( window );
    SDL_Quit();

    return 0;
}

Lingkaran dan Segi Lainnya

Untuk mengubah menjadi bentuk segi lainnya, ubah nilai konstanta segi pada kode program di atas. Kalau kalian memperbanyak titik sudut atau seginya, maka segi-n tersebut akan bisa terlihat seperti lingkaran. Coba ubah nilai segi menjadi 90 atau 360. Hasilnya seharusnya seperti di bawah ini.

Btw, bagian yang digunakan untuk mencari koordinat dengan radian adalah bagian di bawah ini.

ptitik[i].x=cos(radian)*ukuran+xpos;
ptitik[i].y=sin(radian)*ukuran+ypos;

Kalian bisa mengganti posisi titik tengahnya dengan mengganti nilai xpos dan ypos. Ukuran atau radiusnya juga bisa kalian ganti dengan mengubah nilai variabel ukuran.

Sin dan cos yang digunakan untuk menghitung koordinat x dan y bisa kalian tukar. Pertukaran sin dan cos akan mengubah titik 0 derajat atau titik pertama segi-N dari kanan ke bawah.

ptitik[i].x=sin(radian)*ukuran+xpos;
ptitik[i].y=cos(radian)*ukuran+ypos;

Kalau hasilnya tidak sesuai yang saya tunjukkan, kalian bisa tanyakan di komentar. Saya akan menjawabnya kalau sempat dan kebetulan membacanya.

Cara Lain Menggambar Lingkaran

Selain dengan sin dan cos, kalian juga bisa menggunakan teorema pythagoras untuk menggambar lingkaran. Kalian bisa menggunakan koordinat radius dan titik x sebagai acuan untuk memperkirakan titik y dengan teorema pythagoras.

#include <math.h>
#include <SDL2/SDL.h>

int main(int argc, char* args[]){
    SDL_Window* window = NULL;
    SDL_Event evt;
    SDL_Point ptitik[1000];
    int i, xpos, ypos, ukuran, ty;

    if( SDL_Init( SDL_INIT_VIDEO ) < 0){
        printf( "Error: %s\n", SDL_GetError() );
    }else{
        window = SDL_CreateWindow( "SDLku", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 640, 480, SDL_WINDOW_SHOWN );
        if( window == NULL ){
            printf( "Error : %s", SDL_GetError() );
        }else{
            SDL_Renderer *trender = SDL_CreateRenderer( window, -1, SDL_RENDERER_ACCELERATED);

            ukuran=200;
            xpos=200;
            ypos=200;
            for(i=0;i<=ukuran;i++){
                ty=sqrt(ukuran*ukuran-i*i);
                ptitik[i].x=xpos+i;
                ptitik[i].y=ypos+ty;
  
                ptitik[ukuran+ukuran-i].x=xpos+i;
                ptitik[ukuran+ukuran-i].y=ypos-ty;
  
                ptitik[ukuran+ukuran+i].x=xpos-i;
                ptitik[ukuran+ukuran+i].y=ypos-ty;
  
                ptitik[4*ukuran-i].x=xpos-i;
                ptitik[4*ukuran-i].y=ypos+ty;
            }

            while(evt.type!=SDL_QUIT){
                while(SDL_PollEvent(&evt)){
                }
                SDL_SetRenderDrawColor(trender, 0xFF, 0xFF, 0xFF, 0xFF);
                SDL_RenderClear(trender);

                SDL_SetRenderDrawColor(trender, 0xFF, 0x00, 0xFF, 0xFF);

                SDL_RenderDrawLines(trender, ptitik, 4*ukuran);
                SDL_RenderPresent(trender);
            }
        }
    }

    SDL_DestroyWindow( window );
    SDL_Quit();

    return 0;
}

Hasilnya hampir sama dengan kode program yang menggunakan sin dan cos. Bedanya, array yang dibutuhkan akan lebih banyak kalau selisih koordinat titik x yang dijadikan acuan cuma satu. Bagian dari kode program di atas yang menggunakan teorema pythagoras, yaitu :

ty=sqrt(ukuran*ukuran-i*i);
ptitik[i].x=xpos+i;
ptitik[i].y=ypos+ty;
  
ptitik[ukuran+ukuran-i].x=xpos+i;
ptitik[ukuran+ukuran-i].y=ypos-ty; 
  
ptitik[ukuran+ukuran+i].x=xpos-i;
ptitik[ukuran+ukuran+i].y=ypos-ty;
  
ptitik[4*ukuran-i].x=xpos-i;
ptitik[4*ukuran-i].y=ypos+ty;

Bagian tersebut diletakkan dalam perulangan dan hasilnya disimpan dalam array yang ukurannya minimal lebih dari "4x+1", dengan x sebagai radius lingkaran.

Kalian juga bisa menjadikan koordinat titik y sebagai acuannya, dan hasilnya akan sama saja.

#include <math.h>
#include <SDL2/SDL.h>

int main(int argc, char* args[]){
    SDL_Window* window = NULL;
    SDL_Event evt;
    SDL_Point ptitik[1000];
    int i, xpos, ypos, ukuran, tx;

    if( SDL_Init( SDL_INIT_VIDEO ) < 0){
        printf( "Error: %s\n", SDL_GetError() );
    }else{
        window = SDL_CreateWindow( "SDLku", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 640, 480, SDL_WINDOW_SHOWN );
        if( window == NULL ){
            printf( "Error : %s", SDL_GetError() );
        }else{
            SDL_Renderer *trender = SDL_CreateRenderer( window, -1, SDL_RENDERER_ACCELERATED);

            ukuran=200;
            xpos=200;
            ypos=200;
            for(i=0;i<=ukuran;i++){
            
                tx=sqrt(ukuran*ukuran-i*i);
                ptitik[i].x=xpos+tx;
                ptitik[i].y=ypos+i;
        
                ptitik[ukuran+ukuran-i].x=xpos-tx;
                ptitik[ukuran+ukuran-i].y=ypos+i;
        
                ptitik[ukuran+ukuran+i].x=xpos-tx;
                ptitik[ukuran+ukuran+i].y=ypos-i;
        
                ptitik[4*ukuran-i].x=xpos+tx;
                ptitik[4*ukuran-i].y=ypos-i;
            }

            while(evt.type!=SDL_QUIT){
                while(SDL_PollEvent(&evt)){
                }
                SDL_SetRenderDrawColor(trender, 0xFF, 0xFF, 0xFF, 0xFF);
                SDL_RenderClear(trender);

                SDL_SetRenderDrawColor(trender, 0xFF, 0x00, 0xFF, 0xFF);

                SDL_RenderDrawLines(trender, ptitik, 4*ukuran);
                SDL_RenderPresent(trender);
            }
        }
    }

    SDL_DestroyWindow( window );
    SDL_Quit();

    return 0;
}

Menggambar Segi-N Beraturan dengan SDL_RenderDrawLines

Lingkaran dan Segi Lainnya

Cara Lain Menggambar Lingkaran

1 comments: