Membuat Animasi Layang-Layang dan Menggunakan Lagu Pada Processing

Semua pemrograman tidak akan lepas dari yang namanya IDE (Integrated Development Environment) merupakan software yang memudahkan programmer untuk membuat aplikasi pada platform tertentu.

Sama halnya dengan Processing yang merupakan IDE untuk pembuatan animasi baik 2D ataupun 3D dengan cara koding.

Untuk mendownload Processing klik di sini

Di sini saya berbagi ingin berbagi tentang membuat animasi yang bergerak dengan menggunakan lagu anak-anak di dalamnya. Karena menggunakan lagu kita memerlukan library yang disediakan dari Processing nya bernama Minim.

Menambahkan library pada Processing mudah saja.

Buka Aplikasi Processing ➨ Sketch ➨  Import Library... ➨ Add Library 

Untuk kodingnya bisa dilihat pada kolom di bawah, mau liat hasilnya seperti apa??? silahkan teman-teman bisa coba Run sendiri yah di Processingnya 😜

//========================= IMPORT LAGU ==========================
import ddf.minim.*;
AudioPlayer player;
Minim minim;//audio context

//========================= VARIABEL LAYANG ==========================
int x1=300;
int y1=100;
int x2=350;
int y2=50;
int x3=400;
int y3=100;
int x4=350;
int y4=190;
int lineX1=300;
int lineY1=100;
int lineX2=400;
int lineY2=100;
int lineX3=350;
int lineY3=50;
int lineX4=350;
int lineY4=190;
int lineX5=330;
int lineY5=220;
int garisX=350;
int garisY=100;
int arah1=1;
int arah2=3;
//------------------ PERBESAR LAYANGAN-------------------
float a = 150;
float b = 500;
float c = 300;
float d = 500;
//===================== VARIABEL ORANG =======================
int tangan1=110;
int tangan2=490;
//========================= VARIABEL WARNA LANGIT ==========================
float delay = 25;
float y;

//========================= VARIABEL SCENE ==========================
int t = 1;

//========================= VARIABEL FONT ==========================
PFont f;
float h = 20;

//========================= VARIABEL BAMBU ==========================
float x = -50;
float e = 0;
float raut = 1;

//========================= OBJEK AWAN ==========================
awan[] cloud = new awan[10];

void setup() {
  size(800, 600);
  minim = new Minim(this);
  player = minim.loadFile("Layang.mp3");
  player.play();
  frameRate(10);

  for (int i = 0; i<cloud.length; i++) {
    cloud[i] = new awan();
  }
}

void draw () {
  t = t+1;
  if ((t>0)&&(t<=130)) {
    scene0();
  } else if ((t>130)&&(t<=180)) {
    scene1();
  } else if ((t>180)&&(t<=250)) {
    scene2();
  } else if ((t>250)&&(t<=310)) {
    scene3();
  } else if ((t>310)&&(t<=360)) {
    scene4();
  } else if ((t>360)&&(t<=610)) {
    scene5();
  } else if (t==611) {
    exit();
  }
}

//==================== SCENE 0 ================================
void scene0() {
  background(0, 199, 80);
  f=loadFont("LetterGothicStd-32.vlw");
  fill(0);
  textFont(f, 40);
  textAlign(CENTER);
  text("Layang-Layang", width/2, 200);
  textFont(f, 20);
  text("Randy Efan", width/2, 250);
  text("Azi Fauzi", width/2, 300);
  text("Tahmid Ksatria Suci", width/2, 350);
}

//==================== SCENE 1 ================================
void scene1() {
  background(random(0), random(10), random(100));
  bambu();
}

