Membuat Animasi Bergerak Perkotaan Serta Lalu Lintas Menggunakan Processing





Assalamu'alaikum  Wr.Wb Teman Mahasiswa ,

Hai teman mahasiswa apa kabar semua ? semoga sehat selalu yaa dan selalu dilindungi oleh Allah SWT, amiinn :)


Saat saya masih berada di semester 4, saya beserta teman-teman sekelas disuruh oleh Dosen pengampu mata kuliah Grafika Komputer untuk membuat sebuah animasi bergerak menggunakan aplikasi Processing. Dan pada saat itulah terciptanya Animasi bergerak Perkotaan serta Lalu lintas menggunakan Processing. Yaa meskipun jelek tapi Alhamdulillah animasi tersebut adalah hasil keringat saya sendiri (maksudnya hasil buatan sendiri:D).


Dan apa itu Processing ?

Processing adalah sebuah aplikasi dan suatu bahasa pemograman yang digunakan untuk memprogram animasi,gambar dan interaksi yang bisa digunakan oleh pelajar,desainer,seniman atau hanya untuk sekedar menyalurkan hobi animasi.

Processing ini mengintegrasikan bahasa pemograman. Jadi intinya membuat sebuah gambar ataupun animasi menggunakan sebuah koding. Sebenarnya agak sedikit sulit, tapi kalau dipelajari lebih dalam, Insya Allah pasti mahir :)


Processing itu sendiri bebas untuk digunakan alias free download dan ngga bayar :D
Disini saya menggunakan Processing 2.2.1. Silahkan Teman Mahasiswa download aplikasi nya nanti saya sertakan link nya , Ok ? 

Oke tanpa berlama-lama, dibawah ini adalah source code membuat Animasi bergerak perkotaan serta lalu lintas menggunakan processing, sedott gann :D


//Membuat Animasi Bergerak Perkotaan Serta Lalu Lintas Menggunakan Processing

// ---------------------------------------------------------

//Catatans Mahasiswa :)

void setup()

