繪畫多角星的程式

較早前寫作 Schläfli Symbol 一文,內裏的多角星我是用繪圖軟件繪畫,畫了很久。心想其實自己寫程式,對任意 n, m 產生多角星,一定會方便得多。

當中程式的 algorithm,其實我很快便想好,用 python 亦很快把程式寫出來。但覺得放在網頁大家也可動手去玩,這樣會有趣得多,於是著手研究 javascript。

圖像是一個 SVG 格式,那是其中一種 XML,所以用 javascript 可以操控當中的 DOM object。不過我個人不熟 html, javascript, dom,所以費了不少時間。javascript 要 debug 也很麻煩,有個小 bug,費了數小時。

就是在

var n = parseInt(document.getElementById("input_n").value);   //get the value of n from input
var m = parseInt(document.getElementById("input_m").value);  // get the value of m from input

起初我是這樣寫的:

var n = document.getElementById("input_n").value;   //get the value of n from input
var m = document.getElementById("input_m").value;  // get the value of m from input

這樣做,出現很奇怪的結果。某些 nm 和產生正確的圖像,某些則會產生錯誤圖像,而某些甚至 hang 機,但完全沒有 error message。

這個算是 dynamic typing language 的缺點吧。

在這程式,大家可以改變 nm、線的粗幼 (stroke-width)、線的顏色。一開始,下方沒有圖像(原本有的,但放入 wikidot 後沒有了,我也不懂在wikidot 進行相關設定。)。當你作出改動時,圖像會自動產生/更新。

留意,用 Google Chrome / Chromium 會有最佳效果。Opera 亦可。Firefox 都可以。但 Internet Explorer 就免了。部分 syntax 屬 html5,Google Chrome / Chromium 處理較佳。而 IE8 要安裝 plugin 才可處理 SVG。

圖像下面有個 box,內裏會有一段 code,全選那段 code,然後開一個 text editor (例如 Windows 的記事本),把那段 code 複制到 text editor,然後把檔案儲存為形式為 abc.svg 的檔案 (例如 mygraph.svg)。這個便是對應的圖像檔。此圖案為 SVG 格式,可用 browser (例如 Google Chrome, Firefox) 開啟,或用支援 SVG 的圖像軟件來編輯 (例如 Adobe Illustrator, Inkscape 等)。
(謝謝英楠的建議,使我運用 textarea 來方便用家儲存圖案。)


Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +