• 第三方集成

  import * as lands from "https://ddzeb.com/lands/runner";
  const runner = lands.runner();

  import("https://ddzeb.com/lands/runner").then((lands) => {
    const runner = lands.runner();
  });

  CodePen 示例：Lands runner Demo

蓝紫 runner 库特别小，同时也特别重要。它主要用于程序解析及渲染调度，在蓝紫集成开发环境里，它负责运行我们编写的蓝紫程序。当我们编写蓝紫程序的时候，蓝紫集成开发环境提供 runner，我们不需要导入它，只需要在程序里通过 Lan 变量进行访问。

$js
const canvas = await Lan.frag();
Lan.loop(canvas.render);

$fs
#define rot2(a) mat2(cos(a),-sin(a),sin(a),cos(a))
@run {
  FLUSH(vec3(abs(UVx2 * rot2(uTime * .5)), 0).rbg);
}

我们也可以在第三方平台使用 runner，一种方式是使用它解析和运行蓝紫程序，可以参考我们在 CodePen 上的例子：Basic Lands Integration。另一种方式是使用其调度功能，它不只是重复执行操作，更重要的是会管理执行环境信息，比如时间，帧数以及程序运行状态等。这种方式的使用例子可以参考：Lands runner Demo。

以下接口方法是在蓝紫 IDE 里编写程序的时候需要用到的接口，我们通过全局变量 Lan 访问 runner 接口。

此接口是对 JavaScript 函数 import 的简单封装，我们可以使用它进行常规的包导入：

const {mouse} = await Lan.import('//ddzeb.com/lands/mouse');

这样就可以导入鼠标交互相关的功能。因为是导入的蓝紫程序包，我们可以简单一点：

const {mouse} = await Lan.import('mouse');

这就是在蓝紫里导入我们提供的程序包最常见的方式，具体例子请参考蓝紫向导程序：交互式画布。

该方法用于初始化画布，它唯一作的事情就是设置画布的 width 以及 height 这两个属性。我们可以使用这个函数获得原始画布：

const canvas = Lan.init(900, 600);

参数 width 和 height 可以不用传，也可以只传 width 不传 height，程序会根据 canvas 本身的设置进行计算。详细使用情况，可参考向导程序：Image Bitmap。

核心渲染引擎都可以通过 runner 提供的专门接口进行调用，比如 frag 引擎：

const canvas = await Lan.frag(900, 600, {options});
canvas.render();

实际上相当于如下流程：

const {frag} = await Lan.import('frag');
const canvas = Lan.init(900, 600);
await frag(canvas, {options});
canvas.render();

蓝紫所有的核心渲染引擎均可通过此方式使用，包括：frag、compute、 pixels、curve、webgl。这些接口全部都有相同的调用方式：

const canvas = await Lan.xxx(canvas_width, canvas_height, {options});

其中 xxx 为渲染引擎名称，注意使用 await 进行同步调用。canvas_width 以及 canvas_height 用于 init 画布，options 会被传给具体的渲染引擎，所有参数都是可选参数，可以有好几种方式：

const canvas = await Lan.xxx();
const canvas = await Lan.xxx({options});
const canvas = await Lan.xxx(canvas_width, {options});
const canvas = await Lan.xxx(canvas_width, canvas_height);

动画渲染的关键接口，重复执行任务。其中 callback 为需要执行的函数，options 为可选参数：

const canvas = await Lan.frag(900, 600, {options});
Lan.loop(canvas.render);

Lan.log("program started");

import('//ddzeb.com/lands/runner').then((lands) => {
  const runner = lands.runner();
  runner.run(source, canvas);
});

const lands = await import("https://ddzeb.com/lands/runner");
const runner = lands.runner();
runner.oninit = (canvas) => {
  // display information about the canvas
};

const lands = await import("https://ddzeb.com/lands/runner");
const runner = lands.runner();
runner.onlog = (msg) => {
  const div = document.createElement('div');
  div.innerText = msg;
  logcontainer.appendChild(div);
  return div;
};

const lands = await import("https://ddzeb.com/lands/runner");
const runner = lands.runner();
runner.onstatus = (status) => {
  console.log(status);
};

const lands = await import("https://ddzeb.com/lands/runner");
const runner = lands.runner();
runner.onauth = (msg) => new Promise((resolve) => {
  // display the message and show a button
  // when the user clicks on the button, promise resolved
});