Membuat Animasi Bergerak mengunakan PROCESSSING
Assalamualaikum saudara saudari ku , kali ini saya “Dwi Bagus Frasetia” akan membagi kan sebuah contoh membuat animasi bergerak mengunakan aplikasi “PROCESSING” yang biasa di pelajari di mata kuliah Grafika Komputer.
Dan pada kesempatan kali ini saya akan membagikan contoh animasi Rumah pada film UP yang kita ketahui rumahnya bisa terbang.
lansung saja berikut codingnya :
void setup()
{
size(800,500);
background(#08D8FF);
}
void draw ()
{
int d,m;
d=second();
m=minute();
//bantuan
fill(#08D8FF);
rect(0,0,800,500);
//matohari
noStroke();//tanpa list
fill(#FFCE08);//warna
ellipse(400+1*m,230-1*m,90,90);//bulat
//awan
noStroke();
fill(#A5A5A5);
ellipse(100,100,70,45);
ellipse(150,100,85,65);
ellipse(200,100,70,45);
fill(#A5A5A5);
ellipse(600,100,70,45);
ellipse(650,100,85,65);
ellipse(700,100,70,45);
//gunuang
strokeWeight(2);
fill(#045203);
arc(350,380,500,300,(180*PI)/180,(360*PI)/180);
fill(#045203);
arc(50,380,350,350,(180*PI)/180,(360*PI)/180);
fill(#045203);
arc(700,380,400,350,(180*PI)/180,(360*PI)/180);
//tanahhijau
noStroke();
fill(#02B71E);
rect(0,440,800,80);
//createbydwibagusfrasetia
//aspal
noStroke();
fill(00);
rect(0,380,800,80);
strokeWeight(3);
stroke(250);
line(20,415,40,415);
line(60,415,80,415);
line(100,415,120,415);
line(140,415,160,415);
line(180,415,200,415);
line(220,415,240,415);
line(260,415,280,415);
line(300,415,320,415);
line(340,415,360,415);
line(380,415,400,415);
line(420,415,440,415);
line(460,415,480,415);
line(500,415,520,415);
line(540,415,560,415);
line(580,415,600,415);
line(620,415,640,415);
line(660,415,680,415);
line(700,415,720,415);
line(740,415,760,415);
line(780,415,800,415);
//oto1
fill(#120B83);
rect(20+15*d,340,100,50);
fill(#181629);
rect(120+15*d,355,40,35);
fill(255);
rect(130+15*d,363,20,10);
//roda mobil
fill(#55545D);
ellipse(45+15*d,390,30,30);
ellipse(120+15*d,390,30,30);
//oto2
fill(#A00303);
rect(780-15*d,380,100,50);
fill(#181629);
rect(740-15*d,395,40,35);
fill(255);
rect(750-15*d,403,20,10);
//roda mobil
fill(#55545D);
ellipse(785-15*d,430,30,30);
ellipse(860-15*d,430,30,30);
//rumah up
strokeWeight(1);
fill(#88898B);
quad(320,290-2*d,380,290-2*d,390,310-2*d,310,310-2*d);
//atap2
stroke(2);
triangle(360,280-2*d,380,310-2*d,340,310-2*d);
//jendela atap2
stroke(2);
rect(355,292-2*d,10,15);
line(355,299-2*d,365,299-2*d);
//atap3
stroke(2);
triangle(335,285-2*d,345,295-2*d,325,295-2*d);
rect(330,295-2*d,10,5);
//cerobong
stroke(2);
fill(#937403);
quad(345,280-2*d,350,280-2*d,350,290-2*d,345,290-2*d);
//dinding
stroke(2);
fill(#AF840C);
quad(315,310-2*d,385,310-2*d,385,340-2*d,315,340-2*d);
fill(#075EE5);
quad(340,310-2*d,380,310-2*d,380,340-2*d,340,340-2*d);
fill(#1CBC08);
quad(350,310-2*d,370,310-2*d,370,340-2*d,350,340-2*d);
//jendela1
fill(#CBC8B9);
rect(352.5,315-2*d,15,20);
line(352.5,325-2*d,367.5,325-2*d);
//jendela2
rect(318,320-2*d,7.5,10);
line(352.5,325-2*d,367.5,325-2*d);
//pintu
fill(#6C5A00);
rect(330,320-2*d,7.5,20);
rect(331,322-2*d,5.5,6);
rect(331,332-2*d,5.5,6);
ellipse(332,330-2*d,2.5,2.5);
//pondasi
fill(#88898B);
rect(315,340-2*d,70,5);
//talibalon
line(325,240-2*d,345,280-2*d);
line(305,240-2*d,345,280-2*d);
line(345,240-2*d,345,280-2*d);
line(365,240-2*d,345,280-2*d);
line(385,240-2*d,345,280-2*d);
//balon
fill(#FF0000);
ellipse(330,120-2*d,20,20);
fill(#00FFDF);
ellipse(335,130-2*d,20,20);
fill(#FFF700);
ellipse(330,140-2*d,20,20);
fill(#03FF00);
ellipse(335,150-2*d,20,20);
fill(#FF0080);
ellipse(330,160-2*d,20,20);
fill(#FF0000);
ellipse(335,170-2*d,20,20);
fill(#03FF00);
ellipse(330,180-2*d,20,20);
fill(#FFFFFF);
ellipse(335,190-2*d,20,20);
fill(#018E4B);
ellipse(325,200-2*d,20,20);
fill(#03FF00);
ellipse(330,210-2*d,20,20);
fill(#FF0000);
ellipse(325,220-2*d,20,20);
fill(#FFFFFF);
ellipse(330,230-2*d,20,20);
fill(#FF0080);
ellipse(325,240-2*d,20,20);
fill(#052CFF);
ellipse(295,130-2*d,20,20);
fill(#00FFDF);
ellipse(290,140-2*d,20,20);
fill(#03FF00);
ellipse(295,150-2*d,20,20);
fill(#9C12FA);
ellipse(290,160-2*d,20,20);
fill(#7C6402);
ellipse(295,170-2*d,20,20);
fill(#00FFDF);
ellipse(290,180-2*d,20,20);
fill(#052CFF);
ellipse(295,190-2*d,20,20);
fill(#FFF700);
ellipse(285,200-2*d,20,20);
fill(#FFFFFF);
ellipse(290,210-2*d,20,20);
fill(#FF0000);
ellipse(285,220-2*d,20,20);
fill(#052CFF);
ellipse(290,230-2*d,20,20);
fill(#110FCE);
ellipse(310,120-2*d,20,20);
fill(#FF0080);
ellipse(315,130-2*d,20,20);
fill(#052CFF);
ellipse(310,140-2*d,20,20);
fill(#0F38FA);
ellipse(315,150-2*d,20,20);
fill(#00FFDF);
ellipse(310,160-2*d,20,20);
fill(#03FF00);
ellipse(315,170-2*d,20,20);
fill(#110FCE);
ellipse(310,180-2*d,20,20);
fill(#052CFF);
ellipse(315,190-2*d,20,20);
fill(#110FCE);
ellipse(305,200-2*d,20,20);
fill(#FFF700);
ellipse(310,210-2*d,20,20);
fill(#FF0080);
ellipse(305,220-2*d,20,20);
fill(#7C6402);
ellipse(310,230-2*d,20,20);
fill(#110FCE);
ellipse(305,240-2*d,20,20);
fill(#FFF700);
ellipse(275,150-2*d,20,20);
fill(#052CFF);
ellipse(270,160-2*d,20,20);
fill(#FF0080);
ellipse(275,170-2*d,20,20);
fill(#FFF700);
ellipse(270,180-2*d,20,20);
fill(#052CFF);
ellipse(275,190-2*d,20,20);
fill(#03FF00);
ellipse(265,200-2*d,20,20);
fill(#FF0080);
ellipse(270,210-2*d,20,20);
fill(#FFF700);
ellipse(365,120-2*d,20,20);
fill(#9C12FA);
ellipse(370,130-2*d,20,20);
fill(#31CE0F);
ellipse(365,140-2*d,20,20);
fill(#7C6402);
ellipse(370,150-2*d,20,20);
fill(#FF0080);
ellipse(365,160-2*d,20,20);
fill(#03FF00);
ellipse(370,170-2*d,20,20);
fill(#31CE0F);
ellipse(365,180-2*d,20,20);
fill(#110FCE);
ellipse(370,190-2*d,20,20);
fill(#31CE0F);
ellipse(360,200-2*d,20,20);
fill(#FFF700);
ellipse(365,210-2*d,20,20);
fill(#110FCE);
ellipse(360,220-2*d,20,20);
fill(#00FFDF);
ellipse(365,230-2*d,20,20);
fill(#31CE0F);
ellipse(360,240-2*d,20,20);
fill(#110FCE);
ellipse(385,120-2*d,20,20);
fill(#FFF700);
ellipse(390,130-2*d,20,20);
fill(#FFF700);
ellipse(385,140-2*d,20,20);
fill(#FFFFFF);
ellipse(390,150-2*d,20,20);
fill(#110FCE);
ellipse(385,160-2*d,20,20);
fill(#31CE0F);
ellipse(390,170-2*d,20,20);
fill(#03FF00);
ellipse(385,180-2*d,20,20);
fill(#7C6402);
ellipse(390,190-2*d,20,20);
fill(#FF0000);
ellipse(380,200-2*d,20,20);
fill(#00FFDF);
ellipse(395,210-2*d,20,20);
fill(#052CFF);
ellipse(380,220-2*d,20,20);
fill(#03FF00);
ellipse(395,230-2*d,20,20);
fill(#110FCE);
ellipse(380,240-2*d,20,20);
fill(#7C6402);
ellipse(405,140-2*d,20,20);
fill(#110FCE);
ellipse(410,150-2*d,20,20);
fill(#03FF00);
ellipse(405,160-2*d,20,20);
fill(#110FCE);
ellipse(410,170-2*d,20,20);
fill(#FFF700);
ellipse(405,180-2*d,20,20);
fill(#FFF700);
ellipse(410,190-2*d,20,20);
fill(#9C12FA);
ellipse(400,200-2*d,20,20);
fill(#FFFFFF);
ellipse(415,210-2*d,20,20);
fill(#03FF00);
ellipse(400,220-2*d,20,20);
fill(#7C6402);
ellipse(345,120-2*d,20,20);
fill(#110FCE);
ellipse(350,130-2*d,20,20);
fill(#9C12FA);
ellipse(345,140-2*d,20,20);
fill(#110FCE);
ellipse(350,150-2*d,20,20);
fill(#7C6402);
ellipse(345,160-2*d,20,20);
fill(#052CFF);
ellipse(350,170-2*d,20,20);
fill(#FFFFFF);
ellipse(345,180-2*d,20,20);
fill(#FF0080);
ellipse(350,190-2*d,20,20);
fill(#FF0000);
ellipse(340,200-2*d,20,20);
fill(#03FF00);
ellipse(345,210-2*d,20,20);
fill(#FFF700);
ellipse(340,220-2*d,20,20);
fill(#00FFDF);
ellipse(345,230-2*d,20,20);
fill(#FF0000);
ellipse(340,240-2*d,20,20);
//pohon
noStroke();
fill(#5F3603);
rect(32,400,10,80);
fill(#038301);
triangle(40,350,60,400,10,400);
triangle(40,375,60,425,10,425);
triangle(40,400,60,450,10,450);
fill(#5F3603);
rect(232,400,10,80);
fill(#038301);
triangle(240,350,260,400,210,400);
triangle(240,375,260,425,210,425);
triangle(240,400,260,450,210,450);
fill(#5F3603);
rect(432,400,10,80);
fill(#038301);
triangle(440,350,460,400,410,400);
triangle(440,375,460,425,410,425);
triangle(440,400,460,450,410,450);
fill(#5F3603);
rect(732,400,10,80);
fill(#038301);
triangle(740,350,760,400,710,400);
triangle(740,375,760,425,710,425);
triangle(740,400,760,450,710,450);
}
{
size(800,500);
background(#08D8FF);
}
void draw ()
{
int d,m;
d=second();
m=minute();
//bantuan
fill(#08D8FF);
rect(0,0,800,500);
//matohari
noStroke();//tanpa list
fill(#FFCE08);//warna
ellipse(400+1*m,230-1*m,90,90);//bulat
//awan
noStroke();
fill(#A5A5A5);
ellipse(100,100,70,45);
ellipse(150,100,85,65);
ellipse(200,100,70,45);
fill(#A5A5A5);
ellipse(600,100,70,45);
ellipse(650,100,85,65);
ellipse(700,100,70,45);
//gunuang
strokeWeight(2);
fill(#045203);
arc(350,380,500,300,(180*PI)/180,(360*PI)/180);
fill(#045203);
arc(50,380,350,350,(180*PI)/180,(360*PI)/180);
fill(#045203);
arc(700,380,400,350,(180*PI)/180,(360*PI)/180);
//tanahhijau
noStroke();
fill(#02B71E);
rect(0,440,800,80);
//createbydwibagusfrasetia
//aspal
noStroke();
fill(00);
rect(0,380,800,80);
strokeWeight(3);
stroke(250);
line(20,415,40,415);
line(60,415,80,415);
line(100,415,120,415);
line(140,415,160,415);
line(180,415,200,415);
line(220,415,240,415);
line(260,415,280,415);
line(300,415,320,415);
line(340,415,360,415);
line(380,415,400,415);
line(420,415,440,415);
line(460,415,480,415);
line(500,415,520,415);
line(540,415,560,415);
line(580,415,600,415);
line(620,415,640,415);
line(660,415,680,415);
line(700,415,720,415);
line(740,415,760,415);
line(780,415,800,415);
//oto1
fill(#120B83);
rect(20+15*d,340,100,50);
fill(#181629);
rect(120+15*d,355,40,35);
fill(255);
rect(130+15*d,363,20,10);
//roda mobil
fill(#55545D);
ellipse(45+15*d,390,30,30);
ellipse(120+15*d,390,30,30);
//oto2
fill(#A00303);
rect(780-15*d,380,100,50);
fill(#181629);
rect(740-15*d,395,40,35);
fill(255);
rect(750-15*d,403,20,10);
//roda mobil
fill(#55545D);
ellipse(785-15*d,430,30,30);
ellipse(860-15*d,430,30,30);
//rumah up
strokeWeight(1);
fill(#88898B);
quad(320,290-2*d,380,290-2*d,390,310-2*d,310,310-2*d);
//atap2
stroke(2);
triangle(360,280-2*d,380,310-2*d,340,310-2*d);
//jendela atap2
stroke(2);
rect(355,292-2*d,10,15);
line(355,299-2*d,365,299-2*d);
//atap3
stroke(2);
triangle(335,285-2*d,345,295-2*d,325,295-2*d);
rect(330,295-2*d,10,5);
//cerobong
stroke(2);
fill(#937403);
quad(345,280-2*d,350,280-2*d,350,290-2*d,345,290-2*d);
//dinding
stroke(2);
fill(#AF840C);
quad(315,310-2*d,385,310-2*d,385,340-2*d,315,340-2*d);
fill(#075EE5);
quad(340,310-2*d,380,310-2*d,380,340-2*d,340,340-2*d);
fill(#1CBC08);
quad(350,310-2*d,370,310-2*d,370,340-2*d,350,340-2*d);
//jendela1
fill(#CBC8B9);
rect(352.5,315-2*d,15,20);
line(352.5,325-2*d,367.5,325-2*d);
//jendela2
rect(318,320-2*d,7.5,10);
line(352.5,325-2*d,367.5,325-2*d);
//pintu
fill(#6C5A00);
rect(330,320-2*d,7.5,20);
rect(331,322-2*d,5.5,6);
rect(331,332-2*d,5.5,6);
ellipse(332,330-2*d,2.5,2.5);
//pondasi
fill(#88898B);
rect(315,340-2*d,70,5);
//talibalon
line(325,240-2*d,345,280-2*d);
line(305,240-2*d,345,280-2*d);
line(345,240-2*d,345,280-2*d);
line(365,240-2*d,345,280-2*d);
line(385,240-2*d,345,280-2*d);
//balon
fill(#FF0000);
ellipse(330,120-2*d,20,20);
fill(#00FFDF);
ellipse(335,130-2*d,20,20);
fill(#FFF700);
ellipse(330,140-2*d,20,20);
fill(#03FF00);
ellipse(335,150-2*d,20,20);
fill(#FF0080);
ellipse(330,160-2*d,20,20);
fill(#FF0000);
ellipse(335,170-2*d,20,20);
fill(#03FF00);
ellipse(330,180-2*d,20,20);
fill(#FFFFFF);
ellipse(335,190-2*d,20,20);
fill(#018E4B);
ellipse(325,200-2*d,20,20);
fill(#03FF00);
ellipse(330,210-2*d,20,20);
fill(#FF0000);
ellipse(325,220-2*d,20,20);
fill(#FFFFFF);
ellipse(330,230-2*d,20,20);
fill(#FF0080);
ellipse(325,240-2*d,20,20);
fill(#052CFF);
ellipse(295,130-2*d,20,20);
fill(#00FFDF);
ellipse(290,140-2*d,20,20);
fill(#03FF00);
ellipse(295,150-2*d,20,20);
fill(#9C12FA);
ellipse(290,160-2*d,20,20);
fill(#7C6402);
ellipse(295,170-2*d,20,20);
fill(#00FFDF);
ellipse(290,180-2*d,20,20);
fill(#052CFF);
ellipse(295,190-2*d,20,20);
fill(#FFF700);
ellipse(285,200-2*d,20,20);
fill(#FFFFFF);
ellipse(290,210-2*d,20,20);
fill(#FF0000);
ellipse(285,220-2*d,20,20);
fill(#052CFF);
ellipse(290,230-2*d,20,20);
fill(#110FCE);
ellipse(310,120-2*d,20,20);
fill(#FF0080);
ellipse(315,130-2*d,20,20);
fill(#052CFF);
ellipse(310,140-2*d,20,20);
fill(#0F38FA);
ellipse(315,150-2*d,20,20);
fill(#00FFDF);
ellipse(310,160-2*d,20,20);
fill(#03FF00);
ellipse(315,170-2*d,20,20);
fill(#110FCE);
ellipse(310,180-2*d,20,20);
fill(#052CFF);
ellipse(315,190-2*d,20,20);
fill(#110FCE);
ellipse(305,200-2*d,20,20);
fill(#FFF700);
ellipse(310,210-2*d,20,20);
fill(#FF0080);
ellipse(305,220-2*d,20,20);
fill(#7C6402);
ellipse(310,230-2*d,20,20);
fill(#110FCE);
ellipse(305,240-2*d,20,20);
fill(#FFF700);
ellipse(275,150-2*d,20,20);
fill(#052CFF);
ellipse(270,160-2*d,20,20);
fill(#FF0080);
ellipse(275,170-2*d,20,20);
fill(#FFF700);
ellipse(270,180-2*d,20,20);
fill(#052CFF);
ellipse(275,190-2*d,20,20);
fill(#03FF00);
ellipse(265,200-2*d,20,20);
fill(#FF0080);
ellipse(270,210-2*d,20,20);
fill(#FFF700);
ellipse(365,120-2*d,20,20);
fill(#9C12FA);
ellipse(370,130-2*d,20,20);
fill(#31CE0F);
ellipse(365,140-2*d,20,20);
fill(#7C6402);
ellipse(370,150-2*d,20,20);
fill(#FF0080);
ellipse(365,160-2*d,20,20);
fill(#03FF00);
ellipse(370,170-2*d,20,20);
fill(#31CE0F);
ellipse(365,180-2*d,20,20);
fill(#110FCE);
ellipse(370,190-2*d,20,20);
fill(#31CE0F);
ellipse(360,200-2*d,20,20);
fill(#FFF700);
ellipse(365,210-2*d,20,20);
fill(#110FCE);
ellipse(360,220-2*d,20,20);
fill(#00FFDF);
ellipse(365,230-2*d,20,20);
fill(#31CE0F);
ellipse(360,240-2*d,20,20);
fill(#110FCE);
ellipse(385,120-2*d,20,20);
fill(#FFF700);
ellipse(390,130-2*d,20,20);
fill(#FFF700);
ellipse(385,140-2*d,20,20);
fill(#FFFFFF);
ellipse(390,150-2*d,20,20);
fill(#110FCE);
ellipse(385,160-2*d,20,20);
fill(#31CE0F);
ellipse(390,170-2*d,20,20);
fill(#03FF00);
ellipse(385,180-2*d,20,20);
fill(#7C6402);
ellipse(390,190-2*d,20,20);
fill(#FF0000);
ellipse(380,200-2*d,20,20);
fill(#00FFDF);
ellipse(395,210-2*d,20,20);
fill(#052CFF);
ellipse(380,220-2*d,20,20);
fill(#03FF00);
ellipse(395,230-2*d,20,20);
fill(#110FCE);
ellipse(380,240-2*d,20,20);
fill(#7C6402);
ellipse(405,140-2*d,20,20);
fill(#110FCE);
ellipse(410,150-2*d,20,20);
fill(#03FF00);
ellipse(405,160-2*d,20,20);
fill(#110FCE);
ellipse(410,170-2*d,20,20);
fill(#FFF700);
ellipse(405,180-2*d,20,20);
fill(#FFF700);
ellipse(410,190-2*d,20,20);
fill(#9C12FA);
ellipse(400,200-2*d,20,20);
fill(#FFFFFF);
ellipse(415,210-2*d,20,20);
fill(#03FF00);
ellipse(400,220-2*d,20,20);
fill(#7C6402);
ellipse(345,120-2*d,20,20);
fill(#110FCE);
ellipse(350,130-2*d,20,20);
fill(#9C12FA);
ellipse(345,140-2*d,20,20);
fill(#110FCE);
ellipse(350,150-2*d,20,20);
fill(#7C6402);
ellipse(345,160-2*d,20,20);
fill(#052CFF);
ellipse(350,170-2*d,20,20);
fill(#FFFFFF);
ellipse(345,180-2*d,20,20);
fill(#FF0080);
ellipse(350,190-2*d,20,20);
fill(#FF0000);
ellipse(340,200-2*d,20,20);
fill(#03FF00);
ellipse(345,210-2*d,20,20);
fill(#FFF700);
ellipse(340,220-2*d,20,20);
fill(#00FFDF);
ellipse(345,230-2*d,20,20);
fill(#FF0000);
ellipse(340,240-2*d,20,20);
//pohon
noStroke();
fill(#5F3603);
rect(32,400,10,80);
fill(#038301);
triangle(40,350,60,400,10,400);
triangle(40,375,60,425,10,425);
triangle(40,400,60,450,10,450);
fill(#5F3603);
rect(232,400,10,80);
fill(#038301);
triangle(240,350,260,400,210,400);
triangle(240,375,260,425,210,425);
triangle(240,400,260,450,210,450);
fill(#5F3603);
rect(432,400,10,80);
fill(#038301);
triangle(440,350,460,400,410,400);
triangle(440,375,460,425,410,425);
triangle(440,400,460,450,410,450);
fill(#5F3603);
rect(732,400,10,80);
fill(#038301);
triangle(740,350,760,400,710,400);
triangle(740,375,760,425,710,425);
triangle(740,400,760,450,710,450);
}
