Автор Тема: [Oberon-07/11, js] Demos  (Прочитано 27666 раз)

valexey_u

  • Hero Member
  • *****
  • Сообщений: 3013
    • Просмотр профиля
[Oberon-07/11, js] Demos
« : Сентябрь 05, 2013, 12:21:58 am »
Поскольку теперь у нас компилятор уже вполне сносно воспринимает семантику Оберона, я пробую сделать что-то более-менее приближенное к действительности. Так что сюда буду складывать то что получилось.

Итак, пробный шар - графика. Черновой набросок биндинга к processing.js. Код скопипастить в наш онлайн-компилер (http://oberspace.dyndns.org/oberonjs.html), ткнуть Compule&Run и наслаждаться :-)

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;

  (* math *)
  PROCEDURE Radians*(angle : REAL) : REAL;
  VAR
    ret : REAL;
  BEGIN
    JS.do("ret = Instance.radians(angle)");
    RETURN ret
  END Radians;

  (* 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;
   
  (* 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 Tree;
  IMPORT PageInit, P := Processing;

  VAR
    theta : REAL;

  PROCEDURE Branch(h : REAL);
  BEGIN
    h := 0.66*h;

    IF h > 2.0 THEN
      P.PushMatrix;
      P.Rotate(theta);
      P.Line(0.0, 0.0, 0.0, -h);
      P.Translate(0.0, -h);
      Branch(h);
      P.PopMatrix;

      P.PushMatrix;
      P.Rotate(-theta);
      P.Line(0.0, 0.0, 0.0, -h);
      P.Translate(0.0, -h);
      Branch(h);
      P.PopMatrix;     
    END
  END Branch;

  PROCEDURE Setup;
  BEGIN
    P.SetSize(640,360);
    P.SetBackground(0H)
  END Setup;
 
  PROCEDURE Draw;
  VAR
    a : REAL;
  BEGIN
    P.SetBackground(0H);
    P.SetFrameRate(30);
    P.Stroke(0FF00FF00H);

    a     := P.MouseX/FLT(P.Width)*90.0;
    theta := P.Radians(a);
 
    P.Translate(FLT(P.Width)/2.0, FLT(P.Height));
    P.Line(0.0, 0.0, 0.0, -120.0);
    P.Translate(0.0, -120.0);
   
    Branch(120.0)
  END Draw;

BEGIN
  PageInit.CreateCanvas;
  P.SetSetupProc(Setup);
  P.SetDrawProc(Draw);
  P.Start
END Tree.
Y = λf.(λx.f (x x)) (λx.f (x x))

valexey_u

  • Hero Member
  • *****
  • Сообщений: 3013
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #1 : Сентябрь 05, 2013, 12:40:45 am »
Да, этот замечательный фрактал не я придумал, это стандартная демка процессинга: http://processing.org/examples/tree.html

На всякий случай повторю код непосредственно рисуюшего модуля, без модулей биндингов (без них оно конечно не заработает): https://gist.github.com/valexey/6444140

А вот оригинал там же: https://gist.github.com/valexey/6444154
А вот так эта демка выглядит будучи написано на чистом js: https://gist.github.com/valexey/6444226

PS. У Processing'a свой язык, этот язык сильно напомнает очень упрощенную яву в котором предопределены всякие там width, height и другие переменные. Язык статически типизированный и умеет компилироваться в js. Язычок этот конечно вне Processing'a не живет.
Y = λf.(λx.f (x x)) (λx.f (x x))

valexey_u

  • Hero Member
  • *****
  • Сообщений: 3013
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #2 : Сентябрь 05, 2013, 12:48:45 am »
Создавать отдельный репозиторий для такого недобиндинга слишком жирно, так что я пока прикопал сюда: https://gist.github.com/valexey/6444274
Y = λf.(λx.f (x x)) (λx.f (x x))

valexey_u

  • Hero Member
  • *****
  • Сообщений: 3013
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #3 : Сентябрь 05, 2013, 01:05:31 am »
Кстати. проверил на iPad'e - тоже работает :-)
Y = λf.(λx.f (x x)) (λx.f (x x))

Jordan

  • Sr. Member
  • ****
  • Сообщений: 282
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #4 : Сентябрь 05, 2013, 01:48:34 am »
Ай да Алексей и Влад. Ай да молодцы.

Будет ли биндинг для web GL?

Geniepro

  • Hero Member
  • *****
  • Сообщений: 1955
  • Знайте- истина в том, что повторено трижды подряд!
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #5 : Сентябрь 05, 2013, 05:31:15 am »
Итак, пробный шар - графика. Черновой набросок биндинга к processing.js. Код скопипастить в наш онлайн-компилер (http://oberspace.dyndns.org/oberonjs.html), ткнуть Compule&Run и наслаждаться :-)

Прикольно и зачётно ))
to iterate is human, to recurse, divine

Салат «рекурсия»: помидоры, огурцы, салат…

valexey_u

  • Hero Member
  • *****
  • Сообщений: 3013
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #6 : Сентябрь 05, 2013, 10:47:49 am »
Ай да Алексей и Влад. Ай да молодцы.

Будет ли биндинг для web GL?
Спасибо :-)

Краткий ответ - да, будет. Но после законченного биндинга к Processing.

Поясню: Processing умеет и 3D тоже (в браузере это через WebGL как раз). По сути Processing просто сильно упрощает написание граф. приложений предоставляя удобный и понятный унифицированный API. В принципе это в чем-то похоже на SDL. Процессинговые 3D демки можно глянуть тут: http://matrix.senecac.on.ca/~asalga/pjswebide/index.php (если справа у вас сразу не запускается 3Д демка, а виден только слева текст - значит что-то пошло не так (не работает WebGl), попробуйте другой браузер).

Поэтому вначале я сделаю полный биндинг к Processing, а затем уже будут делаться биндинги к веб-стандартным методам рисование - к canvas и webgl (напрямую с ними работать программисту менее удобно, но возможностей, если хочется чего-то эдакого (ну, свой Prcessing написать например :-) ) там чуть больше, точнее оно чуть гибче).

