Mari Belajar Coding: lainnya - Tutorial Pemrograman Web dan Mobile
Tampilkan postingan dengan label lainnya. Tampilkan semua postingan
Tampilkan postingan dengan label lainnya. Tampilkan semua postingan

17 Maret 2019

Membuat Animasi Sederhana Menggunakan Processing


Membuat Animasi Sederhana Menggunakan Processing

Selamat datang kembali di blog Mari belajar koding. Kali ini saya akan share lagi nih mengenai processing. Ternyata masih ada file projek kuliah mengenai processing. Yang belum tau apa itu processing, Processing merupakan aplikasi untuk mengajarkan dasar-dasar pemrograman komputer dalam konteks visual. Buat teman-teman yang mencari artikel tentang membuat animasi dengan processing, artikel ini mungkin bisa bermanfaat.

Membuat Animasi Sederhana Menggunakan Processing

Salin kode berikut dan jalankan aplikasi processing kamu.

float x, y, z;
float size = 75;

void setup()
{
size (800, 600);

}

void draw()
{
background(72,201,223);  
int  d;
d = second();

fill(255,159,57);//matahari
  ellipse(700,250-4*d,80,80);
  
   fill(99,131,17);//gunung
  beginShape(POLYGON);
  vertex(400,470);
  vertex(580,200);
  vertex(600,200);
  vertex(800,400);
  endShape();
  fill(99,131,17);//gunung
  beginShape(POLYGON);
  vertex(250,480);
  vertex(330,220);
  vertex(350,220);
  vertex(500,450);
  endShape();

fill(0, 100, 0);
stroke(0);
triangle(25, 420, 0, 500, 35, 497);//rumput
triangle(50, 420, 35, 497, 80, 490);
triangle(380, 350, 350, 455, 400, 450);
triangle( 400, 450, 430, 350, 450, 445);
triangle(450, 445, 475, 355, 500, 440);
triangle(500, 440, 530, 350, 550, 435);
fill(188, 115, 21);
line(0, 500, 800, 400);
beginShape(POLYGON);//tanah
strokeWeight(0);
vertex (0,500);
vertex (0, 600);
vertex (800, 600);
vertex (800, 400);
vertex (400, 450);  
endShape();

strokeWeight(15);
stroke(192,192,192);
point(60-1*d,200-5*d);
point(65+2*d,200-5*d);
point(70-1*d,200-5*d);
point(75-1,5*d,200-3*d);
point(80,200-6*d);
point(85,200-7*d);
point(88,200-6*d);
point(90+1*d,200-4*d);
point(80+1*d,200-5*d);
point(85+3*d,200-5*d);

beginShape(POLYGON);//cerobong asap
strokeWeight(3);
stroke(0);
vertex (50, 200);
vertex (50, 550);
vertex (100, 550);
vertex (100, 200);
vertex (50, 200);  
endShape();
fill(125, 55, 68);    
triangle(400, 400, 200, 250, 0, 400);
rect(50, 400, 300, 150);//badan rumah

  int i; //baling"
  i=second();
  strokeWeight(15);
  //line(210,150,cos(i)*100+210,sin (i)*100+150);
  //line(210,150,210,150);
  //arc(210,150,cos(i)*100+210,sin (i)*100+150,(180*PI)/180,(360*PI)/180); 

fill(235,186,84); //pohon 
  noStroke();
  smooth();
  beginShape();
  vertex(715,700);
  vertex(790,700);
  vertex(760,450);
  vertex(740,450);
  endShape();
  fill(71,162,26);
  ellipse(700,400,300,150);
  ellipse(700,450,150,100);
  ellipse(770,450,300,150);
  ellipse(760,340,200,60);
  ellipse(760,400,90,150);
  endShape();
  stroke(0);
 
fill(255);
strokeWeight(3); //atap
beginShape(POLYGON);
vertex (200, 250);
vertex (0, 400);
vertex (20, 400);
vertex (200, 270);
vertex (200, 250);  
endShape();
beginShape(POLYGON);
vertex (200, 250);
vertex (400, 400);
vertex (380, 400);
vertex (200, 270);
vertex (200, 250);  
endShape();



//jendela,pintu
strokeWeight(3);
ellipse(200, 340, 50, 50);
rect(80, 420, 50, 70);
rect(170, 420, 50, 70);
rect(270, 420, 70, 130);
line(80, 440, 130, 440);
line(80, 460, 130, 460);
line(170, 440, 220, 440);
line(170, 460, 220, 460);
strokeWeight(7);
point(280, 485);
fill(0, 100, 0);
strokeWeight(0);

//awan
    y = y + 0.08;
  translate(y-200, height/2-2*size/2);
noStroke();
fill(255);
ellipse(450,-50,70,45);
ellipse(500,-50,85,65);
ellipse(540,-50,70,35);

ellipse(700,-100,80,50);
ellipse(750,-100,95,75);
ellipse(780,-100,80,55);
ellipse(815,-100,75,40);
}

Membuat Animasi Sederhana Menggunakan Processing


Sudah saya kasih komentar penjelas di sintaks programnya, kamu bisa mengubah kodingnya untuk di perbaiki atau dibuat lebih bagus. Sekian semoga bermanfaat.

Tutorial Processing lainnya:

08 Maret 2019

Belajar Processing: Menggambar Objek Rumah dengan Processing


Menggambar Objek Rumah dengan Processing

Selamat datang kembali di blog Mari belajar koding. Masih di belajar tentang pemograman dengan processing, sebelumnya kita belajar tentang menggambar logo android. Processing sendiri merupakan aplikasi untuk mengajarkan dasar-dasar pemrograman komputer dalam konteks visual. Tutorial kali ini kita akan belajar menggambar sebuah objek rumah. 

Menggambar Objek Rumah dengan Processing

Salin kode di bawah ini kemudian jalankan di aplikasi processing kamu.

size(600,400);
background(189,252,240);
smooth();
//dasar pondasi 1
fill(193,185,139);
beginShape(POLYGON);
vertex(100,335);
vertex(500,335);
vertex(500,350);
vertex(100,350);
endShape(CLOSE);
//dasar pondasi 2
fill(124,76,12);
beginShape(POLYGON);
vertex(135,320);
vertex(465,320);
vertex(465,335);
vertex(135,335);
endShape(CLOSE);
//dasar pondasi 3 
fill(118,80,30);
beginShape(POLYGON);
vertex(170,305);
vertex(430,305);
vertex(430,320);
vertex(170,320);
endShape(CLOSE);
//dasar pondasi 4
fill(167,132,85);
beginShape(POLYGON);
vertex(200,290);
vertex(400,290);
vertex(400,305);
vertex(200,305);
endShape(CLOSE);
//cagak kiri
fill(250,157,81);
beginShape(POLYGON);
vertex(135,335);
vertex(145,335);
vertex(145,185);
vertex(135,185);
endShape(CLOSE);
//cagak kanan
fill(250,157,81);
beginShape(POLYGON);
vertex(455,335);
vertex(465,335);
vertex(465,185);
vertex(455,185);
endShape(CLOSE);
//nduwur saka 
fill(252,172,125);
beginShape(POLYGON);
vertex(500,185);
vertex(100,185);
vertex(100,180);
vertex(500,180);
endShape(CLOSE);
//genteng bawah 
smooth();
fill(255,118,39);
beginShape(POLYGON);
vertex(100,180);
vertex(500,180);
vertex(100,180);
vertex(225,135);
vertex(375,135);
vertex(500,180);
endShape();
//atap atas 
fill(222,106,18);
beginShape(POLYGON);
vertex(225,135);
vertex(250,65);
vertex(350,65);
vertex(375,135);
endShape();
noFill();

//cagak pintu kiri
fill(131,116,28);
beginShape(POLYGON);
vertex(230,290);
vertex(230,185);
vertex(235,185);
vertex(235,290);
endShape();

//cagak pintu kanan
beginShape(POLYGON);
vertex(370,290);
vertex(370,185);
vertex(365,185);
vertex(365,290);
endShape();

//cagak pintu tengah 
beginShape(POLYGON);
vertex(298,290);
vertex(298,185);
vertex(302,185);
vertex(302,290);
endShape();

//gocekan lawang kanan
fill(0);
ellipse(310,237.5,7,7);
ellipse(290,237.5,7,7);

