Fungsi Kuadrat

Pendahuluan

Fungsi kuadrat adalah suatu persamaan dari variabel yang mempunyai pangkat tertinggi dua. Fungsi ini berkaitan dengan persamaan kuadrat. Bentuk umum persamaan kuadrat adalah: y = ax² + bx + c . Tantangan yang muncul adalah membuatnya menjadi media pembelajaran yang dinamis dan dapat menampilkan kurva sesuai dengan nilai yang dimasukkan ke dalam fungsi tersebut.

Hasil yang diharapkan pada tutorial ini adalah sebagai berikut :

Untuk membuatnya perhatikan langkah berikut :

1. Buatlah file baru bertipe AS3 dengan ukuran 800x600 pixel
   
2. buatlah 3 buah input text dan letakkan di bagian bawah. Input text ini nantinya digunakan untuk mengubah nilai a,b,c pada fungsi kuadrat. Klik input text tersebut kemudian buka panel properties atur jenis huruf, embed huruf, dan berikan nilai 2 pada opsi Max Char agar pengguna tidak memasukkan nilai yang lebih dari 2 karakter.
3. Tambahkan pula static text tulisan "Fungsi Kuadrat y = x2+ x+", sehingga melengkapi input text di atas.
4. Buatlah sebuah tombol "buat kurva", yang nantinya kita gunakan untuk me"reset" gambar kurva di kordinat kartesius.
5. Setelah semua aset visual selesai anda buat, tambahkan instance name. Pada input text, tambahkan instance name a_txt, b_txt dan c_txt, sedangkan tombol anda tambah instance name buat_kurva_btn
6. Klik layer 1 frame 1 kemudian buka panel action (F9) dan ketikan kode berikut :
   

import flash.display.Shape;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;

var lebarLayar = stage.stageWidth;
var tinggiLayar = stage.stageHeight;

var xPusat:int = lebarLayar/2;
var yPusat:int = tinggiLayar/2-50;
var jarak:int = 25;
//maxX dan maxY digunakan untuk memberi batas jarak axis dan ordinat
var maxX = Math.floor((lebarLayar/2)/jarak)-1;
var maxY = 8;

var smooth = 10;

var kordinat:MovieClip;
var kurva:MovieClip;
var warnaKordinat = 0x990000;
var warnaSkala = 0xbdbdbd;
var warnaKurva = 0x1737ad;
var labelXY:TextField;

//fungsi kuadrat
//y = ax^2+bx+c
var a = 1;
var b = -2;
var c = -3;

a_txt.text = String(a);
b_txt.text = String(b);
c_txt.text = String(c);

function panah(x,y, dx, dy):MovieClip{
	var grafik = new MovieClip();
	var theta:Number = Math.atan2(dy,dx);
	var arrow:Shape = new Shape();
	arrow.graphics.lineStyle(2, warnaKordinat, 1);
	arrow.graphics.moveTo(x, y);
	arrow.graphics.lineTo(x+dx, y-dy);
	var d = Math.sqrt(dx*dx+dy*dy);
	if (d > 5) d = 5;
	arrow.graphics.beginFill(warnaKordinat);
	arrow.graphics.moveTo(x+dx-3*d*Math.cos(theta+0.25*(Math.PI/2)),y-dy+3*d*Math.sin(theta+0.25*(Math.PI/2)));
	arrow.graphics.lineTo(x+dx,y-dy);
	arrow.graphics.lineTo(x+dx-3*d*Math.cos(theta-0.25*(Math.PI/2)),y-dy+3*d*Math.sin(theta-0.25*(Math.PI/2)));
	grafik.addChild(arrow);
	return grafik;
}