Processing as is, отлично подходит для написания игр и для обучения. Для некоторой бизнес и научной графики тоже подойдет (визуализация молекул скажем).

PS. Энергично доводить до ума биндинг к процессингу я видимо буду только на следующей неделе либо вообще после 23 сентбяря, у меня тут все еще конкурс, ну и на работе накопилось.
Y = λf.(λx.f (x x)) (λx.f (x x))

Илья Ермаков

  • Sr. Member
  • ****
  • Сообщений: 493
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #7 : Сентябрь 05, 2013, 02:14:38 pm »
Поэтому вначале я сделаю полный биндинг к Processing, а затем уже будут делаться биндинги к веб-стандартным методам рисование - к canvas и webgl (напрямую с ними работать программисту менее удобно, но возможностей, если хочется чего-то эдакого (ну, свой Prcessing написать например :-) ) там чуть больше, точнее оно чуть гибче).

Алексей, ты в курсе, что над WebGL очень популярен Three.JS? Насколько я смотрел, он как раз практически не уменьшает гибкость, но добавляет чуток удобства. Сейчас часто вообще под WebGL народ имеет в виду WebGL с Three.JS.

valexey_u

  • Hero Member
  • *****
  • Сообщений: 3013
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #8 : Сентябрь 05, 2013, 03:05:13 pm »
Поэтому вначале я сделаю полный биндинг к Processing, а затем уже будут делаться биндинги к веб-стандартным методам рисование - к canvas и webgl (напрямую с ними работать программисту менее удобно, но возможностей, если хочется чего-то эдакого (ну, свой Prcessing написать например :-) ) там чуть больше, точнее оно чуть гибче).

Алексей, ты в курсе, что над WebGL очень популярен Three.JS? Насколько я смотрел, он как раз практически не уменьшает гибкость, но добавляет чуток удобства. Сейчас часто вообще под WebGL народ имеет в виду WebGL с Three.JS.
Не в курсе. Спасибо за инфу. Возможно это будет следующее после Processing'a.