//pagar kiri yang tidur
strokeWeight(1);
line(145,260,230,260);
line(145,275,230,275);
line(145,290,200,290);
line(145,305,170,305);

//pagar kanan yang tidur 
line(370,260,455,260);
line(370,275,455,275);
line(400,290,455,290);
line(430,305,455,305);
endShape();

//cendela kanan
fill(255,255,0);
beginShape(POLYGON);
vertex(390,210);
vertex(390,240);
vertex(435,240);
vertex(435,210);
vertex(390,210);
endShape();

//cendela kiri
fill(255,255,0);
beginShape(POLYGON);
vertex(210,210);
vertex(210,240);
vertex(165,240);
vertex(165,210);
vertex(210,210);
endShape();

//sekat cendela
line(188,210,188,240);
line(413,210,413,240);

//Lampu taman kiri
fill(196,209,205);
arc(50,350,30,30,(180*PI)/180,(360*PI)/180);
fill(255);
ellipse(50,285,30,30);
ellipse(50,285,30,6);
endShape();

//lampu taman Kanan
fill(196,209,205);
arc(550,350,30,30,(180*PI)/180,(360*PI)/180);
fill(255);
ellipse(550,285,30,30);
ellipse(550,285,30,6);
strokeWeight(3);
line(50,302,50,335);
line(550,302,550,335);
noStroke();
endShape();

//tanah 
fill(39,27,19);
beginShape(POLYGON);
vertex(0,350);
vertex(0,400);
vertex(600,400);
vertex(600,350);
endShape();

//rumput kiri 
beginShape(TRIANGLES);
fill(75,149,6);
vertex(0,350);
vertex(6,325);
vertex(12,350);
vertex(12,350);
vertex(18,325);
vertex(24,350);
vertex(24,350);
vertex(30,330);
vertex(35,350);
vertex(66,350);
vertex(71,330);
vertex(77,350);
vertex(77,350);
vertex(83,325);
vertex(89,350);
vertex(89,350);
vertex(95,325);
vertex(100,350);
endShape();

//rumput kanan 
beginShape(TRIANGLES);
fill(75,149,6);
vertex(500,350);
vertex(506,325);
vertex(512,350);
vertex(512,350);
vertex(518,325);
vertex(524,350);
vertex(524,350);
vertex(530,330);
vertex(535,350);
vertex(566,350);
vertex(571,330);
vertex(577,350);
vertex(577,350);
vertex(583,325);
vertex(589,350);
vertex(589,350);
vertex(595,325);
vertex(600,350);
endShape();


Menggambar dengan processing

Hasil dari syntaks program seperti diatas. Untuk tutorial pemrograman dengan processing selanjutnya kita akan belajar membuat animasi dengan processing.
Related search:
  • Membuat gambar objek dengan processing
  • Membuat animasi dengan processing

Belajar Processing: Menggambar Logo Android dengan Processing


Menggambar Logo Android dengan Processing

Selamat datang kembali di tutorial pemrogram dengan processing. Processing sendiri merupakan aplikasi untuk mengajarkan dasar-dasar pemrograman komputer dalam konteks visual. Buat teman-teman yang mencari artikel tentang menggambar dengan processing, artikel ini bisa bermanfaat. kali ini saya akan sharing tentang membuat gambar logo android. 

Menggambar Logo Android dengan Processing

Salin kode berikut dan jalankan
//gambar logo android


size (400,400);
background(255);
fill(0); 
ellipse(200,200,600,600);
fill(255); 
ellipse(200,200,300,300);
fill(0); 
ellipse(200,200,250,250);
fill(129,234,67); //warna
arc(200,150,100,100,(180*PI)/180,(360*PI)/180); 

//kepala
arc(170,250,25,70,(0*PI)/180,(180*PI)/180); //kaki 
arc(230,250,25,70,(0*PI)/180,(180*PI)/180);
line(150,150,250,150);
line(147,167,147,192);
rect(150,155,100,100); //badan

strokeWeight(10);
point(180,120); //mata
point(220,120);
strokeWeight(7);
stroke(129,234,67); //antena
line(222,105,227,95);
line(177,105,172,95);

strokeWeight(25); //tangan
stroke(129,234,67);
line(265,170,265,225);
line(135,170,135,225);


Menggambar dengan processing


Hasil dari syntaks program seperti gambar diatas. Untuk tutorial processing selanjutnya kita akan menggambar sebuah objek rumah.

Tutorial Processing lainnya:



Related search
  • Menggambar dengan processing
  • Membuat animasi dengan processing

18 Mei 2015

Membuat Animasi Dengan Processing



MEMBUAT ANIMASI DENGAN PROCESSING



Disini saya akan berbagi ilmu tentang cara membuat animasi dengan software Processing. Processing adalah bahasa pemrograman yang berbasis open source.  Awalnya dibuat untuk melayani sebagai sketsa perangkat lunak dan untuk mengajarkan dasar-dasar pemrograman komputer dalam konteks visual, Processing berkembang menjadi alat pengembangan untuk profesional. Saat ini, ada puluhan ribu siswa, seniman, desainer, peneliti, dan penggemar yang menggunakan Pengolahan untuk belajar, prototyping, dan produksi.


Dan berikut ini adalah contoh animasi sederhana yang saya buat menggunakan Processing.

void setup()
{
size(800,550);

}

void draw ()
{
   background(25,25,112);
  int d,e,f;
  d=second();
  e=minute();
  f=hour();

//gunung
strokeWeight(0);
fill(0,94,0);
arc(130,330,400,200,(180*PI)/180,(360*PI)/180);
fill(0,132,0);
arc(320,330,400,230,(180*PI)/180,(360*PI)/180);

//bulan
fill(255,255,176);
ellipse(40,90,60,60);

//awn
noStroke();
fill(95,158,160);
ellipse(100,140,30,15);
ellipse(130,140,45,35);
ellipse(145,140,30,15);

fill(95,158,160);
ellipse(230,110,30,10);
ellipse(250,110,40,30);
ellipse(280,110,20,10);

//jalan
noStroke();
fill(0);
quad(0,380,380,380,380,440,0,440);
strokeWeight(4);
stroke(255);
line(20,405,40,405);
line(60,405,80,405);
line(100,405,120,405);
line(140,405,160,405);
line(180,405,200,405);
line(220,405,240,405);
line(260,405,280,405);
line(300,405,320,405);
line(340,405,360,405);
line(380,405,400,405);
line(420,405,440,405);

//lahan
noStroke();
fill(80,49,33);
quad(0,330,380,330,380,380,0,380);


//Rumah
noStroke();
fill(255,0,255);
triangle(50,325,20,345,80,345);
fill(20,100,200);
rect(30,345,40,20);

fill(200,100,0);
triangle(120,320,90,340,150,340);
fill(200,0,0);
rect(100,340,40,20);

//mobil
fill(0,255,0);
rect(20+20*d,350,100,50);
fill(124,202,0);
rect(120+20*d,365,40,35);
fill(255);
rect(130+20*d,373,20,20);
fill(65);
ellipse(45+20*d,400,30,30);
ellipse(120+20*d,400,30,30);

//hujan  
  strokeWeight(5);
  noStroke();

  stroke(255);
  point(40,100+25*d);
  point(50,100+15*d);
  point(30,100+20*d);
  point(60,120+15*d);
  point(70,110+20*d);
  point(80,130+25*d);
  point(90,100+25*d);
  point(100,110+30*d);
  point(110,115+20*d);
  point(120,100+25*d);
  point(130,115+15*d);
  point(140,110+10*d);
  point(150,115+25*d);
  point(160,125+10*d);
  point(170,120+10*d);
  point(180,100+25*d);
  point(190,120+20*d);
  point(200,125+35*d);
  point(210,115+10*d);
  point(220,105+15*d);
  point(230,125+20*d);
  point(240,110+25*d);
  point(250,110+10*d);
  point(260,100+15*d);
  point(270,125+25*d);
  point(280,100+20*d);
  point(290,115+10*d);
  point(300,120+15*d);
  point(310,100+25*d);
  point(320,125+20*d);
  point(330,120+10*d);
  point(340,110+25*d);
  point(350,115+15*d);
  point(360,125+15*d);
  point(370,100+10*d);
  point(380,115+25*d);
  point(390,100+20*d);
  point(400,125+15*d);
//awan
noStroke();
fill(95,158,160);
ellipse(20+55*d,150,30,15);
ellipse(50+55*d,150,45,35);
ellipse(80+55*d,150,30,15);

fill(95,158,160);
ellipse(40+30*d,120,30,10);
ellipse(80+30*d,120,40,30);
ellipse(100+30*d,120,20,10);

//dinding
strokeWeight(0);
noStroke();
fill(187,221,255);
quad(0,0,400,0,400,40,0,40);
quad(370,0,800,0,800,450,370,450);
quad(0,0,20,0,20,450,0,450);
quad(0,440,380,440,380,450,0,450);

//lantai
fill(98,98,98);
quad(0,450,800,450,800,550,0,550);
stroke(0);
line(0,450,800,450);
line(0,500,800,500);
line(10,450,-50,550);
line(100,450,50,550);
line(200,450,150,550);
line(300,450,250,550);
line(400,450,350,550);
line(500,450,450,550);
line(600,450,550,550);
line(700,450,650,550);
line(800,450,750,550);
//list
stroke(0);
strokeWeight(2);
fill(255);
quad(0,0,800,0,800,30,0,30);
line(0,25,800,25);

//jendela
strokeWeight(0);
fill(185,122,87);
quad(10,40,380,40,380,70,10,70);
quad(10,440,380,440,380,430,10,430);
line(10,50,380,50);
line(10,60,380,60);
quad(10,40,20,40,20,440,10,440);
quad(370,40,380,40,380,440,370,440);
quad(190,40,200,40,200,440,190,440);

//meja
strokeWeight(0);
stroke(0,0,0);
fill(159,80,0);
quad(430,305,780,305,780,320,430,320);
rect(550,320,230,100);
quad(430,300,440,300,440,450,430,450);
quad(780,300,790,300,790,450,780,450);
strokeWeight(0);
stroke(0);
line(665,320,665,420);
fill(0);
strokeWeight(9);
point(655,370);
point(675,370);

//buku
strokeWeight(0);
fill(255,255,255);
quad(690,290,770,290,770,305,690,305);
line(691,293,770,293);
line(691,296,770,296);
line(691,299,770,299);
line(691,301,770,301);
strokeWeight(3);
stroke(0,79,0);
line(691,290,691,303);
line(691,290,771,290);
line(691,303,771,303);

strokeWeight(0);
fill(255);
quad(695,270,765,270,765,288,695,288);
line(695,275,765,275);
line(695,278,765,278);
line(695,281,765,281);
strokeWeight(4);
stroke(3,20,141);
line(694,286,694,270);
line(694,286,765,286);
line(694,270,765,270);

//komputer
strokeWeight(5);
stroke(192,192,192);
fill(0);
beginShape(QUADS);
  vertex (450,210);
  vertex (550,210);
  vertex (550,280);
  vertex (450,280);
    endShape();
fill(192,192,192);
quad(480,300,520,300,520,302,480,302); 
quad(495,280,505,280,505,300,495,300);
strokeWeight(0);
quad(450,350,500,350,500,450,450,450);

stroke(0);
line(455,355,495,355);
line(455,365,495,365);
line(455,355,455,365);
line(495,355,495,365);
line(455,370,495,370);
ellipse(475,405,3,3);
ellipse(475,415,3,3);
fill(255-15*d,255-15*d,0+15*d);
ellipse(475,390,15,15);
line(455,425,495,425);
line(455,435,495,435);
line(455,445,495,445);

//lampu
fill(254,108,46);
quad(631,240,639,240,639,300,631,300);
quad(615,298,655,298,655,305,615,305);
ellipse(635,215,35,25);
ellipse(635,230,65,45);
fill(211,64,1);
ellipse(635,230,50,35);
fill(255,255,0);
ellipse(635,230,15,15);

//jam
strokeWeight(3);
stroke(0);
fill(255);
ellipse(600,90,75,75);
strokeWeight(3);
point(600,90);
line(600,55,600,57);
line(600,125,600,123);
line(563,90,566,90);
line(637,90,633,90);
stroke(255,0,0);
  line(600,90,cos(d)*30+600,sin (d)*30+90);
  stroke(0);
  line(600,90,cos(e)*25+600,sin (e)*30+90);
  line(600,90,cos(f)*20+600,sin (f)*20+90);
}