void bambu() {
  fill(#79a410);
  rect(x, 100, 50, 400);
  strokeJoin(ROUND);
  if (x<=300) {
    x = x + 10;
  }
}

//==================== SCENE 2 ================================
void scene2() {
  background(random(100), random(10), random(0));
  bambu2();
}

void bambu2() {
  fill(#79a410);
  rect(300, 100, 25, 400);
  strokeJoin(ROUND);
  rect(x+25, 100, 25, 400);
  strokeJoin(ROUND);
  if (x<=450) {
    x = x + 5;
  }
}

//==================== SCENE 3 ================================
void scene3() {
  background(random(0), random(100), random(0));
  rautbambu();
}

void rautbambu() {
  fill(#79a410);
  rect(300, 100, 25, 400, e);
  rect(480, 100, 25, 400, e);
  if (e <= 1000) { //animasi raut bambu
    e = e+1;
    if (e >= 1000) {
      e = 1000;
    }
  }
}

//==================== SCENE 4 ================================
void scene4() {
  background(random(100), random(0), random(100));
  layangan();
}

void layangan() {
  a = a-1;
  b = b +1;
  c = c-1;
  d = d+1;
  fill(4, 76, 221);
  quad(width/2, a, c, 250, width/2, b, d, 250);
  strokeWeight(2);
  line(width/2, a, width/2, b);
  line(c, 250, d, 250);
}

//==================== SCENE 5 ================================
void scene5() {

  background(255);


  pushMatrix();
  langit();
  popMatrix();

  for (int i = 0; i < cloud.length; i++) {
    cloud[i].awan();
    cloud[i].tampil();
  }


  pushMatrix();
  matahari();
  popMatrix();

  gunung();
  tanah();

  pushMatrix();
  layang();
  popMatrix();
  pushMatrix();
  orang();
  popMatrix();
  pushMatrix();
  pohon();
  popMatrix();
}


void layang() {
  stroke(2);
  fill(4, 76, 221);
  quad(x1, y1, x2, y2, x3, y3, x4, y4);
  line(lineX1, lineY1, lineX2, lineY2);
  line(lineX3, lineY3, lineX4, lineY4);
  line(garisX, garisY, tangan1, tangan2);
  line(lineX4,lineY4,lineX5,lineY5);

  if (x1<400 && x1>250) {
    x1=x1+arah1;
    x2=x2+arah1;
    x3=x3+arah1;
    x4=x4+arah1;
    lineX1=lineX1+arah1;
    lineX2=lineX2+arah1;
    lineX3=lineX3+arah1;
    lineX4=lineX4+arah1;
    lineX5=lineX5+arah1;
    garisX=garisX+arah1;
  } else if (x1<450 && y1>75) {
    gerakLayang();
    gerakGaris();
    tangan2=tangan2+arah1;
  } else if (y3>=150) {
    arah1=arah1*-1;
    gerakLayang();
    gerakGaris();
    tangan2=tangan2+arah1;
  } else {
    x1=x1-arah1;
    y1=y1-arah1;
    x2=x2-arah1;
    y2=y2-arah1;
    x3=x3-arah1;
    y3=y3-arah1;
    x4=x4-arah1;
    y4=y4-arah1;
    lineX1=lineX1-arah1;
    lineY1=lineY1-arah1;
    lineX2=lineX2-arah1;
    lineY2=lineY2-arah1;
    lineX3=lineX3-arah1;
    lineY3=lineY3-arah1;
    lineX4=lineX4-arah1;
    lineY4=lineY4-arah1;
    lineX5=lineX5-arah1;
    lineY5=lineY5-arah1;
    garisX=garisX-arah1;
    garisY=garisY-arah1;
    tangan2=tangan2-arah1;
    arah1=arah1*-1;
  }
}

void gerakLayang () {
  x1=x1+arah1;
  y1=y1+arah1;
  x2=x2+arah1;
  y2=y2+arah1;
  x3=x3+arah1;
  y3=y3+arah1;
  x4=x4+arah1;
  y4=y4+arah1;
}

void gerakGaris () {
  lineX1=lineX1+arah1;
  lineY1=lineY1+arah1;
  lineX2=lineX2+arah1;
  lineY2=lineY2+arah1;
  lineX3=lineX3+arah1;
  lineY3=lineY3+arah1;
  lineX4=lineX4+arah1;
  lineY4=lineY4+arah1;
  lineX5=lineX5+arah1;
  lineY5=lineY5+arah1;
  garisX=garisX+arah1;
  garisY=garisY+arah1;
}


void langit () {
  noStroke();
  if (frameCount%(1*delay)<delay) fill(225, 244, 12);
  if (frameCount%(2*delay)<delay) fill(244, 237, 12);
  if (frameCount%(3*delay)<delay) fill(244, 182, 12); 
  if (frameCount%(4*delay)<delay) fill(247, 234, 0);
  if (frameCount%(5*delay)<delay) fill(232, 247, 27);
  if (frameCount%(6*delay)<delay) fill(225, 247, 84);
  rect(0, 0, 800, 350);
}

void gunung () {
  fill(0, 255, 0);
  triangle(400, 350, 600, 200, 800, 350);
  fill(0, 255, 0);
  triangle(0, 350, 300, 150, 600, 350);
}

void tanah () {
  noStroke();
  fill(201, 118, 16);
  rect(0, 350, 800, 250);
}

void pohon () {
  pushMatrix();
  fill(#51BF34);
  triangle(500, 470, 550, 510, 450, 510);
  triangle(500, 435, 550, 485, 450, 485);
  triangle(500, 400, 550, 450, 450, 450);
  popMatrix();
  fill(#D6AD1A);
  rect(494, 510, 15, 70);

  pushMatrix();
  fill(#51BF34);
  triangle(600, 470, 650, 510, 550, 510);
  triangle(600, 435, 650, 485, 550, 485);
  triangle(600, 400, 650, 450, 550, 450);
  popMatrix();
  fill(#D6AD1A);
  rect(594, 510, 15, 70);

  pushMatrix();
  fill(#51BF34);
  triangle(700, 470, 750, 510, 650, 510);
  triangle(700, 435, 750, 485, 650, 485);
  triangle(700, 400, 750, 450, 650, 450);
  popMatrix();
  fill(#D6AD1A);
  rect(694, 510, 15, 70);
}

void matahari () {
  translate(0, y++);
  stroke(2);
  fill(255, 216, 0);
  ellipse(490, 100, 200, 200);
}

void orang () {
  fill(255);
  ellipse (75, 475, 45, 45);
  line(75, 497, 75, 550);
  line(75, 550, 50, 590);
  line(75, 550, 100, 590);
  line(75, 510, 50, 540);
  line(75, 510, tangan1, tangan2);
  strokeWeight(2);
}