Еще одина демонстрация Processing'a:
MODULE PageInit;
IMPORT JS;
PROCEDURE CreateCanvas*;
BEGIN
JS.do("var canvas = document.createElement('canvas');
canvas.id = 'processingCanvas'
document.body.insertBefore(canvas,document.body.childNodes[0]);
");
END CreateCanvas;
END PageInit.
MODULE Processing;
IMPORT JS;
TYPE
ProcessingType* = POINTER TO RECORD END; (* dummy type *)
CallbackType* = PROCEDURE;
VAR
MouseX* : REAL;
MouseY* : REAL;
Width* : INTEGER;
Height* : INTEGER;
DrawProc : CallbackType;
SetupProc : CallbackType;
Instance : ProcessingType;
Started : BOOLEAN;
(* callbacks *)
PROCEDURE SetSetupProc*(s : CallbackType);
BEGIN
SetupProc := s
END SetSetupProc;
PROCEDURE SetDrawProc*(d : CallbackType);
BEGIN
DrawProc := d
END SetDrawProc;
(* global *)
PROCEDURE SetFrameRate* (fps : INTEGER);
BEGIN
JS.do("Instance.frameRate(fps);")
END SetFrameRate;
PROCEDURE SetBackground*(argb : INTEGER);
BEGIN
JS.do("Instance.background(argb)")
END SetBackground;
PROCEDURE SetSize*(w, h : INTEGER);
BEGIN
JS.do("Instance.size(w,h);")
END SetSize;
PROCEDURE Stroke*(argb : INTEGER);
BEGIN
JS.do("Instance.stroke(argb)")
END Stroke;
(* drawing *)
PROCEDURE Line*(x0,y0,x1,y1 : REAL);
BEGIN
JS.do("Instance.line(x0,y0,x1,y1);");
END Line;
(* Color *)
PROCEDURE Fill*(r,g,b : INTEGER);
BEGIN
JS.do("Instance.fill(r, g, b)");
END Fill;
(* math *)
PROCEDURE Radians*(angle : REAL) : REAL;
VAR
ret : REAL;
BEGIN
JS.do("ret = Instance.radians(angle)");
RETURN ret
END Radians;
PROCEDURE Map*(value,low1,high1,low2,high2 : REAL) : REAL;
VAR ret : REAL;
BEGIN
JS.do("ret = Instance.map(value,low1,high1,low2,high2);");
RETURN ret
END Map;
PROCEDURE Noise2d*(x, y : REAL) : REAL;
VAR ret : REAL;
BEGIN
JS.do("ret = Instance.noise(x,y);");
RETURN ret
END Noise2d;
(* transform *)
PROCEDURE Translate*(x,y : REAL);
BEGIN
JS.do("Instance.translate(x,y);")
END Translate;
PROCEDURE PushMatrix*;
BEGIN
JS.do("Instance.pushMatrix();")
END PushMatrix;
PROCEDURE PopMatrix*;
BEGIN
JS.do("Instance.popMatrix();")
END PopMatrix;
PROCEDURE Rotate*(angle : REAL);
BEGIN
JS.do("Instance.rotate(angle);")
END Rotate;
(* Vertex *)
PROCEDURE BeginShape*();
BEGIN
JS.do("Instance.beginShape();")
END BeginShape;
PROCEDURE BezierVertex2d*(cx1, cy1, cx2, cy2, x, y : REAL);
BEGIN
JS.do("Instance.bezierVertex(cx1, cy1, cx2, cy2, x, y);")
END BezierVertex2d;
PROCEDURE CurveVertex2d*(x, y : REAL);
BEGIN
JS.do("Instance.curveVertex(x, y);")
END CurveVertex2d;
PROCEDURE EndShape*();
BEGIN
JS.do("Instance.endShape();")
END EndShape;
PROCEDURE EndAndCloseShape*();
BEGIN
JS.do("Instance.endShape(Instance.CLOSE);")
END EndAndCloseShape;
PROCEDURE Vertex2d*(x,y : REAL);
BEGIN
JS.do("Instance.vertex(x, y);")
END Vertex2d;
(* internal engine *)
PROCEDURE InnerDraw;
BEGIN
IF DrawProc # NIL THEN
JS.do("MouseX = Instance.mouseX; MouseY = Instance.mouseY;");
JS.do("Width = Instance.width; Height = Instance.height;");
DrawProc
END
END InnerDraw;
PROCEDURE InnerSetup;
BEGIN
IF SetupProc # NIL THEN
SetupProc
END
END InnerSetup;
(* start routine *)
PROCEDURE Start*;
BEGIN
ASSERT(~Started);
JS.do("function sketchProc(p){p.draw=InnerDraw; p.setup=InnerSetup; Instance=p;}");
JS.do("var canvas = document.getElementById('processingCanvas');");
JS.do("var processingInstance = new JS.Processing(canvas, sketchProc)");
Started := TRUE
END Start;
END Processing.
MODULE NoiseWave;
IMPORT PageInit, P := Processing;
CONST
width = 640;
height = 360;
VAR
yoff : REAL;
PROCEDURE Setup;
BEGIN
P.SetSize(width, height);
END Setup;
PROCEDURE Draw;
VAR
xoff : REAL;
x : INTEGER;
y : REAL;
BEGIN
xoff := 0.0;
P.SetBackground(51H);
P.Fill(255,255,255);
P.BeginShape();
FOR x := 0 TO width BY 10 DO
y := P.Map(P.Noise2d(xoff, yoff), 0.0, 1.0, 200.0, 300.0);
P.Vertex2d(FLT(x), y);
xoff := xoff + 0.05;
END;
yoff := yoff + 0.01;
P.Vertex2d(FLT(width), FLT(height));
P.Vertex2d(0.0, FLT(height));
P.EndAndCloseShape();
END Draw;
BEGIN
yoff := 0.0;
PageInit.CreateCanvas;
P.SetSetupProc(Setup);
P.SetDrawProc(Draw);
P.Start
END NoiseWave.
