Wednesday, December 19, 2018

ANIMASI TATA SURYA MENGGUNAKAN PROCESSING


Assalamualaikum sobat visual.
Pada postingan ini kita akan belajar cara membuat jendela pada processing, menambahkan background dan membuat lingkar poros yang akan digunakan sebagai jalur evolusi planet-planet yang mengelilingi matahari. Postingan ini adalah lanjutan dari postingan kawan saya. Jadi, sebelum lanjut membaca artikel ini ada baiknya kawan semua baca terlebih dahulu postingan kawan saya pada link diakhir artikel.

Pembuatan jendela

Untuk membuat jendela pada aplikasi processing sobat semua dapat mengetikkan coding dibawah ini.

float theta = 0;
PImage gambar;
void setup ()
{
  size(1000,700);
  gambar = loadImage("download.jpg");
}

Sehingga akan tampil jendela dengan ukuran 1000*700 pixel seperti gambar dibawah

Menambah background

Untuk menambah background sobat harus menyimpan terlebih dahulu gambar yang akan dijadikan background dan ubah nama menjadi download .jpg atau sesuai nama yang diberikan pada program. Untuk coding nya dapat sobat lihat dibawah

  void draw(){
      background(0);
      
     image(gambar, 0, 0);
     image(gambar, 0, 165);
     image(gambar, 0, 330);
     image(gambar, 0, 495);
     image(gambar, 0, 530);
     
     image(gambar, 290, 0);
     image(gambar, 290, 165);
     image(gambar, 290, 330);
     image(gambar, 290, 495);
     image(gambar, 290, 530);
     
     image(gambar, 580, 0);
     image(gambar, 580, 165);
     image(gambar, 580, 330);
     image(gambar, 580, 495);
     image(gambar, 580, 530);
     
     image(gambar, 700, 0);
     image(gambar, 700, 165);
     image(gambar, 700, 330);
     image(gambar, 700, 495);
     image(gambar, 700, 530);
}

Setelah mengetik coding diatas, akan tampil seperti gambar dibawah

Membuat lingkar poros evolusi planet

Lingkar poros berfungsi untuk melihat jalur yang dilewati oleh planet untuk mengelilingi matahari, coding program nya dapat dilihat dibawah

 void setup ()
{
  size(1000,700); }
 void draw(){
      background(0);
 translate(width/2, height/2);
  noFill();
  stroke(#FFFFFF);
  ellipse(0,0,135,135);
  ellipse(0,0,180,180);
  ellipse(0,0,220,220);
  ellipse(0,0,255,255);
  ellipse(0,0,320,320);
  ellipse(0,0,420,420);
  ellipse(0,0,510,510);
  ellipse(0,0,610,610);
  ellipse(0,0,680,680);}

Gambar dibawah adalah hasil dari coding program diatas

Hasil akhir

Kalau semua program diatas digabungkan akan menghasilkan tampilan seperti dibawah

void setup ()
{
  size(1000,700);
  gambar = loadImage("download.jpg");
}

  void draw(){
      background(0);
      
     image(gambar, 0, 0);
     image(gambar, 0, 165);
     image(gambar, 0, 330);
     image(gambar, 0, 495);
     image(gambar, 0, 530);
     
     image(gambar, 290, 0);
     image(gambar, 290, 165);
     image(gambar, 290, 330);
     image(gambar, 290, 495);
     image(gambar, 290, 530);
     
     image(gambar, 580, 0);
     image(gambar, 580, 165);
     image(gambar, 580, 330);
     image(gambar, 580, 495);
     image(gambar, 580, 530);
     
     image(gambar, 700, 0);
     image(gambar, 700, 165);
     image(gambar, 700, 330);
     image(gambar, 700, 495);
     image(gambar, 700, 530);
     
  translate(width/2, height/2);
//lingkaran putaran
  noFill();
  stroke(#FFFFFF);
  ellipse(0,0,135,135);
  ellipse(0,0,180,180);
  ellipse(0,0,220,220);
  ellipse(0,0,255,255);
  ellipse(0,0,320,320);
  ellipse(0,0,420,420);
  ellipse(0,0,510,510);
  ellipse(0,0,610,610);
  ellipse(0,0,680,680); }


Untuk pembuatan planet dan gerak evolusinya dapat sobat baca di artikel kawan saya di akhir post ini.

Sekian yang bisa saya bagikan ke sobat semua, saya atas nama pribadi mohon maaf atas kesalahan dalam pembuatan artikel ini. Saran yang membangun sangat saya harapkan, silahkan beri komentar dibawah untuk membangun blog ini agar lebih baik kedepannya. Terimakasih telah membaca artikel ini. Salam visual sobat semua


Penjelasan mengenai tata surya dapat dilihat pada link dibawah
Klik disini

Untuk menggetahui  tujuan dan maafaat dari animasi tata surya ini silahkan klik link di bawah
Klik disini

Dan untuk tahap selanjutnya dari artikel ini dapat dilihat pada link berikut Klik disini

5 comments: