Clever Geek Handbook

OberonJSトランスレータを使用してインタラクティブなモデルエディタを作成した経験

教育モデルを作成するのは楽しいです。あなたのプログラムと相互作用することによって、人が自然科学やアルゴリズムの複雑な原理を理解しているのを見るのは素晴らしいことです。私は職業別の生物物理学者なので、通常は方程式や数学に問題はありませんが、視覚的なインタラクティブモデルを作成するためのツールで長い道のりを歩んできました。 Matlabでモデルの作成を開始しました。方程式を解くための優れたライブラリがあり、グラフを簡単に作成できます。欠点は、結果を共有することが難しく、開発者の範囲外で何かを行うことが非常に難しいことです。より多くの自由が必要です。また、Flashテクノロジーを使おうとしましたが、当時はまだWebに関連しており、ActionScript言語によって非常に忙しいインタラクティブモデルを作成することができました。しかし、ActionScriptプログラミング言語自体は、調和と秩序に関する私の厳密な考えに対応していなかったため、Flashテクノロジーは新しいHTML5標準によってブラウザーから完全に排除されました...その時までに、私はすでに環境でモデルを積極的にプログラミングしていました。BlackBoxコンポーネントビルダー。これはスイスのオープンソース開発であり、ETHOSオペレーティングシステムに基づいて開発されたIDEオペレーティングシステムから完全に分離されています。..。グラフィックライブラリは私にとっては問題ありませんでした。コンパイラのパフォーマンス、計算コードの実行速度も問題ありませんでした。そして最も重要なことは、Oberon言語は、理想的には、プログラミング言語がドメインスペシャリストの頭にどれだけかかるべきかという私の考えに基づいています。言語的な癖は必要ありませんでした。コンフォートゾーンにいて、タスクについて考えるのは良かったです。しかし、21世紀には、コンパイルされたアプリケーションを配布して学生に何かを見せたり、単にモデルをインターネット上で公開したりすることは非常に困難です。結局のところ、人々は単にサードパーティのアプリケーションを実行することを恐れており、アンチウイルスはしばしば誤検知を与えます。科学と産業向けのデスクトップアプリケーションは優れていますが、人々を教育するためのインタラクティブなモデルはそうではありません。

2014年には、Informatics-21プロジェクトとともに、モスクワでIT会議を開催しました。ロシア全土から、さらにはベラルーシからもオベロンシステムのスペシャリストがやって来ました。それから私は古いカメラを撮るのに怠惰ではなく、ほとんどのレポートを記録しました。Alexei Veselovskyの講演から、OberonJSトランスレータについて学びました。レポートの理論は単純です。JavaScriptは非常に不定形な物質であるため、大きなものを開発するのは頭痛の種ですが、JavaScriptがOberonで設計されている場合、デバッグの大幅な節約になります。オベロン LEGO MINDSTORMS . , , « » . , , . CodeMirror JavaScript . , , ProcessingJS!

+ HTML5 = , , . :

« — . , , . , - - . , ».

« !» :

MODULE HelloWorld;
IMPORT Log;
BEGIN
 Log.String(" !"); Log.Ln
END HelloWorld.

, .

OberonJS, , , . , , CodeMirror , . , , . . MVP, .

: Log , Math , Strings , Draw , Forms Plot . , .

ProcessingJS, , p5.js. JavaScript JS.do, — . , REAL INTEGER FLOOR FLT. , : , . , , :

MODULE Draw;
IMPORT JS;
...
PROCEDURE Line*(x0, y0, x1, y1: REAL);
BEGIN JS.do("Instance.line(x0,y0,x1,y1)")
END Line;

PROCEDURE LineInt*(x0, y0, x1, y1: INTEGER);
BEGIN JS.do("Instance.line(x0+0.5,y0+0.5,x1+0.5,y1+0.5);")
END LineInt;
...
END Draw.

* . Instance Draw.Start, , p5.js, InnerDraw .

MODULE Draw;

TYPE
 ProcessingType* = POINTER TO RECORD END;

VAR
 Instance: ProcessingType; focus, started: BOOLEAN;

...

PROCEDURE InnerDraw;
BEGIN
 IF DrawProc # NIL THEN
  TrackMouse;
  DrawProc;
  IF FormDraw # NIL THEN FormDraw END
 END
END InnerDraw;

PROCEDURE Start*;
BEGIN
 ASSERT(~started);
 JS.do("let sketchProc = function(p){
 p.preload=Preload;
 p.draw=InnerDraw; p.setup=InnerSetup;
 p.keyPressed=InnerKeyPressed; p.keyTyped=InnerKeyTyped;
 p.mousePressed=InnerPressed; p.mouseReleased=InnerReleased;
 p.mouseOver=InnerOver; p.mouseOut=InnerOut;
 Instance=p;
 }");
 JS.do("var processingInstance = new p5(sketchProc);");
 JS.do("Instance.colorMode(Instance.RGB, 255, 255, 255, 1);");
 JS.do("removeSketch = function() { Remove(); }");
 focus := FALSE;
 started := TRUE
END Start;

END Draw.

JavaScript , , . , . , :

...
var Init = function (Log){

function Do(){
	Log.String(" !");
	Log.Ln();
}
Do();
}(Log);

, JavaScript. :

MODULE Strings;

IMPORT JS;

PROCEDURE Length* (s: ARRAY OF CHAR): INTEGER;
VAR i: INTEGER;
BEGIN i := 0;
 WHILE (i < LEN(s)) & (s[i] > 0X) DO INC(i) END
 RETURN i
END Length;

...

:

var Strings = function (JS){

function Length(s/*ARRAY OF CHAR*/){
	var i = 0;
	i = 0;
	while (true){
		if (i < s.length && RTL$.charAt(s, i) > 0){
			++i;
		} else break;
	}
	return i;
}

charAt :

var RTL$ = {
    charAt: function(s, index){
        if (index >= 0 && index < s.length)
            return s.charCodeAt(index);
        throw new Error("index out of bounds: " + index);
    },
...
}

, , . . — . , , JavaScript. - , .

— . - , , HTML5.

ただし、技術的な問題にもかかわらず、概念的には、OberonJSは、インタラクティブモデルを作成するための使いやすいソフトウェアデザイナーインターフェイスを作成するという問題の解決に役立ちました。また、重要な利点は、プログラムの作成時にOberonJSトランスレータがサーバーに接続せず、プログラムがクライアント側でも実行されることです。つまり、スケーリングの場合、サーバーの負荷がわずかに増加するはずです。

将来的には、OberonJSをElectronフレームワークと組み合わせるのは興味深いことです。



More articles:


All Articles