Senin, 28 Desember 2015

Contoh Tombol dari CSS3

Berikut adalah beberapa contoh tombol yang dibuat dengan menggunakan kode CSS3. Bila ada yang ingin membuatnya, silakan saja untuk meng-copy kode html laman ini. Kode CSS3 untuk style tombol berada pada bagian body laman.

Glossy Ball Button

A Z

Glossy Tube Button

Emergency Button

Stand By Button

Glossy Round Rectangle Button

Looking for something?

Just copy this page style

Jumat, 18 Desember 2015

Tutorial MtPaint: Contoh Image Editing

Bagian ini merupakan kelanjutan dari postingan sebelumnya mengenai mtPaint. Bila ingin menggunakan aplikasi ini baik versi Windows maupun Linux, silahkan download langsung di sini.
Pada bagian ini dijelaskan beberapa langkah penanganan gambar, bila kurang jelas silahkan lihat ke bagian dokumentasi aplikasi ini (ada di bagian Help).

Feathered Edges

Buka sebuah file gambar
Pilih menu Channels ▶ News.. ▶ Channel Type: Selection, Initial Channel State: Cleared ▶ OK
Pilih menu Channels ▶ Edit Selection
Pilih tool Make Selection ▶ Buat area seleksi obyek yang diinginkan ▶ Fill Ellipse
Pilih menu Effects ▶ Gaussian Blur.. ▶ Set: 20 ▶ Apply
Pilih menu Channels ▶ Edit Images
Lalu area seleksi tadi disalin dengan menu Edit ▶ Copy (Ctrl+C)
Dan dilanjut dengan menu Edit ▶ Paste (Ctrl+V)
Seret obyek ke posisi yang diinginkan ▶ Enter atau KlikKanan ▶ Esc
Pilih menu Channels ▶ Disable selection atau delete..: Selection
Simpan hasilnya

Buka sebuah file gambar
Pilih menu Channels ▶ News.. ▶ Channel Type: Selection, Initial Channel State: Cleared ▶ OK
Pilih menu Channels ▶ Edit Selection
KlikKanan tombol Gradient Mode pada Setting Toolbar ▶ Gradient type: Bilinear ▶ OK
Pilih tool Place Gradient ▶ klik dua titik posisi pada gambar untuk membuat gradient
Pilih menu Channels ▶ Edit Images
Pilih tool Make Selection untuk membuat seleksi persegi pada area gradient
Pilih menu Edit ▶ Copy (Ctrl+C)
Pilih menu Edit ▶ Paste (Ctrl+V)
Seret obyek ke posisi yang diinginkan
Aktifkan Blending dengan menekan tombol Blend Mode pada Setting Toolbar
KlikKanan tombol Blend Mode pada Setting Toolbar ▶ set: Overlay ▶ Apply
Kembali ke gambar ▶ Enter atau KlikKanan ▶ Esc
Pilih menu Channels ▶ Disable selection atau delete..: Selection
Simpan hasilnya

Outlined Edges

Buka sebuah file gambar
Pilih tool Make Selection untuk membuat seleksi persegi
Setting pada Setting Toolbar, Size: 11
Pilih tool Fill Outline

Mask

Melindungi area tertentu pada gambar dari perubahan karena tool Painting

Buka sebuah file gambar
Pilih menu Channels ▶ News.. ▶ Channel Type: Mask, Initial Channel State: Cleared ▶ OK
Pilih menu Channels ▶ Edit Mask
Pilih tool Paste Text ▶ (Ketik beberapa teks), ☑ Invert: Centang
Pilih menu Channels ▶ Edit Images
Pilih tool Make Selection ▶ buat seleksi persegi pada teks yang di-masking ▶ Fill Selection
Atur pada Setting Toolbar, Opacity: 128
Enter atau KlikKanan ▶ Esc
Pilih menu Channels ▶ Disable Mask atau delete..: Mask
Simpan

Partial Masking

Pilih semua lalu salin gambar pertama (Ctrl+A ▶ Ctrl+C)
Buka gambar kedua
Pilih menu Channels ▶ News.. ▶ Channel Type: Mask
Pilih menu Channels ▶ Edit Mask
Buat gradient dan gabungkan dengan masking persegi
Pilih menu Channels ▶ Edit Images
Tempel gambar pertama (Ctrl+V), lalu atur posisinya
Enter atau KlikKanan ▶ Esc
Pilih menu Channels ▶ Disable Mask atau delete..: Mask
Simpan

Paste Swap

Gunakan Channel Selection untuk membuat Teks-nya
Lalu kembali ke gambar dengan memilih menu Channel ▶ Edit Image
Teks yang dipilih di-Copy ▶ Paste atau di-lasso
Atur hasil teks (yang dikelilingi garis putih-biru) pada posisi yang diinginkan
Lalu tekan Shift+Enter
Atur kembali teks yang telah bertukaran ke posisi sebelumnya
Lalu Enter ▶ Esc

Isometric Transformation

Siapkan sebuah gambar
Tentukan mana untuk bagian samping-kiri, samping-kanan dan atas
Copy dan Paste To New Layer semua bagian tadi satu persatu
Layer untuk bagian kiri Effects ▶ Isometric transformation ▶ Right Side Down
Bagian kanan: Left Side Down
Bagian Atas: Bottom side Right, Left side Down
Ubah ukuran tinggi kanvas background menjadi 1,5 kali
Lalu atur posisi tiap-tiap bagian pada Layer Window
Simpan dengan memilih menu Layers ▶ Save Composite Image..

HEAVY KNEW Y'EAR - ♍♂

Senin, 14 Desember 2015

Menggambar isometric sederhana pada LibreCAD

Kali ini saya mencoba aplikasi open source LibreCAD, dan yang dipakai adalah versi 2.0.
LibreCAD adalah aplikasi untuk membuat gambar teknik seperti layaknya aplikasi komersil yang sudah mendunia yaitu Autoc@d dari Autod3sk.
Karena sifatnya yang open-source, maka aplikasi ini tidaklah selengkap Autoc@d. Hal ini terlihat dari tidak adanya fitur untuk 3D solid dan model-view.
Juga tidak adanya manual yang disertakan (manual-nya ada di website-nya) disamping minimnya contoh template gambar yang ada membuat sulit bagi para pengguna yang baru pertama kali menggunakan aplikasi ini.
Namun pada dasarnya aplikasi LibreCAD ini mirip seperti Autoc@d jaman tahun 80-90an. Jadi bagi yang pernah menggunakan Autoc@d versi 9 hingga 12, kayaknya tidak begitu kesulitan menggoperasikannya.
Perintah-perintah yang ada juga hampir sama seperti Autoc@d, baik pada Command-line maupun menu utama.
Karena belum adanya fitur menggambar 3D pada LibreCAD, maka disiasati dengan menggambar sistem isometric. Sistem ini menggunakan garis sumbu virtual seperti terlihat pada gambar berikut:

Cara membuat garis atau bentuk persegi lainnya dilakukan dengan menggunakan sistem polar yang dimasukkan pada command-line.

Membuat kubus isometric

Aktifkan snap grid dan snap endpoint
Klik tombol line with two point untuk membuat garis, atau ketik line pada command-line

Specify first point: 
(Klik sembarang pada salah satu titik grid)
(lalu klik pada kotak isian command-line di bagian bawah)
Specify next point: @40<270
Specify next point or [undo]: @40<330
Specify next point [close/undo]: @40<90
Specify next point [close/undo]: @40<150
Specify next point [close/undo]: @40<30
Specify next point [close/undo]: @40<330
Specify next point [close/undo]: @40<270
Specify next point [close/undo]: @40<210