Но WebGL пока сыроват - на ряде комбинаций браузер+ось+железо оно не работает. Хотя его допиливают довольно быстро, через полгода-год думаю будет работать везде на актуальных версиях софта.
Y = λf.(λx.f (x x)) (λx.f (x x))

valexey_u

  • Hero Member
  • *****
  • Сообщений: 3013
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #9 : Сентябрь 05, 2013, 03:09:29 pm »
На самом деле для деловой интерактивной графики нужно еще что-то векторное позволяющее удобно трассировать мышку (обрабатывать onclick по фигуре). То есть для полного покрытия всех графических нужд нужен будет еще биндинг либо к Raphaël (его создателя на видео вы уже видели :-) ) либо Paper.js. Бегло ознакомиться с этим можно тут: http://habrahabr.ru/post/140286/

Ну и само собой есть большая задача по созданию биндингов к W3C стандартам - DOM, canvas, svg, webgl и так далее.
Y = λf.(λx.f (x x)) (λx.f (x x))

Илья Ермаков

  • Sr. Member
  • ****
  • Сообщений: 493
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #10 : Сентябрь 05, 2013, 04:36:43 pm »
Но WebGL пока сыроват - на ряде комбинаций браузер+ось+железо оно не работает. Хотя его допиливают довольно быстро, через полгода-год думаю будет работать везде на актуальных версиях софта.

Интересно ещё, что там с ним на Smart TV.
Родители год назад купили Philips - там Опера 11...
Обновил им софт недавно, но вот всё времени нет попробовать у них WebGL...

vlad

  • Hero Member
  • *****
  • Сообщений: 1391
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #11 : Сентябрь 05, 2013, 05:04:44 pm »
Обновил им софт недавно, но вот всё времени нет попробовать у них WebGL...

C тебя фотка обероновского компилятора в телевизоре ;)

valexey_u

  • Hero Member
  • *****
  • Сообщений: 3013
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #12 : Сентябрь 06, 2013, 12:26:19 pm »
А вот про Tizen, его архитектуру и место js в нем: http://habrahabr.ru/company/samsung/blog/192780/

Выдержка:
Цитировать
Co-CEO компании Samsung Electronics сказал: «Мы хотим видеть Tizen на всём», и Tizen вполне на это способен, так как для этого у него есть всё необходимое, в чём мы сейчас с вами убедимся.
...
В Tizen условно можно выделить 3 типа web-приложений:
  • Мобильный сайт. Или приложение, которое работает из веб-браузера.
  • Так называемое hosted-приложение. Или приложение, являющееся клиентом к удалённым web-ресурсам.
  • Полноценное web-приложение. Или стандартное приложение, к которым мы все привыкли, но разработанное с использованием Tizen Web API.

Для последних двух типов есть возможность публиковать их в Tizen Store.

У oberonjs соответственно наиболее приоритетным является третий тип приложений, затем второй, затем первый.
Y = λf.(λx.f (x x)) (λx.f (x x))

Geniepro

  • Hero Member
  • *****
  • Сообщений: 1955
  • Знайте- истина в том, что повторено трижды подряд!
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #13 : Сентябрь 06, 2013, 12:32:53 pm »
У oberonjs соответственно наиболее приоритетным является третий тип приложений, ...

Для этого придётся обеспечить поддержку вебсокетов. Ну и вообще некий фреймворк/платформу на серверной части...
to iterate is human, to recurse, divine

Салат «рекурсия»: помидоры, огурцы, салат…

valexey_u

  • Hero Member
  • *****
  • Сообщений: 3013
    • Просмотр профиля
Re: [Oberon-07/11, js] Demos
« Ответ #14 : Сентябрь 06, 2013, 12:37:24 pm »
У oberonjs соответственно наиболее приоритетным является третий тип приложений, ...

Для этого придётся обеспечить поддержку вебсокетов. Ну и вообще некий фреймворк/платформу на серверной части...
Нет, третьему типу приложений сеть вообще не нужна ни в каком виде. Читай внимательней.
Y = λf.(λx.f (x x)) (λx.f (x x))