Tutorial Processing lainnya:



13 Mei 2015

Menggambar Doraemon Dengan Processing Software


MENGGAMBAR DORAEMON DENGAN PROCESSING SOFTWARE

Processing adalah bahasa pemrograman yang berbasis open source.  Awalnya dibuat untuk melayani sebagai sketsa perangkat lunak dan untuk mengajarkan dasar-dasar pemrograman komputer dalam konteks visual, Processing berkembang menjadi alat pengembangan untuk profesional. Saat ini, ada puluhan ribu siswa, seniman, desainer, peneliti, dan penggemar yang menggunakan Pengolahan untuk belajar, prototyping, dan produksi.

Dan berikut ini adalah contoh objek/gambar sederhana yang saya buat menggunakan Processing.

MENGGAMBAR DORAEMON DENGAN PROCESSING SOFTWARE

Untuk listing programnya seperti ini:


size (600,600);
background(5,249,74);

strokeWeight(10);
stroke(248,67,71);
line(0,420,420,0);

strokeWeight(10);
stroke(88,67,248);
line(0,480,480,0);

strokeWeight(10);
stroke(244,214,14);
line(0,540,540,0);

strokeWeight(10);
stroke(196,6,224);
line(0,600,600,0);

//kepala
strokeWeight(3);
fill(0,0,255);
stroke(0,0,0);
arc(350,250,250,255,(130*PI)/180,(410*PI)/180);
fill(255,255,255);
arc(350,270,210,200,(130*PI)/180,(410*PI)/180);

