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();