Klik kanan pada layar untuk menyudahi proses tahap pertama
(Tanda @ pada isian data di atas wajib digunakan untuk menyatakan jarak relatif)
Klik tombol line with two point sekali lagi untuk membuat satu garis yang belum dibuat

Specify first point: 
(Klik pada salah satu sudut kubus yang belum ada garisnya)
Specify next point: 
(Klik pada salah satu sudut kubus lainnya).

Klik kanan untuk menyudahi
Lebih jelasnya lihat gambar.

Membuat lingkaran dan arc isometric

Metode yang digunakan adalah metode Stephen (kata orang-orang sih) yaitu:

Buat bujursangkar isometric sebagai tempat untuk membuat lingkarannya
Pada contoh gambar saya tandai dengan A, B, C dan D untuk tiap sudutnya, dan P, Q, R, S untuk titik tengah sisinya.
Aktifkan snap Middle dan snap Intersection
Buat garis bantu QCR dan PAS, lalu
Klik tombol Arc with Center, Point, Angles untuk membuat arc

Specify center: 
(klik pada titik A)
Specify radius: 
(klik pada titik P atau S, radiusnya berjarak AP atau AS)
Specify start angle: 
(klik pada S)
Specify end angle or [angle/chord length]: 
(klik pada P)

Klik kanan untuk menyudahi
Lakukan sekali lagi dengan garis bantu QCR untuk sisi lawannya
Untuk bagian kiri dan kanan juga sama prosesnya, namun titik pusat Arc-nya adalah X dan Y, jadi;
Klik tombol Arc with Center, Point, Angles untuk membuat arc

Specify center: 
(klik pada titik X)
Specify radius: 
(klik pada titik P atau Q, radiusnya berjarak XP atau XQ)
Specify start angle: 
(klik pada P)
Specify end angle or [angle/chord length]: 
(klik pada Q)

Klik kanan untuk menyudahi
Lakukan sekali lagi untuk sisi lawannya
Akhirnya, jadi juga lingkaran isometric-nya, tinggal dihapus saja garis bantu QCR dan PAS serta bujursangkar-nya.

Selasa, 17 November 2015

Membuat Chart pada Aplikasi Excel

Hal yang perlu diperhatikan

Beberapa hal yang perlu diperhatikan dalam pembuatan Chart di Excel adalah:

Harus ada tabel sumber untuk sumber data, dimana satu kolom data untuk sumbu X dan satu atau beberapa kolom untuk sumbu Y
Memahami istilah Charting seperti Chart Area, Plot Area, Data series, Legend dsb

Berikut saya buatkan sebuah contoh Chart dari sebuah tabel.

Tabel Data

Misal kita buat sebuah tabel pada Excel dengan isi datanya seperti terlihat pada gambar berikut

Setelah tabel di atas dibuat, langkah selanjutnya tabel tersebut kita blok dengan menggunakan mouse (klik kiri sudut-kiri atas tabel, tahan lalu geser ke sudut kanan bawah terus lepas)

Selanjutnya pilih pada toolbar, tombol Chart wizard (bentuk tombolnya masih sama dari dulu hingga sekarang)

Lalu pada worksheet akan muncul jendela Chart Wizard dimana kita dapat mensetting awal dari chart yang akan dibuat

Chart Wizard

Chart Wizard Step 1: Pilih Jenis Chart-nya, lalu Next

Chart Wizard Step 2: Setting Data Chart-nya, Klik kiri tab Series (lingkaran merah) untuk melihat Source Data, bila ada yang ingin diubah misal data Values dari Series pertama, tinggal klik kiri tanda di kanan masukan Values (lingkaran biru) lalu blok sel-sel data yang diinginkan.
Bila sudah cukup, tekan tombol Next

Chart Wizard Step 3: Untuk menyetting pilihan pada Chart yang meliputi:

Titles : Berfungsi untuk menambahkan teks judul baik untuk Chart, Sumbu X dan Sumbu Y (Coba deh)
Axes : Berfungsi untuk mensetting penampakan label pada sumbu
Gridlines : Berfungsi untuk mensetting garis grid pada plot area
Legend : Berfungsi untuk mensetting posisi Legend
Data Labels : Berfungsi untuk menampilkan label data (biasanya yang dipilih bagian Values-nya)
Data Table : Berfungsi untuk mensetting munculnya tabel data (terserah)

Bila sudah, tekan tombol Next

Chart Wizard Step 4: Tidak usah macam-macam, langsung saja tekan tombol Finish

Saat proses Chart Wizard selesai, Chart yang diharapkan akan muncul di layar

Setting Lanjutan

Setting lanjutan dapat dilakukan dengan memilih (klik kiri) elemen-elemen pada chart (seperti: Plot Area, Chart Area, Series, Legend, Axis X, Axis Y) lalu klik kanan.
Setelah klik-kanan, akan muncul menu yang disesuaikan dengan elemen Chart yang telah disebutkan tadi.
Contoh menu klik-kanan (lingkaran merah pada gambar di atas) pada Chart Area adalah:

Cobalah untuk mengubah warna latar dan garis border Chart melalui menu klik-kanan Format Chart Area..

Untuk menu klik-kanan pada elemen lain silahkan coba sendiri ya.

Aplikasi penguji yang dipakai:
Spreadsheet: Excel 2002 (udah jadul, bajakan lagi, menyedihkan)
Grafis: Paint 5.1 (sama dengan di atas, mengenaskan)
Browser: Firefox 42.0 (Cuma ini yang legal, swear)

Setting Nomor Halaman Dokumen

Pada MS Word 2002 - Windows

Untuk membuat nomor halaman dengan format yang berbeda pada sebuah dokumen Word 2002, maka beberapa hal yang harus diperhatikan adalah:

Bagi dokumen dalam beberapa section dengan menggunakan menu Insert > Break.. > Section Break Type > Next Page
Pindahkan kursor ke setiap section
Tambahkan nomor halaman pada tiap-tiap section dengan format yang berbeda melalui menu Insert > Page Number.., lalu atur position dan alignment-nya, kemudian atur pula format-nya melalui tombol Format..
Pada jendela Page Number format, kita dapat mengatur Number format dan Start At-nya

Pada Abiword 3.0.1 - Linux

Pada aplikasi Abiword (kelas ringan), metode pemformatan nomor halaman tidaklah selengkap seperti yang ditunjukkan pada MS Word 2002, namun cukuplah untuk membuat sebuah penomoran halaman sederhana yang berbeda untuk tiap sectionnya.
Langkah-langkahnya sebagai berikut:

Bagi dokumen dalam beberapa section dengan menggunakan menu Insert > Break.. > Section Breaks > Next page
Pindahkan kursor ke setiap section
Tambahkan nomor halaman pada tiap-tiap section dengan format yang berbeda melalui menu Insert > Page Numbers.., lalu atur position dan alignment-nya
Untuk mengatur format nomor halaman dapat dilakukan melalui menu Format > Header/Footers, seperti gambar berikut
Sedangkan untuk section yang menggunakan format nomor halaman roman (i, ii, iii ...), belum didukung oleh Abiword versi ini, sehingga penomorannya hanya dapat dilakukan secara manual alias isi header atau footer-nya dengan teks yang berisi i, ii dst satu persatu.

Rabu, 04 November 2015

Plotting Gelombang Sinus pada html

Setelah lama mencari cara mem-plot fungsi trigonometri pada laman html, akhirnya ketemu juga. Ya lumayan lah, meskipun masih banyak yang kurang

Plotting Gelombang Sinus

Untuk persamaan:

┌─────────────────────────────┐
│                             │
│ y = C + A ⋅ Sin (B (x + D)) │
│                             │
└─────────────────────────────┘

dengan x : 0 < x < 360°
Kalau bingung, isi saja variabel dibawah dengan
A = 1, B = 1, C = 0 dan D = 0, lalu tekan tombol Plot.

Isi lagi (tanpa mengosongkan kanvas) nilai variabel di atas dengan nilai yang berbeda lalu plot untuk hasil yang berbeda,
Bila ingin mengosongkan kanvas bawah klik-kanan lalu pilih "Reload this page" pada laman browser(Firefox).

JavaScript must be enabled and supported

Naskah html ini cuma dibuat memakai Notepad.
Html ditampilkan dengan baik pada browser Mozilla Firefox 41.0.2 (Akhir 2015)
Netbook HP Mini-nya jebol woooi ❀ R.I.P. ❀

Jumat, 30 Oktober 2015

Belajar mtPaint Dasar

Program ini merupakan program pengolah gambar yang didistribusikan secara gratis pada platform Linux. Program buatan Mr. Mark Tyler dan Mr. Dmitry Groshev ini termasuk program penyunting gambar kelas ringan namun cukup mumpuni. Dan menurut hemat penulis, program ini bagaikan gabungan antara aplikasi Paint dengan Photoshop.
Ketika pertama kali mencoba, saya agak bingung untuk menggunakannya. Sebab memang tidak ada panduan yang disertakan pada aplikasi ini. Untungnya ada panduan pada website-nya para pembuat program ini, sehingga sedikit demi sedikit, saya dapat mengerti cara menggunakan program ini.
Berikut adalah sekelumit dari pengalaman menggunakan mtPaint.

Buat Kanvas Baru

Cara membuatnya dapat melalui toolbar atau menu File > New . mtPaint mendukung dua mode kanvas yaitu :

Indexed
24 bit RGB

Agar dapat melakukan proses Undo pada pengolahan screenshot, maka pilihan Undoable harus dicentang.
Untuk contoh-contoh berikutnya, saya menggunakan kanvas jenis 24 bit RGB.

Buat Garis dan Panah

Caranya:

Pilih warna garis pada palette warna sebelah kiri
Pilih tool Straight Line pada toolbar
Klik kiri untuk titik awal pada kanvas lalu lepas
Gerakkan pointer ke titik akhir garis lalu klik kiri

Prosedur di atas dapat diulangi berkali-kali dan untuk mengakhirinya dilakukan dengan klik-kanan dan tombol Esc. Ketebalan garis dapat diatur pada tool size pada jendela Setting Toolbar saat pembuatan garis.
Gambar di bawah merupakan contoh garis ukuran 3, 5 dan 7.

Untuk membuat sebuah garis panah caranya:

Pilih warna garis pada palette warna sebelah kiri
Pilih tool Straight Line pada toolbar
Klik kiri untuk titik awal pada kanvas lalu lepas
Gerakkan pointer ke titik akhir garis lalu tekan tombol A (untuk panah terbuka) atau S (panah tertutup)
Prosedur pembuatan diakhiri dengan klik-kanan dan tombol Esc

Besar kecilnya anak panah diatur pada tool Flow pada jendela Setting Toolbar
Gambar di bawah merupakan contoh panah dengan size=3, flow=15 dan size=5, flow=20

Buat bentuk Kotak, Segitiga, Elips dan Teks

Untuk kotak caranya:

Pilih tool Make Selection pada toolbar
Klik kiri pada kanvas untuk titik pojok kiri-atas kotak yang akan dibuat dan
Klik kiri lagi untuk titik pojok kanan-bawah-nya
Pilih warna isian kotak pada palette warna
Lalu pilih tool Fill Selection pada toolbar untuk mengisi kotak;
atau pilih tool Outline Selection pada toolbar untuk membuat garis outline
Prosedur pembuatan diakhiri dengan klik-kanan dan tombol Esc

Untuk elips atau bundar, caranya sama pembuatan kotak namun pada saat pengisian warna dan garis tepi menggunakan tool Filled Ellipse dan Ellipse Outline
Untuk membuat segitiga dapat digunakan tool Polygon Selection dalam membuat seleksi bentuk segitiga tertutup-nya dengan cara pewarnaan yang sama seperti pada pembuatan kotak.
Gambar berupa tulisan dapat dilakukan dengan tool Paste Text pada toolbar. Pada mode kanvas RGB terdapat fasilitas antialias dan angle of Rotation untuk merotasikan teks.

Menghapus Obyek Gambar

Caranya:

Pilih bentuk gambar yang akan dihapus atau di-clear dengan tool Make Selection atau Polygon Selection
Pilih warna A (foreground) yang nomor indeks-nya 0 pada palette (rgb 0,0,0)
Lalu Fill Selection

Warna Transparan

Untuk jenis file gambar PNG, mtPaint mendukung tipe warna transparan untuk warna A (foreground) dan B (background).
Untuk mengaturnya dapat melalui:

Menu Image > Preference > Files, lalu atur Tansparency Index menjadi 0, atau
Saat menyimpan dalam format PNG, atur nilai Tansparency Index-nya menjadi 0

Cukup demikian saja pengalaman yang saya ceritakan, bila ingin menggali lebih banyak mengenai aplikasi mtPaint ini, silakan kunjungi laman web-nya di sini.

Minumlah air secukupnya seteguk demi seteguk
176!
Load or Locked?

Rabu, 28 Oktober 2015

Contoh Rumus dalam Form HTML

Rumus Volume

Bila tidak tahu tentang rumus ini berarti sekolah SD-nya sampai gerbang doang.

Rumus Listrik

Bila:

V : Tegangan (Volt)
I : Arus (Ampere)
R : Tahanan (Ohm)
P : Daya (Watt/detik)

Maka:

┌──────────────────────────────────────┐
│                V       V             │
│  V = I⋅R ; I = ─ ; R = ─ ; P = V⋅I   │
│                R       I             │
└──────────────────────────────────────┘

Kotak dan Panah UTF-8

☘
┌──────────────┐
│              │      .─────────────,
│              │     ╱             ╱
│              │    ╱             ╱
└──────────────┘   '─────────────'

  ________           .────────────┐
 ╱        ╲         ╱             │
╱          ╲       │              │
╲          ╱       │              │
 ╲________╱        └──────────────┘


┌┬────────────┬┐   ┌──────────────┐
││            ││   │              │
││            ││   │        _____ │
││            ││   │       ╱     ╲│
└┴────────────┴┘    ╲_____╱

  __________       __________
 ╱         ╱       ╲         ╲
(         (         )         )
 ╲_________╲       ╱_________╱

      _             ______
     (_)           (______)

  ╱╲         ╱╲      .      .
 ╱  ╲       ╱  ╲    ╱│______│╲
|    |     '────'  ╱          ╲
└────┘     .────,  ╲  ______  ╱
┌────┐      ╲  ╱    ╲│      │╱
|    |       ╲╱      `      '
 ╲  ╱
  ╲╱

       .      .      
 ______│╲    ╱│______
│        ╲  ╱        │
│______  ╱  ╲  ______│
       │╱    ╲│      
       '      `      
             ┌────┐
   ╱╲        │    │ 
  ╱  ╲      -┘    └-
 ╱    ╲      ╲    ╱
-╮    ╭-      ╲  ╱
 │    │        ╲╱
 └────┘

────▶
◀────
▲
│
│
▼

Markus Kuhn <http://www.cl.cam.ac.uk/~mgk25/> — 2002-07-25
Box drawing alignment tests:                                          █
                                                                      ▉
  ╔══╦══╗  ┌──┬──┐  ╭──┬──╮  ╭──┬──╮  ┏━━┳━━┓  ┎┒┏┑   ╷  ╻ ┏┯┓ ┌┰┐    ▊ ╱╲╱╲╳╳╳
  ║┌─╨─┐║  │╔═╧═╗│  │╒═╪═╕│  │╓─╁─╖│  ┃┌─╂─┐┃  ┗╃╄┙  ╶┼╴╺╋╸┠┼┨ ┝╋┥    ▋ ╲╱╲╱╳╳╳
  ║│╲ ╱│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╿ │┃  ┍╅╆┓   ╵  ╹ ┗┷┛ └┸┘    ▌ ╱╲╱╲╳╳╳
  ╠╡ ╳ ╞╣  ├╢   ╟┤  ├┼─┼─┼┤  ├╫─╂─╫┤  ┣┿╾┼╼┿┫  ┕┛┖┚     ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳
  ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎
  ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏
  ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛  ▗▄▖▛▀▜   └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█
                                               ▝▀▘▙▄▟

Rabu, 21 Oktober 2015

Simbol Flowchart JavaScript

Kode fungsi JavaScript untuk simbol Flowchart

Silakan copy dan paste sendiri ke bagian body dari dokumen HTML. Atau salin dan buat ke dalam file js juga boleh. Untuk masalah syntax, silakan raba-raba sendiri deh (pengin buat tabelnya tapi keburu ngantuk).

var angle = Math.atan2(key-dariy,kex-darix);

//starting path of the arrow from the start square to the end square and drawing the stroke
   ctx.beginPath();
   ctx.moveTo(darix, dariy);
   ctx.lineTo(kex, key);
   ctx.strokeStyle = "#000000";
   ctx.lineWidth = 2;
   ctx.stroke();

//starting a new path from the head of the arrow to one of the sides of the point
   ctx.beginPath();
   ctx.moveTo(kex, key);
   ctx.lineTo(kex-headlen*Math.cos(angle-Math.PI/7),key-headlen*Math.sin(angle-Math.PI/7));

//path from the side point of the arrow, to the other side point
   ctx.lineTo(kex-headlen*Math.cos(angle+Math.PI/7),key-headlen*Math.sin(angle+Math.PI/7));

//path from the side point back to the tip of the arrow, and then again to the opposite side point
   ctx.lineTo(kex, key);
   ctx.lineTo(kex-headlen*Math.cos(angle-Math.PI/7),key-headlen*Math.sin(angle-Math.PI/7));

//draws the paths created above
   ctx.strokeStyle = "#000000";
   ctx.lineWidth = 2;
   ctx.stroke();
   ctx.fillStyle = "#000000";
   ctx.fill();
}

function drawDecision(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var stgx = (kex-darix)/2;
   var stgy = (key-dariy)/2;
   
   ctx.beginPath();
   ctx.moveTo(darix+stgx, dariy);
   ctx.lineTo(kex, dariy+stgy);
   ctx.lineTo(darix+stgx, key);
   ctx.lineTo(darix, dariy+stgy);
   ctx.closePath();
   
   ctx.fillStyle = warnay;
   ctx.fill();
   ctx.strokeStyle = warnax;
   ctx.lineWidth = 2;
   ctx.stroke();
   ctx.moveTo((kex-darix)/2, key);
}
function drawProcess(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   
   ctx.beginPath();
   ctx.moveTo(darix, dariy);
   ctx.lineTo(kex, dariy);
   ctx.lineTo(kex, key);
   ctx.lineTo(darix, key);
   ctx.closePath();
   
   ctx.fillStyle = warnay;
   ctx.fill();

ctx.strokeStyle = warnax;
   ctx.lineWidth = 2; 
   ctx.stroke();
}

function drawTerminal(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var jar = (key - dariy)/2;
   
   ctx.moveTo(darix, dariy);
   ctx.beginPath();
   ctx.arc(darix+jar,key-jar,jar,0.5*(Math.PI),1.5*(Math.PI));
   ctx.lineTo(kex-jar, dariy);
   ctx.arc(kex-jar,key-jar,jar,1.5*(Math.PI),0.5*(Math.PI));
   ctx.closePath();