function buat_kordinat():MovieClip{
	var grafik = new MovieClip(); 		
	//skala
	var kordinat:Shape = new Shape();
	//ordinat
	var i:int;
	for (i=1;i<=maxY;i++){
		kordinat.graphics.lineStyle(1, warnaSkala, 1);
		kordinat.graphics.moveTo(xPusat-maxX*jarak, yPusat-i*jarak);
		kordinat.graphics.lineTo(xPusat+maxX*jarak, yPusat-i*jarak);
		kordinat.graphics.moveTo(xPusat-maxX*jarak, yPusat+i*jarak);
		kordinat.graphics.lineTo(xPusat+maxX*jarak, yPusat+i*jarak);
		kordinat.graphics.lineStyle(2, warnaKordinat, 1);
		kordinat.graphics.moveTo(xPusat, yPusat-i*jarak);
		kordinat.graphics.lineTo(xPusat+5, yPusat-i*jarak);	
		kordinat.graphics.moveTo(xPusat, yPusat+i*jarak);
		kordinat.graphics.lineTo(xPusat+5, yPusat+i*jarak);	
	}
	//axis
	for (i=1;i<=maxX;i++){
		kordinat.graphics.lineStyle(1, warnaSkala, 1);
		kordinat.graphics.moveTo(xPusat+i*jarak, yPusat-maxY*jarak);
		kordinat.graphics.lineTo(xPusat+i*jarak, yPusat+maxY*jarak);
		kordinat.graphics.moveTo(xPusat-i*jarak, yPusat-maxY*jarak);
		kordinat.graphics.lineTo(xPusat-i*jarak, yPusat+maxY*jarak);
		kordinat.graphics.lineStyle(2, warnaKordinat, 1);
		kordinat.graphics.moveTo(xPusat+i*jarak, yPusat);
		kordinat.graphics.lineTo(xPusat+i*jarak, yPusat+5);	
		kordinat.graphics.moveTo(xPusat-i*jarak, yPusat);
		kordinat.graphics.lineTo(xPusat-i*jarak, yPusat+5);	
	}
	grafik.addChild(kordinat);	
	//label
	var lb:TextField;	
	//ordinat
	for (i=1;i<maxY;i++){
		//label
		lb = new TextField();
		lb.selectable  = false;
		lb.text = String(i);
		lb.textColor = warnaKordinat;
		lb.x = xPusat + 8;
		lb.y = yPusat - i*jarak-10;
		grafik.addChild(lb);
		lb = new TextField();
		lb.selectable  = false;
		lb.text = "-"+String(i);
		lb.textColor = warnaKordinat;
		lb.x = xPusat + 8;
		lb.y = yPusat + i*jarak-10;
		grafik.addChild(lb);		
	}
	//axis
	for (i=1;i<maxX;i++){
		//label
		lb = new TextField();
		lb.selectable  = false;
		lb.text = String(i);
		lb.textColor = warnaKordinat;
		lb.x = xPusat + i*jarak-5;
		lb.y = yPusat+10;
		grafik.addChild(lb);
		lb = new TextField();
		lb.selectable  = false;
		lb.text = "-"+String(i);
		lb.textColor = warnaKordinat;
		lb.x = xPusat - i*jarak-5;
		lb.y = yPusat + 6;
		grafik.addChild(lb);		
	}
	//kordinat utama
	grafik.addChild(panah(xPusat, yPusat, maxX*jarak, 0));
	grafik.addChild(panah(xPusat, yPusat, -maxX*jarak, 0));
	grafik.addChild(panah(xPusat, yPusat, 0, maxY*jarak));
	grafik.addChild(panah(xPusat, yPusat, 0, -maxY*jarak));
	
	return grafik;
}

function gambar_kurva(a, b, c):MovieClip{
	var grafik = new MovieClip(); 		
	var curve:Shape = new Shape();
	//rumus dikalikan jarak
	var y0 = a*maxX*maxX+b*maxX+c;
	curve.graphics.lineStyle(2, warnaKurva, 1);
	curve.graphics.moveTo(xPusat-maxX*jarak, yPusat-y0*jarak);
	for ( var i:int = -maxX*smooth; i<maxX*smooth;i++){
		var d = i/smooth;
		y0 = a*d*d+b*d+c;
		curve.graphics.lineTo(xPusat+d*jarak, yPusat-y0*jarak);
	}
	grafik.addChild(curve);
	return grafik;
}


function setup():void{
	kordinat = new MovieClip();
	kordinat = buat_kordinat();
	addChild(kordinat);
	
	kurva = new MovieClip();
	kurva = gambar_kurva(a, b, c);
	addChild(kurva);
	
	//tombol
	buat_kurva_btn.addEventListener(MouseEvent.CLICK, buat_ulang);
}

function buat_ulang(e:MouseEvent):void{
	a = Number(a_txt.text);
	b = Number(b_txt.text);
	c = Number(c_txt.text);
	//hapus kurva lama
	removeChild(kurva);
	//gambar kurva baru
	kurva = new MovieClip();
	kurva = gambar_kurva(a, b, c);
	addChild(kurva);
}

setup();



7. Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka akan didapatkan aplikasi seperti di atas
   

Penjelasan Kode

	for ( var i:int = -maxX*smooth; i<maxX*smooth;i++){
		var d = i/smooth;
		y0 = a*d*d+b*d+c;
		curve.graphics.lineTo(xPusat+d*jarak, yPusat-y0*jarak);
	}

Kunci utama membuat kurva fungsi kuadrat adalah mendefinisikan rumus fungsi ke dalam kode AS3. Perhatikan baris di atas. Pada dasarnya nilai x dimasukkan pada seluruh baris nilai pada sumbu axis, untuk mencari nilai y. Dengan cara ini fungsi lineTo akan membuat garis sesuai dengan kordinat x, y yang ditemukan. Namun kurva yang dihasilkan akan bersudut, karena nilai pada sumbu axis sangat pendek (hanya -10 sampai 10 / 20 kali), sehingga untuk menghasilkan kurva yang halus, digunakan variabel smooth untuk memperdetail perhitungan.

file sumber (Adobe Animate CC 2017): dapat diunduh disini

Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon