PERANCANGAN ANIMASI SEDERAHANA MENGGUNAKAN PROSESING BERBASIS GRAFIK

Asslamualaikum Sahabat Blog

    Selamat siang semua nya ,,, disini saya  Endriko dan teman saya M.Rido Wijayanto akan berbagi ilmu pada teman-teman semua.

Untuk pembahasan sebelum nya  yang di bahas oleh teman saya 

 https://mridowijayanto.blogspot.com

   Baik lansung saja kita mulai ya..

disini kami merancang sebuah animasi sederhana dari pembahasan teman saya  sourch code nya cuma sampai ke pembuatan rumah jadi saya akan melanjutkan nya sampai akhir.

kelanjutan dari source code teman saya , saya mulai dari pembuatan gambar motor, orang yang mengendarai motor , salju, awan dan pembuatan mobil coba lihat source code di bawah ini.

Pada kesempatan kali ini saya akan memberikan sebuah contoh animasi bergerak.

Berikut ini merupakan listing program  kelanjutan dari teman saya https://mridowijayanto.blogspot.com di bawah ini :

1. //motor
2. fill(#FCFDFF);
3. ellipse (10+10*d,450,30,30);
4. ellipse(100+10*d,450,30,30);
5. fill(#0C0D0C);
6. ellipse (10+10*d,450,10,10);
7. ellipse(100+10*d,450,10,10);
8. fill(#FCFDFF);
9. ellipse(105+10*d,415,7,15);
10. fill(#0319FF);
11. rect(97+10*d,410,7,40);
12. fill(#0319FF);
13. ellipse(23+10*d,418,50,15);
14. rect(10+10*d,410,7,25);
15. fill(#FCFDFF);
16. ellipse (73+10*d,415,50,25);
17. //orang
18. fill(255,205,155);
19. ellipse(38+10*d,370,18,18);
20. fill(100,20,10);
21. arc(38+10*d,370,18,18,(180*PI)/360,(360*PI)/180);
22. fill(100,20,255);
23. arc(38+10*d,390,18,18,(180*PI)/180,(360*PI)/180);
24. rect(30+10*d,390,18,18);
25. fill(255,305,155);
26. rect(30+10*d,395,30,5);
28. //salju
29. fill(255);
30. ellipse(50,5+10*d,10,10);
31. ellipse(50+10*d,5+10*2*d,10,10);
32. ellipse(50,5+10*3*d,10,10);
33. ellipse(100,0+10*d,20,20);
34. ellipse(100,0+10*d*3,20,20);
35. ellipse(100+5*d,0+10*d*2,20,20);
36. ellipse(200-10*d,0+10*3*d,20,20);
37. ellipse(200,0+10*d,20,20);
38. ellipse(275+10*d,5+10*d,15,15);
39. ellipse(275,0+10*d,15,15);
40. ellipse(300,0+10*d,20,20);
41. ellipse(350+10*d,0+10*2*d,20,20);
42. ellipse(350,0+10*d,20,20);
43. ellipse(350-10*d,0+10*d*2,20,20);
44. ellipse(450-5*d,0+10*d,17.5,17.5);
46. ellipse(50,30+10*d,10,10);
48. ellipse(500,5+10*d,10,10);
49. ellipse(500-10*d,5+10*d*3,10,10);
50. ellipse(500,5+10*d*2,10,10);
51. ellipse(600+10*d,0+10*d,20,20);
52. ellipse(650,0+10*3*d,20,20);
53. ellipse(675,0+10*d,20,20);
54. ellipse(750+10*d,5+10*4*d,15,15);
55. ellipse(800,0+10*d,15,15);
56. ellipse(850,0+10*d,20,20);
57. ellipse(850+10*d,0+10*d*3,20,20);
58. ellipse(850-10*d,0+10*d*2,20,20);
59. ellipse(875,0+10*2*d*3,20,20);
60. ellipse(875-5*d,0+10*2*d,20,20);
61. ellipse(900-5*d,0+10*d,17.5,17.5);
62. ellipse(900+5*d,0+10*d*1,20,20);
63. ellipse(900,0+10*d*3,20,20);
64. //awan
65.     y = y + 0.8;
66.   translate(y-200, height/2-2*size/2);
67. fill(95,158,160);
68. ellipse(450,-50,70,45);
69. ellipse(500,-50,85,65);
70. ellipse(540,-50,70,35);
72. ellipse(700,-100,80,50);
73. ellipse(750,-100,95,75);
74. ellipse(780,-100,80,55);
75. ellipse(815,-100,75,40);
77. ellipse(250,-100,80,35);
78. ellipse(300,-100,80,45);
80. fill(106,90,205);
81. rect(100,250,100,50);
82. fill(72,61,139);
83. rect(200,265,40,35);
84. fill(255);
85. rect(210,272,20,20);
86. fill(65);
87. ellipse(130,300,30,30);
88. ellipse(200,300,30,30);
89. //mobil
90. x=x+0.5;
91.  translate(x, height/2-3*size/2);
92. fill(255,20,147);
93. rect(200,100,100,50);
94. fill(255,105,180);
95. rect(300,115,40,35);
96. fill(255);
97. rect(310,122,20,20);
98. fill(65);
99. ellipse(230,150,30,30);
100. ellipse(300,150,30,30);
101.  translate(y,size);
102. fill(0,255,0);
103. rect(200,50,100,50);
104. fill(124,202,0);
105. rect(300,65,40,35);
106. fill(255);
107. rect(310,72,20,20);
108. fill(65);
109. ellipse(230,100,30,30);
110. ellipse(300,100,30,30);
111. }

berikut ini merupakan video tutorial nya .

Sekian ya teman-teman . Mohon komen nya ya teman-teman

Terimakasih Wassalamualaikum.