{
size(800,600); 
}
void draw ()
{
  background (192,192,192);
  int d;
  d=second();

  
  noStroke();
//matahari
fill(0+10*d,0,0);
ellipse(25,20,50,50);


//awan
    
fill(95,158,160);
ellipse(90,0,70,45);
ellipse(140,0,85,65);
ellipse(190,10,70,45);

ellipse(290,0,70,45);
ellipse(340,5,85,65);
ellipse(390,0,70,45);

ellipse(410,50,70,45);
ellipse(400,7,85,65);
ellipse(420,0,70,45);

ellipse(500,5,70,45);
ellipse(550,0,85,65);
ellipse(600,0,70,45);

ellipse(650,0,70,45);
ellipse(750,5,85,65);
ellipse(730,0,70,45);


//hujan
fill(255);
rect(400,5+20*d,1,10);
rect(100,10+21*d,1,10);
rect(110,15+22*d,1,10);
rect(130,17+20*d,1,10);
rect(10,10+25*d,1,10);
rect(15,12+22*d,1,10);
rect(20,25+20*d,1,10);
rect(13,80+22*d,1,10);
rect(197,74+22*d,1,10);
rect(118,15+22*d,1,10); 
rect(114,46+22*d,1,10);
rect(144,73+66*d,15,10);
rect(109,12+72*d,1,10);
rect(753,85+32*d,1,10);
rect(649,25+22*d,1,10);
rect(795,75+32*d,1,10);
rect(578,35+22*d,1,10);
rect(596,15+22*d,1,10);
rect(571,15+5*d,1,10);
rect(611,15+7*d,1,10);
rect(711,17+5*d,1,10);
rect(755,15+5*d,1,10);
rect(698,11+50*d,1,10);
rect(689,13+5*d,1,10);
rect(700,15+5*d,1,10);
rect(150,25+10*d,1,10);
rect(170,35+25*d,1,10);
rect(181,17+5*d,1,10);
rect(210,18+5*d,1,10);
rect(210,11+52*d,1,10);
rect(220,11+5*d,1,10);
rect(250,35+25*d,1,10);
rect(280,31+21*d,1,10);
rect(292,42+12*d,1,10);
rect(310,53+15*d,1,10);
rect(340,18+21*d,1,10);
rect(355,19+23*d,1,10);
rect(719,21+25*d,1,10);
rect(758,20+7*d,1,10);
rect(361,25+12*d,1,10);
rect(367,20+21*d,1,10);
rect(375,12+5*d,1,10);
rect(410,100+12*d,1,10);
rect(500,110+17*d,1,10);
rect(456,105+57*d,1,10);
rect(501,130+5*d,1,10);
rect(510,165+12*d,1,10);
rect(530,172+41*d,1,10);
rect(566,190+56*d,1,10);

//rumput
noStroke();
fill(34,139,34);
triangle(690,360,675,420,705,420);
triangle(720,360,705,420,735,420);
triangle(750,360,735,420,765,420);
triangle(780,360,765,420,795,420);
  
//jalan tol
noStroke();
fill(0);
rect(0,450,350,100);
rect(350,320,150,600);
rect(450,450,350,100);

fill(255,255,255);
rect(0,490,20,10);
rect(50,490,20,10);
rect(100,490,20,10);
rect(150,490,20,10);
rect(200,490,20,10);
rect(250,490,20,10);

rect(280,450,5,100);
rect(300,450,5,100);
rect(320,450,5,100);

rect(420,320,10,20);
rect(420,360,10,20);

rect(380,400,100,5);
rect(370,420,120,5);
rect(350,440,150,5);

rect(550,490,20,10);
rect(600,490,20,10);
rect(650,490,20,10);
rect(700,490,20,10);
rect(750,490,20,10);
rect(800,490,20,10);

rect(500,450,5,100);
rect(520,450,5,100);
rect(540,450,5,100);

rect(380,580,3,50);
rect(400,580,3,50);
rect(420,580,3,50);
rect(440,580,3,50);
rect(460,580,3,50);
rect(480,580,3,50);
rect(360,580,3,50);


//mobil

fill(0,255,0);
rect(20+30*d,510,80,30);

fill(255,255,0);
rect(25+30*d,510,20,10);

fill(255,255,0);
rect(55+30*d,510,20,10);

fill(124,202,0);
rect(80+30*d,510,20,15);

ellipse(40+30*d,540,10,10);
ellipse(80+30*d,540,10,10);

fill(255,255,0);
rect(20+50*d,510,80,30);

fill(255,255,0);
rect(25+50*d,510,20,10);

fill(200,255,0);
rect(55+50*d,510,20,10);

fill(124,202,0);
rect(80+50*d,510,20,15);

ellipse(40+50*d,540,10,10);
ellipse(80+50*d,540,10,10);

fill(255,0,0);
rect(20+35*d,510,80,30);

fill(255,0,0);
rect(25+35*d,510,20,10);

fill(255,0,0);
rect(55+35*d,510,20,10);

fill(124,202,0);
rect(80+35*d,510,20,15);

ellipse(40+35*d,540,10,10);
ellipse(80+35*d,540,10,10);


fill(100,255,250);
rect(20+25*d,510,80,30);

fill(255,202,0);
rect(80+25*d,510,20,15);

fill(255,255,0);
rect(50+25*d,510,20,10);

fill(255,255,0);
rect(25+25*d,510,20,10);

ellipse(40+25*d,540,10,10);
ellipse(80+25*d,540,10,10);


fill(255,255,250);
rect(520-15*d,455,80,30);

fill(255,202,255);
rect(520-15*d,455,20,15);

fill(255,255,0);
rect(550-15*d,455,20,10);

fill(255,255,0);
rect(525-15*d,455,20,10);

ellipse(580-15*d,485,10,10);
ellipse(540-15*d,485,10,10);

fill(255,255,100);
rect(520-75*d,455,80,30);

fill(215,5,255);
rect(520-75*d,455,20,15);

fill(220,255,255);
rect(550-75*d,455,20,10);

fill(255,255,0);
rect(525-75*d,455,20,10);

ellipse(580-75*d,485,10,10);
ellipse(540-75*d,485,10,10);

//motor

fill(255,0,0);
rect(20+75*d,530,50,10);
rect(60+75*d,500,10,30);
rect(50+75*d,500,10,10);

ellipse(30+75*d,540,10,10);
ellipse(60+75*d,540,10,10);

fill(255,0,0);
rect(510-32*d,475,30,10);
rect(510-32*d,445,5,30);
rect(500-32*d,440,15,5);


ellipse(535-32*d,485,10,10);
ellipse(515-32*d,485,10,10);

//lampu lalu lintas
fill(0);
rect(280,400,60,35);

fill(0+5*d,0,0);
ellipse(290,420,15,15);

fill(255+8*d,255,0);
ellipse(310,420,15,15);

fill(0,255+10*d,0);
ellipse(330,420,15,15);

//gedung

fill(0);
rect(340,95,220,220);
rect(360,75,200,240);
rect(565,95,100,220);
rect(585,75,90,240);
rect(135,95,200,220);
rect(95,75,80,240);
rect(0,115,90,200);
rect(670,105,90,210);
rect(710,95,90,220);


//jendela gedung

fill(255,255,0+0,5*d);
rect(370,130,30,30);
rect(370,190,30,30);

fill(255,255,0+0,3*d);
rect(370,250,30,30);

fill(255,255,0+0,1*d);
rect(420,130,30,30);
rect(420,190,30,30);
rect(420,250,30,30);

fill(255,255,0+0,3*d);
rect(470,130,30,30);

fill(255,255,0+0,5*d);
rect(520,190,30,30);
rect(470,250,30,30);

fill(255,255,0+0,7*d);
rect(20,130,30,30);
rect(40,190,30,30);
rect(50,250,30,30);
rect(60,130,30,30);

fill(255,255,0+0,3*d);
rect(100,190,30,30);
rect(140,250,30,30);
rect(180,130,30,30);
rect(210,190,30,30);
rect(240,250,30,30);

fill(255,255,0+0,11*d);
rect(270,250,30,30);
rect(200,250,30,30);

fill(255,255,0+0,13*d);
rect(370,130,30,30);
rect(370,190,30,30);
rect(370,250,30,30);

fill(255,255,0+0,6*d);
rect(580,130,30,30);
rect(620,190,30,30);
rect(640,250,30,30);

fill(255,255,0+0,9*d);
rect(675,130,30,30);
rect(675,190,30,30);
rect(675,250,30,30);
rect(720,200,30,30);

fill(255,255,0+0,10*d);
rect(720,130,30,30);
rect(720,200,30,30);
rect(770,250,30,30);

fill(255,255,0+0,11*d);
rect(600,250,30,30);
rect(780,190,30,30);
rect(420,250,30,30);


}

  


Pastikan Teman Mahasiswa mengcopy-paste semua code nya dan silahkan di "Run" .

Silahkan teman mahasiswa lebih mempercantik kembali dengan kreativitas teman-teman mahasiswa yaa ., :)


Jika ada kesalahan atau kekurangan dalam penyampaian tutorial maupun perkataan yang kurang jelas, kami mohon maaf sebesar-besarnya.

Jika ada kekurangan, jangan sungkan untuk berkomentar yaa.

Komentar kalian sangat berarti bagi perkembangan Blog ini , Terima kasih .. :)


Jangan lupa di share yaa :D wkwk
#Salam Teman Mahasiswa


Selamat mencoba dan semoga berhasil ;)
Untuk Aplikasi Processing nya bisa di ( Download Disini :) )


Wassalamu'alaikum wr.wb
Previous
Next Post »