fill(255,255,255);
noStroke();
rect(283,300,135,50);

//mata kiri
fill(255,255,255);
stroke(0,0,0);
ellipse (330,170, 50, 60); 
fill(0,0,0);
strokeWeight(15);
point(340,185);

 //mata kanan
 strokeWeight(3);
fill(255,255,255);
ellipse (385,170, 50, 60);
fill(0,0,0);
strokeWeight(15);
point(375,185);

strokeWeight(3);
fill(255,0,0); //hidung
ellipse(357,200,25,20);
line(356,210,356,245);

//mulut
arc(350,245,140,180,(0*PI)/180,(180*PI)/180);
arc(350,325,140,115,(215*PI)/180,(325*PI)/180);
line(280,245,420,245);

//kumis kiri
line(330,210,290,200);
line(330,220,290,210);
line(330,230,290,220);

//kumis kanan
line(378,210,418,200);
line(378,220,418,210);
line(378,230,418,220);

//tangan kiri
fill(0,0,255);
strokeWeight(3);
stroke(0,0,0);
ellipse(240,390,40,100);

//telapak kiri
fill(255,255,255);
ellipse(240,440,40,40);

//tangan kanan
fill(0,0,255);
strokeWeight(3);
stroke(0,0,0);
ellipse(460,390,40,100);

//telapak kanan
fill(255,255,255);
ellipse(460,440,40,40);

//badan
fill(0,0,255);
stroke(0,0,0);
strokeWeight(3);
rect(255,350,190,150);

//leher
strokeWeight(9);
stroke(255,0,0);
line(255,345,445,345);

//perut
fill(255,255,255);
strokeWeight(3);
stroke(0,0,0);
arc(350,395,160,170,(330*PI)/180,(570*PI)/180);
noStroke();
rect(283,352,135,50);

//lonceng
fill(255,255,0);
strokeWeight(3);
stroke(0,0,0);
ellipse(350,358,25,25);
ellipse(350,365,10,10);
arc(350,356,25,10,(180*PI)/180,(360*PI)/180);
arc(350,360,25,10,(180*PI)/180,(360*PI)/180);

//kantong 
fill(255,255,255);
strokeWeight(3);
stroke(0,0,0);
arc(350,390,140,150,(0*PI)/180,(180*PI)/180);
line(280,390,420,390);

//garis kaki
fill(0,0,255);
arc(340,490,30,20,(280*PI)/180,(420*PI)/180);

//kaki
fill(255,255,255);
ellipse(410,520,120,50);
ellipse(290,520,120,50);


Tutorial Processing lainnya: